/* ================================ */
/* 1. 全局配置与变量 (CSS Variables) */
/* ================================ */
:root {
    --primary-color: #0056b3;
    --primary-hover: #004494;
    --bg-color: #f4f7f6;
    --text-dark: #333;
    --text-light: #aaa;
    --white: #fff;
    --dark: #222;
}

html[data-theme="light"] {
    --primary-color: var(--pt-header, #0056b3);
    --primary-hover: var(--pt-header-2, #004494);
    --bg-color: var(--pt-bg, #f4f7f6);
    --text-dark: var(--pt-text, #333);
    --text-light: var(--pt-muted, #aaa);
    --white: var(--pt-panel, #fff);
    --dark: #1a2332;
}

html[data-theme="dark"] {
    --primary-color: var(--pt-header, #0d3a6e);
    --primary-hover: var(--pt-header-2, #0a2f5a);
    --bg-color: var(--pt-bg, #1a2332);
    --text-dark: var(--pt-text, #e8eef6);
    --text-light: var(--pt-muted, #8fa3bc);
    --white: var(--pt-panel, #1c2738);
    --dark: #0b1220;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-dark); 
    line-height: 1.6; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    overflow-x: hidden;
}

main { 
    flex: 1; 
    width: 100%; 
    padding: 15px;
    box-sizing: border-box;
}

/* ================================ */
/* 2. 导航栏与组件样式 */
/* ================================ */
.site-header {
    background: var(--primary-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px; 
}

.logo { 
    color: #ffffff; 
    font-size: 20px; 
    font-weight: bold; 
    letter-spacing: 1px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.logo:hover { opacity: 0.8; }

.nav-links { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    gap: 20px; 
}

.nav-links a { 
    color: rgba(255,255,255,0.9); 
    text-decoration: none; 
    font-weight: 500; 
    font-size: 15px;
    transition: color 0.3s, background 0.3s;
    padding: 6px 12px;
    border-radius: 20px;
}

.nav-links a:hover { 
    color: #ffffff; 
    background: rgba(255,255,255,0.15);
}

/* 用户菜单 */
.user-menu { position: relative; cursor: pointer; }
.user-name { color: #ffffff; font-weight: bold; padding: 10px; display: block; }

.dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--white);
    list-style: none;
    padding: 10px 0;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: none; 
    width: 120px;
}

.user-menu:hover .dropdown { display: block; }

/* 菜单链接：无需 !important，利用父级选择器优先级 */
.dropdown li a {
    color: var(--text-dark);
    display: block;
    padding: 8px 15px;
    font-size: 14px;
    text-decoration: none;
}

.dropdown li a:hover { background: var(--pt-hover, #f4f4f4); color: var(--primary-color); }

/* ================================ */
/* 3. 搜索与布局 */
/* ================================ */
.login-wrapper { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex: 1; 
}

.search-container { text-align: center; margin: 40px auto; max-width: 600px; padding: 0 15px; }

.search-form { 
    display: flex; 
    background: #fff; 
    border-radius: 0; 
    padding: 0; 
    box-shadow: none;
    border: 2px solid #0b2d6b;
}

.search-box { 
    flex: 1; 
    padding: 12px 14px; 
    border: none; 
    border-radius: 0; 
    outline: none; 
    font-size: 16px; 
    background: #fff;
}

.search-btn { 
    padding: 12px 22px; 
    background: #0b2d6b; 
    color: #fff; 
    border: none; 
    border-radius: 0; 
    cursor: pointer; 
    font-size: 15px; 
    font-weight: 700; 
}

.search-btn:hover { background: var(--primary-hover); }

/* ================================ */
/* 4. 底部栏 */
/* ================================ */
.site-footer {
    background: var(--dark);
    color: var(--text-light);
    text-align: center;
    padding: 10px 20px;
    flex-shrink: 0;
    margin-top: 40px;
}

.site-footer p { 
    margin: 2px 0; 
    font-size: 13px; 
}

.footer-sub { font-size: 12px; font-family: monospace; color: #777; }

/* ================================ */
/* 导航页 / 登录页主题覆盖 */
/* ================================ */
html[data-theme] body {
    background-color: var(--bg-color);
    color: var(--text-dark);
}
html[data-theme] .login-wrapper { background: transparent; }
html[data-theme] .login-card,
html[data-theme] .nav-card {
    background: var(--white) !important;
    color: var(--text-dark) !important;
    border-color: var(--pt-border, #eee) !important;
    box-shadow: 0 4px 15px var(--pt-shadow, rgba(0,0,0,0.05)) !important;
}
html[data-theme] .login-card h2,
html[data-theme] .nav-title {
    color: var(--pt-accent, #0056b3) !important;
}
html[data-theme] .nav-desc { color: var(--pt-muted, #777) !important; }
html[data-theme] .login-input {
    background: var(--pt-input-bg, #fff);
    color: var(--text-dark);
    border-color: var(--pt-border, #ddd);
}
html[data-theme="dark"] .dash-header {
    background: linear-gradient(135deg, #0d3a6e, #1270c4) !important;
}
html[data-theme="dark"] .error-msg {
    background: #3a1a1a;
    color: #fca5a5;
}
html[data-theme="dark"] .site-footer {
    background: #0b1220;
}
html[data-theme="dark"] .footer-sub { color: #7f93ab; }

html[data-theme] .ss-card,
html[data-theme] .card,
html[data-theme] .panel,
html[data-theme] .settings-card,
html[data-theme] .settings-tabs,
html[data-theme] .settings-actions,
html[data-theme] .sla-group,
html[data-theme] .nav-item-card,
html[data-theme] table {
    background: var(--white) !important;
    color: var(--text-dark) !important;
    border-color: var(--pt-border, #e2e8f0) !important;
}
html[data-theme] .settings-card h3,
html[data-theme] .sla-group h5,
html[data-theme] .nav-item-hd .idx {
    color: var(--pt-accent, #0056b3) !important;
}
html[data-theme] .settings-card .cat-desc,
html[data-theme] .settings-section .sec-desc,
html[data-theme] .settings-hint,
html[data-theme] .settings-tab small {
    color: var(--pt-muted, #888) !important;
}
html[data-theme] .settings-tab {
    color: var(--text-dark) !important;
    border-color: var(--pt-border, #eee) !important;
}
html[data-theme] .settings-tab:hover { background: var(--pt-hover, #f4f8fc) !important; }
html[data-theme] .settings-tab.active {
    background: var(--pt-panel-2, #e8f1fb) !important;
    color: var(--pt-accent, #0056b3) !important;
    border-color: var(--pt-border, #c9ddf5) !important;
}
html[data-theme] .subtab {
    background: var(--pt-panel-2, #f8fafc) !important;
    color: var(--text-dark) !important;
    border-color: var(--pt-border, #dbe5f0) !important;
}
html[data-theme] .subtab.active {
    background: var(--pt-accent, #0056b3) !important;
    border-color: var(--pt-accent, #0056b3) !important;
    color: #fff !important;
}
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea,
html[data-theme] .field input,
html[data-theme] .field textarea,
html[data-theme] .field select {
    background: var(--pt-input-bg, #fff) !important;
    color: var(--text-dark) !important;
    border-color: var(--pt-border, #ddd) !important;
}
html[data-theme] .field label,
html[data-theme] .sla-row .prio-label,
html[data-theme] .settings-section h4 {
    color: var(--text-dark) !important;
}
html[data-theme="dark"] .settings-tab.active {
    background: rgba(18, 112, 196, 0.22) !important;
    color: #7db7ff !important;
}

/* ================================ */
/* 5. 响应式适配 */
/* ================================ */
@media (max-width: 768px) {
    .nav-container { flex-direction: column; gap: 15px; }
    .nav-links { width: 100%; justify-content: space-between; gap: 5px; }
    .nav-links a { 
        display: block;
        text-align: center;
        background: rgba(255,255,255,0.05);
        border-radius: 6px;
        padding: 8px 5px;
        font-size: 14px;
    }
    table { display: block; overflow-x: auto; white-space: nowrap; }
    .search-btn { padding: 12px 15px; }
}