| User | Role | Access Level | Access | Actions |
|---|
.admin-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } .admin-search { flex: 1; min-width: 200px; background: var(--white); border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 14px 9px 36px; font-size: 13.5px; font-family: var(--font); color: var(--text-main); outline: none; transition: border-color 0.15s; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E9AB0' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; } .admin-search:focus { border-color: var(--steel); } .filter-tabs { display: flex; gap: 4px; background: var(--off-white); border: 1px solid var(--border); border-radius: 9px; padding: 3px; } .filter-tab { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; border: none; background: transparent; color: var(--text-mute); cursor: pointer; transition: all 0.15s; font-family: var(--font); } .filter-tab.active { background: var(--white); color: var(--text-main); box-shadow: var(--shadow-sm); } .btn-add-user { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: var(--steel); color: white; border: none; border-radius: 9px; font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; transition: all 0.15s; white-space: nowrap; } .btn-add-user:hover { background: #5689B8; box-shadow: 0 4px 12px rgba(72,120,164,0.3); } /* user table */ .user-table-wrap { background: var(--white); border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; } .user-table { width: 100%; border-collapse: collapse; } .user-table th { background: var(--off-white); padding: 11px 16px; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-mute); border-bottom: 1px solid var(--border); white-space: nowrap; } .user-table td { padding: 13px 16px; font-size: 13px; color: var(--text-main); border-bottom: 1px solid var(--border); vertical-align: middle; } .user-table tr:last-child td { border-bottom: none; } .user-table tr:hover td { background: rgba(72,120,164,0.03); } .user-name-cell { display: flex; align-items: center; gap: 10px; } .user-table-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: white; flex-shrink: 0; } .user-full-name { font-weight: 600; font-size: 13.5px; } .user-email-sub { font-size: 11.5px; color: var(--text-mute); margin-top: 1px; } .access-level-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 5px; text-transform: uppercase; } .access-level-tag.csuite { background: rgba(31,39,52,0.08); color: var(--navy); } .access-level-tag.cco { background: rgba(72,120,164,0.12); color: var(--steel); } .access-level-tag.staff { background: rgba(145,177,177,0.15); color: #4A7272; } /* access toggle */ .toggle-wrap { display: flex; align-items: center; gap: 8px; } .toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-track { position: absolute; inset: 0; border-radius: 11px; background: var(--border); cursor: pointer; transition: background 0.2s; } .toggle input:checked + .toggle-track { background: #4CAF85; } .toggle-track::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: white; top: 3px; left: 3px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .toggle input:checked + .toggle-track::after { transform: translateX(18px); } .toggle-label { font-size: 12px; font-weight: 600; color: var(--text-mute); } .toggle input:checked ~ .toggle-label { color: #4CAF85; } .user-actions { display: flex; align-items: center; gap: 6px; } .action-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-mute); transition: all 0.15s; } .action-btn:hover { background: var(--off-white); color: var(--text-main); border-color: var(--text-mute); } .action-btn.danger:hover { background: rgba(232,84,84,0.08); color: #E85454; border-color: rgba(232,84,84,0.3); } /* ─── MODAL ───────────────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(31,39,52,0.55); backdrop-filter: blur(4px); z-index: 500; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.open { display: flex; animation: fadeIn 0.2s ease; } .modal { background: var(--white); border-radius: 16px; width: 100%; max-width: 500px; box-shadow: var(--shadow-lg); overflow: hidden; } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .modal-title { font-size: 16px; font-weight: 700; color: var(--text-main); } .modal-close { margin-left: auto; width: 30px; height: 30px; border-radius: 7px; border: none; background: var(--off-white); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-mute); font-size: 18px; line-height: 1; transition: background 0.15s; } .modal-close:hover { background: var(--border); } .modal-body { padding: 20px 24px; } .modal-form-group { margin-bottom: 16px; } .modal-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; } .modal-input, .modal-select { width: 100%; border: 1.5px solid var(--border); border-radius: 9px; padding: 10px 14px; font-size: 13.5px; font-family: var(--font); color: var(--text-main); outline: none; background: var(--white); transition: border-color 0.15s; appearance: none; } .modal-input:focus, .modal-select:focus { border-color: var(--steel); } .modal-error { display: none; font-size: 12px; color: #E85454; margin-top: 5px; font-weight: 500; } .modal-error.show { display: block; } .modal-footer { padding: 16px 24px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; } .btn-cancel { padding: 9px 18px; border-radius: 9px; border: 1.5px solid var(--border); background: transparent; color: var(--text-sub); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.15s; } .btn-cancel:hover { background: var(--off-white); } .btn-save { padding: 9px 22px; border-radius: 9px; border: none; background: var(--steel); color: white; font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; transition: all 0.15s; } .btn-save:hover { background: #5689B8; } /* confirm delete modal */ .modal.danger .modal-header { border-bottom-color: rgba(232,84,84,0.15); } .btn-delete { padding: 9px 22px; border-radius: 9px; border: none; background: #E85454; color: white; font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; transition: all 0.15s; } .btn-delete:hover { background: #D44040; } .admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .admin-stat-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow-sm); } .admin-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; } .admin-stat-value { font-size: 24px; font-weight: 800; color: var(--text-main); } .admin-stat-sub { font-size: 11.5px; color: var(--text-sub); margin-top: 2px; } .locked-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--text-mute); background: var(--off-white); border: 1px solid var(--border); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.3px; }