/* ============================================
 头部导航样式
 ============================================ */

:root {
 --header-height: 64px;
 --header-bg: var(--bg-card, #1a2332);
 --header-border: var(--border-color, #2d3748);
 --header-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.app-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 24px;
 height: var(--header-height);
 background: var(--header-bg);
 border-bottom: 1px solid var(--header-border);
 position: sticky;
 top: 0;
 z-index: 1000;
 box-shadow: var(--header-shadow);
 gap: 20px;
}

.header-left {
 display: flex;
 align-items: center;
 gap: 24px;
 flex: 1;
 min-width: 0;
}

.header-logo {
 display: flex;
 align-items: center;
 gap: 10px;
 text-decoration: none;
 color: var(--text-primary, #f0f4f8);
 font-weight: 600;
 font-size: 1.1rem;
 white-space: nowrap;
 flex-shrink: 0;
 transition: all 0.2s;
}

.header-logo:hover {
 color: var(--accent-primary, #3b82f6);
 transform: translateY(-1px);
}

.logo-icon {
 font-size: 1.6rem;
 animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-3px); }
}

.logo-text {
 font-size: 1.1rem;
}

/* 搜索框 */
.search-box {
 flex: 1;
 max-width: 480px;
 min-width: 120px;
}

.search-input {
 width: 100%;
 padding: 10px 16px;
 border: 1px solid var(--header-border);
 border-radius: 8px;
 background: var(--bg-secondary, #111827);
 color: var(--text-primary, #f0f4f8);
 font-size: 0.9rem;
 transition: all 0.2s;
}

.search-input:focus {
 outline: none;
 border-color: var(--accent-primary, #3b82f6);
 box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
 background: var(--bg-primary, #0a0f1c);
}

.search-input::placeholder {
 color: var(--text-muted, #718096);
}

/* 右侧区域 */
.header-right {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-shrink: 0;
}

/* 用户信息 */
.user-info {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 2px;
 padding: 6px 12px;
 background: var(--bg-secondary, #111827);
 border-radius: 8px;
 border: 1px solid var(--header-border);
 transition: all 0.2s;
 min-width: 90px;
}

.user-info:hover {
 border-color: var(--accent-primary, #3b82f6);
 box-shadow: 0 2px 8px rgba(59,130,246,0.15);
}

.user-name {
 font-weight: 600;
 font-size: 0.9rem;
 color: var(--text-primary, #f0f4f8);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 120px;
}

.user-role {
 font-size: 0.75rem;
 padding: 2px 8px;
 border-radius: 10px;
 font-weight: 500;
 white-space: nowrap;
}

.role-admin { background: rgba(16,185,129,0.15); color: #10b981; }
.role-teacher { background: rgba(59,130,246,0.15); color: #3b82f6; }
.role-student { background: rgba(107,114,128,0.15); color: #9ca3af; }
.role-guest { background: rgba(251,191,36,0.15); color: #f59e0b; }

/* 按钮 */
.btn {
 padding: 8px 14px;
 font-size: 0.85rem;
 border-radius: 6px;
 border: none;
 cursor: pointer;
 transition: all 0.2s;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 white-space: nowrap;
 font-family: inherit;
}

.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.btn-primary {
 background: var(--accent-primary, #3b82f6);
 color: #fff;
}
.btn-primary:hover {
 background: var(--accent-primary-hover, #2563eb);
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}
.btn-secondary {
 background: var(--bg-secondary, #111827);
 color: var(--text-primary, #f0f4f8);
 border: 1px solid var(--header-border);
}
.btn-secondary:hover {
 background: var(--bg-tertiary, #1f2937);
 border-color: var(--accent-primary, #3b82f6);
}

/* 主题选择器 */
.theme-selector { position: relative; }

.theme-btn {
 min-width: 110px;
 justify-content: space-between;
 gap: 8px;
}

.dropdown-arrow {
 font-size: 0.65rem;
 transition: transform 0.2s;
}

.theme-selector:hover .dropdown-arrow {
 transform: rotate(180deg);
}

.theme-dropdown-menu {
 display: none;
 position: absolute;
 top: calc(100% + 8px);
 right: 0;
 background: var(--bg-card, #1a2332);
 border: 1px solid var(--header-border);
 border-radius: 8px;
 box-shadow: 0 8px 24px rgba(0,0,0,0.3);
 min-width: 160px;
 z-index: 10001;
 padding: 8px;
 animation: dropdownFade 0.2s ease-out;
}

@keyframes dropdownFade {
 from { opacity: 0; transform: translateY(-8px); }
 to { opacity: 1; transform: translateY(0); }
}

.theme-selector:hover .theme-dropdown-menu { display: block; }

.theme-option {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 12px;
 border-radius: 6px;
 cursor: pointer;
 transition: all 0.15s;
}

.theme-option:hover {
 background: var(--bg-secondary, #111827);
}

.theme-option.active {
 background: rgba(59,130,246,0.15);
}

.theme-icon { font-size: 1.1rem; }
.theme-name { flex: 1; font-size: 0.88rem; color: var(--text-primary, #f0f4f8); }
.theme-check { opacity: 0; color: var(--accent-primary, #3b82f6); font-weight: 700; }
.theme-option.active .theme-check { opacity: 1; }

.hidden { display: none !important; }

/* 响应式 */
@media (max-width: 900px) {
 .app-header { padding: 0 16px; gap: 12px; }
 .header-left { gap: 12px; }
 .search-box { max-width: 280px; }
 .logo-text { display: none; }
 .user-info { min-width: auto; padding: 4px 8px; }
 .user-name { max-width: 80px; }
 #headerThemeName { display: none; }
 .theme-btn { min-width: auto; }
}

@media (max-width: 600px) {
 .app-header { flex-wrap: wrap; height: auto; padding: 12px 12px; }
 .header-left, .header-right { width: 100%; justify-content: space-between; }
 .header-right { margin-top: 10px; }
 .search-box { max-width: 100%; flex: 1; }
 .user-name { max-width: 60px; }
}