/* =========================================================
   音创企业快件管理系统 - 管理后台样式（Windows 7 Aero 风格）
   ========================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
    font-family: "Segoe UI", "Microsoft YaHei", "微软雅黑", Tahoma, sans-serif;
    font-size: 13px;
    color: #1c2b3a;
    min-height: 100%;
    background: #7db3e0;
    background: -webkit-linear-gradient(top, #a8cfee 0%, #6fa8d8 34%, #4a86c4 62%, #7db3e0 100%);
    background: linear-gradient(180deg, #a8cfee 0%, #6fa8d8 34%, #4a86c4 62%, #7db3e0 100%);
    background-attachment: fixed;
}

.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 14px 10px;
}

/* ---------- Aero 窗口框架 ---------- */
.aero-window {
    border: 1px solid #2c547c;
    border-radius: 7px;
    background: rgba(233, 243, 251, 0.55);
    -webkit-box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        0 12px 34px rgba(15, 45, 80, 0.45);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        0 12px 34px rgba(15, 45, 80, 0.45);
    overflow: hidden;
}

/* 玻璃标题栏 */
.titlebar {
    height: 34px;
    line-height: 34px;
    padding: 0 10px 0 8px;
    background: -webkit-linear-gradient(top,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(205, 230, 248, 0.75) 46%,
        rgba(168, 208, 240, 0.75) 50%,
        rgba(215, 236, 252, 0.75) 100%);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(205, 230, 248, 0.75) 46%,
        rgba(168, 208, 240, 0.75) 50%,
        rgba(215, 236, 252, 0.75) 100%);
    border-bottom: 1px solid #9cc0dd;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #10375c;
}

.titlebar-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    vertical-align: -3px;
    background: -webkit-linear-gradient(135deg, #7fc3f2 0%, #1f6fb0 100%);
    background: linear-gradient(135deg, #7fc3f2 0%, #1f6fb0 100%);
    border: 1px solid #16466e;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.titlebar-text {
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.titlebar-logout {
    float: right;
    color: #10375c;
    text-decoration: none;
    padding: 0 10px;
    margin-left: 8px;
    font-size: 12px;
    border-left: 1px solid rgba(16, 55, 92, 0.35);
}

.titlebar-logout:hover { text-decoration: underline; color: #b41d0c; }

/* ---------- 主体布局 ---------- */
.window-body { display: table; width: 100%; }

.sidebar {
    display: table-cell;
    width: 158px;
    vertical-align: top;
    padding: 10px 8px;
    background: rgba(226, 239, 250, 0.6);
    border-right: 1px solid #b8d2e8;
}

.sidebar-head {
    font-size: 12px;
    color: #40617f;
    padding: 2px 6px 8px;
    border-bottom: 1px solid #c3d9ec;
    margin-bottom: 6px;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.nav-list { list-style: none; }

.nav-list li a {
    display: block;
    padding: 6px 10px;
    margin: 2px 0;
    color: #173a5e;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid transparent;
}

.nav-list li a:hover {
    background: rgba(255, 255, 255, 0.65);
    border-color: #a8c8e2;
    -webkit-box-shadow: inset 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 #fff;
}

.nav-list li.active a {
    background: -webkit-linear-gradient(top, #eaf5fd 0%, #c9e3f8 50%, #b4d7f3 100%);
    background: linear-gradient(180deg, #eaf5fd 0%, #c9e3f8 50%, #b4d7f3 100%);
    border: 1px solid #6f9cc7;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.content {
    display: table-cell;
    vertical-align: top;
    background: #fbfdff;
    padding: 16px 18px 24px;
    min-height: 520px;
}

.content-head { margin-bottom: 12px; }

.content-head h1 {
    font-size: 17px;
    font-weight: 600;
    color: #14446e;
    padding-bottom: 8px;
    border-bottom: 1px solid #d6e4f0;
}

.page-footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    padding: 10px 0 6px;
    text-shadow: 0 1px 1px rgba(20, 60, 100, 0.6);
}

/* ---------- 面板 ---------- */
.panel {
    border: 1px solid #b9d0e4;
    background: #fff;
    border-radius: 3px;
    margin-bottom: 14px;
    -webkit-box-shadow: 0 1px 3px rgba(60, 100, 140, 0.18);
    box-shadow: 0 1px 3px rgba(60, 100, 140, 0.18);
}

.panel-head {
    padding: 7px 12px;
    font-weight: 600;
    color: #14446e;
    background: -webkit-linear-gradient(top, #f6fafd 0%, #e2eef9 100%);
    background: linear-gradient(180deg, #f6fafd 0%, #e2eef9 100%);
    border-bottom: 1px solid #c9dcec;
    border-radius: 2px 2px 0 0;
}

.panel-body { padding: 12px; }

.panel-sub {
    font-weight: 600;
    color: #14446e;
    margin: 4px 0 8px;
    padding-left: 9px;
    border-left: 3px solid #4a86c4;
}

/* ---------- 表单 ---------- */
.form-row { margin-bottom: 10px; }

.form-grid {
    display: table;
    width: 100%;
    border-spacing: 0;
}

.form-grid .form-row { display: table-row; }

label {
    display: block;
    color: #2c4d6d;
    margin-bottom: 3px;
}

.form-grid label, .form-grid .label-cell, .form-grid .field-cell {
    display: table-cell;
    vertical-align: top;
    padding: 0 10px 10px 0;
}

.form-grid .label-cell { width: 130px; padding-top: 6px; }
.form-grid .label-cell label { margin-bottom: 0; }

label .req { color: #b41d0c; margin-left: 2px; }

.field-cell input[type="text"],
.field-cell input[type="password"],
.field-cell input[type="number"],
.field-cell input[type="date"],
.field-cell input[type="datetime-local"],
.field-cell input[type="tel"],
.field-cell select,
.field-cell textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
select,
textarea {
    font-family: inherit;
    font-size: 13px;
    color: #1c2b3a;
    padding: 4px 6px;
    border: 1px solid #9db6ca;
    border-radius: 2px;
    background: #fff;
    outline: none;
    max-width: 100%;
}

input:focus, select:focus, textarea:focus {
    border-color: #4a86c4;
    -webkit-box-shadow: 0 0 4px rgba(74, 134, 196, 0.5);
    box-shadow: 0 0 4px rgba(74, 134, 196, 0.5);
}

input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="tel"] { width: 260px; }

select { min-width: 160px; }
textarea { width: 460px; height: 64px; resize: vertical; }

.help { color: #7d90a3; font-size: 12px; margin-top: 2px; }

.fields-inline .field-cell { padding-right: 18px; }

/* ---------- 按钮 ---------- */
.btn {
    display: inline-block;
    font-family: inherit;
    font-size: 13px;
    color: #173a5e;
    padding: 5px 16px;
    margin-right: 6px;
    border: 1px solid #6d94bd;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    background: -webkit-linear-gradient(top, #fefeff 0%, #e8f2fb 46%, #d5e8f8 50%, #eaf4fd 100%);
    background: linear-gradient(180deg, #fefeff 0%, #e8f2fb 46%, #d5e8f8 50%, #eaf4fd 100%);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(20, 50, 80, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(20, 50, 80, 0.15);
}

.btn:hover {
    background: -webkit-linear-gradient(top, #fdffff 0%, #dff0fd 46%, #c6e4fa 50%, #e2f2fd 100%);
    background: linear-gradient(180deg, #fdffff 0%, #dff0fd 46%, #c6e4fa 50%, #e2f2fd 100%);
    border-color: #4a86c4;
}

.btn:active {
    background: -webkit-linear-gradient(top, #c8e0f5 0%, #d8ebfb 100%);
    background: linear-gradient(180deg, #c8e0f5 0%, #d8ebfb 100%);
    -webkit-box-shadow: inset 0 1px 2px rgba(20, 50, 80, 0.25);
    box-shadow: inset 0 1px 2px rgba(20, 50, 80, 0.25);
}

.btn-primary {
    color: #fff;
    border-color: #1e5688;
    background: -webkit-linear-gradient(top, #79b7e8 0%, #4a90cd 46%, #3878b4 50%, #5a9cd6 100%);
    background: linear-gradient(180deg, #79b7e8 0%, #4a90cd 46%, #3878b4 50%, #5a9cd6 100%);
}

.btn-primary:hover {
    border-color: #17456e;
    background: -webkit-linear-gradient(top, #8ec5f0 0%, #5da2dd 46%, #4685c2 50%, #6aa9dd 100%);
    background: linear-gradient(180deg, #8ec5f0 0%, #5da2dd 46%, #4685c2 50%, #6aa9dd 100%);
}

.btn-sm { font-size: 12px; padding: 2px 10px; }

.btn[disabled] { opacity: .55; cursor: default; }

/* ---------- 表格 ---------- */
.tbl { width: 100%; border-collapse: collapse; }

.tbl th, .tbl td {
    border: 1px solid #d3e2ef;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.tbl th {
    background: -webkit-linear-gradient(top, #f5fafe 0%, #e1eef9 100%);
    background: linear-gradient(180deg, #f5fafe 0%, #e1eef9 100%);
    color: #14446e;
    font-weight: 600;
    white-space: nowrap;
}

.tbl tbody tr:nth-child(even) { background: #f4f9fd; }
.tbl tbody tr:hover { background: #e8f3fc; }

.tbl .num { text-align: right; }
.tbl .c { text-align: center; }

/* ---------- 提示框 ---------- */
.alert {
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 3px;
    border: 1px solid;
    font-size: 13px;
}

.alert-ok    { background: #effaf0; border-color: #9fd4a4; color: #205c28; }
.alert-error { background: #fdf0ef; border-color: #e4a49e; color: #8c2119; }
.alert-warn  { background: #fdf7ea; border-color: #e2cf9e; color: #6d5416; }
.alert-info  { background: #eef6fd; border-color: #a7c9e6; color: #1c4e7c; }

/* ---------- 结果区 ---------- */
.result-box {
    border: 1px solid #c4d8ea;
    background: #f7fbff;
    border-radius: 3px;
    padding: 12px;
    margin-top: 12px;
}

.result-box h3 {
    font-size: 14px;
    color: #14446e;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #c4d8ea;
}

pre.code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    background: #f4f8fc;
    border: 1px solid #cfdeec;
    border-radius: 2px;
    padding: 8px 10px;
    color: #223a52;
    overflow: auto;
    max-height: 420px;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---------- 登录页 ---------- */
.login-wrap {
    max-width: 400px;
    margin: 90px auto 0;
}

.login-panel { padding: 22px 26px 26px; }

.login-title {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #14446e;
    margin-bottom: 16px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.login-panel input[type="text"],
.login-panel input[type="password"] { width: 100%; }

.login-btn-row { text-align: center; margin-top: 16px; }

/* ---------- 统计块 ---------- */
.stat-grid { display: table; width: 100%; border-spacing: 10px 0; margin-bottom: 6px; }

.stat-cell {
    display: table-cell;
    width: 25%;
    border: 1px solid #b9d0e4;
    border-radius: 3px;
    background: #fff;
    padding: 12px 14px;
    -webkit-box-shadow: 0 1px 3px rgba(60, 100, 140, 0.15);
    box-shadow: 0 1px 3px rgba(60, 100, 140, 0.15);
}

.stat-num { font-size: 24px; font-weight: 600; color: #1f6fb0; }

.stat-label { color: #55708a; margin-top: 2px; }

/* ---------- 状态标记 ---------- */
.tag {
    display: inline-block;
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 2px;
    border: 1px solid;
}

.tag-blue   { background: #eef6fd; border-color: #a7c9e6; color: #1c4e7c; }
.tag-green  { background: #effaf0; border-color: #9fd4a4; color: #205c28; }
.tag-red    { background: #fdf0ef; border-color: #e4a49e; color: #8c2119; }
.tag-gray   { background: #f2f2f2; border-color: #cfcfcf; color: #555; }
.tag-orange { background: #fdf7ea; border-color: #e2cf9e; color: #6d5416; }

/* ---------- 其他 ---------- */
.empty-tip {
    text-align: center;
    color: #8a9bab;
    padding: 26px 0;
}

.muted { color: #7d90a3; }

.link-back { font-size: 12px; margin-left: 10px; color: #2c6da8; }

.actions-bar { margin-bottom: 10px; }

.pager { margin-top: 10px; text-align: right; }
.pager a, .pager span { padding: 2px 8px; margin-left: 4px; border: 1px solid #b9d0e4; border-radius: 2px; text-decoration: none; color: #173a5e; background: #f4f9fd; }
.pager .cur { background: #cfe5f7; font-weight: 600; }

@media (max-width: 900px) {
    .window-body, .sidebar, .content { display: block; width: auto; }
    .sidebar { border-right: none; border-bottom: 1px solid #b8d2e8; }
    .stat-cell { display: block; width: auto; margin-bottom: 10px; }
}