#main .member-head{align-items:center;gap:1rem} #main .member-head h1{font-size:1.65rem;line-height:1.25;margin:0;color:#f5f9ff} #main .member-head p{margin:.35rem 0 0;color:#bdcce0;font-size:.92rem} #main .member-admin-tabs,#main .member-subtabs{display:flex;gap:.25rem;align-items:end;border-bottom:1px solid #cdd8e7;margin:1.1rem 0 0;flex-wrap:wrap} #main .member-admin-tabs button,#main .member-subtabs button{appearance:none;border:0;background:transparent;color:#c5d5e9;font-size:.94rem;font-weight:650;padding:.72rem 1rem;cursor:pointer;border-bottom:3px solid transparent} #main .member-admin-tabs button[aria-selected=true],#main .member-subtabs button[aria-selected=true]{color:#1559a9;border-color:#2670d9;background:#eef5ff} #main .member-filters{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:.9rem 0} #main .member-filters .search{display:flex;align-items:center;gap:.4rem;min-width:min(22rem,100%);background:#fff;border:1px solid #c7d3e2;border-radius:.65rem;padding:.4rem .7rem} #main .member-filters .search input{border:0;outline:0;width:100%;font-size:.94rem;color:#15233b} #main .member-filters select{border:1px solid #c7d3e2;border-radius:.6rem;padding:.52rem .65rem;background:#fff;color:#15233b;font-size:.94rem} #main .member-table-wrap{overflow:auto;border:1px solid #cfdae9;border-radius:.8rem;background:#fff;max-height:calc(100vh - 17rem)} #main .member-directory{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:.93rem;color:#14233b} #main .member-directory th{position:sticky;top:0;z-index:2;background:#eaf1fa;border-bottom:2px solid #bacbe0;text-align:left;white-space:nowrap;font-weight:700;color:#182e4a} #main .member-directory th button{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;display:flex;gap:.35rem;align-items:center;padding:.73rem .7rem;width:100%;text-align:left} #main .member-directory th button span{color:#64758d} #main .member-directory td{padding:.65rem .7rem;border-bottom:1px solid #e1e8f1;vertical-align:middle;white-space:nowrap;line-height:1.4} #main .member-directory tbody tr:nth-child(even){background:#f7faff} #main .member-directory tbody tr:hover{background:#eaf3ff} #main .member-directory td:first-child,#main .member-directory th:first-child{position:sticky;left:0;z-index:1;background:inherit;min-width:12.5rem;max-width:17rem} #main .member-directory th:first-child{z-index:3;background:#eaf1fa} #main .member-directory .member-person{display:block;padding:0;border:0;background:none;color:#14569f;cursor:pointer;text-align:left;font-size:inherit} #main .member-directory .member-person strong{font-weight:700} #main .member-email{max-width:17rem;overflow:hidden;text-overflow:ellipsis} #main .member-warning{display:block;margin-top:.25rem;padding:.23rem .46rem;border:1px solid #dd7d29;border-radius:.35rem;background:#fff0df;color:#9a340e;font-size:.76rem;font-weight:750;cursor:pointer} #main .member-warning:hover{background:#ffdfc4} #main .member-state-buttons{display:flex;gap:.16rem;padding:.16rem;border:1px solid #cad7e7;border-radius:.6rem;background:#eef2f7} #main .member-state-buttons button{border:0;border-radius:.42rem;background:transparent;color:#465872;padding:.34rem .5rem;cursor:pointer;font-size:.82rem;font-weight:650;white-space:nowrap} #main .member-state-buttons button.chosen{background:#d9f3df;color:#146533;box-shadow:0 1px 3px #14233b22} #main .member-state-buttons button.chosen.off{background:#e3e7ed;color:#24364d} #main .member-directory td>button:not(.member-person):not(.member-warning){border:1px solid #c5d2e5;background:#fff;color:#174e91;border-radius:.45rem;padding:.38rem .65rem;cursor:pointer;font-weight:650} #main .member-alert{border:1px solid #edaf71;background:#fff3e7;color:#733d0e;border-radius:.6rem;padding:.65rem .8rem;margin:.8rem 0;font-size:.9rem} #main .member-detail h3{margin:.3rem 0 .8rem} #main .member-detail>div{display:grid;grid-template-columns:minmax(8rem,auto) 1fr;gap:.55rem .85rem} #main .member-detail span{color:#52647b} #main .member-detail strong{overflow-wrap:anywhere} #dialog .member-form-sections{display:grid;gap:1rem} #dialog .member-form-sections section{border:1px solid #d7e1ee;border-radius:.7rem;padding:.85rem;background:#f9fbfe} #dialog .member-form-sections h3{margin:0 0 .75rem;color:#193651} #dialog .member-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem .8rem} #dialog .member-readonly{display:grid;gap:.18rem;margin:.6rem 0;padding:.55rem .7rem;background:#eaf2fd;border-radius:.5rem;color:#213e60} #dialog .member-readonly small{color:#50657e} #dialog .member-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .65rem} #dialog .member-checks label{display:flex;align-items:center;gap:.4rem;font-size:.9rem} #main .member-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem} #main .member-catalog-card{border:1px solid #cfdae9;border-radius:.8rem;background:#fff;padding:1rem} #main .member-catalog-card h2{margin:0;font-size:1.2rem;color:#1c344f} #main .member-catalog-card p{margin:.4rem 0 1rem;color:#5b6b81;font-size:.88rem} #main .member-catalog-row{display:flex;align-items:center;gap:.35rem;border-top:1px solid #e5ebf2;padding:.52rem 0;color:#1b2d45} #main .member-catalog-row span{flex:1;min-width:0;overflow-wrap:anywhere} #main .member-catalog-row small{color:#708198} #main .member-catalog-row button{border:1px solid #cbd6e4;border-radius:.4rem;background:#fff;padding:.3rem .55rem;color:#245088;cursor:pointer} #main .member-catalog-card>.primary{margin-top:.8rem} #main .member-row-leaving{animation:member-leave .24s ease-in forwards} @keyframes member-leave{to{opacity:0;transform:translateY(-12px)}} @media(max-width:800px){#main .member-catalog-grid{grid-template-columns:1fr}#dialog .member-form-grid,#dialog .member-checks{grid-template-columns:1fr}#main .member-table-wrap{max-height:none}} @media(prefers-reduced-motion:reduce){#main .member-row-leaving{animation:none}} /* Keep the directory in the same dark visual system as the admin shell. */ #main .member-admin-tabs,#main .member-subtabs{border-color:#475469;margin-top:.7rem} #main .member-admin-tabs button,#main .member-subtabs button{color:#cbd7e8;padding:.56rem .8rem} #main .member-admin-tabs button[aria-selected=true],#main .member-subtabs button[aria-selected=true]{background:#24517d;color:#fff;border-color:#69aeff} #main .member-filters{margin:.65rem 0;gap:.5rem} #main .member-filters .search{min-width:min(20rem,100%)} #main .member-table-wrap{background:#202a37;border-color:#48586d;border-radius:.55rem;max-height:calc(100vh - 15.5rem)} #main .member-directory{color:#edf4ff;font-size:.82rem} #main .member-directory th,#main .member-directory th:first-child{background:#2b4059;color:#fff;border-bottom-color:#7092b9} #main .member-directory th button{padding:.55rem .5rem} #main .member-directory th button span{color:#b7cce7} #main .member-directory td{padding:.52rem .5rem;border-bottom-color:#46576a;line-height:1.3} #main .member-directory tbody tr:nth-child(odd){background:#243244} #main .member-directory tbody tr:nth-child(even){background:#2a3a4d} #main .member-directory tbody tr:hover{background:#36516c} #main .member-directory td:first-child{min-width:11rem;max-width:13rem;background:inherit} #main .member-directory .member-person{color:#c7e5ff} #main .member-directory .member-person:hover{text-decoration:underline} #main .member-directory .member-warning{color:#ffcbcb;background:#5d2630;border-color:#db6572;font-size:.7rem;padding:.14rem .32rem} #main .member-directory .member-warning:hover{background:#75313d} #main .member-directory .member-missing-text{display:inline-block;color:#ffb5b5;font-weight:700;white-space:normal;min-width:5rem} #main .member-directory .member-muted{color:#9eb0c6} #main .member-directory .member-inline-select{max-width:9rem;width:100%;min-width:7rem;padding:.34rem .45rem;border:1px solid #7290ad;border-radius:.42rem;background:#e9f3ff;color:#12263e;font:inherit;font-weight:700;cursor:pointer} #main .member-directory .member-inline-select.member-missing{border-color:#e46b71;background:#fff0f0;color:#8e2432} #main .member-directory .member-inline-select:disabled{opacity:.8;cursor:default} #main .member-directory td>button:not(.member-person):not(.member-warning){background:#385778;color:#fff;border-color:#6a92b8;padding:.31rem .5rem} #main .member-email{max-width:14rem} #main .member-catalog-card{background:#253448;border-color:#52647a;color:#eef5ff} #main .member-catalog-card h2{color:#fff} #main .member-catalog-card p,#main .member-catalog-row small{color:#cad6e7} #main .member-catalog-row{color:#fff;border-top-color:#4b5e73} /* Member-management clarity and compact catalog layout. */ #main .member-admin-tabs,#main .member-subtabs{display:inline-flex;align-items:center;gap:.2rem;padding:.25rem;background:#233246;border:1px solid #52677f;border-radius:.7rem;margin:.9rem 0 .15rem;vertical-align:top} #main .member-subtabs{margin:.7rem 0 .2rem} #main .member-admin-tabs button,#main .member-subtabs button{border:0;border-radius:.48rem;padding:.56rem .9rem;color:#e1eaf7;transition:background .16s ease,color .16s ease,box-shadow .16s ease} #main .member-admin-tabs button:hover,#main .member-subtabs button:hover{background:#39536f;color:#fff} #main .member-admin-tabs button[aria-selected=true],#main .member-subtabs button[aria-selected=true]{background:#3674b5;color:#fff;box-shadow:0 2px 7px #101b2990} #main .member-directory{font-size:.89rem} #main .member-directory td{padding:.6rem .62rem;line-height:1.38} #main .member-directory th button{padding:.65rem .6rem} #main .member-directory tbody tr{transition:background .16s ease} #main .member-directory tbody tr:hover{background:#3b5b79} #main .member-directory .member-warning{font-size:.75rem} #main .member-directory .member-inline-select{min-width:8.2rem} #main .member-catalog-card{min-width:0;padding:1rem;transition:border-color .18s ease,box-shadow .18s ease} #main .member-catalog-card:hover{border-color:#769fc9;box-shadow:0 8px 22px #07111e38} #main .member-catalog-head,#main .member-catalog-row{display:grid;align-items:center;gap:.6rem;min-width:0} #main .member-catalog-head{padding:.55rem .45rem;color:#b7cee7;font-weight:700;font-size:.77rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid #6b8098} #main .member-catalog-head.department,#main .member-catalog-row.department{grid-template-columns:minmax(8rem,1.35fr) minmax(6rem,.85fr) auto} #main .member-catalog-head.designation,#main .member-catalog-row.designation{grid-template-columns:minmax(8rem,1fr) auto} #main .member-catalog-row{padding:.6rem .45rem;border-top:0;border-bottom:1px solid #40556b;transition:background .16s ease,transform .16s ease} #main .member-catalog-row:hover{background:#324b66;transform:translateX(2px)} #main .member-catalog-row strong{font-size:.9rem;overflow-wrap:anywhere} #main .member-catalog-row code{font-size:.78rem;color:#bcdcfb;background:#182b40;border:1px solid #4c6581;border-radius:.32rem;padding:.2rem .35rem;overflow-wrap:anywhere} #main .member-catalog-actions{display:flex;justify-content:end;gap:.35rem;white-space:nowrap} #main .member-catalog-row button{background:#324e6a;border-color:#6e8cad;color:#fff;transition:background .16s ease,transform .16s ease} #main .member-catalog-row button:hover{background:#4778a5;transform:translateY(-1px)} #main .member-catalog-add{margin-top:.8rem} #dialog .member-form-sections section{background:#27384d;border-color:#58708a;color:#f0f6ff;padding:1rem} #dialog .member-form-sections h3{color:#fff;font-size:1.02rem} #dialog .member-form-sections .field,#dialog .member-form-sections label{color:#e9f2ff} #dialog .member-form-sections input:not([type=checkbox]),#dialog .member-form-sections select{background:#f5f9ff;color:#162c43;border:1px solid #9bb4ce;border-radius:.45rem} #dialog .member-form-sections input:not([type=checkbox]):focus,#dialog .member-form-sections select:focus{outline:2px solid #79b9ff;outline-offset:1px} #dialog .member-readonly{background:#1c2c3e;color:#eff7ff;border:1px solid #4e6884} #dialog .member-readonly small{color:#bfcee0} #dialog .member-checks{gap:.48rem .7rem} #dialog .member-checks label{background:#31455b;border-radius:.4rem;padding:.36rem .45rem;line-height:1.35} #dialog .member-catalog-help{color:#d7e7fa;background:#263e57;border:1px solid #6a8cad;padding:.6rem .7rem;border-radius:.45rem} #main button:focus-visible,#dialog button:focus-visible{outline:2px solid #9dccff;outline-offset:2px} @media(max-width:1050px){#main .member-catalog-grid{grid-template-columns:1fr}} @media(max-width:600px){#main .member-catalog-head.department,#main .member-catalog-row.department{grid-template-columns:minmax(6rem,1fr) minmax(5rem,.75fr) auto}#main .member-catalog-row button{padding:.32rem}} @media(prefers-reduced-motion:reduce){#main .member-catalog-card,#main .member-catalog-row,#main .member-catalog-row button,#main .member-admin-tabs button,#main .member-subtabs button,#main .member-directory tbody tr{transition:none}#main .member-catalog-row:hover,#main .member-catalog-row button:hover{transform:none}} #main .member-overview{display:grid;gap:.45rem;margin:.8rem 0 .15rem;padding:.65rem .75rem;border:1px solid #52677f;border-radius:.7rem;background:#223247;color:#eaf3ff} #main .member-overview-numbers{display:flex;gap:.55rem;flex-wrap:wrap} #main .member-overview-numbers>span{display:flex;align-items:baseline;gap:.4rem;padding:.26rem .55rem;border-radius:.4rem;background:#314862;font-size:.8rem} #main .member-overview-numbers strong{font-size:1.15rem;color:#fff} #main .member-overview-departments{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.76rem} #main .member-overview-departments>b{margin-right:.3rem;color:#bcd0e6} #main .member-overview-departments>span{padding:.2rem .4rem;border:1px solid #64819d;border-radius:.35rem;background:#2b4056} #main .member-overview-departments strong{margin-left:.2rem;color:#fff} /* Keep status and information groups visible without a twelve-column table. */ #main .member-directory-controls{display:flex;align-items:center;justify-content:space-between;gap:.55rem;flex-wrap:wrap} #main .member-directory-controls .member-subtabs{margin:.65rem 0 .1rem} #main .member-section-tabs{display:flex;align-items:center;gap:.18rem;flex-wrap:wrap;padding:.22rem;border:1px solid #52677f;border-radius:.7rem;background:#233246} #main .member-section-tabs button{border:0;border-radius:.48rem;background:transparent;color:#dce8f6;padding:.55rem .78rem;font-size:.88rem;font-weight:700;cursor:pointer} #main .member-section-tabs button:hover{background:#39536f;color:#fff} #main .member-section-tabs button[aria-selected=true]{background:#3674b5;color:#fff;box-shadow:0 2px 7px #101b2990} #main .member-directory{width:100%;min-width:0;table-layout:auto} #main .member-directory td,#main .member-directory th{white-space:normal;overflow-wrap:anywhere} #main .member-directory td:first-child,#main .member-directory th:first-child{position:static;min-width:10rem;max-width:18rem} #main .member-directory .member-role.owner{color:#91ccff} #main .member-directory .member-role.manager{color:#ffce94} @media(max-width:740px){ #main .member-directory-controls{align-items:stretch;flex-direction:column} #main .member-section-tabs{overflow-x:auto;flex-wrap:nowrap;max-width:100%} #main .member-section-tabs button{white-space:nowrap} #main .member-table-wrap{border:0;background:transparent;overflow:visible;max-height:none} #main .member-directory,#main .member-directory tbody,#main .member-directory tr,#main .member-directory td{display:block;width:100%} #main .member-directory thead{display:none} #main .member-directory tbody tr{border:1px solid #52677f;border-radius:.65rem;background:#26384c!important;margin:.6rem 0;padding:.45rem .7rem} #main .member-directory td,#main .member-directory td:first-child{display:grid;grid-template-columns:minmax(6rem,36%) 1fr;gap:.45rem;align-items:center;max-width:none;min-width:0;border:0;border-bottom:1px solid #40536a;padding:.47rem .15rem;background:transparent!important} #main .member-directory td:last-child{border-bottom:0} #main .member-directory td::before{content:attr(data-label);font-size:.76rem;font-weight:700;color:#abc3dd} #main .member-directory td:first-child{display:block} #main .member-directory td:first-child::before{display:none} #main .member-directory .member-warning{width:max-content;max-width:100%} } .member-management-page #main .member-state-control { display: inline-flex; align-items: center; gap: .25rem; } .member-management-page #main .member-state-sync { min-width: 1.9rem; min-height: 1.9rem; padding: .15rem; border: 1px solid #e0a42e; border-radius: .45rem; color: #805100; background: #fff5d9; cursor: pointer; font-weight: 750; } .member-management-page #main .member-state-sync:hover, .member-management-page #main .member-state-sync:focus-visible { background: #ffe8ad; outline: 2px solid #d79b22; outline-offset: 1px; } #main .member-catalog-tabs{display:inline-flex;gap:.15rem;padding:.2rem;margin:.2rem 0 .45rem;border:1px solid #5d7791;border-radius:.5rem;background:#182c42} #main .member-catalog-tabs button{border:0;border-radius:.35rem;background:transparent;color:#d0e0f3;padding:.45rem .6rem;font-size:.8rem;font-weight:700;cursor:pointer} #main .member-catalog-tabs button[aria-selected=true]{background:#3674b5;color:#fff} #main .member-catalog-tabs button:hover{background:#456989;color:#fff} /* Feedback 2026-10-24: compact directory and department organization tree. */ #main:has(.member-head){background:#1c232d} #main .member-head{margin:0 0 .4rem;gap:.5rem} #main .member-head h1{font-size:1.3rem} #main .member-head p{font-size:.78rem;margin:.15rem 0 0} #main .member-overview{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .7rem;margin:.35rem 0;padding:.4rem .55rem} #main .member-overview-numbers{gap:.3rem} #main .member-overview-numbers>span{font-size:.72rem;padding:.16rem .35rem} #main .member-overview-numbers strong{font-size:1rem} #main .member-overview-departments{gap:.25rem;font-size:.68rem} #main .member-overview-departments>span{padding:.1rem .25rem} #main .member-admin-tabs{margin:.2rem 0;padding:.18rem} #main .member-admin-tabs button,#main .member-subtabs button,#main .member-section-tabs button{padding:.38rem .6rem;font-size:.8rem} #main .member-directory-controls .member-subtabs{margin:.2rem 0} #main .member-filters{margin:.3rem 0 .4rem;gap:.4rem} #main .member-filters .search{padding:.25rem .55rem} #main .member-filters select{padding:.35rem .5rem} #main .member-org{margin-top:.5rem;color:#eef5ff;min-width:0} #main .member-org-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem} #main .member-org-toolbar>div{flex:1;min-width:12rem} #main .member-org-toolbar h2{font-size:1.1rem;margin:0} #main .member-org-toolbar p{font-size:.8rem;color:#b9cde3;margin:.2rem 0} #main .member-org-toolbar input{max-width:100%;padding:.55rem .65rem;border:1px solid #7293b5;border-radius:.5rem;background:#f5f9ff;color:#152b43} #main .member-org-toolbar button{background:#304b69;color:#eef7ff;border:1px solid #7293b5;border-radius:.5rem;padding:.5rem .65rem;cursor:pointer} #main .member-org-root{position:relative;display:flex;align-items:center;gap:.8rem;width:max-content;max-width:100%;margin:0 auto 1.4rem;padding:.85rem 1.3rem;border:1px solid #78b5ed;border-radius:.85rem;background:linear-gradient(125deg,#244b72,#203348);box-shadow:0 7px 22px #07132150} #main .member-org-root:after{content:'';position:absolute;left:50%;bottom:-1.4rem;height:1.4rem;border-left:2px solid #547fa5} #main .member-org-root strong{font-size:1.15rem} #main .member-org-root small{display:block;color:#c9dcef;margin-top:.2rem;font-size:.78rem} #main .member-org-logo{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:.65rem;background:#3286c9;color:white;font-weight:800} #main .member-org-branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem;border-top:2px solid #547fa5;padding-top:1rem} #main .member-org-department{position:relative;align-self:start;min-width:0;border:1px solid #526d88;border-radius:.7rem;background:#1e2e40;overflow:visible} #main .member-org-department:before{content:'';position:absolute;left:50%;top:-1.15rem;height:1.15rem;border-left:2px solid #547fa5} #main .member-org-department summary{cursor:pointer;padding:.75rem .85rem;background:#2d4762;border-radius:.65rem;color:#eff7ff;font-weight:700;font-size:.9rem;white-space:normal} #main .member-org-department summary>span{white-space:normal;overflow-wrap:anywhere;max-width:none} #main .member-org-department summary b{float:right;background:#162e46;border-radius:1rem;padding:.05rem .45rem;font-size:.8rem} #main .member-org-people{display:grid;gap:.55rem;padding:.7rem} #main .member-org-person{display:flex;justify-content:flex-start;gap:.65rem;align-items:center;width:100%;min-width:0;text-align:left;padding:.65rem;border:1px solid #45627f;border-radius:.65rem;background:#293d53;color:#f2f7ff;cursor:pointer} #main .member-org-person:hover{background:#355672;border-color:#88b9e7} #main .member-org-avatar{display:grid;place-items:center;flex:0 0 2.8rem;height:2.8rem;overflow:hidden;border-radius:50%;background:#3e6389;color:#fff;font-weight:750;border:2px solid #7298be} #main .member-org-avatar img{width:100%;height:100%;object-fit:cover} #main .member-org-identity{display:grid;gap:.2rem;min-width:0;overflow-wrap:anywhere} #main .member-org-identity strong{font-size:.9rem} #main .member-org-identity>span{font-size:.8rem;color:#d0e2f5} #main .member-org-identity small{font-size:.7rem;color:#aec5dd} @media(min-width:1100px){#main .member-directory-controls{display:inline-flex;width:52%;vertical-align:middle}#main .member-filters{display:inline-flex;width:calc(48% - .5rem);margin-left:.5rem;vertical-align:middle;flex-wrap:nowrap}#main .member-filters .search{min-width:0;flex:1}#main .member-filters select{max-width:45%}} @media(max-width:740px){#main .member-org-toolbar .search{width:100%}#main .member-org-toolbar input{width:100%;box-sizing:border-box}#main .member-org-branches{grid-template-columns:1fr}#main .member-directory-controls{gap:.2rem}#main .member-head{flex-wrap:wrap}#main .member-overview{gap:.25rem}#main .member-org-root{box-sizing:border-box}} #main .member-catalog-empty{padding:.8rem;color:#c1d0e0} /* Scoped Member workspace: shared header/sidebar/chat remain the host's own components. */ body.member-management-page{--member-ink:#eff6ff;--member-muted:#adc3dc;--member-line:#49657f;--member-blue:#66c8ff} .member-management-page #main{padding:18px 22px;background:linear-gradient(150deg,#182b40,#142437);min-width:0;color:var(--member-ink)} .member-management-page #sidebar .member-sidebar-heading{padding:16px 14px;margin:0 8px 12px;border:1px solid #446a8f;border-radius:15px;background:linear-gradient(135deg,#204a73,#193650);box-shadow:0 6px 20px #07152230} .member-sidebar-heading span{display:block;color:#7acbff;font-size:10px;letter-spacing:1.7px;font-weight:800}.member-sidebar-heading strong{display:block;font-size:19px;line-height:1.35;color:#f4f9ff;margin:6px 0}.member-sidebar-heading small{font-size:11px;color:#b4cee5} .member-management-page #main .member-head{margin:0 0 10px;padding:0;border:0;min-height:42px;display:flex;justify-content:flex-end}.member-management-page .member-head>div:first-child:not(.member-head-actions){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .member-head-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.member-head-actions button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 14px;border:1px solid #557b9e;border-radius:11px;background:#244969;color:#eff8ff;font-weight:700;font-size:12px;cursor:pointer}.member-head-actions button svg{width:17px;height:17px}.member-head-actions button.primary{background:linear-gradient(135deg,#137ad7,#1456b4);border-color:#44b8fc;box-shadow:0 4px 14px #0d65bc40} .member-management-page #main .member-overview{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:11px 14px;margin:0 0 14px;background:#203950;border:1px solid #496a87;border-radius:13px}.member-management-page #main .member-overview-numbers{display:flex;gap:7px;flex-wrap:wrap}.member-management-page #main .member-overview-numbers>span{display:flex;align-items:center;gap:6px;padding:5px 8px;background:#2b4966;border-radius:8px;color:#dcecff;font-size:11px}.member-management-page #main .member-overview-numbers strong{font-size:17px;color:#fff}.member-management-page #main .member-overview-departments{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:10px;color:#bad1e6}.member-management-page #main .member-overview-departments>b{font-size:10px;margin-right:4px}.member-management-page #main .member-overview-departments>span{padding:4px 7px;border:1px solid #527493;border-radius:7px;color:#dfedff} .member-management-page #main .member-admin-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:4px;padding:5px;margin:0;border:1px solid #50718f;border-bottom:0;border-radius:15px 15px 0 0;background:#213c57;box-sizing:border-box}.member-management-page #main .member-admin-tabs button{min-height:48px;border:0;border-radius:11px 11px 0 0;background:#263f58;color:#c6d9ec;font-size:13px;font-weight:750;position:relative;transition:background .18s,box-shadow .18s,color .18s,transform .18s}.member-management-page #main .member-admin-tabs button[aria-selected=true]{background:linear-gradient(135deg,#197cd5,#245c9e);color:#fff;box-shadow:inset 0 1px #75ccff,0 -2px 14px #42adff30}.member-management-page #main .member-admin-tabs button:hover{background:#355c7e;color:#fff}.member-management-page #main .member-admin-tabs button[aria-selected=true]:after{content:'';position:absolute;height:3px;background:#6dd8ff;bottom:0;left:20%;right:20%;border-radius:4px} .member-management-page #member-content{border:1px solid #50718f;border-top:0;border-radius:0 0 15px 15px;background:#1c3148;padding:12px;min-width:0;animation:memberPanelIn .18s ease-out}.member-management-page #main .member-directory-controls{display:flex;width:100%;margin:0 0 10px;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.member-management-page #main .member-subtabs{display:flex;gap:4px;margin:0;border:1px solid #496987;border-radius:10px;padding:3px;background:#20384f;align-items:center}.member-management-page #main .member-subtabs button{padding:7px 13px;border:0;border-radius:7px;font-size:11px;color:#bbd0e5;font-weight:700;background:transparent;min-height:34px}.member-management-page #main .member-subtabs button[aria-selected=true]{color:#fff;background:#2d76b8;box-shadow:0 2px 8px #08182c40}.member-compact-tools{display:flex;gap:8px;align-items:center}.member-compact-tools>span{font-size:11px;color:#b7cee5}.member-compact-tools button{min-height:36px;border:1px solid #4c769b;border-radius:9px;color:#dcefff;background:#244868;padding:7px 10px;cursor:pointer}.member-compact-tools svg{width:18px;height:18px;display:block}.member-management-page #main .member-filters[hidden]{display:none!important} .member-management-page #main .member-table-wrap{border:1px solid #4a6b89;border-radius:11px;max-height:calc(100dvh - 320px);max-width:100%;background:#1c3148;scrollbar-width:thin;scrollbar-color:#507ea5 #172d43}.member-management-page #main .member-directory{font-size:11px;color:#e6f1ff;min-width:1380px;width:100%;table-layout:auto}.member-management-page #main .member-directory th{background:#294a68;color:#f1f8ff;border-bottom:2px solid #6aa5d6}.member-management-page #main .member-directory th button{padding:10px 8px;font-size:11px;font-weight:800;gap:6px;min-height:38px}.member-management-page #main .member-directory td{padding:8px;line-height:1.35;background:transparent;border-bottom:1px solid #3c5771;white-space:nowrap}.member-management-page #main .member-directory tbody tr{background:#1f374e;transition:background .16s}.member-management-page #main .member-directory tbody tr:nth-child(even){background:#243e57}.member-management-page #main .member-directory tbody tr:hover{background:#315777}.member-management-page #main .member-directory th:first-child,.member-management-page #main .member-directory td:first-child{min-width:155px;max-width:180px;background:#24435e;box-shadow:4px 0 8px #0c1f3320}.member-management-page #main .member-directory td.member-email{font-size:10px;max-width:165px;white-space:normal;overflow-wrap:anywhere}.member-management-page #main .member-person{padding:0;border:0;background:transparent;color:#a8deff;font-size:12px;font-weight:800;text-align:left;white-space:normal;cursor:pointer}.member-management-page #main .member-warning{display:block;font-size:9px;padding:3px 5px;margin-top:4px;border:1px solid #c66c7d;background:#613343;color:#ffdae2;border-radius:5px}.member-management-page #main .member-inline-select{max-width:126px;min-height:30px;padding:5px;border:1px solid #5a7e9f;border-radius:7px;background:#284b69;color:#f2f9ff;font-size:10px}.member-management-page #main .member-inline-select:disabled{opacity:.75}.member-management-page #main .member-directory td:last-child button{border:1px solid #6895b9;border-radius:7px;padding:5px 8px;min-height:30px;background:#2e5d85;color:#f0f8ff;font-size:10px;cursor:pointer}.member-management-page #main .member-directory td:last-child .member-delete{margin-left:4px;color:#ffd8e0;border-color:#b47788;background:#573448}.member-management-page #main .member-missing-text{color:#ffcc91;font-size:10px}.member-management-page #main .member-muted{color:#a2b7cc}.member-management-page #main .member-role{font-size:10px;border:1px solid #5d85a7;background:#2c4a65;padding:3px 6px;border-radius:6px;color:#dceeff}.member-management-page #main .member-role.owner{color:#ffe3a2;border-color:#a58b55;background:#4c4533} .member-management-page #dialog{width:min(900px,calc(100vw - 28px));max-height:90dvh;box-sizing:border-box;padding:24px;border:1px solid #5b86ab;border-radius:20px;background:linear-gradient(145deg,#203a52,#182d43);color:#edf6ff;box-shadow:0 24px 85px #07142180;overflow:auto}.member-management-page #dialog::backdrop{background:#071424b3;backdrop-filter:blur(4px)}.member-management-page #dialog .dialog-head{border-bottom:1px solid #54738f;padding-bottom:14px;margin-bottom:17px}.member-management-page #dialog h2{font-size:20px;color:#f4faff}.member-management-page #dialog h3{color:#a4dcff;font-size:13px;border-bottom:1px solid #466680;padding-bottom:8px;margin:10px 0}.member-management-page #dialog label{color:#c2d8ec;font-size:12px;font-weight:650}.member-management-page #dialog input:not([type=checkbox]),.member-management-page #dialog select{box-sizing:border-box;width:100%;padding:10px 12px;min-height:42px;border:1px solid #547b9c;border-radius:10px;background:#132d43;color:#eff8ff;font-size:13px}.member-management-page #dialog input::placeholder{color:#8fa9c1}.member-management-page #dialog .member-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.member-management-page #dialog .member-form-sections>section{padding:14px;margin-bottom:12px;border:1px solid #496b89;border-radius:12px;background:#203d56}.member-management-page #dialog .member-readonly{color:#c7dbee;background:#19334b;padding:10px;border-radius:9px;font-size:12px;line-height:1.5}.member-management-page #dialog .member-readonly small{display:block;color:#a7bed3;font-size:10px}.member-management-page #dialog .member-checks{display:flex;gap:8px 14px;flex-wrap:wrap}.member-management-page #dialog .member-checks label{display:flex;gap:6px;align-items:center}.member-management-page #dialog input[type=checkbox]{width:17px;height:17px;accent-color:#48b7ff}.member-management-page #dialog .dialog-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:15px;margin-top:18px;border-top:1px solid #466781}.member-management-page #dialog button{color:#e4f3ff;border:1px solid #668cac;background:#2a4e6d;border-radius:10px;padding:9px 14px;min-height:38px;font-weight:700;cursor:pointer}.member-management-page #dialog button.primary{background:linear-gradient(135deg,#1687df,#1760bc);border-color:#4bbdff;box-shadow:0 4px 14px #0867b440}.member-management-page #dialog #form-error{color:#ffc8d3;font-size:12px}.member-management-page .member-search-dialog{max-width:560px!important}.member-search-fields{display:grid;gap:16px}.member-access-intro{background:#1e4d71;border:1px solid #4a88b5;border-radius:12px;padding:14px;font-size:13px;line-height:1.5}.member-access-intro p,.member-help{font-size:11px;color:#bcd4ea;line-height:1.5}.member-access-add{display:grid;grid-template-columns:140px 1fr auto;gap:10px;align-items:end;margin:16px 0}.member-access-add label{display:grid;gap:6px}.member-access-row{background:#203f59;border:1px solid #4c7393;border-radius:11px;padding:12px;margin:9px 0}.member-access-row header{display:flex;gap:9px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.member-access-row header strong{font-size:13px;color:#e9f6ff}.member-access-row header small{font-size:10px;color:#a9c3da}.member-access-row header button{margin-left:auto;padding:5px 9px!important;min-height:29px!important}.member-access-row>div{display:flex;gap:12px;flex-wrap:wrap}.member-access-row label{display:flex;align-items:center;gap:5px}.member-management-page button,.member-management-page a,.member-management-page input,.member-management-page select{transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}.member-management-page button:hover:not(:disabled){filter:brightness(1.14);box-shadow:0 0 0 2px #64c1ff20}.member-management-page button:active:not(:disabled){transform:translateY(1px)}.member-management-page :is(button,a,input,select):focus-visible{outline:2px solid #71d5ff;outline-offset:3px}.member-management-page #dialog :is(input,select):focus{border-color:#6dcaff;box-shadow:0 0 0 3px #48afff30}.member-management-page #main .member-org,.member-management-page #main .member-catalog-card{background:#203a53;color:#e5f1ff;border-color:#4a7294;border-radius:12px}.member-management-page #main .member-org-toolbar h2,.member-management-page #main .member-catalog-card h2{color:#b9e5ff;font-size:17px}.member-management-page #main .member-catalog-card header{padding:12px}.member-management-page #main .member-catalog-card p{font-size:11px;line-height:1.5;color:#b6cfe5}.member-management-page #main .member-catalog-row{padding:10px 12px;color:#e2f0ff}.member-management-page #main .member-catalog-grid{gap:12px}.member-management-page #main .member-catalog-head{font-size:10px;color:#a9c9e4;background:#2b4b66}.member-management-page #main .member-detail div{color:#c6dcef} @keyframes memberPanelIn{from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:none}}@media(max-width:740px){.member-management-page #main{padding:12px 8px}.member-management-page #main .member-admin-tabs button{font-size:11px;padding:9px 5px;min-height:48px}.member-management-page #main .member-overview{padding:9px;gap:8px}.member-management-page #main .member-overview-numbers>span{font-size:9px;padding:4px 6px}.member-management-page #main .member-overview-departments{display:none}.member-management-page #main .member-table-wrap{max-height:65dvh}.member-management-page #main .member-directory th:first-child,.member-management-page #main .member-directory td:first-child{min-width:125px;max-width:140px}.member-management-page #dialog{padding:17px;border-radius:16px}.member-management-page #dialog .member-form-grid{grid-template-columns:1fr}.member-access-add{grid-template-columns:1fr 1fr}.member-access-add>button{grid-column:1/-1}.member-management-page #sidebar .member-sidebar-heading{padding:10px;margin:3px 6px}.member-sidebar-heading strong{font-size:14px}.member-sidebar-heading small{display:none}.member-compact-tools>span{font-size:10px}.member-management-page #member-content{padding:8px}.member-management-page #main .member-directory-controls{gap:8px}.member-management-page .member-head-actions button{font-size:11px;padding:8px 10px}.member-management-page #main .member-org-toolbar{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.member-management-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}} .member-management-page [hidden]{display:none!important} @media(max-width:740px){.member-management-page #main .member-table-wrap{display:block;overflow:auto!important;width:100%;max-width:100%;box-sizing:border-box}.member-management-page #main table.member-directory{display:table!important;min-width:1380px;width:1380px;border-collapse:separate;table-layout:auto}.member-management-page #main .member-directory thead{display:table-header-group!important}.member-management-page #main .member-directory tbody{display:table-row-group!important}.member-management-page #main .member-directory tr{display:table-row!important;margin:0;border:0;border-radius:0;padding:0}.member-management-page #main .member-directory th,.member-management-page #main .member-directory td{display:table-cell!important;width:auto;min-height:0;padding:8px;border-radius:0;grid-template-columns:none}.member-management-page #main .member-directory td:before{display:none!important}.member-management-page #main .member-directory td:first-child{position:sticky;left:0;width:140px;max-width:160px;min-width:140px}.member-management-page #main .member-directory td:last-child button{width:auto}.member-management-page #main .member-directory .member-role{display:inline-block}.member-management-page #main .member-directory-controls{display:flex;justify-content:space-between;width:100%}} .member-management-page #main .member-directory th button{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;min-width:max-content} /* Feedback 2026-10-30: compact actions, legible profile, safe table clipping. */ #main .member-overview-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-left:auto} #main .member-overview-actions button{min-height:2.25rem;padding:.38rem .65rem;border:1px solid #7293b5;border-radius:.5rem;background:#304b69;color:#fff;font:inherit;font-weight:700;cursor:pointer} #main .member-overview-actions button.primary{background:#176bc0;border-color:#5ba9fa} #main .member-directory thead{position:sticky;top:0;z-index:20;background:#2b4059} #main .member-directory thead th,#main .member-directory thead th:first-child{position:static;background:#2b4059} #main .member-directory tbody td:first-child{position:static!important;z-index:auto;background:inherit} #main .member-org-leadership{margin:0 auto 1.25rem;max-width:68rem;padding:.75rem;border:1px solid #78b5ed;border-radius:.75rem;background:#1d3854} #main .member-org-leadership h3{margin:0 0 .65rem;color:#d8ebff;font-size:1rem} #main .member-org-leaders{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.65rem} #dialog .member-detail{display:grid;gap:1rem;color:#eaf3ff} #dialog .member-profile-identity h3{margin:0;color:#fff;font-size:1.35rem} #dialog .member-profile-identity p{margin:.2rem 0 0;color:#bad2eb} #dialog .member-detail section{padding:.9rem;border:1px solid #567795;border-radius:.7rem;background:#243b53} #dialog .member-detail h4{margin:0 0 .7rem;color:#fff;font-size:1rem} #dialog .member-profile-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem 1rem;margin:0} #dialog .member-profile-facts>div{min-width:0;padding:.45rem .55rem;border-radius:.4rem;background:#1b3047} #dialog .member-profile-facts dt{font-size:.76rem;color:#adcbe9} #dialog .member-profile-facts dd{margin:.2rem 0 0;font-weight:700;overflow-wrap:anywhere} @media(max-width:700px){#main .member-overview-actions{margin-left:0;width:100%}#dialog .member-profile-facts{grid-template-columns:1fr}} \n/* Member feedback 2026-11-02: keep the full directory visible without sideways scrolling. */ .member-management-page #main .member-table-wrap { width: 100%; max-width: 100%; overflow-x: hidden !important; overscroll-behavior-x: none; } .member-management-page #main table.member-directory { width: 100% !important; min-width: 100% !important; max-width: 100% !important; table-layout: fixed !important; } .member-management-page #main .member-directory th, .member-management-page #main .member-directory td { min-width: 0 !important; max-width: none !important; padding: .42rem .38rem !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; line-height: 1.3; } .member-management-page #main .member-directory th button { min-width: 0 !important; max-width: 100%; padding: .35rem .2rem !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } .member-management-page #main .member-directory th:nth-child(1), .member-management-page #main .member-directory td:nth-child(1) { width: 16%; } .member-management-page #main .member-directory th:nth-child(2), .member-management-page #main .member-directory td:nth-child(2) { width: 15%; } .member-management-page #main .member-directory th:nth-child(3), .member-management-page #main .member-directory td:nth-child(3) { width: 13%; } .member-management-page #main .member-directory th:nth-child(4), .member-management-page #main .member-directory td:nth-child(4) { width: 10%; } .member-management-page #main .member-directory th:nth-child(5), .member-management-page #main .member-directory td:nth-child(5) { width: 7%; } .member-management-page #main .member-directory th:nth-child(6), .member-management-page #main .member-directory td:nth-child(6) { width: 9%; } .member-management-page #main .member-directory th:nth-child(7), .member-management-page #main .member-directory td:nth-child(7) { width: 8%; } .member-management-page #main .member-directory th:nth-child(8), .member-management-page #main .member-directory td:nth-child(8) { width: 9%; } .member-management-page #main .member-directory th:nth-child(9), .member-management-page #main .member-directory td:nth-child(9) { width: 13%; } .member-management-page #main .member-directory td:first-child, .member-management-page #main .member-directory th:first-child, .member-management-page #main .member-directory tbody td:first-child { position: static !important; width: 16% !important; min-width: 0 !important; max-width: none !important; } .member-management-page #main .member-directory .member-person { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; } .member-management-page #sidebar .member-sidebar-heading { padding: .5rem .65rem !important; margin: 0 .25rem .4rem !important; border-radius: .6rem !important; box-shadow: none !important; } .member-management-page #sidebar .member-sidebar-heading span { font-size: .58rem !important; letter-spacing: .09em !important; } .member-management-page #sidebar .member-sidebar-heading strong { margin: .22rem 0 !important; font-size: .9rem !important; line-height: 1.25 !important; } .member-management-page #sidebar .member-sidebar-heading small { font-size: .66rem !important; } .member-management-page #main .member-directory td select, .member-management-page #main .member-directory td input, .member-management-page #main .member-directory td button:not(.member-person):not(.member-warning) { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; } @media (max-width: 1366px) { .member-management-page #main .member-table-wrap { overflow-x: hidden !important; overflow-y: visible !important; max-height: none !important; } .member-management-page #main table.member-directory { display: block !important; width: 100% !important; min-width: 0 !important; } .member-management-page #main .member-directory thead { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .member-management-page #main .member-directory tbody { display: grid !important; gap: .55rem; } .member-management-page #main .member-directory tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; min-width: 0 !important; padding: .45rem !important; border: 1px solid #52667e !important; border-radius: .6rem !important; background: #20334a !important; } .member-management-page #main .member-directory th, .member-management-page #main .member-directory td { display: block !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; padding: .35rem !important; border: 0 !important; white-space: normal !important; } .member-management-page #main .member-directory td::before { display: block; margin-bottom: .12rem; color: #a9bed5; font-size: .68rem; font-weight: 650; } .member-management-page #main .member-directory td:nth-child(1) { grid-column: 1 / -1; } .member-management-page #main .member-directory td:nth-child(1)::before { content: "Thành viên"; } .member-management-page #main .member-directory td:nth-child(2)::before { content: "Email"; } .member-management-page #main .member-directory td:nth-child(3)::before { content: "Chức danh"; } .member-management-page #main .member-directory td:nth-child(4)::before { content: "Hình thức"; } .member-management-page #main .member-directory td:nth-child(5)::before { content: "Năm sinh"; } .member-management-page #main .member-directory td:nth-child(6)::before { content: "Username"; } .member-management-page #main .member-directory td:nth-child(7)::before { content: "Vai trò"; } .member-management-page #main .member-directory td:nth-child(8)::before { content: "Trạng thái"; } .member-management-page #main .member-directory td:nth-child(9)::before { content: "Thao tác"; } }