/* =========================================================
   THEABS - USERS PAGE
========================================================= */

.users-page .users-table {
    width: 100%;
    min-width: 900px;
}

.users-page .users-table th,
.users-page .users-table td {
    vertical-align: middle;
}

.users-page .users-table th:last-child,
.users-page .users-table td:last-child {
    width: 260px;
}

.users-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.user-role-select {
    min-width: 145px;
    height: 38px;
    padding: 0 34px 0 11px;
    border: 1px solid var(--border-color, rgba(255,255,255,.12));
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--text-color, #fff);
    font: inherit;
}

.user-role-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(36,95,143,.15);
}

.user-delete-button {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .users-page .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 576px) {
    .users-page .page-header {
        gap: 14px;
    }

    .users-page .page-header-actions {
        width: 100%;
    }

    .users-page .page-header-actions .btn {
        width: 100%;
    }
}


/* =========================================================
   USER MENU / ACCOUNT SECURITY
========================================================= */
.user-menu{position:relative;display:flex;align-items:center}.user-menu-toggle{position:relative;z-index:2}.user-menu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(360px,calc(100vw - 24px));padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 18px 50px rgba(0,0,0,.28);z-index:1000}.user-menu-panel[hidden]{display:none}.user-menu-profile{display:flex;align-items:center;gap:12px;padding:4px 2px 14px;border-bottom:1px solid var(--border)}.user-menu-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--primary);color:#fff;font-weight:800}.user-menu-heading{min-width:0;display:flex;flex-direction:column;gap:3px}.user-menu-heading strong{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu-heading span{font-size:11px;color:var(--text-muted);text-transform:capitalize}.user-menu-details{display:grid;gap:1px;padding:10px 0}.user-detail-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;padding:7px 2px}.user-detail-row span{font-size:10px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.user-detail-row strong{font-size:11px;color:var(--text);font-weight:600;word-break:break-word;text-align:right}.user-menu-actions{display:grid;gap:6px;border-top:1px solid var(--border);padding-top:10px}.user-menu-action{width:100%;min-height:40px;display:flex;align-items:center;gap:10px;padding:0 11px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer}.user-menu-action:hover{background:var(--surface-light);border-color:var(--border)}.user-menu-action i{width:16px;text-align:center;color:var(--text-muted)}.user-menu-logout{color:#bd654b}.user-menu-logout i{color:#bd654b}.user-menu-action:disabled{opacity:.55;cursor:wait}.user-password-modal{width:min(520px,calc(100vw - 24px))}.user-password-kicker{display:block;margin-bottom:3px;color:var(--primary);font-size:9px;font-weight:800;letter-spacing:.13em}.user-password-copy{margin:0 0 18px;color:var(--text-muted);font-size:12px;line-height:1.55}.user-password-modal .form-group{margin-bottom:15px}.user-password-modal input{min-height:44px}.auth-message-success{border-color:rgba(36,95,143,.28)!important;background:rgba(34,197,94,.08)!important;color:#245f8f!important}

/* =========================================================
   USERS PAGE HEADER / CREATE USER
========================================================= */
.users-page .page-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    width:100%;
}

.users-page .page-header > div:first-child{
    min-width:0;
}

.users-page .page-header h1{
    margin:0;
    min-width:0;
    overflow-wrap:anywhere;
}

.users-page .page-header p{
    margin:6px 0 0;
    color:var(--text-muted);
    line-height:1.5;
}

.users-page .page-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
    min-width:max-content;
}

.users-page #addUserButton{
    min-width:132px;
    min-height:42px;
    white-space:nowrap;
    flex:0 0 auto;
}

/* =========================================================
   CREATE USER MODAL
========================================================= */
#addUserModal{
    padding:16px;
    box-sizing:border-box;
}

#addUserModal .modal{
    width:min(600px,100%);
    max-width:600px;
    max-height:min(760px,calc(100vh - 32px));
    margin:0 auto;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,.32);
}

#addUserModal .modal-header{
    flex:0 0 auto;
    padding:17px 20px;
    background:linear-gradient(180deg,var(--surface-light),var(--surface));
    border-bottom:1px solid var(--border);
}

#addUserModal .modal-title{
    margin:2px 0 0;
    font-size:19px;
    font-weight:800;
    color:var(--text);
}

#addUserModal #addUserForm{
    min-height:0;
    display:flex;
    flex-direction:column;
}

#addUserModal .modal-body{
    min-height:0;
    overflow-y:auto;
    padding:20px;
    background:var(--surface);
    overscroll-behavior:contain;
}

#addUserModal .form-group{
    margin-bottom:15px;
}

#addUserModal .form-group:last-of-type{
    margin-bottom:0;
}

#addUserModal label{
    display:block;
    margin-bottom:7px;
    color:var(--text);
    font-size:11px;
    font-weight:750;
    letter-spacing:.04em;
}

#addUserModal input,
#addUserModal select{
    display:block;
    width:100%;
    min-height:44px;
    box-sizing:border-box;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--bg);
    color:var(--text);
    font:inherit;
    font-size:13px;
    outline:none;
    transition:border-color .18s,box-shadow .18s,background .18s;
}

#addUserModal input::placeholder{
    color:var(--text-muted);
}

#addUserModal input:focus,
#addUserModal select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(36,95,143,.12);
}

#addUserModal .modal-footer{
    flex:0 0 auto;
    padding:14px 20px;
    background:var(--surface-light);
    border-top:1px solid var(--border);
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
}

#addUserModal .modal-footer .btn{
    min-height:42px;
}

@media (max-width:900px){
    .users-page .page-header{
        grid-template-columns:1fr;
        align-items:stretch;
        gap:14px;
    }

    .users-page .page-header-actions{
        width:100%;
        justify-content:stretch;
    }

    .users-page #addUserButton{
        width:100%;
        min-width:0;
    }
}

@media (max-width:576px){
    .users-page .page-header{
        gap:12px;
        margin-bottom:20px;
    }

    #addUserModal{
        padding:10px;
    }

    #addUserModal .modal{
        max-height:calc(100vh - 20px);
        border-radius:14px;
    }

    #addUserModal .modal-header{
        padding:15px 16px;
    }

    #addUserModal .modal-body{
        padding:16px;
    }

    #addUserModal .modal-footer{
        padding:12px 16px;
        flex-direction:column-reverse;
        align-items:stretch;
    }

    #addUserModal .modal-footer .btn{
        width:100%;
        justify-content:center;
    }
}



/* =========================================================
   CREATE USER - COMPACT RESPONSIVE ACTION
========================================================= */
.users-page .page-header-actions{
    min-width:0;
}

.users-page #addUserButton{
    width:auto;
    min-width:118px;
    height:36px;
    min-height:36px;
    padding:0 12px;
    gap:7px;
    border-radius:8px;
    font-size:10px;
    line-height:1;
}

@media(max-width:900px){
    .users-page .page-header-actions{
        width:auto;
        justify-content:flex-end;
    }

    .users-page #addUserButton{
        width:auto;
        min-width:118px;
    }
}

@media(max-width:576px){
    .users-page .page-header-actions{
        width:100%;
    }

    .users-page #addUserButton{
        width:100%;
        min-width:0;
        height:38px;
        min-height:38px;
    }
}

/* Create User modal submit action - compact */
#addUserModal #saveAddUser,
#addUserModal #cancelAddUser {
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 7px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
}

#addUserModal #saveAddUser {
    gap: 6px;
}

@media (max-width: 576px) {
    #addUserModal .modal-footer {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    #addUserModal #saveAddUser,
    #addUserModal #cancelAddUser {
        width: auto !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
    }
}

/* =========================================================
   USERS PAGE — ALIGNMENT / SPACING / GROUPING REFINEMENT
   Arctic Cyan • light + dark compatible
========================================================= */

.users-page{
    width:100%;
    min-width:0;
}

/* Keep page heading and primary action on a clean baseline. */
.users-page .page-header{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:24px;
    row-gap:12px;
    align-items:end;
    margin-bottom:22px;
}

.users-page .page-header > div:first-child{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.users-page .page-header h1{
    line-height:1.12;
    letter-spacing:-.015em;
}

.users-page .page-header p{
    max-width:680px;
    margin-top:7px;
}

.users-page .page-header-actions{
    align-self:end;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.users-page #addUserButton{
    min-width:126px;
    height:38px;
    min-height:38px;
    padding:0 14px;
    gap:8px;
    justify-content:center;
}

/* Main users card gets deliberate internal grouping. */
.users-page > .card{
    width:100%;
    min-width:0;
    overflow:hidden;
}

.users-page > .card .card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:17px 20px;
}

.users-page > .card .card-header > div{
    min-width:0;
}

.users-page > .card .card-header h3{
    margin:0;
    line-height:1.25;
}

.users-page > .card .card-header p{
    margin:5px 0 0;
    max-width:760px;
    line-height:1.45;
}

.users-page > .card .card-body{
    padding:0;
}

/* Table alignment: identity → contact → role/status → actions. */
.users-page .table-container{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
}

.users-page .users-table{
    width:100%;
    min-width:980px;
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0;
}

.users-page .users-table th,
.users-page .users-table td{
    padding:13px 16px;
    vertical-align:middle;
    line-height:1.35;
}

.users-page .users-table th{
    height:44px;
    white-space:nowrap;
    text-align:left;
}

.users-page .users-table th:nth-child(1),
.users-page .users-table td:nth-child(1){ width:15%; }

.users-page .users-table th:nth-child(2),
.users-page .users-table td:nth-child(2){ width:19%; }

.users-page .users-table th:nth-child(3),
.users-page .users-table td:nth-child(3){ width:26%; }

.users-page .users-table th:nth-child(4),
.users-page .users-table td:nth-child(4){ width:15%; }

.users-page .users-table th:nth-child(5),
.users-page .users-table td:nth-child(5){ width:10%; }

.users-page .users-table th:nth-child(6),
.users-page .users-table td:nth-child(6){ width:15%; }

/* Prevent long IDs/emails from breaking the column rhythm. */
.users-page .users-table td:nth-child(1),
.users-page .users-table td:nth-child(2),
.users-page .users-table td:nth-child(3){
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.users-page .users-table td:nth-child(4),
.users-page .users-table td:nth-child(5){
    white-space:nowrap;
}

.users-page .users-table td:last-child{
    width:auto;
    min-width:0;
    padding-right:16px;
}

/* Action controls are treated as one visual group. */
.users-page .users-actions{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    min-width:0;
    white-space:nowrap;
}

.users-page .user-role-select{
    flex:1 1 auto;
    width:145px;
    min-width:145px;
    max-width:165px;
    height:36px;
    min-height:36px;
    box-sizing:border-box;
}

.users-page .user-delete-button{
    flex:0 0 auto;
    width:auto;
    min-width:78px;
    height:36px;
    min-height:36px;
    padding:0 11px;
}

.users-page .user-delete-button i{
    flex:0 0 auto;
}

/* Consistent row rhythm without oversized gaps. */
.users-page .users-table tbody tr:last-child td{
    border-bottom:0;
}

.users-page .users-table .badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:68px;
    min-height:25px;
    padding:3px 9px;
    line-height:1;
    white-space:nowrap;
}

/* Empty/loading/error states stay centered inside the table area. */
.users-page #users-table-container > .empty-state{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:32px 20px;
    text-align:center;
}

.users-page #users-table-container > .empty-state i{
    color:var(--primary);
    font-size:24px;
}

.users-page #users-table-container > .empty-state h3{
    margin:0;
}

/* Modal grouping: compact two-column form on wider screens. */
@media (min-width:641px){
    #addUserModal .modal-body{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        column-gap:16px;
        row-gap:0;
        align-content:start;
    }

    #addUserModal .form-group{
        margin-bottom:16px;
    }

    #addUserModal .form-group:nth-of-type(3),
    #addUserModal .form-group:nth-of-type(4),
    #addUserModal .form-group:nth-of-type(5),
    #addUserModal #addUserMessage{
        grid-column:1 / -1;
    }
}

@media (max-width:900px){
    .users-page .page-header{
        grid-template-columns:1fr auto;
        align-items:end;
        column-gap:16px;
    }

    .users-page .users-table{
        min-width:940px;
    }
}

@media (max-width:640px){
    .users-page .page-header{
        grid-template-columns:1fr;
        align-items:stretch;
        gap:13px;
        margin-bottom:18px;
    }

    .users-page .page-header-actions{
        width:100%;
        justify-content:stretch;
    }

    .users-page #addUserButton{
        width:100%;
        min-width:0;
    }

    .users-page > .card .card-header{
        padding:15px 16px;
        gap:12px;
    }

    .users-page > .card .card-body{
        padding:0;
    }

    .users-page .users-table{
        min-width:920px;
    }

    .users-page .users-table th,
    .users-page .users-table td{
        padding:12px 13px;
    }

    #addUserModal .modal-body{
        display:block;
    }
}

@media (max-width:420px){
    .users-page > .card .card-header{
        padding:14px;
    }

    .users-page .users-table{
        min-width:900px;
    }
}

/* Members page additions */
.members-table-scroll{width:100%;overflow-x:auto}.members-table{width:100%;border-collapse:collapse;min-width:900px}.members-table th,.members-table td{padding:13px 12px;text-align:left;border-bottom:1px solid var(--border-color,#263247);vertical-align:middle}.members-table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted,#93a4bd);white-space:nowrap}.members-table td{font-size:13px}.members-table td small{display:block;color:var(--text-muted,#93a4bd);margin-top:3px}.member-type,.member-status{display:inline-flex;border-radius:30px;padding:4px 9px;font-size:11px;font-weight:800}.member-type{background:rgba(59,130,246,.12);color:#60a5fa}.member-status.is-active{background:rgba(34,197,94,.12);color:#4ade80}.member-status.is-disabled{background:rgba(239,68,68,.12);color:#f87171}

/* Registration-linked member credentials */
.member-credential-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:210px}.member-password{display:inline-block;max-width:190px;overflow-wrap:anywhere;white-space:normal;color:var(--text-primary,#e8edf7);font-size:12px}.members-security-note{margin:14px 0 0;color:var(--text-muted,#93a4bd);font-size:12px}.members-security-note i{margin-right:6px}.members-table{min-width:1200px}


/* Dashboard page directory */
.dashboard-page-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.dashboard-page-links .theabs-action-card { min-width:0; height:100%; }
.dashboard-page-links .theabs-action-content { display:flex; flex-direction:column; align-items:flex-start; gap:.65rem; }
.dashboard-page-links .theabs-action-content p { flex:1; }
@media(max-width:1100px){.dashboard-page-links{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.dashboard-page-links{grid-template-columns:minmax(0,1fr);}}

/* Users Engagement */
.engagement-page { display:flex; flex-direction:column; gap:1.1rem; min-width:0; }
.engagement-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.engagement-stat { padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.3rem; }
.engagement-stat span { color:var(--text-muted,#64748b); font-size:.86rem; }
.engagement-stat strong { font-size:1.8rem; line-height:1.2; color:var(--text-primary,#172033); }
.engagement-stat small { color:var(--text-muted,#64748b); }
.engagement-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.85rem; margin-bottom:1rem; }
.engagement-search { position:relative; display:flex; align-items:center; flex:1 1 300px; min-width:220px; max-width:560px; }
.engagement-search > i { position:absolute; left:14px; z-index:1; color:var(--text-muted,#64748b); pointer-events:none; }
.engagement-search input { display:block; width:100%; min-width:0; height:44px; padding:0 14px 0 42px; border:1px solid var(--border-color,#dbe2ea); border-radius:10px; background:var(--input-bg,#fff); color:var(--text-primary,#172033); font:inherit; outline:none; box-sizing:border-box; }
.engagement-search input:focus { border-color:var(--primary,#245a91); box-shadow:0 0 0 3px rgba(36,90,145,.13); }
.engagement-filters { display:flex; flex-wrap:wrap; gap:.45rem; }
.engagement-filters .is-selected { background:var(--primary,#1d456d); color:#fff; border-color:var(--primary,#1d456d); }
.engagement-message { margin:0 0 .75rem; padding:.7rem .85rem; border-radius:8px; color:var(--text-muted,#64748b); background:var(--surface-muted,#f3f6fa); font-size:.88rem; overflow-wrap:anywhere; }
.engagement-message.is-success { color:#087443; background:#e9f8f0; }
.engagement-message.is-empty { color:#805d12; background:#fff7df; }
.engagement-table-wrap { width:100%; overflow-x:auto; }
.engagement-table { width:100%; min-width:900px; border-collapse:separate; border-spacing:0; }
.engagement-table th { white-space:nowrap; font-size:.75rem; letter-spacing:.035em; text-transform:uppercase; }
.engagement-table td { vertical-align:top; padding:1rem .85rem; }
.engagement-table td strong,.engagement-table td small { display:block; }
.engagement-table td strong { margin-bottom:.25rem; }
.engagement-table td small { margin-top:.2rem; color:var(--text-muted,#64748b); overflow-wrap:anywhere; }
.engagement-type { display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.35rem .6rem; font-size:.78rem; font-weight:650; white-space:nowrap; }
.engagement-type.is-like { color:#a3234b; background:#fdebf1; }
.engagement-type.is-comment { color:#175a9a; background:#eaf3ff; }
.engagement-record-id { margin-top:.45rem; }
.engagement-content { max-width:320px; min-width:180px; white-space:pre-wrap; overflow-wrap:anywhere; }
.engagement-no-results { text-align:center; padding:2rem !important; color:var(--text-muted,#64748b); }
@media(max-width:700px){.engagement-stats{grid-template-columns:1fr;}.engagement-toolbar{align-items:stretch}.engagement-search{max-width:none;flex-basis:100%;}.engagement-filters{display:grid;grid-template-columns:1fr;}.engagement-filters .btn{width:100%;}}

/* ===========================
   USERS ENGAGEMENT — LAYOUT FIX
   =========================== */
.engagement-page,
.engagement-page * { box-sizing: border-box; }
.engagement-page { width:100%; min-width:0; gap:1.25rem; }
.engagement-page .page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.engagement-page .page-header > div:first-child { min-width:0; }
.engagement-page .page-header h1 { margin:0; line-height:1.2; }
.engagement-page .page-header p { max-width:760px; margin:.45rem 0 0; color:var(--text-muted); line-height:1.55; }
.engagement-page .page-header-actions { display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.engagement-page .engagement-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.engagement-page .engagement-stat { min-width:0; padding:1.1rem 1.25rem; border-radius:var(--radius); }
.engagement-page .engagement-stat strong { overflow-wrap:anywhere; }
.engagement-page > .card { min-width:0; overflow:hidden; }
.engagement-page > .card:hover,
.engagement-page .engagement-stat:hover { transform:none; }
.engagement-page .card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.25rem 1.4rem; }
.engagement-page .card-header > div { min-width:0; }
.engagement-page .card-header h3 { margin:0; font-size:1.05rem; line-height:1.4; }
.engagement-page .card-header p { margin:.35rem 0 0; color:var(--text-muted); font-size:.875rem; line-height:1.5; }
.engagement-page .card-body { padding:1.25rem 1.4rem 1.4rem; min-width:0; }
.engagement-page .engagement-toolbar { display:grid; grid-template-columns:minmax(240px,1fr) auto; align-items:center; gap:.9rem; margin:0 0 1rem; }
.engagement-page .engagement-search { width:100%; max-width:none; min-width:0; flex:initial; }
.engagement-page .engagement-search input { height:46px; border-radius:10px; }
.engagement-page .engagement-filters { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.5rem; min-width:0; }
.engagement-page .engagement-filters .btn { min-height:42px; padding:.65rem .9rem; border-radius:9px; white-space:nowrap; }
.engagement-page .engagement-message { margin:0 0 1rem; line-height:1.5; }
.engagement-page .engagement-table-wrap { width:100%; max-width:100%; overflow:auto; border:1px solid var(--border-color,var(--border)); border-radius:12px; }
.engagement-page .engagement-table { width:100%; min-width:980px; margin:0; border-collapse:separate; border-spacing:0; table-layout:auto; }
.engagement-page .engagement-table thead th { position:sticky; top:0; z-index:1; padding:.9rem .85rem; background:var(--surface-light,var(--surface)); color:var(--text-muted); border-bottom:1px solid var(--border-color,var(--border)); font-size:.72rem; font-weight:700; letter-spacing:.045em; white-space:nowrap; }
.engagement-page .engagement-table tbody td { padding:1rem .85rem; border-bottom:1px solid var(--border-color,var(--border)); vertical-align:top; line-height:1.45; }
.engagement-page .engagement-table tbody tr:last-child td { border-bottom:0; }
.engagement-page .engagement-table tbody tr:hover { background:var(--panel-hover,rgba(0,0,0,.025)); }
.engagement-page .engagement-table th:first-child,
.engagement-page .engagement-table td:first-child { min-width:175px; }
.engagement-page .engagement-table th:nth-child(2),
.engagement-page .engagement-table td:nth-child(2) { min-width:210px; }
.engagement-page .engagement-table th:nth-child(3),
.engagement-page .engagement-table td:nth-child(3) { min-width:160px; }
.engagement-page .engagement-table th:nth-child(4),
.engagement-page .engagement-table td:nth-child(4) { min-width:190px; }
.engagement-page .engagement-table th:last-child,
.engagement-page .engagement-table td:last-child { min-width:175px; }
.engagement-page .engagement-table td strong { font-weight:650; overflow-wrap:anywhere; }
.engagement-page .engagement-table td small { display:block; margin-top:.3rem; line-height:1.45; overflow-wrap:anywhere; word-break:break-word; }
.engagement-page .engagement-record-id { max-width:220px; }
.engagement-page .engagement-content { min-width:190px; max-width:360px; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.engagement-page .engagement-type { max-width:100%; white-space:normal; line-height:1.3; }
.engagement-page .engagement-table time { display:inline-block; min-width:145px; white-space:normal; line-height:1.5; }
.engagement-page .engagement-no-results { padding:2.25rem 1rem !important; text-align:center; color:var(--text-muted); }

@media (max-width: 1100px) {
  .engagement-page .engagement-toolbar { grid-template-columns:minmax(0,1fr); }
  .engagement-page .engagement-filters { justify-content:flex-start; }
}
@media (max-width: 700px) {
  .engagement-page .page-header { align-items:stretch; }
  .engagement-page .page-header-actions { width:100%; }
  .engagement-page .page-header-actions .btn { width:100%; }
  .engagement-page .engagement-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
  .engagement-page .engagement-stat { padding:.8rem .7rem; }
  .engagement-page .engagement-stat span { font-size:.72rem; line-height:1.35; }
  .engagement-page .engagement-stat strong { font-size:1.4rem; }
  .engagement-page .engagement-stat small { font-size:.68rem; line-height:1.35; }
  .engagement-page .card-header { padding:1rem; }
  .engagement-page .card-body { padding:1rem; }
  .engagement-page .engagement-filters { display:grid; grid-template-columns:1fr; width:100%; }
  .engagement-page .engagement-filters .btn { width:100%; }
  .engagement-page .engagement-table { min-width:940px; }
}
@media (max-width: 420px) {
  .engagement-page .engagement-stats { grid-template-columns:1fr; }
  .engagement-page .engagement-stat { padding:.9rem 1rem; }
  .engagement-page .engagement-stat span { font-size:.82rem; }
  .engagement-page .engagement-stat strong { font-size:1.55rem; }
  .engagement-page .engagement-stat small { font-size:.78rem; }
}