/* =============================
   聚创前台公共样式
   基础样式


   工作台、成果录入、收入明细等页面 


   所有前台页面共用
   ============================= */

:root {
    --g: #207046;
    --dark: #153c2a;
    --bg: #f5f8f4;
    --line: #dce8dc;
    --muted: #68796d;
    --text: #1d3024;
    --white: #fff;
}



* {
    box-sizing: border-box
}


body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.6 Arial, "Microsoft YaHei", sans-serif;
}



a {
    color: inherit;
}



/* 顶部导航 */
/* =========================================
   公共导航统一布局
   ========================================= */
   
   .nav {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-menu {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    white-space: nowrap;
}


.nav-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-left: 0;
    color: #315340;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.nav-menu a:hover {
    color: var(--g);
}

.nav-menu .btn {
    min-height: 38px;
    margin-top: 0;
    padding: 0 15px;
    border-radius: 10px;
    background: var(--g);
    color: #fff !important;
    box-shadow: 0 5px 12px rgba(32, 112, 70, .15);
}

.nav-menu .btn:hover {
    background: #185d39;
    color: #fff !important;
}


.nav a {
    color: #315340;
    margin-left: 18px;
    font-weight: bold;
    text-decoration: none;
}

.nav a:hover {
    color: var(--g);
}

.brand {
    color: var(--dark);
    font-size: 19px;
    font-weight: 800;
    text-decoration: none;
}




.user-name {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: #53685a;
    font-size: 13px;
    font-weight: 600;
}





/* 页面容器和侧边栏 */
.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 22px;
}

.shell {
    display: flex;
    min-height: 100vh;
}

.side {
    width: 224px;
    flex: 0 0 224px;
    background: #f1f5f0;
    border-right: 1px solid var(--line);
    padding: 28px 18px;
}

.side p {
    margin: 28px 10px 8px;
    color: #748477;
    font-size: 12px;
}

.side a {
    display: block;
    margin: 5px 0;
    padding: 10px 12px;
    border-radius: 10px;
    color: #46604d;
    font-weight: bold;
    text-decoration: none;
}

.side a:hover,
.side a.active {
    background: var(--white);
    /* color: var(--g); */
    color: #ee780a;    /* 直接写死亮绿色，不用 var(--g) */
}




.nav-menu a.active {
    /* background: var(--white); */
    /* color: var(--g); */
    color: #ee780a;    /* 直接写死亮绿色，不用 var(--g) */
}





.main {
    width: calc(100% - 224px);
    padding: 30px max(3vw, 25px);
}





/* 通用内容组件 */
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 17px;
    padding: 19px;
}

.card h2 {
    margin: 0 0 4px;
    font: 22px Georgia, "STSong", serif;
}

.card p {
    color: var(--muted);
}

.card a {
    color: var(--g);
    font-weight: bold;
    text-decoration: none;
}

.grid {
    display: grid;
    gap: 17px;
    margin-top: 20px;
}

.two {
    grid-template-columns: 1.1fr .9fr;
}

.item {
    margin: 8px 0;
    padding: 12px;
    border: 1px solid #e4ece3;
    border-radius: 11px;
}

.item b {
    font-size: 15px;
}

.meta,
.hint {
    color: var(--muted);
    font-size: 12px;
}

.hint {
    margin: 0 0 14px;
}

.pill {
    display: inline-block;
    margin: 4px 3px 0 0;
    padding: 2px 7px;
    border-radius: 9px;
    background: #eaf4eb;
    color: var(--g);
    font-size: 11px;
    font-weight: bold;
}

.hero {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 27px;
    border-radius: 22px;
    background: linear-gradient(125deg, #133b28, var(--g));
    color: var(--white);
}

.hero h1 {
    margin: 8px 0;
    font: 30px Georgia, "STSong", serif;
}

.hero p {
    max-width: 560px;
    color: #cde2d2;
}

.stats {
    display: flex;
    gap: 10px;
}

.stat {
    min-width: 88px;
    padding: 12px;
    border-radius: 12px;
    background: #ffffff17;
}

.stat b {
    display: block;
    font-size: 21px;
}

.empty {
    padding: 19px;
    border: 1px dashed #d3e2d3;
    border-radius: 12px;
    color: #6d7e70;
    text-align: center;
}








/* 表单和按钮 */
label {
    display: block;
    margin: 9px 0 4px;
    color: #597061;
    font-size: 12px;
    font-weight: bold;
}

input,
select,
textarea {
    width: 100%;
    padding: 9px;
    border: 1px solid #d7e4d7;
    border-radius: 9px;
    background: #fbfdfb;
    font: inherit;
}

textarea {
    min-height: 72px;
}

.btn {
    margin-top: 11px;
    padding: 10px 13px;
    border: 0;
    border-radius: 9px;
    background: var(--g);
    color: var(--white) !important;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.btn.gold {
    background: #b7852d;
}





/*  在index\view\kpi\workspace.html页面样式追加 */
.status-approved {
    background: #e6f4ea;
    color: #207046;
}

.status-pending {
    background: #fff4d8;
    color: #986b18;
}

.status-rejected {
    background: #fdeaea;
    color: #a33a3a;
}

.reject-reason {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid #c65353;
    border-radius: 7px;
    background: #fff5f5;
    color: #8e3d3d;
    line-height: 1.6;
}





/* 退出按钮样式 */
.logout-form {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: #53685a;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.logout-button:hover {
    color: #b0443f;
}








/* 所有页面的通用移动端样式 */
/* 【修改记录】2026-09-17 需求1：导航栏手机端显示不全修复
   原问题：手机端(375px宽度)导航栏菜单项总宽(约474px)超过容器宽度(308px)，
           导致"后台管理"和"退出"按钮被挤出屏幕右侧不可见，用户也不知道可以横向滑动。
   修复方案：让导航栏在手机端自动换行——
     1. .nav 加 flex-wrap:wrap → 品牌名"聚创网"单独占第一行
     2. .nav-menu 设 flex:1 1 100% → 菜单容器占满第二行全部宽度
     3. .nav-menu 加 flex-wrap:wrap → 菜单项自动换行，全部可见
     4. 去掉 overflow-x:auto → 不再需要横向滚动
   注：本修复只影响 @media (max-width:800px) 即手机端，PC端布局保持不变 */
@media (max-width: 800px) {


    .nav {
        min-height: 62px;
        flex-wrap: wrap;            /* 【2026-09-17新增】允许换行：品牌第一行，菜单第二行 */
        align-items: center;
        gap: 6px 12px;              /* 【2026-09-17修改】行间距6px 列间距12px 更紧凑 */
        padding: 8px 0;
    }

    .brand {
        flex: 0 0 auto;             /* 【2026-09-17新增】品牌名不收缩，独占第一行 */
        font-size: 17px;
    }

    .nav-menu {
        flex: 1 1 100%;             /* 【2026-09-17新增】菜单容器占满整行宽度 */
        overflow-x: visible;        /* 【2026-09-17修改】由auto改为visible，不再横向滚动 */
        justify-content: flex-start;
        flex-wrap: wrap;            /* 【2026-09-17新增】菜单项自动换行，全部显示 */
        white-space: normal;        /* 【2026-09-17新增】允许文字换行 */
        gap: 6px 14px;              /* 【2026-09-17修改】菜单项间距更紧凑 */
    }

    .nav-menu .btn {
        min-height: 30px;           /* 【2026-09-17修改】由34px改为30px，更紧凑 */
        padding: 0 12px;
    }

    .nav-menu a,
    .user-name,
    .logout-button {
        font-size: 12px;
    }

   


    .shell {
        display: block;
    }

    .side {
        width: 100%;
        padding: 13px;
    }

    .side p {
        display: none;
    }

    .side a {
        display: inline-block;
    }

    .main {
        width: 100%;
        padding: 17px;
    }

    .hero {
        display: block;
    }

    .stats {
        margin-top: 16px;
    }

    .two {
        grid-template-columns: 1fr;
    }
}