/* V26 TARGETED — ADMIN MOBILE VISUAL ONLY
 * Baseline: V25 Mobile Admin App Polish.
 * Scope: remove the dead strip above bottom nav, improve admin controls
 * contrast in light/dark, and make the existing admin tabs fit cleanly.
 * No HTML/JS/Firebase/data/operation changes.
 */
@media (max-width:767px){
  /* Let the admin surface extend behind the fixed bottom nav so there is
     no dead grey band; the existing nav remains on top. */
  body.admin-open .admin-modal-content{
    bottom:0 !important;
    padding-bottom:0 !important;
  }
  body.admin-open .admin-modal-body{
    padding-bottom:4px !important;
  }

  /* Keep the existing three admin functions visible without horizontal
     scrolling. We do not add/remove any business functions. */
  body.admin-open .admin-tabs{
    width:100% !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
    padding:0 0 5px !important;
    border-bottom:0 !important;
  }
  body.admin-open .atab-btn{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    height:38px !important;
    padding:6px 4px !important;
    border-radius:11px !important;
    border:1px solid color-mix(in srgb,var(--border-color) 70%,transparent) !important;
    background:var(--bg-header) !important;
    color:var(--text-main) !important;
    box-shadow:0 1px 4px rgba(15,23,42,.06) !important;
    font-size:9px !important;
    font-weight:750 !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body.admin-open .atab-btn.active{
    background:var(--primary) !important;
    color:var(--primary-contrast,#fff) !important;
    border-color:var(--primary) !important;
    box-shadow:0 3px 10px color-mix(in srgb,var(--primary) 28%,transparent) !important;
  }
  :root[data-theme="dark"] body.admin-open .atab-btn,
  body[data-theme="dark"] body.admin-open .atab-btn{
    background:#17222a !important;
    color:#e9edef !important;
    border-color:#33434d !important;
    box-shadow:0 1px 5px rgba(0,0,0,.22) !important;
  }

  /* Light/dark readable surfaces for all actionable admin controls. */
  body.admin-open .add-btn,
  body.admin-open .save-btn,
  body.admin-open .update-btn,
  body.admin-open .primary-btn,
  body.admin-open .group-update-btn,
  body.admin-open .v19-btn-primary,
  body.admin-open .admin-action-forward{
    background:var(--primary) !important;
    color:var(--primary-contrast,#fff) !important;
    border:1px solid var(--primary) !important;
    box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 24%,transparent) !important;
    text-shadow:none !important;
  }
  body.admin-open .add-btn:active,
  body.admin-open .save-btn:active,
  body.admin-open .update-btn:active,
  body.admin-open .primary-btn:active,
  body.admin-open .group-update-btn:active,
  body.admin-open .admin-action-forward:active{
    filter:brightness(.92) !important;
    transform:translateY(1px) !important;
  }

  /* Edit/action controls: clear contrast in both themes. */
  body.admin-open .action-btn,
  body.admin-open #adminUserTable .action-btn,
  body.admin-open #adminUserTable .kick-btn,
  body.admin-open .admin-user-actions button{
    background:var(--bg-header) !important;
    color:var(--text-main) !important;
    border:1px solid var(--border-color) !important;
    box-shadow:0 1px 5px rgba(15,23,42,.08) !important;
    opacity:1 !important;
  }
  body.admin-open .action-btn:hover,
  body.admin-open .action-btn:focus-visible,
  body.admin-open #adminUserTable .action-btn:hover,
  body.admin-open #adminUserTable .action-btn:focus-visible,
  body.admin-open #adminUserTable .kick-btn:hover,
  body.admin-open #adminUserTable .kick-btn:focus-visible{
    border-color:var(--primary) !important;
    color:var(--primary) !important;
    outline:2px solid color-mix(in srgb,var(--primary) 20%,transparent) !important;
    outline-offset:1px !important;
  }
  :root[data-theme="dark"] body.admin-open .action-btn,
  body[data-theme="dark"] body.admin-open .action-btn,
  :root[data-theme="dark"] body.admin-open #adminUserTable .action-btn,
  body[data-theme="dark"] body.admin-open #adminUserTable .action-btn,
  :root[data-theme="dark"] body.admin-open #adminUserTable .kick-btn,
  body[data-theme="dark"] body.admin-open #adminUserTable .kick-btn{
    background:#1b2830 !important;
    color:#f1f5f9 !important;
    border-color:#3a4b56 !important;
    box-shadow:0 1px 6px rgba(0,0,0,.25) !important;
  }

  /* Danger actions stay recognizably destructive rather than being hidden. */
  body.admin-open .delete-btn,
  body.admin-open .v13-delete-group-btn,
  body.admin-open .v6-delete-group-btn,
  body.admin-open .kick-btn.danger,
  body.admin-open [data-danger="true"]{
    background:#dc2626 !important;
    color:#fff !important;
    border-color:#dc2626 !important;
  }

  /* Inputs/selects: clear boundaries and readable text in both themes. */
  body.admin-open .add-input,
  body.admin-open #admMsgSearchInput{
    background:var(--input-bg,var(--bg-header)) !important;
    color:var(--text-main) !important;
    border:1px solid var(--border-color) !important;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.04) !important;
  }
  body.admin-open .add-input:focus,
  body.admin-open #admMsgSearchInput:focus{
    border-color:var(--primary) !important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent) !important;
    outline:0 !important;
  }

  /* Compact, app-like action rows on the employee/log screens. */
  body.admin-open #usersPane .panel-section-box,
  body.admin-open #logsPane .panel-section-box,
  body.admin-open #messagesPane .msg-mgmt-content{
    background:var(--bg-header) !important;
    color:var(--text-main) !important;
  }
  body.admin-open .panel-section-title{
    color:var(--text-main) !important;
    font-size:10px !important;
    font-weight:800 !important;
  }

  /* Table controls/statuses remain readable; don't alter their data or actions. */
  body.admin-open .admin-table th{
    color:var(--text-sub) !important;
    background:color-mix(in srgb,var(--primary) 6%,var(--bg-header)) !important;
  }
  body.admin-open .admin-table td{
    color:var(--text-main) !important;
  }
  body.admin-open .admin-table td .badge,
  body.admin-open .admin-table .badge{
    background:color-mix(in srgb,var(--primary) 16%,var(--bg-header)) !important;
    color:var(--primary) !important;
    border:1px solid color-mix(in srgb,var(--primary) 25%,transparent) !important;
  }

  /* No extra bottom strip on any of the three panes. */
  body.admin-open .atab-pane,
  body.admin-open .table-responsive,
  body.admin-open .msg-mgmt-container,
  body.admin-open .msg-mgmt-content{
    border-bottom:0 !important;
    box-shadow:none !important;
  }
}

/* V34 TARGETED — ADMIN MESSAGE TABLE COMPACT ROWS ONLY
 * Scope: #messagesPane only. No navigation/menu selectors, no HTML/JS/data changes.
 * Goal: one visual line per message row; long content is shortened with ellipsis
 * and the existing action buttons stay aligned and visible on PC + mobile.
 */
#messagesPane .admin-message-scroll{
  min-width:0 !important;
}
#messagesPane .admin-table{
  width:100% !important;
  table-layout:fixed !important;
}
#messagesPane .admin-table th,
#messagesPane .admin-table td{
  vertical-align:middle !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  line-height:1.2 !important;
}
#messagesPane .admin-table th:nth-child(1),
#messagesPane .admin-table td:nth-child(1){width:15% !important;}
#messagesPane .admin-table th:nth-child(2),
#messagesPane .admin-table td:nth-child(2){width:40% !important;}
#messagesPane .admin-table th:nth-child(3),
#messagesPane .admin-table td:nth-child(3){width:17% !important;}
#messagesPane .admin-table th:nth-child(4),
#messagesPane .admin-table td:nth-child(4){width:13% !important;}
#messagesPane .admin-table th:nth-child(5),
#messagesPane .admin-table td:nth-child(5){width:15% !important;}

#messagesPane .admin-message-content-cell,
#messagesPane .admin-message-content-cell > *{
  min-width:0 !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  vertical-align:middle !important;
}
#messagesPane .admin-message-content-cell > button,
#messagesPane .admin-message-content-cell > .admin-attachment-preview,
#messagesPane .admin-message-content-cell > .admin-attachment-file{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  vertical-align:middle !important;
}
#messagesPane .admin-message-content-cell img{
  flex:0 0 28px !important;
  width:28px !important;
  height:28px !important;
  max-width:28px !important;
  object-fit:cover !important;
}
#messagesPane .admin-message-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  width:100% !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
}
#messagesPane .admin-message-actions .admin-action-button{
  flex:0 0 34px !important;
  width:34px !important;
  min-width:34px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  white-space:nowrap !important;
}

@media (max-width:767px){
  /* The mobile pane previously re-enabled wrapping; override only this table. */
  body.admin-open #messagesPane .admin-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }
  body.admin-open #messagesPane .admin-table th,
  body.admin-open #messagesPane .admin-table td{
    padding:6px 3px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  body.admin-open #messagesPane .admin-table th:nth-child(1),
  body.admin-open #messagesPane .admin-table td:nth-child(1){width:17% !important;}
  body.admin-open #messagesPane .admin-table th:nth-child(2),
  body.admin-open #messagesPane .admin-table td:nth-child(2){width:28% !important;}
  body.admin-open #messagesPane .admin-table th:nth-child(3),
  body.admin-open #messagesPane .admin-table td:nth-child(3){width:14% !important;}
  body.admin-open #messagesPane .admin-table th:nth-child(4),
  body.admin-open #messagesPane .admin-table td:nth-child(4){width:13% !important;}
  body.admin-open #messagesPane .admin-table th:nth-child(5),
  body.admin-open #messagesPane .admin-table td:nth-child(5){width:28% !important;}

  body.admin-open #messagesPane .admin-message-content-cell,
  body.admin-open #messagesPane .admin-message-content-cell > *,
  body.admin-open #messagesPane .admin-table td:nth-child(2){
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  body.admin-open #messagesPane .admin-message-actions{
    gap:1px !important;
    justify-content:space-between !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  body.admin-open #messagesPane .admin-message-actions .admin-action-button{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:24px !important;
    height:22px !important;
    min-height:22px !important;
    padding:0 !important;
    border-radius:5px !important;
  }
  body.admin-open #messagesPane .admin-message-actions .admin-action-button::before{
    width:11px !important;
    height:11px !important;
  }
  body.admin-open #messagesPane .admin-message-content-cell > button,
  body.admin-open #messagesPane .admin-message-content-cell > .admin-attachment-preview,
  body.admin-open #messagesPane .admin-message-content-cell > .admin-attachment-file{
    max-width:100% !important;
  }
  body.admin-open #messagesPane .admin-message-content-cell img{
    flex-basis:24px !important;
    width:24px !important;
    height:24px !important;
    max-width:24px !important;
  }
}