/* User dropdown component styles (moved out of the view's <style> block). */
.user-dropdown {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    z-index: 10000;
    padding: 10px 0;
}

.delegate-btn, .logout-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: none;
    color: #333;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

.delegate-btn:hover { background: #f5f5f5; }
.delegate-btn i, .logout-btn i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.logout-btn { color: #dc3545; }
.logout-btn:hover { background: #fff5f5; }

/* Email and role sub-labels use Metronic .text-muted (#99A1B7), too light on the
   white dropdown. Darken in light theme only; dark theme is handled centrally. */
:root:not([data-theme="dark"]) .user-dropdown .text-muted {
    color: #6b7280 !important;
}

/* Expandable Delegation Section */
.delegation-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: none;
    color: #333;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

.delegation-toggle-btn:hover { background: #f5f5f5; }
.delegation-toggle-btn .btn-content {
    display: flex;
    align-items: center;
}
.delegation-toggle-btn .btn-content i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.delegation-toggle-btn .caret {
    transition: transform 0.2s;
    font-size: var(--phs-type-label);
    color: #6c757d;
}
.delegation-toggle-btn .caret.rotated { transform: rotate(180deg); }

/* Delegated Users Submenu */
.delegated-users-submenu {
    display: none;
    padding: 5px 0;
    margin-left: 25px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 6px;
    margin-bottom: 5px;
}
.delegated-users-submenu.show { display: block; }
.delegated-users-submenu a {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.2s;
}
.delegated-users-submenu a:hover {
    background: #f0f9ff;
    color: #3b82f6;
}
.delegated-users-submenu a i {
    margin-right: 10px;
    color: #3b82f6;
    width: 16px;
    text-align: center;
}

/* Name stacked over a small muted role label, so long role names never crowd the name. */
.delegated-users-submenu a .impersonate-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.delegated-users-submenu a .impersonate-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delegated-users-submenu a .impersonate-role {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delegated-users-submenu a:hover .impersonate-role {
    color: #3b82f6;
}

.no-delegations {
    padding: 8px 15px;
    color: var(--phs-ink-muted);
    font-size: var(--phs-type-label);
    font-style: italic;
}

.loading-delegations {
    padding: 8px 15px;
    color: #6c757d;
    font-size: var(--phs-type-label);
}
.loading-delegations i { margin-right: 8px; }

/* Revert Button */
.revert-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    background: #fff7ed;
    border: none;
    color: #c2410c;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
    text-decoration: none;
}
.revert-btn:hover {
    background: #ffedd5;
    color: #c2410c;
}
.revert-btn i { margin-right: 10px; }

/* Badge for delegation count */
.delegation-count {
    background: #3b82f6;
    color: white;
    font-size: var(--phs-type-label);
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    display: none;
}
.delegation-count.has-delegations { display: inline-block; }

/* Dark theme: the dropdown sits on a dark panel, so the default action text
   is unreadable. Use light text and dark hover fills so text stays visible on hover.
   The .user-dropdown button.delegate-btn selector must be matched or beaten in
   specificity, so scope these under .user-dropdown too. */
[data-theme="dark"] .user-dropdown button.delegate-btn,
[data-theme="dark"] .user-dropdown .delegate-btn,
[data-theme="dark"] .delegated-users-submenu a {
    color: #e2e8f0;
}

[data-theme="dark"] .user-dropdown button.delegate-btn:hover,
[data-theme="dark"] .user-dropdown .delegate-btn:hover {
    background: #1e2b4a;
    color: #e2e8f0;
}

[data-theme="dark"] .delegated-users-submenu a:hover {
    background: #1e2b4a;
    color: #e2e8f0;
}

/* "View System as Delegated User" (.delegation-toggle-btn) had no dark override, so its
   base #333 rendered at 1.26:1 on the #16213e dropdown — barely legible. Match the
   sibling .delegate-btn (#e2e8f0 = 12.89:1); lighten the caret too (6.20:1). */
[data-theme="dark"] .delegation-toggle-btn {
    color: #e2e8f0;
}

[data-theme="dark"] .delegation-toggle-btn:hover {
    background: #1e2b4a;
    color: #e2e8f0;
}

[data-theme="dark"] .delegation-toggle-btn .caret {
    color: #94a3b8;
}

/* Dark dropdown is #16213e; keep the muted role label readable (light value #64748b
   is too dark on it). */
[data-theme="dark"] .delegated-users-submenu a .impersonate-role {
    color: #94a3b8;
}

/* Log Out action on the dark #16213e dropdown; the light #dc3545 red is too dark. */
[data-theme="dark"] .logout-btn {
    color: #f87171;
}

/* "Revert to My Account" had no dark override, so its light cream highlight (#fff7ed)
   stayed light on the dark #16213e dropdown. Re-skin it as a dark amber highlight so it
   still stands out as the impersonation exit action but follows dark mode. (#fdba74 on
   #2a2016 = 9.46:1.) */
[data-theme="dark"] .revert-btn {
    background: #2a2016;
    color: #fdba74;
}

[data-theme="dark"] .revert-btn:hover {
    background: #362a1c;
    color: #fed7aa;
}