/* =========================================================
   音创企业内网记账系统 - Windows 7 Aero 风格样式
   ========================================================= */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Segoe UI", "Microsoft YaHei", "微软雅黑", "宋体", Tahoma, Arial, sans-serif;
    font-size: 13px;
    color: #1a1a1a;
    background: #1f1f1f url('aero-bg.png') repeat;
}

/* Aero 桌面背景：使用 login.webp 作底图，叠加深蓝渐变确保登录窗可读 */
body.aero-desktop {
    background:
        linear-gradient(135deg, rgba(20, 54, 91, 0.55) 0%, rgba(10, 26, 53, 0.65) 100%),
        url('../img/login.webp') center center / cover no-repeat,
        radial-gradient(ellipse at top, #4a8fc7 0%, #1d3a6b 55%, #0a1a35 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

body.aero-install {
    background:
        radial-gradient(ellipse at top, #6fa6d6 0%, #2c5a91 55%, #0e1f3d 100%);
    min-height: 100vh;
}

/* ----------------- 通用玻璃窗口 ----------------- */
.aero-window {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 4px 24px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    backdrop-filter: blur(2px);
}

.aero-titlebar {
    height: 32px;
    background: linear-gradient(to bottom, #d6ebfa 0%, #b9dbf3 50%, #9bc8ea 51%, #7fb6e0 100%);
    border-bottom: 1px solid #6798c0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #14365b;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    user-select: none;
}

.aero-titlebar .aero-titlebar-text {
    flex: 1;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.aero-titlebar .aero-titlebar-actions {
    display: flex;
    gap: 4px;
}

.aero-titlebar .aero-titlebar-btn {
    width: 28px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    background: linear-gradient(to bottom, #f0f8ff 0%, #c8def0 100%);
    border: 1px solid #6798c0;
    border-radius: 3px;
    color: #14365b;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.aero-titlebar .aero-titlebar-btn:hover {
    background: linear-gradient(to bottom, #e6f3ff 0%, #b6d5ed 100%);
}

.aero-titlebar .aero-titlebar-btn.close {
    background: linear-gradient(to bottom, #f6c4be 0%, #e08782 100%);
    border-color: #b54c46;
    color: #4a0d0a;
}

.aero-body {
    padding: 16px 18px 18px 18px;
    background: linear-gradient(to bottom, #ffffff 0%, #f3f6fa 100%);
}

/* ----------------- 登录窗口 ----------------- */
.aero-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-window {
    width: 380px;
}

.login-window .aero-body {
    padding: 28px 30px 24px 30px;
}

.login-window .aero-titlebar .aero-titlebar-text {
    text-align: center;
}

.login-logo {
    text-align: center;
    margin-bottom: 14px;
}

.login-logo .logo-text {
    font-size: 18px;
    font-weight: 600;
    color: #1c4569;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}

.login-logo .logo-sub {
    font-size: 12px;
    color: #4a6b85;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

/* ----------------- 表单 ----------------- */
.aero-form { margin: 0; }

.aero-form .aero-row {
    margin-bottom: 12px;
}

.aero-form label.aero-label {
    display: block;
    margin-bottom: 4px;
    color: #1a3a55;
    font-size: 12px;
    font-weight: 600;
}

.aero-input, .aero-select, .aero-textarea {
    width: 100%;
    height: 28px;
    padding: 3px 8px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid #a9b8c7;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.aero-textarea {
    height: auto;
    min-height: 70px;
    padding: 6px 8px;
    resize: vertical;
}

.aero-input:focus, .aero-select:focus, .aero-textarea:focus {
    border-color: #3a8fd1;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 2px rgba(58,143,209,0.25);
}

.aero-input[disabled], .aero-select[disabled] {
    background: #eef2f6;
    color: #6c7a89;
}

/* ----- 宽表单（个人日常支出等业务页） ----- */
.aero-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin-bottom: 14px;
}

.aero-form-row.single { grid-template-columns: 1fr; }

.aero-field {
    display: flex;
    flex-direction: column;
    min-width: 0;        /* 防止 grid 子项溢出 */
}

.aero-field > label {
    display: block;
    margin-bottom: 6px;
    color: #1a3a55;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.aero-field > label .req {
    color: #d9534f;
    margin: 0 2px 0 2px;
    font-weight: 700;
}

.aero-field > label .opt {
    color: #9aa6b2;
    font-size: 11px;
    font-weight: 400;
    margin-left: 6px;
}

.aero-field input[type="text"],
.aero-field input[type="number"],
.aero-field input[type="date"],
.aero-field input[type="email"],
.aero-field input[type="password"],
.aero-field input[type="tel"],
.aero-field select,
.aero-field textarea {
    width: 100%;
    height: 36px;
    padding: 5px 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid #a9b8c7;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.aero-field textarea {
    height: auto;
    min-height: 72px;
    padding: 8px 10px;
    resize: vertical;
    line-height: 1.5;
}

.aero-field input:focus,
.aero-field select:focus,
.aero-field textarea:focus {
    border-color: #3a8fd1;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 2px rgba(58,143,209,0.25);
}

.aero-field input::placeholder,
.aero-field textarea::placeholder {
    color: #a9b8c7;
    font-size: 13px;
}

.aero-form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e2e9f0;
}

.aero-form-actions .aero-btn {
    min-width: 110px;
    height: 36px;
    line-height: 34px;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 760px) {
    .aero-form-row { grid-template-columns: 1fr; }
}

/* ----------------- 按钮 ----------------- */
.aero-btn {
    display: inline-block;
    min-width: 78px;
    height: 28px;
    line-height: 26px;
    padding: 0 16px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(to bottom, #fafbfc 0%, #e6ebef 50%, #d4dce3 51%, #e3e8ed 100%);
    border: 1px solid #9aa6b2;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.05);
    cursor: pointer;
    user-select: none;
}

.aero-btn:hover {
    background: linear-gradient(to bottom, #eaf3fb 0%, #d3e6f4 50%, #bcd9ef 51%, #d6e7f4 100%);
    border-color: #5d8eb5;
}

.aero-btn:active {
    background: linear-gradient(to bottom, #c9dff1 0%, #b6d3e9 50%, #a4c8e2 51%, #b4d1e6 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

.aero-btn-primary {
    color: #ffffff;
    background: linear-gradient(to bottom, #5cb6f0 0%, #2a8ed8 50%, #1c7bc6 51%, #3598de 100%);
    border-color: #155d97;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

.aero-btn-primary:hover {
    background: linear-gradient(to bottom, #6cc2f5 0%, #3798dd 50%, #2481cb 51%, #44a2e2 100%);
    border-color: #155d97;
}

.aero-btn-primary:active {
    background: linear-gradient(to bottom, #2a8ed8 0%, #1c7bc6 100%);
}

.aero-btn-danger {
    color: #ffffff;
    background: linear-gradient(to bottom, #ee8a82 0%, #d65a52 50%, #b9443c 51%, #c7504a 100%);
    border-color: #8a2b25;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

.aero-btn-sm { height: 24px; line-height: 22px; min-width: 56px; padding: 0 10px; font-size: 12px; }

.aero-btn-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

/* ----------------- 消息提示 ----------------- */
.aero-msg {
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid;
}

.aero-msg.ok {
    color: #1c4a2b;
    background: #e3f4e7;
    border-color: #88c498;
}

.aero-msg.err {
    color: #6a1b1b;
    background: #fbe6e6;
    border-color: #d49a9a;
}

.aero-msg.info {
    color: #15416b;
    background: #e6f0fa;
    border-color: #9bc1de;
}

/* ----------------- 列表/段落 ----------------- */
.aero-h2 {
    font-size: 16px;
    font-weight: 600;
    color: #14365b;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #cfdce7;
}

.aero-h3 {
    font-size: 14px;
    font-weight: 600;
    color: #1c4569;
    margin: 14px 0 8px 0;
}

.aero-p { margin: 6px 0; color: #2a3a4a; line-height: 1.6; }

.aero-list { margin: 6px 0 12px 18px; color: #2a3a4a; line-height: 1.7; }

/* ----------------- 主框架布局 ----------------- */
.aero-frame {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.aero-topbar {
    height: 38px;
    background: linear-gradient(to bottom, #4a8fc7 0%, #2c6aa6 50%, #1c4a7e 51%, #235d92 100%);
    border-bottom: 1px solid #0e2a4d;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.aero-topbar .topbar-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

.aero-topbar .topbar-company {
    margin-left: 24px;
    font-size: 12px;
    color: #e3f0fb;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 3px;
    padding: 3px 10px;
}

.aero-topbar .topbar-company b {
    color: #ffffff;
    font-weight: 600;
}

.aero-topbar .topbar-spacer { flex: 1; }

.aero-topbar .topbar-user {
    font-size: 12px;
    color: #e3f0fb;
    margin-right: 14px;
}

.aero-topbar .topbar-logout {
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(to bottom, #ee8a82 0%, #d65a52 50%, #b9443c 100%);
    border: 1px solid #8a2b25;
    border-radius: 3px;
    padding: 3px 12px;
    font-size: 12px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

.aero-topbar .topbar-logout:hover {
    background: linear-gradient(to bottom, #f49b93 0%, #dc6b63 50%, #c24d44 100%);
}

.aero-main {
    flex: 1;
    display: flex;
    min-height: 0;
}

.aero-sidebar {
    width: 200px;
    background: linear-gradient(to right, #f0f4f9 0%, #dde6ef 100%);
    border-right: 1px solid #b6c4d2;
    padding: 10px 0;
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.6);
}

.aero-sidebar .nav-item {
    display: block;
    padding: 9px 16px;
    color: #1a3a55;
    text-decoration: none;
    font-size: 13px;
    border-left: 3px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}

.aero-sidebar .nav-item:hover {
    background: #e2eef9;
    color: #0d3a66;
}

.aero-sidebar .nav-item.active {
    background: linear-gradient(to right, #c9e2f6 0%, #e2eef9 100%);
    border-left-color: #2a7fc1;
    color: #0d3a66;
    font-weight: 600;
}

.aero-sidebar .nav-section {
    padding: 10px 16px 4px 16px;
    color: #5d7591;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.aero-content {
    flex: 1;
    padding: 16px;
    overflow: auto;
    background: linear-gradient(to bottom, #e8eef5 0%, #d6e0eb 100%);
}

.aero-panel {
    background: rgba(255,255,255,0.96);
    border: 1px solid #b6c4d2;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 14px;
}

.aero-panel .panel-header {
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    background: linear-gradient(to bottom, #f4f8fc 0%, #dde7f0 50%, #cfdce7 51%, #d8e3ec 100%);
    border-bottom: 1px solid #b6c4d2;
    color: #14365b;
    font-weight: 600;
    font-size: 13px;
    border-radius: 4px 4px 0 0;
}

.aero-panel .panel-body { padding: 14px 16px; }

/* ----------------- 表格 ----------------- */
.aero-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    font-size: 12px;
    border: 1px solid #b6c4d2;
    border-radius: 3px;
    overflow: hidden;
}

.aero-table thead th {
    background: linear-gradient(to bottom, #f4f8fc 0%, #dde7f0 50%, #cfdce7 51%, #d8e3ec 100%);
    color: #14365b;
    text-align: left;
    padding: 7px 10px;
    font-weight: 600;
    border-bottom: 1px solid #b6c4d2;
    border-right: 1px solid #d3dde7;
}

.aero-table thead th:last-child { border-right: none; }

.aero-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #e2e9f0;
    border-right: 1px solid #eef3f8;
    color: #2a3a4a;
    vertical-align: middle;
}

.aero-table tbody td:last-child { border-right: none; }

.aero-table tbody tr:nth-child(even) { background: #f7fafd; }

.aero-table tbody tr:hover { background: #e6f1fb; }

.aero-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.aero-table .center { text-align: center; }

.aero-table-wrap {
    overflow-x: auto;
    border: 1px solid #b6c4d2;
    border-radius: 3px;
}

/* ----------------- 徽标 ----------------- */
.aero-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: 11px;
    background: #e3eef8;
    color: #1c4a7e;
    border: 1px solid #b6cce0;
}

.aero-tag.income { background: #e2f1e5; color: #1c5a2b; border-color: #a9d3b1; }
.aero-tag.expense { background: #fbe6e6; color: #6a1b1b; border-color: #d49a9a; }
.aero-tag.debt { background: #fbf3df; color: #6a4a17; border-color: #dcc28a; }

.aero-empty {
    padding: 30px 10px;
    text-align: center;
    color: #6c7a89;
    font-size: 13px;
}

/* ----------------- 统计卡片 ----------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card {
    background: linear-gradient(to bottom, #ffffff 0%, #eef4fa 100%);
    border: 1px solid #b6c4d2;
    border-radius: 4px;
    padding: 14px 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.05);
}

.stat-card .stat-label {
    color: #5d7591;
    font-size: 12px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.stat-card .stat-value {
    color: #14365b;
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.stat-card.income .stat-value { color: #1c5a2b; }
.stat-card.expense .stat-value { color: #6a1b1b; }
.stat-card.debt .stat-value { color: #6a4a17; }
.stat-card.balance .stat-value { color: #1c4569; }

/* ----------------- 表单内嵌网格 ----------------- */
.aero-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

.aero-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 14px;
}

.aero-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 14px;
}

.aero-col-span-2 { grid-column: span 2; }
.aero-col-span-3 { grid-column: span 3; }
.aero-col-span-4 { grid-column: span 4; }

@media (max-width: 900px) {
    .aero-grid-2, .aero-grid-3, .aero-grid-4 { grid-template-columns: 1fr; }
    .aero-col-span-2, .aero-col-span-3, .aero-col-span-4 { grid-column: span 1; }
}

/* ----------------- 内联小工具 ----------------- */
.aero-inline-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.aero-link {
    color: #1c5a9a;
    text-decoration: none;
}

.aero-link:hover { text-decoration: underline; color: #0d3a66; }

.muted { color: #6c7a89; font-size: 12px; }
.right { text-align: right; }
.center { text-align: center; }

/* ----------------- 安装窗口 ----------------- */
.install-window {
    width: 520px;
    margin: 60px auto;
}