/* V25 TARGETED — mobile Admin screens only.
 * Baseline: V24 Mobile Menu Only.
 * CSS-only: no navigation/data/Firebase/message logic changes.
 */
@media (max-width:767px){
  /* Keep the existing bottom navigation visible; Admin content ends above it. */
  body.admin-open .admin-modal{
    inset:0 !important;
    padding:0 !important;
    background:var(--bg-main) !important;
  }
  body.admin-open .admin-modal-content{
    top:env(safe-area-inset-top,0px) !important;
    bottom:var(--mobile-nav-height,68px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    border:0 !important;
    border-radius:16px 16px 0 0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    background:var(--bg-main) !important;
  }

  /* Compact app-like Admin header. */
  body.admin-open .admin-modal-header{
    height:46px !important;
    min-height:46px !important;
    flex:0 0 46px !important;
    padding:0 12px !important;
    background:var(--bg-header) !important;
    color:var(--text-main) !important;
    border:0 !important;
    box-shadow:none !important;
  }
  body.admin-open .admin-modal-header > span:first-child{
    font-size:13px !important;
    font-weight:700 !important;
  }
  body.admin-open .admin-modal-header > span:last-child{
    width:32px !important;
    height:32px !important;
    border-radius:50% !important;
    background:var(--hover-bg) !important;
    font-size:22px !important;
  }

  /* The body itself never becomes the long page; each Admin screen owns its scroll. */
  body.admin-open .admin-modal-body{
    height:calc(100% - 46px) !important;
    min-height:0 !important;
    padding:6px 8px 8px !important;
    gap:6px !important;
    overflow:hidden !important;
    background:var(--bg-main) !important;
  }

  /* Tabs stay compact and touch-friendly without creating a second large strip. */
  body.admin-open .admin-tabs{
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:0 0 4px !important;
    gap:5px !important;
    border:0 !important;
    background:transparent !important;
  }
  body.admin-open .atab-btn{
    min-height:34px !important;
    padding:7px 9px !important;
    border-radius:999px !important;
    font-size:10px !important;
    line-height:1.1 !important;
    background:var(--bg-header) !important;
    color:var(--text-sub) !important;
    border:1px solid transparent !important;
  }
  body.admin-open .atab-btn.active{
    background:color-mix(in srgb,var(--primary) 14%,var(--bg-header)) !important;
    color:var(--primary) !important;
    border-color:color-mix(in srgb,var(--primary) 28%,var(--bg-header)) !important;
  }

  /* Each of the 3 Admin screens fills the remaining area and scrolls internally. */
  body.admin-open .atab-pane{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:thin !important;
    padding:0 1px 4px !important;
    display:none !important;
  }
  body.admin-open .atab-pane.active{display:flex !important;flex-direction:column !important;}

  /* User and login-log screens: no forced desktop-width table on phones. */
  body.admin-open .atab-pane#usersPane,
  body.admin-open .atab-pane#logsPane{gap:7px !important;}
  body.admin-open .atab-pane#usersPane .panel-section-box,
  body.admin-open .atab-pane#logsPane .panel-section-box{
    flex:0 0 auto !important;
    margin:0 !important;
    padding:9px !important;
    border:0 !important;
    border-radius:12px !important;
    background:var(--bg-header) !important;
  }
  body.admin-open .atab-pane#usersPane .table-responsive,
  body.admin-open .atab-pane#logsPane .table-responsive{
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    border:0 !important;
    border-radius:12px !important;
    background:var(--bg-header) !important;
  }
  body.admin-open .atab-pane#usersPane .admin-table,
  body.admin-open .atab-pane#logsPane .admin-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
    font-size:10px !important;
  }
  body.admin-open .atab-pane#usersPane .admin-table th,
  body.admin-open .atab-pane#usersPane .admin-table td,
  body.admin-open .atab-pane#logsPane .admin-table th,
  body.admin-open .atab-pane#logsPane .admin-table td{
    padding:8px 5px !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    vertical-align:middle !important;
  }
  body.admin-open .atab-pane#usersPane .admin-table th:nth-child(1),
  body.admin-open .atab-pane#usersPane .admin-table td:nth-child(1){width:18% !important;}
  body.admin-open .atab-pane#usersPane .admin-table th:nth-child(2),
  body.admin-open .atab-pane#usersPane .admin-table td:nth-child(2){width:32% !important;}
  body.admin-open .atab-pane#usersPane .admin-table th:nth-child(3),
  body.admin-open .atab-pane#usersPane .admin-table td:nth-child(3){width:18% !important;}
  body.admin-open .atab-pane#usersPane .admin-table th:nth-child(4),
  body.admin-open .atab-pane#usersPane .admin-table td:nth-child(4){width:32% !important;}

  /* Message-management screen: compact room rail + independent message scroll. */
  body.admin-open #messagesPane .msg-mgmt-container{
    height:100% !important;
    min-height:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    overflow:hidden !important;
  }
  body.admin-open #messagesPane .msg-mgmt-sidebar{
    flex:0 0 58px !important;
    width:100% !important;
    height:58px !important;
    min-height:58px !important;
    display:flex !important;
    flex-direction:row !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    border:0 !important;
    border-radius:12px !important;
    background:var(--bg-header) !important;
    padding:4px !important;
    gap:4px !important;
  }
  body.admin-open #messagesPane .msg-mgmt-room-item{
    flex:0 0 132px !important;
    min-width:132px !important;
    max-width:160px !important;
    height:48px !important;
    margin:0 !important;
    padding:7px 9px !important;
    border:0 !important;
    border-radius:10px !important;
  }
  body.admin-open #messagesPane .msg-mgmt-content{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:12px !important;
    background:var(--bg-header) !important;
  }
  body.admin-open #messagesPane .msg-mgmt-content > div:first-child{
    flex:0 0 auto !important;
    padding:8px 9px !important;
    border:0 !important;
    background:var(--bg-header) !important;
    gap:6px !important;
  }
  body.admin-open #messagesPane .msg-mgmt-content #admMsgSearchInput{
    width:100% !important;
    height:36px !important;
    border-radius:10px !important;
  }
  body.admin-open #messagesPane .admin-message-scroll{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border:0 !important;
    border-radius:0 0 12px 12px !important;
    background:var(--bg-header) !important;
  }
  body.admin-open #messagesPane .admin-table{
    min-width:0 !important;
    width:100% !important;
    table-layout:fixed !important;
    font-size:10px !important;
  }
  body.admin-open #messagesPane .admin-table th,
  body.admin-open #messagesPane .admin-table td{
    padding:8px 5px !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  /* Remove the large bottom/outer strips and hard borders from the Admin card. */
  body.admin-open .admin-modal-content,
  body.admin-open .admin-modal-header,
  body.admin-open .admin-modal-body,
  body.admin-open .admin-tabs,
  body.admin-open .atab-pane,
  body.admin-open .table-responsive,
  body.admin-open .msg-mgmt-container,
  body.admin-open .msg-mgmt-sidebar,
  body.admin-open .msg-mgmt-content{
    border-bottom:0 !important;
    box-shadow:none !important;
  }
}