/* -------------------------- /
/ ------ ACCOUNT & ADMIN (v4 "Polished & Secure" Edition) ------ /
/ -------------------------- */

/* --- Main Account Header --- */
.account-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
}
.account-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    color: var(--text-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; font-weight: 600;
    flex-shrink: 0;
    border: 3px solid rgba(255,255,255,0.3);
    box-shadow: var(--shadow-md);
}
/* --- POLISHED AVATAR GRADIENTS --- */
.account-avatar.role-admin { background-image: linear-gradient(45deg, var(--accent-danger), #fca5a5); }
.account-avatar.role-supervisor { background-image: linear-gradient(45deg, var(--accent-warning), #fde047); }
.account-avatar.role-regular { background-image: linear-gradient(45deg, var(--accent-secondary), #6ee7b7); }
.account-avatar.role-unloader { background-image: linear-gradient(45deg, var(--accent-info), #7dd3fc); }
.dark-theme .account-avatar.role-supervisor { color: var(--text-primary); }

.account-info h2 { font-size: 1.75rem; color: var(--text-primary); margin: 0 0 5px 0; font-weight: 600; }
.account-info .user-role-badge { font-size: 0.9rem; padding: 4px 10px; }
.account-header #accountLogoutBtn { margin-left: auto; }

/* --- Admin Panel --- */
.admin-panel { background-color: var(--bg-secondary); padding: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.admin-panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-secondary); }
.admin-panel-header h3 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin: 0; }

.admin-panel-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border-secondary); }
.admin-tab-btn { padding: 10px 20px; font-size: 1rem; font-weight: 600; color: var(--text-secondary); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: all .2s; margin-bottom: -1px; }
.admin-tab-btn:hover { color: var(--text-primary); }
.admin-tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.admin-panel-content { display: none; }
.admin-panel-content.active { display: block; animation: fadeIn 0.3s; }

.admin-panel-controls { display: flex; gap: 16px; margin-bottom: 20px; }
.admin-panel-controls .form-field { margin-bottom: 0; flex-grow: 1; }

.managed-users-table-container, .roles-table-container { margin-top: 20px; overflow-x: auto; }
.managed-users-table, .roles-table { width: 100%; border-collapse: collapse; }
.managed-users-table th, .managed-users-table td, .roles-table th, .roles-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border-secondary); font-size: var(--font-size-sm); vertical-align: middle; }
.managed-users-table th, .roles-table th { background-color: var(--bg-tertiary); font-weight: 600; color: var(--text-secondary); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em; position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -2px 0 var(--border-primary); }
.managed-users-table tbody tr, .roles-table tbody tr { transition: background-color var(--transition-fast); }
/* ENHANCEMENT: Add striped rows for readability */
.managed-users-table tbody tr:nth-child(even) { background-color: var(--bg-tertiary); }
.managed-users-table tbody tr:hover, .roles-table tbody tr:hover { background-color: color-mix(in srgb, var(--bg-tertiary) 50%, var(--accent-primary-light)); }
.user-info-cell { display: flex; align-items: center; gap: 12px; }
.cell-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-on-accent); flex-shrink: 0; font-weight: 600; border: 2px solid rgba(255,255,255,0.2); }
.cell-avatar.role-admin { background-image: linear-gradient(45deg, var(--accent-danger), #fca5a5); }
.cell-avatar.role-supervisor { background-image: linear-gradient(45deg, var(--accent-warning), #fde047); }
.cell-avatar.role-regular { background-image: linear-gradient(45deg, var(--accent-secondary), #6ee7b7); }
.cell-avatar.role-unloader { background-image: linear-gradient(45deg, var(--accent-info), #7dd3fc); }
.dark-theme .cell-avatar.role-supervisor { color: var(--text-primary); }

.managed-users-table td.actions-cell, .roles-table td.actions-cell { text-align: right; white-space: nowrap; }
.actions-cell .btn-icon { width: 38px; height: 38px; margin-left: 4px; }
.actions-cell .btn-icon svg { width: 18px; height: 18px; }

/* ENHANCEMENT: Responsive kebab menu for actions */
.kebab-menu { position: relative; display: none; }
.kebab-menu summary { list-style: none; cursor: pointer; padding: 4px; }
.kebab-menu summary::-webkit-details-marker { display: none; }
.kebab-menu .kebab-dropdown { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; background-color: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.kebab-menu .kebab-dropdown .btn { justify-content: flex-start; width: 100%; min-height: 40px; box-shadow: none; }
.kebab-menu .kebab-dropdown .btn-danger { background: none; color: var(--accent-danger); }
.kebab-menu .kebab-dropdown .btn-danger:hover { background-color: var(--bg-danger-light); color: var(--accent-danger-hover); }
@media (max-width: 768px) {
    .actions-cell .btn-icon:not(.kebab-toggle) { display: none; }
    .actions-cell .kebab-menu { display: inline-block; }
}

.user-profile-panel { background-color: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px; }
.user-profile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-secondary); }
.user-profile-header h3 { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text-primary); border: none; padding: 0; }
.user-profile-panel h3 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-secondary); }
.profile-details p { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.profile-details p svg { width: 20px; height: 20px; color: var(--text-placeholder); stroke-width: 2; fill: none; stroke: currentColor; flex-shrink: 0; }
.profile-details p strong { font-weight: 600; min-width: 140px; display: inline-flex; align-items: center; gap: 10px; color: var(--text-secondary); }
.permissions-list { list-style: none; padding: 0; font-size: 1.1rem; }
.permissions-list li { padding: 8px 0; display: flex; justify-content: space-between; }
.perm-yes { color: var(--text-success); font-weight: 600; }
.perm-no { color: var(--text-danger); font-weight: 500; }

.user-role-badge, .role-badge { padding: 0.2em 0.6em; font-size: 0.8em; border-radius: var(--radius-sm); font-weight: 600; color: var(--text-on-accent); text-transform: capitalize; letter-spacing: 0.05em; }
.user-role-badge.role-admin, .role-badge.role-admin { background-color: var(--accent-danger); }
.user-role-badge.role-supervisor, .role-badge.role-supervisor { background-color: var(--accent-warning); }
.user-role-badge.role-regular, .role-badge.role-regular { background-color: var(--accent-secondary); }
.user-role-badge.role-unloader, .role-badge.role-unloader { background-color: var(--accent-info); }
.dark-theme .user-role-badge.role-supervisor, .dark-theme .role-badge.role-supervisor { color: var(--text-primary); }
.role-badge.system-role { background-color: var(--text-placeholder); }

.user-status-badge { padding: 0.2em 0.6em; font-size: 0.8em; border-radius: var(--radius-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid transparent; }
.user-status-badge.status-active { background-color: var(--bg-success-light); color: var(--text-success); border-color: color-mix(in srgb, var(--accent-secondary) 30%, transparent); }
.user-status-badge.status-reset { background-color: var(--bg-warning-light); color: var(--text-warning); border-color: color-mix(in srgb, var(--accent-warning) 30%, transparent); }
.roles-table .user-count { font-size: 0.9em; color: var(--text-secondary); }

.permissions-checklist { max-height: 45vh; overflow-y: auto; padding: 10px; background-color: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); }
.permission-group { margin-bottom: 20px; }
.permission-group h4 { font-size: 1rem; color: var(--text-primary); padding-bottom: 8px; border-bottom: 1px solid var(--border-secondary); margin-bottom: 12px; }
.permission-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm); }
.permission-item:hover { background-color: var(--bg-tertiary); }
.permission-item input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.permission-item label { display: block; cursor: pointer; }
.permission-item .perm-desc { font-size: 0.8rem; color: var(--text-secondary); }
/* ENHANCEMENT: Styles for inherited permissions */
.permission-item.inherited { opacity: 0.7; }
.permission-item.inherited label { color: var(--text-secondary); cursor: not-allowed; }

/* --- ENHANCED USER HEADER DROPDOWN (Avatar in header) --- */
.user-dropdown { position: relative; display: inline-block; }
.user-dropdown summary { list-style: none; cursor: pointer; display: block; }
.user-dropdown summary::-webkit-details-marker { display: none; }
.header-avatar-btn .header-avatar { width: 44px; height: 44px; font-size: 1.25rem; transition: all var(--transition-fast); }
.user-dropdown summary:hover .header-avatar, .user-dropdown[open] summary .header-avatar { transform: scale(1.1); box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary); }
.user-dropdown .dropdown-menu { position: absolute; top: calc(100% + 12px); right: 0; background-color: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border: 1px solid var(--border-primary); padding: 8px; min-width: 240px; z-index: 1010; display: flex; flex-direction: column; gap: 4px; transform-origin: top right; visibility: hidden; opacity: 0; transform: scale(0.95) translateY(-5px); transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s; }
.user-dropdown[open] > .dropdown-menu { visibility: visible; opacity: 1; transform: scale(1) translateY(0); transition: opacity 0.2s, transform 0.2s, visibility 0s 0s; }
.user-dropdown .dropdown-header { padding: 10px 14px; text-align: left; }
.user-dropdown .dropdown-header .user-name { font-weight: 600; color: var(--text-primary); display: block; }
.user-dropdown .dropdown-header .user-role { font-size: 0.85rem; color: var(--text-secondary); text-transform: capitalize; }
.user-dropdown .dropdown-divider { border: none; border-top: 1px solid var(--border-secondary); margin: 4px; }
.user-dropdown .dropdown-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; background: none; border: none; color: var(--text-primary); font-size: var(--font-size-sm); font-weight: 500; border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); }
.user-dropdown .dropdown-item:hover:not(:disabled) { background-color: var(--bg-tertiary); color: var(--text-primary); }
.user-dropdown .dropdown-item svg { width: 18px; height: 18px; stroke: currentColor; opacity: 0.7; flex-shrink: 0; }
.user-dropdown .dropdown-item.dropdown-item-danger { color: var(--accent-danger); }
.user-dropdown .dropdown-item.dropdown-item-danger:hover:not(:disabled) { background-color: var(--bg-danger-light); color: var(--accent-danger-hover); }
@media (max-width: 992px) {
    .user-dropdown .dropdown-menu { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; max-width: 100%; min-width: unset; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)); transform-origin: bottom center; }
    .user-dropdown[open] > .dropdown-menu { animation: dropdownSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    @keyframes dropdownSlideUp { from { transform: translateY(100%); opacity: 0.8; } to   { transform: translateY(0%); opacity: 1; } }
}