/* 前端身分切換功能樣式 */

/* 用戶選單中的身分切換指示器 */
.impersonate-indicator {
    color: #f39c12 !important;
    font-weight: bold !important;
}

.impersonate-status {
    color: #f39c12 !important;
}

.impersonate-status strong {
    color: #e67e22 !important;
}

.impersonate-status small {
    color: #95a5a6 !important;
    font-style: italic !important;
}

/* 停止模擬按鈕樣式 */
.btn-warning.btn-flat {
    background-color: #f39c12 !important;
    border-color: #f39c12 !important;
    color: white !important;
}

.btn-warning.btn-flat:hover {
    background-color: #e67e22 !important;
    border-color: #e67e22 !important;
    color: white !important;
}

/* 用戶選單中的身分切換狀態樣式 */
.user-menu .impersonate-indicator {
    display: inline-block;
    padding: 2px 6px;
    background-color: rgba(243, 156, 18, 0.1);
    border-radius: 3px;
    border: 1px solid rgba(243, 156, 18, 0.3);
}

.user-menu .impersonate-status {
    background-color: rgba(243, 156, 18, 0.05);
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid #f39c12;
}

/* 側邊欄中的身分切換狀態樣式 */
.sidebar .user-panel .impersonate-indicator {
    color: #f39c12 !important;
    font-weight: bold !important;
}

.sidebar .user-panel .text-warning {
    color: #f39c12 !important;
}

.sidebar .user-panel .text-muted {
    color: #95a5a6 !important;
    font-size: 11px;
}

.sidebar .user-panel a.text-warning:hover {
    color: #e67e22 !important;
    text-decoration: none;
}

/* 側邊欄身分切換狀態的響應式設計 */
@media (max-width: 768px) {
    .sidebar .user-panel .text-muted {
        font-size: 10px;
    }

    .user-menu .impersonate-status {
        padding: 6px;
        font-size: 12px;
    }
}

/* 身分切換狀態的動畫效果 */
.impersonate-indicator {
    animation: impersonate-pulse 2s infinite;
}

@keyframes impersonate-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

/* 身分切換狀態的懸停效果 */
.impersonate-status:hover {
    background-color: rgba(243, 156, 18, 0.1) !important;
    transition: background-color 0.3s ease;
}

/* 確保身分切換狀態在深色主題下的可讀性 */
.dark-theme .impersonate-indicator,
.dark-theme .impersonate-status {
    color: #ffa726 !important;
}

.dark-theme .impersonate-status strong {
    color: #ff9800 !important;
}

.dark-theme .impersonate-status small {
    color: #b0bec5 !important;
}

/* 身分切換狀態的輔助功能支援 */
.impersonate-indicator::before {
    content: "⚠️ ";
    speak: "身分切換模式";
}

/* 高對比度模式支援 */
@media (prefers-contrast: high) {
    .impersonate-indicator {
        border: 2px solid #f39c12;
        padding: 1px 4px;
    }

    .impersonate-status {
        border: 1px solid #f39c12;
    }
}

/* 減少動畫模式支援 */
@media (prefers-reduced-motion: reduce) {
    .impersonate-indicator {
        animation: none;
    }

    .impersonate-status:hover {
        transition: none;
    }
}