/*
 * laolicms 网站综合管理系统 v1.0.0
 * 作者：丿king　　联系 QQ：1735737677
 * 本文件作用：前台头部样式（原站 header.php 内联样式原样抽出）
 * 文件路径：application/template/laoli/public/pc/css/header.css
 */

*{margin:0;padding:0;box-sizing:border-box}
body{background:#f0f2f5;font-family:'Segoe UI','Microsoft YaHei',sans-serif;color:#1e293b}
body.dark-mode{background:#0d1117;color:#e6edf3}
.portal-container{max-width:1300px;margin:0 auto;padding:20px;position:relative}
body.dark-mode ::-webkit-scrollbar{background:#0d1117}
body.dark-mode ::-webkit-scrollbar-track{background:#0d1117}
body.dark-mode ::-webkit-scrollbar-thumb{background:#30363d;border-radius:4px}
body.dark-mode ::-webkit-scrollbar-thumb:hover{background:#484f58}
body {
    padding-top: 50px;
}

@media (max-width: 768px) {
    body {
        padding-top: 50px;
    }
}
/* ===== 用户菜单（整合导航样式，只显示小头像） ===== */
.techs-nav .user-menu {
    position: relative;
    display: inline-block;
    list-style: none;
}
.techs-nav .user-menu > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 18px 12px;
    color: #1e293b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.techs-nav .user-menu > a:hover {
    color: #3b82f6;
    background: #eff6ff;
}
body.dark-mode .techs-nav .user-menu > a {
    color: #e6edf3;
}
body.dark-mode .techs-nav .user-menu > a:hover {
    color: #58a6ff;
    background: #1c2333;
}
.techs-nav .user-menu .user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e8ecf1;
    display: block;
}
.techs-nav .user-menu .user-icon {
    font-size: 22px;
    color: #666;
}
body.dark-mode .techs-nav .user-menu .user-icon {
    color: #8b949e;
}
.techs-nav .user-menu .fa-chevron-down {
    font-size: 10px;
    color: #999;
    margin-left: 2px;
}

/* 用户下拉菜单 */
.techs-nav .user-menu .dropdown-menu {
    min-width: 250px;
    padding: 8px 0;
    right: 0;
    left: auto;
}
.techs-nav .user-menu .dropdown-menu .user-info-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: default;
    list-style: none;
    width: 100%;
}
body.dark-mode .techs-nav .user-menu .dropdown-menu .user-info-header {
    border-bottom-color: #21262d;
}
.techs-nav .user-menu .dropdown-menu .user-info-header .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e8ecf1;
    flex-shrink: 0;
}
body.dark-mode .techs-nav .user-menu .dropdown-menu .user-info-header .avatar {
    border-color: #30363d;
}
.techs-nav .user-menu .dropdown-menu .user-info-header .info {
    flex: 1;
    min-width: 0;
}
.techs-nav .user-menu .dropdown-menu .user-info-header .info .name {
    font-size: 14px;
    font-weight: 600;
    color: #1a2332;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.dark-mode .techs-nav .user-menu .dropdown-menu .user-info-header .info .name {
    color: #e6edf3;
}
/* ===== 优化：等级和积分换行，增加图标 ===== */
.techs-nav .user-menu .dropdown-menu .user-info-header .info .detail {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    line-height: 1.6;
}
body.dark-mode .techs-nav .user-menu .dropdown-menu .user-info-header .info .detail {
    color: #8b949e;
}
.techs-nav .user-menu .dropdown-menu .user-info-header .info .detail .level-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #eef2ff;
    padding: 0 8px;
    border-radius: 10px;
    color: #4f46e5;
    font-weight: 500;
}
body.dark-mode .techs-nav .user-menu .dropdown-menu .user-info-header .info .detail .level-item {
    background: #1c2333;
    color: #818cf8;
}
.techs-nav .user-menu .dropdown-menu .user-info-header .info .detail .level-item i {
    font-size: 11px;
}
.techs-nav .user-menu .dropdown-menu .user-info-header .info .detail .jifen-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #fef3c7;
    padding: 0 8px;
    border-radius: 10px;
    color: #d97706;
    font-weight: 500;
}
body.dark-mode .techs-nav .user-menu .dropdown-menu .user-info-header .info .detail .jifen-item {
    background: #1c1a0d;
    color: #fbbf24;
}
.techs-nav .user-menu .dropdown-menu .user-info-header .info .detail .jifen-item i {
    font-size: 11px;
}
.techs-nav .user-menu .dropdown-menu .user-info-header .info .detail span {
    font-weight: 600;
}
.techs-nav .user-menu .dropdown-menu .user-info-header .logout-btn {
    display: inline-block;
    padding: 3px 12px;
    background: #f44336;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .2s;
}
.techs-nav .user-menu .dropdown-menu .user-info-header .logout-btn:hover {
    background: #d32f2f;
}
.techs-nav .user-menu .dropdown-menu .logout-link {
    color: #f44336 !important;
}
.techs-nav .user-menu .dropdown-menu .logout-link:hover {
    background: #fef2f2 !important;
    color: #d32f2f !important;
}
body.dark-mode .techs-nav .user-menu .dropdown-menu .logout-link:hover {
    background: #2d1b1b !important;
}

/* 四个功能：两个一排 - 优化图标 */
.techs-nav .user-menu .dropdown-menu .user-menu-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 6px;
    padding: 8px 12px;
    list-style: none;
    width: 100%;
}
.techs-nav .user-menu .dropdown-menu .user-menu-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    background: #f8f9fc;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 12px;
    transition: all .25s;
    gap: 3px;
    min-height: 56px;
}
body.dark-mode .techs-nav .user-menu .dropdown-menu .user-menu-grid a {
    background: #0d1117;
    color: #c9d1d9;
}
.techs-nav .user-menu .dropdown-menu .user-menu-grid a:hover {
    background: #eff6ff;
    color: #198cff;
    transform: translateY(-1px);
}
body.dark-mode .techs-nav .user-menu .dropdown-menu .user-menu-grid a:hover {
    background: #1c2333;
    color: #58a6ff;
}
.techs-nav .user-menu .dropdown-menu .user-menu-grid a .menu-icon {
    font-size: 18px;
    color: #198cff;
    display: block;
    line-height: 1.2;
}
body.dark-mode .techs-nav .user-menu .dropdown-menu .user-menu-grid a .menu-icon {
    color: #58a6ff;
}
.techs-nav .user-menu .dropdown-menu .user-menu-grid a .menu-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

/* ===== 导航菜单样式 ===== */
.techs-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
body.dark-mode .techs-header{background:#161b22;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.techs-container{max-width:1400px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.techs-logo img{height:45px}

/* ===== 汉堡菜单（PC默认隐藏） ===== */
.techs-hamburger {
    display: none;
    flex-direction: column;
    width: 28px;
    height: 20px;
    cursor: pointer;
    z-index: 1001;
}
.techs-hamburger span {
    height: 2px;
    background: #1e293b;
    margin: 2px 0;
    border-radius: 2px;
    transition: all .3s;
}
body.dark-mode .techs-hamburger span {
    background: #e6edf3;
}
.techs-hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.techs-hamburger.active span:nth-child(2) {
    opacity: 0;
}
.techs-hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.nav-wrapper{flex:1}
.techs-nav{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.techs-nav>li{position:relative;display:inline-block}
.techs-nav>li>a{display:block;padding:18px 16px;color:#1e293b;text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer}
body.dark-mode .techs-nav>li>a{color:#e6edf3}
.techs-nav>li>a:hover{color:#3b82f6;background:#eff6ff}
body.dark-mode .techs-nav>li>a:hover{color:#58a6ff;background:#1c2333}
.techs-nav>li>a i{margin-right:4px}
.techs-nav .dropdown-menu{position:absolute;top:100%;left:0;background:#fff;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.1);opacity:0;visibility:hidden;transition:all .2s ease;z-index:1001;border:1px solid #eef2f6;padding:10px;list-style:none;display:flex;flex-wrap:wrap;width:auto;min-width:200px;max-width:500px}
body.dark-mode .techs-nav .dropdown-menu{background:#161b22;box-shadow:0 10px 25px rgba(0,0,0,.5);border-color:#21262d}
@media(min-width:1001px){.techs-nav li:hover>.dropdown-menu{opacity:1;visibility:visible}}
.techs-nav .dropdown-menu li{display:block;width:auto;flex:0 0 auto;box-sizing:border-box}
.techs-nav .dropdown-menu li a{display:block;padding:6px 12px;color:#475569;text-decoration:none;font-size:13px;transition:all .2s;border-radius:6px;white-space:nowrap;cursor:pointer}
body.dark-mode .techs-nav .dropdown-menu li a{color:#c9d1d9}
.techs-nav .dropdown-menu li a:hover{background:#eff6ff;color:#3b82f6}
body.dark-mode .techs-nav .dropdown-menu li a:hover{background:#1c2333;color:#58a6ff}
.techs-nav .dropdown-menu .divider{width:100%;height:1px;background:#eef2f6;margin:6px 0}
body.dark-mode .techs-nav .dropdown-menu .divider{background:#21262d}
.techs-nav .dropdown-menu .all-link{width:100%;text-align:center;background:#f8fafc;margin-top:6px;border-radius:8px}
body.dark-mode .techs-nav .dropdown-menu .all-link{background:#0d1117}
.techs-nav .dropdown-menu .all-link a{text-align:center;font-weight:600;color:#3b82f6;font-size:13px}
body.dark-mode .techs-nav .dropdown-menu .all-link a{color:#58a6ff}
.techs-nav .dropdown-menu .tool-section-title{width:100%;padding:2px 12px 6px;color:#94a3b8;font-size:11px;font-weight:600;letter-spacing:1px;border-bottom:1px solid #eef2f6;display:flex;align-items:center;gap:4px}
body.dark-mode .techs-nav .dropdown-menu .tool-section-title{color:#8b949e;border-color:#21262d}
.techs-nav .dropdown-menu .tool-section-title.tool-section-top{border-top:1px solid #eef2f6;margin-top:6px;padding-top:8px}
body.dark-mode .techs-nav .dropdown-menu .tool-section-title.tool-section-top{border-color:#21262d}
.techs-nav .dropdown-menu .tools-wrap{width:100%;display:flex;flex-wrap:wrap;gap:0}
.techs-nav .dropdown-menu .tools-wrap a{flex:0 0 auto;padding:6px 12px;display:block;color:#475569;text-decoration:none;font-size:13px;transition:all .2s;border-radius:6px;white-space:nowrap;cursor:pointer}
body.dark-mode .techs-nav .dropdown-menu .tools-wrap a{color:#c9d1d9}
.techs-nav .dropdown-menu .tools-wrap a:hover{background:#eff6ff;color:#3b82f6}
body.dark-mode .techs-nav .dropdown-menu .tools-wrap a:hover{background:#1c2333;color:#58a6ff}
.techs-weather-item{cursor:pointer;padding:18px 10px;position:relative;display:inline-block;color:#1e293b}
body.dark-mode .techs-weather-item{color:#e6edf3}
.weather-date-modal{position:absolute;top:100%;right:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.1);display:none;z-index:1002;border:1px solid #eef2f6}
body.dark-mode .weather-date-modal{background:#161b22;box-shadow:0 10px 25px rgba(0,0,0,.5);border-color:#21262d}
.weather-date-modal.show{display:block}
.modal-date-bar{padding:12px;text-align:center;border-bottom:1px solid #eef2f6;font-weight:500;color:#1e293b}
body.dark-mode .modal-date-bar{border-color:#21262d;color:#e6edf3}
.modal-weather-area{padding:10px}
.modal-weather-iframe{width:100%;height:280px;border:none}

/* ===== 移动端自适应 ===== */
@media(max-width:1000px){
    .techs-hamburger {
        display: flex !important;
    }
    .nav-wrapper {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        overflow-y: auto;
        display: none !important;
        z-index: 999;
        padding: 10px 0;
        width: 100%;
    }
    body.dark-mode .nav-wrapper {
        background: #161b22;
    }
    .nav-wrapper.active {
        display: block !important;
    }
    .techs-nav {
        flex-direction: column;
    }
    .techs-nav > li {
        width: 100%;
        border-bottom: 1px solid #eef2f6;
        position: relative;
    }
    body.dark-mode .techs-nav > li {
        border-color: #21262d;
    }
    .techs-nav > li > a {
        padding: 14px 20px;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .techs-nav > li > a .fa-chevron-down {
        transition: transform .3s;
    }
    .techs-nav > li.active > a .fa-chevron-down {
        transform: rotate(180deg);
    }
    .techs-nav .dropdown-menu {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        display: none !important;
        width: 100%;
        min-width: auto;
        max-width: none;
        padding: 10px 0 10px 30px;
        border: none;
        border-radius: 0;
    }
    .techs-nav > li.active .dropdown-menu {
        display: flex !important;
        flex-wrap: wrap;
    }
    .techs-nav .dropdown-menu li {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .techs-nav .dropdown-menu li a {
        padding: 10px 12px;
        font-size: 14px;
        white-space: normal;
    }
    .techs-weather-item {
        display: block;
        padding: 14px 20px;
    }
    .techs-weather-item .weather-date-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 320px;
        z-index: 10000;
    }
    .techs-nav .dropdown-menu .tools-wrap {
        flex-direction: column;
        width: 100%;
    }
    .techs-nav .dropdown-menu .tools-wrap a {
        flex: 0 0 100%;
        width: 100%;
        white-space: normal;
        padding: 10px 12px;
        font-size: 14px;
    }
    /* 用户菜单移动端 */
    .techs-nav .user-menu {
        width: 100%;
        border-bottom: 1px solid #eef2f6;
    }
    body.dark-mode .techs-nav .user-menu {
        border-color: #21262d;
    }
    .techs-nav .user-menu > a {
        padding: 14px 20px;
        font-size: 13px;
        justify-content: space-between;
    }
    .techs-nav .user-menu .dropdown-menu {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        display: none !important;
        width: 100%;
        min-width: auto;
        max-width: none;
        padding: 10px 0 10px 20px;
        border: none;
        border-radius: 0;
    }
    .techs-nav .user-menu.active .dropdown-menu {
        display: block !important;
    }
    .techs-nav .user-menu .dropdown-menu .user-info-header {
        padding: 8px 12px;
        flex-wrap: wrap;
    }
    .techs-nav .user-menu .dropdown-menu .user-menu-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 4px;
        padding: 8px 12px;
    }
    .techs-nav .user-menu .dropdown-menu .user-menu-grid a {
        padding: 10px 6px;
        font-size: 13px;
        min-height: 48px;
    }
    .techs-nav .user-menu .dropdown-menu .user-menu-grid a .menu-icon {
        font-size: 16px;
    }
    .techs-nav .user-menu .dropdown-menu .user-menu-grid a .menu-label {
        font-size: 11px;
    }
    .techs-nav .user-menu .dropdown-menu li {
        width: 100% !important;
    }
    .techs-nav .user-menu .dropdown-menu li a {
        padding: 10px 12px;
        font-size: 14px;
        white-space: normal;
    }
}
@media(max-width:480px){
    .techs-nav .user-menu .dropdown-menu .user-menu-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 4px;
        padding: 6px 10px;
    }
    .techs-nav .user-menu .dropdown-menu .user-menu-grid a {
        padding: 8px 4px;
        font-size: 11px;
        min-height: 44px;
    }
    .techs-nav .user-menu .dropdown-menu .user-menu-grid a .menu-icon {
        font-size: 15px;
    }
    .techs-nav .user-menu .dropdown-menu .user-info-header .avatar {
        width: 36px;
        height: 36px;
    }
    .techs-nav .user-menu .dropdown-menu .user-info-header .info .name {
        font-size: 13px;
    }
    .techs-nav .user-menu .dropdown-menu .user-info-header .info .detail {
        font-size: 11px;
        gap: 4px 8px;
    }
}