/* V35.4 TARGETED ONLY
 * Admin device/session UX + Admin action-button contrast + Admin message scrolling.
 * IMPORTANT: no bottom navigation/menu selectors are used here.
 */

/* ---------- 1) Admin buttons: consistent, high-contrast, theme-aware ---------- */
#adminModal .admin-user-actions .action-btn,
#adminModal .admin-user-actions .kick-btn,
#adminModal .admin-message-actions .admin-action-button,
#adminModal .panel-section-box .add-btn,
#adminModal .device-sessions-toggle,
#adminModal .device-sessions-refresh,
#adminModal .device-session-kick{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid !important;
  border-radius:8px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease !important;
}

/* Users: avatar/edit are blue, delete is red. */
#adminModal .admin-user-actions .action-btn{
  background:#eff6ff !important;
  color:#1d4ed8 !important;
  border-color:#93c5fd !important;
  box-shadow:0 1px 2px rgba(15,23,42,.10) !important;
}
#adminModal .admin-user-actions .kick-btn{
  background:#fef2f2 !important;
  color:#b91c1c !important;
  border-color:#fca5a5 !important;
  box-shadow:0 1px 2px rgba(127,29,29,.10) !important;
}

/* Messages: each action has a semantic color that remains visible on both themes. */
#adminModal .admin-message-actions .admin-action-edit{
  background:#dbeafe !important;color:#1d4ed8 !important;border-color:#60a5fa !important;
}
#adminModal .admin-message-actions .admin-action-toggle{
  background:#d1fae5 !important;color:#047857 !important;border-color:#34d399 !important;
}
#adminModal .admin-message-actions .admin-action-forward{
  background:#fef3c7 !important;color:#b45309 !important;border-color:var(--primary) !important;
}
#adminModal .admin-message-actions .admin-action-delete{
  background:#fee2e2 !important;color:#b91c1c !important;border-color:#f87171 !important;
}

/* Dark: dark surfaces + bright semantic accents. */
:root[data-theme="dark"] #adminModal .admin-user-actions .action-btn,
body[data-theme="dark"] #adminModal .admin-user-actions .action-btn{
  background:#172554 !important;color:#93c5fd !important;border-color:#3b82f6 !important;
}
:root[data-theme="dark"] #adminModal .admin-user-actions .kick-btn,
body[data-theme="dark"] #adminModal .admin-user-actions .kick-btn{
  background:#450a0a !important;color:#fca5a5 !important;border-color:#ef4444 !important;
}
:root[data-theme="dark"] #adminModal .admin-message-actions .admin-action-edit,
body[data-theme="dark"] #adminModal .admin-message-actions .admin-action-edit{
  background:#172554 !important;color:#93c5fd !important;border-color:#3b82f6 !important;
}
:root[data-theme="dark"] #adminModal .admin-message-actions .admin-action-toggle,
body[data-theme="dark"] #adminModal .admin-message-actions .admin-action-toggle{
  background:#052e2b !important;color:#6ee7b7 !important;border-color:#10b981 !important;
}
:root[data-theme="dark"] #adminModal .admin-message-actions .admin-action-forward,
body[data-theme="dark"] #adminModal .admin-message-actions .admin-action-forward{
  background:#422006 !important;color:#fcd34d !important;border-color:color-mix(in srgb, var(--primary) 85%, #000) !important;
}
:root[data-theme="dark"] #adminModal .admin-message-actions .admin-action-delete,
body[data-theme="dark"] #adminModal .admin-message-actions .admin-action-delete{
  background:#450a0a !important;color:#fca5a5 !important;border-color:#ef4444 !important;
}

#adminModal .admin-user-actions .action-btn:hover,
#adminModal .admin-user-actions .kick-btn:hover,
#adminModal .admin-message-actions .admin-action-button:hover,
#adminModal .device-sessions-toggle:hover,
#adminModal .device-sessions-refresh:hover,
#adminModal .device-session-kick:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.04) !important;
  box-shadow:0 2px 6px rgba(15,23,42,.14) !important;
}
#adminModal .admin-user-actions .action-btn:focus-visible,
#adminModal .admin-user-actions .kick-btn:focus-visible,
#adminModal .admin-message-actions .admin-action-button:focus-visible,
#adminModal .device-sessions-toggle:focus-visible,
#adminModal .device-sessions-refresh:focus-visible,
#adminModal .device-session-kick:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary,#25D366) 30%,transparent) !important;
  outline-offset:2px !important;
}

/* ---------- 2) One usable vertical scroll in Message Management ---------- */
#adminModal #messagesPane{
  min-height:0 !important;
  overflow:hidden !important;
}
#adminModal #messagesPane .msg-mgmt-container{
  min-height:0 !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
}
#adminModal #messagesPane .msg-mgmt-content{
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}
#adminModal #messagesPane .admin-message-scroll{
  min-height:0 !important;
  height:auto !important;
  flex:1 1 auto !important;
  overflow-y:auto !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
}

/* The room selector gets its own horizontal strip; it never creates a second
   vertical page scroll. */
#adminModal #messagesPane .msg-mgmt-sidebar{
  min-height:0 !important;
  overflow-y:hidden !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

/* ---------- 3) Login History + Device panel: no overlay / no dead controls ---------- */
#adminModal #logsPane{
  min-height:0 !important;
  overflow:hidden !important;
}
#adminModal #logsPane .admin-log-scroll{
  flex:0 1 38% !important;
  min-height:90px !important;
  max-height:none !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
#adminModal #logsPane .device-sessions-panel{
  position:relative !important;
  z-index:2 !important;
  flex:1 1 auto !important;
  min-height:150px !important;
  display:flex;
  flex-direction:column;
  overflow:hidden !important;
  pointer-events:auto !important;
}
#adminModal #logsPane .device-sessions-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}
#adminModal #logsPane .device-session-row{
  position:relative !important;
  z-index:3 !important;
}
#adminModal #logsPane .device-session-kick,
#adminModal #logsPane .device-sessions-refresh,
#adminModal #logsPane .device-sessions-toggle{
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

/* Make the device panel itself compact enough to keep the Admin tabs usable. */
@media (max-width:1024px){
  #adminModal #messagesPane .admin-message-scroll{overflow-y:auto !important;}
  #adminModal #logsPane .admin-log-scroll{flex:0 1 34% !important;min-height:80px !important;}
  #adminModal #logsPane .device-sessions-panel{min-height:170px !important;}
}

@media (max-width:767px){
  /* Mobile Message Management: header + room strip + ONE vertical message scroller. */
  #adminModal #messagesPane{
    overflow:hidden !important;
  }
  #adminModal #messagesPane .msg-mgmt-container{
    height:auto !important;
    flex:1 1 auto !important;
    min-height:0 !important;
  }
  #adminModal #messagesPane .msg-mgmt-sidebar{
    flex:0 0 68px !important;
    height:68px !important;
    max-height:68px !important;
  }
  #adminModal #messagesPane .msg-mgmt-content > div:first-child{
    flex:0 0 auto !important;
  }
  #adminModal #messagesPane .admin-message-scroll{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:auto !important;
  }

  /* Mobile Login History: compact log viewport + visible device list. */
  #adminModal #logsPane{
    overflow:hidden !important;
  }
  #adminModal #logsPane .admin-log-scroll{
    flex:0 0 31% !important;
    min-height:82px !important;
    max-height:none !important;
  }
  #adminModal #logsPane .device-sessions-panel{
    flex:1 1 69% !important;
    min-height:150px !important;
    margin-top:4px !important;
  }
  #adminModal #logsPane .device-sessions-header{
    flex:0 0 auto !important;
    padding:9px 10px !important;
  }
  #adminModal #logsPane .device-sessions-subtitle{display:none !important;}
  #adminModal #logsPane .device-session-row{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:6px 8px !important;
    padding:9px !important;
  }
  #adminModal #logsPane .device-session-kick{
    min-width:72px !important;
    min-height:34px !important;
    padding:7px 9px !important;
  }
}

@media (max-width:420px){
  #adminModal #messagesPane .msg-mgmt-sidebar{flex-basis:62px !important;height:62px !important;max-height:62px !important;}
  #adminModal #logsPane .admin-log-scroll{flex-basis:28% !important;}
  #adminModal #logsPane .device-sessions-panel{flex-basis:72% !important;}
}