:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;color:#0e1b3b;background-color:#e8edff;--header-height: 80px;--footer-height: 52px;--sidebar-width: 260px;--sidebar-collapsed-width: 0px}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:radial-gradient(circle at top,#fefefe 0%,#eef3ff 45%,#dbe7ff 100%);color:inherit;overflow:hidden}button,input,select{font:inherit;color:inherit}.app-layout{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{background:linear-gradient(135deg,#002c90 0%,#0d52c4 65%,#1f7edd 100%);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;gap:1rem;box-shadow:0 20px 35px #07184b33;position:sticky;top:0;z-index:10;min-height:var(--header-height)}.brand-group{display:flex;align-items:center;gap:1rem}.menu-toggle{border:1px solid rgba(255,255,255,.45)!important;color:#fff!important;background:rgba(255,255,255,.15)!important}.menu-toggle:hover{background:rgba(255,255,255,.25)!important}.brand-cluster{display:flex;flex-direction:column}.brand-mark{font-weight:700;font-size:1.15rem;letter-spacing:.04em}.brand-location{font-size:.875rem;color:#d8e7ff}.header-actions{display:flex;align-items:center;gap:1rem}.header-btn{border:none;padding:.6rem 1.75rem;border-radius:999px;cursor:pointer;font-weight:600;font-size:.95rem;transition:transform .2s ease,box-shadow .2s ease}.header-btn.primary{background:#fff;color:#0c4da2;box-shadow:0 12px 20px #0949a840}.header-btn.primary:hover{transform:translateY(-2px);box-shadow:0 15px 25px #0949a859}.app-content{display:flex;flex:1;overflow:hidden}.sidebar{width:var(--sidebar-width);background:#ffffff;border-right:1px solid rgba(12,77,162,.08);padding:1.5rem;box-shadow:0 25px 45px #07184b14;transition:width .3s ease,padding .3s ease,opacity .3s ease;overflow-y:auto}.sidebar.collapsed{width:var(--sidebar-collapsed-width);padding:0;opacity:0;pointer-events:none}.sidebar-inner{display:flex;flex-direction:column;gap:1.5rem;height:100%}.user-card{display:flex;gap:.85rem;padding-bottom:1.25rem}.avatar{width:50px;height:50px;border-radius:50%;background:#dfe8ff;color:#0c4da2;display:flex;align-items:center;justify-content:center;font-weight:700}.user-name{font-weight:600}.user-location{color:#475569;font-size:.9rem}.main-content{flex:1;padding:1rem;overflow-y:auto}.footer{background:#020617;color:#cbd5f5;padding:.5rem 2rem;display:flex;justify-content:space-between;font-size:.875rem;min-height:var(--footer-height);align-items:center}.members-page{display:flex;flex-direction:column;gap:1.75rem;width:min(1600px,100%);margin:0 auto;flex:1;overflow-y:hidden}.placeholder-card,.table-card{background:#ffffff;border-radius:1.5rem;padding:2rem;box-shadow:0 25px 50px #0f172a14;border:1px solid rgba(12,77,162,.08);flex:1;overflow-y:hidden;display:flex;flex-direction:column}.placeholder-card .muted{margin-top:.75rem;color:#64748b}.page-heading{display:flex;justify-content:space-between;align-items:center}.page-heading h1{font-size:2rem;font-weight:800;color:#101c3d}.eyebrow{text-transform:uppercase;font-size:.8rem;letter-spacing:.25rem;color:#94a3b8}.toggle{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem}.toggle input{accent-color:#0c4da2}.filter-row{display:flex;gap:1rem}.filter-input{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;color:#475569}.filter-input span{font-weight:600;color:#1f2a44}.filter-input input,.filter-input select{border:1px solid #cbd5f5;border-radius:999px;padding:.65rem 1rem;background:#f8fbff;box-shadow:inset 0 1px 2px #0f172a0d}.filter-input.search input{width:100%}.table-card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.table-title{font-weight:700;font-size:1.05rem}.muted{color:#475569;font-size:.9rem}.table-actions{display:flex;gap:.75rem}button.primary,.table-actions .primary{background:#0c4da2;color:#fff;border:none;border-radius:999px;padding:.55rem 1.4rem;cursor:pointer;font-weight:600;box-shadow:0 18px 30px #0c4da240}button.ghost,.table-actions .ghost{border:1px solid #94a3b8;background:#f8fbff;border-radius:999px;padding:.55rem 1.4rem;cursor:pointer;font-weight:600;transition:background .2s ease,color .2s ease}button.ghost:hover,.table-actions .ghost:hover{background:#0c4da2;color:#fff}.table-wrapper{overflow:auto;flex:1;min-height:400px}.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;border:1px solid rgba(15,23,42,.05);border-radius:1rem;overflow:hidden}.data-table th{text-align:left;padding:.5rem .75rem;background:linear-gradient(180deg,#f5f7ff 0%,#e5ecff 100%);color:#334155;font-size:.85rem;font-weight:600;letter-spacing:.01em;border-bottom:1px solid #d4dcff;position:sticky;top:0;z-index:1}.data-table td{padding:.7rem .75rem;border-bottom:1px solid #f1f5f9}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background:rgba(12,77,162,.05)}.select-column{width:50px;text-align:center}.empty-state{text-align:center;padding:2rem 0;color:#475569}.selection-banner{margin-top:1rem;background:#0c4da2;color:#fff;border-radius:1rem;padding:.9rem 1.2rem;display:flex;align-items:center;justify-content:space-between;box-shadow:0 18px 35px #0c4da24d}.selection-actions{display:flex;gap:.75rem}.selection-actions button{border:none;border-radius:999px;padding:.45rem 1.2rem;cursor:pointer}.selection-actions .secondary{background:#fff;color:#0f172a}.selection-actions .secondary:hover{background:rgba(255,255,255,.9)}@media (max-width: 1024px){.sidebar{position:fixed;top:0;left:0;height:100%;z-index:100}}@media (max-width: 768px){.header,.footer,.main-content{padding:1.5rem}.header-actions{flex-direction:column;align-items:flex-start}.table-card__header{flex-direction:column;align-items:flex-start;gap:1rem}.selection-banner{flex-direction:column;gap:.75rem;align-items:flex-start}}.mobile-view{display:flex;flex-direction:column;gap:1rem;overflow-y:auto;flex:1;min-height:400px}.mobile-card{background:#ffffff;border-radius:1rem;padding:1.5rem;box-shadow:0 10px 20px #0f172a0d;border:1px solid rgba(12,77,162,.08)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.member-name{font-weight:600;font-size:1.1rem}.status-badge{padding:.25rem .75rem;border-radius:999px;font-size:.8rem;font-weight:600;text-transform:capitalize}.status-badge.active{background:#dcfce7;color:#166534}.status-badge.inactive{background:#fee2e2;color:#991b1b}.status-badge.pending{background:#fef3c7;color:#92400e}.card-body{display:flex;flex-direction:column;gap:.5rem}.card-item{font-size:.95rem}.card-item strong{color:#334155}.card-footer{margin-top:1.25rem;padding-top:1rem;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end}.loader-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fffc;display:flex;justify-content:center;align-items:center;z-index:1000}.loader-spinner{border:4px solid #f3f3f3;border-top:4px solid #0c4da2;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (max-width: 627px){.header{padding:.7rem}.main-content{padding:0}.header-btn{font-size:.8rem}.brand-mark{font-weight:700;font-size:.9rem}.brand-location{font-size:.7rem;color:#d8e7ff}.footer{justify-content:center;padding:.2rem}}
