/* ============================================

   团队预算看板 - 财务专业风格

   参考 Actual Budget 设计哲学

   ============================================ */



/* CSS 变量 - 语义化颜色 Token */

:root {

    /* 主色 */

    --color-primary: #1e3a5f;

    --color-primary-hover: #2c5282;

    --color-accent: #3182ce;

    

    /* 语义色 */

    --color-success: #276749;

    --color-success-bg: #f0fff4;

    --color-warning: #c05621;

    --color-warning-bg: #fffaf0;

    --color-danger: #9b2c2c;

    --color-danger-bg: #fff5f5;

    

    /* 中性色 */

    --color-bg: #f7f9fc;

    --color-surface: #ffffff;

    --color-border: #e2e8f0;

    --color-text: #2d3748;

    --color-text-secondary: #718096;

    --color-text-muted: #a0aec0;

    

    /* 间距 */

    --space-xs: 4px;

    --space-sm: 8px;

    --space-md: 16px;

    --space-lg: 24px;

    --space-xl: 32px;

    

    /* 圆角 */

    --radius-sm: 4px;

    --radius-md: 6px;

    

    /* 阴影 - 轻微 */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);

}



/* 全局样式 */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    background: var(--color-bg);

    color: var(--color-text);

    font-size: 14px;

    line-height: 1.6;

}



/* 数字使用等宽字体 - 财务数据对齐关键 */

.stat-value,

.category-stats,

td.amount,

.alert-amount {

    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', monospace;

    font-variant-numeric: tabular-nums;

    letter-spacing: -0.02em;

}



/* 导航栏 - 深蓝纯色，不用渐变 */

.navbar {

    background: var(--color-primary);

    padding: 0;

    box-shadow: var(--shadow-sm);

}



.nav-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--space-lg);

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 56px;

}



.nav-brand {

    font-size: 16px;

    font-weight: 600;

    color: #ffffff;

    text-decoration: none;

    letter-spacing: 0.02em;

}



.nav-menu {

    display: flex;

    gap: 0;

}



.nav-link {

    color: rgba(255, 255, 255, 0.8);

    text-decoration: none;

    padding: 8px 16px;

    font-size: 14px;

    transition: all 0.15s;

    border-radius: var(--radius-sm);

}



.nav-link:hover {

    color: #ffffff;

    background: rgba(255, 255, 255, 0.1);

}



/* 容器 */

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: var(--space-lg);

}



/* 统计卡片 - 扁平，细边框 */

.stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: var(--space-md);

    margin-bottom: var(--space-lg);

}



.stat-card {

    background: var(--color-surface);

    padding: var(--space-lg);

    border-radius: var(--radius-md);

    border: 1px solid var(--color-border);

    box-shadow: var(--shadow-sm);

}



.stat-label {

    font-size: 13px;

    color: var(--color-text-secondary);

    margin-bottom: var(--space-sm);

    font-weight: 500;

}



.stat-value {

    font-size: 24px;

    font-weight: 600;

    color: var(--color-text);

}



/* 进度条列表 */

.progress-list {

    background: var(--color-surface);

    border-radius: var(--radius-md);

    padding: var(--space-lg);

    border: 1px solid var(--color-border);

}



.progress-item {

    margin-bottom: var(--space-lg);

    padding-bottom: var(--space-lg);

    border-bottom: 1px solid var(--color-border);

}



.progress-item:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: none;

}



.progress-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: var(--space-sm);

}



.category-name {

    font-weight: 600;

    color: var(--color-text);

}



.category-stats {

    font-size: 13px;

    color: var(--color-text-secondary);

}



.percentage {

    font-weight: 600;

    color: var(--color-text);

}



/* 进度条 - 纯色，无渐变 */

.progress-bar {

    width: 100%;

    height: 8px;

    background: #edf2f7;

    border-radius: 4px;

    overflow: hidden;

}



.progress-fill {

    height: 100%;

    border-radius: 4px;

    transition: width 0.5s ease;

}



.progress-footer {

    font-size: 12px;

    color: var(--color-text-muted);

    margin-top: var(--space-xs);

}



/* 表格 - 经典财务表格 */

.table {

    width: 100%;

    background: var(--color-surface);

    border-radius: var(--radius-md);

    border: 1px solid var(--color-border);

    border-collapse: collapse;

    overflow: hidden;

}



.table th {

    background: #f8fafc;

    padding: 12px 16px;

    text-align: left;

    font-weight: 600;

    font-size: 13px;

    color: var(--color-text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.03em;

    border-bottom: 1px solid var(--color-border);

}



.table td {

    padding: 12px 16px;

    border-bottom: 1px solid var(--color-border);

    font-size: 14px;

}



.table tr:last-child td {

    border-bottom: none;

}



.table tr:hover {

    background: #f8fafc;

}



/* 按钮 - 扁平 */

.btn {

    padding: 8px 16px;

    border: none;

    border-radius: var(--radius-sm);

    cursor: pointer;

    font-size: 14px;

    font-weight: 500;

    transition: all 0.15s;

    display: inline-flex;

    align-items: center;

    gap: 4px;

}



.btn-primary {

    background: var(--color-primary);

    color: white;

}



.btn-primary:hover {

    background: var(--color-primary-hover);

}



.btn-success {

    background: var(--color-success);

    color: white;

}



.btn-success:hover {

    background: #22543d;

}



.btn-danger {

    background: var(--color-danger);

    color: white;

}



.btn-danger:hover {

    background: #822727;

}



.btn-warning {

    background: var(--color-warning);

    color: white;

}



.btn-warning:hover {

    background: #9c4221;

}



.btn-info {

    background: var(--color-accent);

    color: white;

}



.btn-info:hover {

    background: #2b6cb0;

}



.btn-secondary {

    background: #e2e8f0;

    color: var(--color-text);

}



.btn-secondary:hover {

    background: #cbd5e0;

}



.btn-sm {

    padding: 4px 10px;

    font-size: 12px;

}



/* 表单 */

.form-container {

    background: var(--color-surface);

    padding: var(--space-lg);

    border-radius: var(--radius-md);

    border: 1px solid var(--color-border);

    margin-bottom: var(--space-lg);

}



.form-group {

    margin-bottom: var(--space-md);

}



.form-group label {

    display: block;

    margin-bottom: var(--space-xs);

    font-weight: 500;

    font-size: 13px;

    color: var(--color-text-secondary);

}



.form-group input,

.form-group select {

    width: 100%;

    max-width: 400px;

    padding: 8px 12px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-sm);

    font-size: 14px;

    transition: border-color 0.15s;

}



.form-group input:focus,

.form-group select:focus {

    outline: none;

    border-color: var(--color-accent);

    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);

}



/* 页面标题 */

.page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: var(--space-lg);

}



.page-header h2 {

    font-size: 20px;

    font-weight: 600;

    color: var(--color-text);

}



/* 颜色点 */

.color-dot {

    display: inline-block;

    width: 10px;

    height: 10px;

    border-radius: 2px;

    margin-right: var(--space-sm);

    vertical-align: middle;

}



/* 徽章 */

.badge {

    padding: 2px 8px;

    border-radius: 3px;

    font-size: 12px;

    font-weight: 500;

}



.badge-active {

    background: var(--color-success-bg);

    color: var(--color-success);

}



.badge-archived {

    background: #edf2f7;

    color: var(--color-text-secondary);

}



.badge-info {

    background: #ebf8ff;

    color: #2b6cb0;

}



/* 空状态 */

.empty-state {

    text-align: center;

    padding: 60px 20px;

    color: var(--color-text-muted);

}



.empty-state a {

    color: var(--color-accent);

    text-decoration: none;

}



/* 预警列表 */

.alert-list {

    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

}



.alert-item {

    padding: var(--space-md);

    border-radius: var(--radius-sm);

    border-left: 3px solid;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-left-width: 3px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.alert-overdue {

    border-left-color: var(--color-danger);

    background: var(--color-danger-bg);

}



.alert-warning {

    border-left-color: var(--color-warning);

    background: var(--color-warning-bg);

}



.alert-normal {

    border-left-color: var(--color-success);

    background: var(--color-success-bg);

}



.alert-category {

    font-weight: 600;

    margin-right: var(--space-md);

}



.alert-description {

    color: var(--color-text-secondary);

}



.alert-amount {

    font-weight: 600;

    color: var(--color-text);

    margin-right: var(--space-md);

}



/* 响应式 */

@media (max-width: 768px) {

    .nav-container {

        flex-direction: column;

        height: auto;

        padding: var(--space-sm) var(--space-md);

    }

    

    .nav-menu {

        flex-wrap: wrap;

        justify-content: center;

        margin-top: var(--space-sm);

    }

    

    .stats-grid {

        grid-template-columns: 1fr 1fr;

    }

    

    .table {

        font-size: 13px;

    }

    

    .table th,

    .table td {

        padding: 8px 10px;

    }

}

/* ============================================

   登录页面

   ============================================ */



.login-body {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);

}



.login-container {

    width: 100%;

    max-width: 400px;

    padding: var(--space-md);

}



.login-card {

    background: var(--color-surface);

    border-radius: var(--radius-md);

    padding: var(--space-xl);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

}



.login-header {

    text-align: center;

    margin-bottom: var(--space-xl);

}



.login-header h1 {

    font-size: 22px;

    font-weight: 600;

    color: var(--color-primary);

    margin-bottom: var(--space-xs);

}



.login-header p {

    font-size: 13px;

    color: var(--color-text-secondary);

}



.login-form .form-group input {

    max-width: 100%;

}



.login-btn {

    width: 100%;

    padding: 10px;

    font-size: 15px;

    margin-top: var(--space-sm);

}

/* ============================================

   复选框样式修复

   ============================================ */



.form-group input[type="checkbox"] {

    width: auto;

    max-width: none;

    margin-right: 6px;

    vertical-align: middle;

    cursor: pointer;

}



.form-group label.checkbox-label {

    display: flex;

    align-items: center;

    cursor: pointer;

    font-weight: 500;

    color: var(--color-text);

}



.form-group label.checkbox-label input[type="checkbox"] {

    width: 16px;

    height: 16px;

    margin-right: 8px;

}

/* ============================================

   表单增强

   ============================================ */



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--space-md);

}



@media (max-width: 768px) {

    .form-row {

        grid-template-columns: 1fr;

    }

}



.form-group label.checkbox-label {

    display: inline-flex;

    align-items: center;

    cursor: pointer;

    font-weight: 500;

    color: var(--color-text);

    padding: 8px 0;

}



.form-group label.checkbox-label input[type="checkbox"] {

    width: 16px;

    height: 16px;

    margin: 0 8px 0 0;

    flex-shrink: 0;

}



.form-group input[type="checkbox"] {

    width: auto;

    max-width: none;

}



.form-actions {

    display: flex;

    gap: var(--space-sm);

    margin-top: var(--space-md);

}



.header-actions {

    display: flex;

    gap: var(--space-sm);

    align-items: center;

}



.text-right {

    text-align: right;

}



/* ============================================

   页脚

   ============================================ */



.footer {

    margin-top: 60px;

    padding: var(--space-lg) 0;

    border-top: 1px solid var(--color-border);

    background: var(--color-surface);

}



.footer-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--space-lg);

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 13px;

    color: var(--color-text-secondary);

}



.footer-left,

.footer-right {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

}



.footer-link {

    color: var(--color-text-secondary);

    text-decoration: none;

    transition: color 0.15s;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.footer-link:hover {

    color: var(--color-accent);

}



.footer-sep {

    color: var(--color-text-muted);

}



.footer-icon {

    vertical-align: middle;

}

.section-title {

    font-size: 16px;

    font-weight: 600;

    color: var(--color-text);

    margin: var(--space-lg) 0 var(--space-md) 0;

}
/* 表格列宽控制 */
.table {
    table-layout: fixed;
    width: 100%;
}

.table .nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-container {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.table td .color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* 类别列 - 220px */
.table th:nth-child(2),
.table td:nth-child(2) {
    width: 220px;
    min-width: 220px;
}
/* 日期列 */
.table th:nth-child(1),
.table td:nth-child(1) {
    width: 110px;
}

/* 说明列 */
.table th:nth-child(3),
.table td:nth-child(3) {
    width: auto;
    min-width: 200px;
}

/* 金额列 */
.table th:nth-child(4),
.table td:nth-child(4),
.table th:nth-child(5),
.table td:nth-child(5) {
    width: 110px;
}

/* 类型列 */
.table th:nth-child(6),
.table td:nth-child(6) {
    width: 80px;
}

/* 发票列 */
.table th:nth-child(7),
.table td:nth-child(7) {
    width: 70px;
}

/* 操作列 */
.table th:nth-child(8),
.table td:nth-child(8) {
    width: 130px;
}

/* 类别管理表格 */
.categories-table {
    table-layout: fixed;
    width: 100%;
}

.categories-table td {
    vertical-align: middle;
}

.categories-table td:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.categories-table td .color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

/* 预警铃铛 */
.nav-alert-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.alert-bell {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.alert-bell svg {
    width: 12px;
    height: 12px;
}

.alert-bell-danger {
    background: #fed7d7;
    color: #9b2c2c;
    animation: bell-shake 2s ease-in-out infinite;
}

.alert-bell-warning {
    background: #feebc8;
    color: #c05621;
}

.alert-bell-count {
    font-family: 'SF Mono', Monaco, monospace;
}

@keyframes bell-shake {
    0%, 90%, 100% { transform: rotate(0); }
    92% { transform: rotate(-10deg); }
    94% { transform: rotate(10deg); }
    96% { transform: rotate(-8deg); }
    98% { transform: rotate(8deg); }
}

/* 年份切换器 */
.year-switcher select {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: white;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-primary);
    min-width: 100px;
}

.year-switcher select:focus {
    outline: none;
    border-color: var(--color-accent);
}