/*!
 * 江苏常恒律师事务所 · 案件管理系统
 * 视觉增强层 theme-pro.css  v2.0（加强版打磨）
 *
 * 定位：零侵入增量覆盖。仅调整圆角 / 阴影 / 间距 / 字号 / 色彩层次，
 *       不改动任何布局结构与业务逻辑。
 * 回滚：删除页面中对本文件的 <link> 引用即可，原有样式完整保留。
 * 适用：index.html（主系统）、score.html（积分考核）、query.html（查询页）
 *
 * v2 变更：原设计已具备 14px 圆角 / hover 动效 / 聚焦光环等精致细节，
 *          故本版转向「可感知的质感提升」——更大留白、更分明字号层级、
 *          更立体阴影、金色视觉锤。
 */

/* ==================== 1. 设计令牌 ==================== */
:root {
    /* 圆角体系（整体放大一档） */
    --radius-xs: 5px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* 过渡曲线 */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --t-fast: 160ms var(--ease);
    --t: 240ms var(--ease);
    --t-slow: 360ms var(--ease);

    /* 聚焦光环 */
    --ring: 0 0 0 3px rgba(30, 58, 95, .14);
    --ring-strong: 0 0 0 4px rgba(30, 58, 95, .18);

    /* 立体阴影：默认有托举感，悬停明显浮起 */
    --shadow-card: 0 2px 4px rgba(15, 23, 42, .05), 0 8px 24px -8px rgba(15, 23, 42, .12);
    --shadow-card-hover: 0 6px 12px -2px rgba(15, 23, 42, .10), 0 24px 48px -16px rgba(15, 23, 42, .22);
    --shadow-pop: 0 10px 24px -8px rgba(15, 23, 42, .16), 0 36px 72px -20px rgba(15, 23, 42, .30);

    /* 分隔线 */
    --hairline: 1px solid rgba(148, 163, 184, .22);

    /* 视觉锤色：并入主色阶 brand-500（原 #38bdf8 亮天蓝，与海军蓝明度跳跃过大，
       2026-10-24 视觉收敛时统一。稍亮于 --primary，起强调作用但不跳出蓝系） */
    --sky: #3B6FA3;

    /* 背景：归入主色阶（与 brand-50 #F0F5FA 同族，略深一档让白卡片浮起） */
    --bg: #EDF2F8;
}

/* ==================== 2. 全局基础 ==================== */

/* 滚动条：细窄、圆润、悬停加深 */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c3cfdd;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background var(--t-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::selection {
    background: rgba(30, 58, 95, .16);
    color: inherit;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[contenteditable]:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* ==================== 3. 卡片（立体化） ==================== */
.card,
.case-card,
.stat-card,
.qr-card,
.template-card,
.file-card,
.doc-card,
.activity-card,
.info-card,
.result-card {
    border-radius: var(--radius-lg);
    border-color: rgba(148, 163, 184, .26);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.card:hover,
.stat-card:hover,
.qr-card:hover,
.template-card:hover,
.file-card:hover,
.doc-card:hover,
.activity-card:hover,
.info-card:hover,
.result-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

/* 案件卡片：悬停浮起更明显，金色边框作视觉锤 */
.case-card {
    padding: 24px;
}

.case-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--sky);
}

.case-card.selected {
    box-shadow: 0 0 0 3px rgba(59,111,163,.32), var(--shadow-card-hover);
    border-color: var(--sky);
}

/* 卡片主体留白加大 */
.card-body {
    padding: 28px;
}

.card-header,
.cases-main-header,
.cases-sidebar-header {
    border-bottom: var(--hairline);
}

/* 统计卡片：顶部金色细线（视觉锤，不占布局尺寸） */
.stat-card,
.card.stat-card {
    background: linear-gradient(180deg, var(--sky) 0 3px, var(--bg-elevated) 3px);
}

/* ==================== 4. 顶栏（金色竖条视觉锤） ==================== */
.topbar {
    padding: 20px 28px;
    box-shadow: var(--shadow-card);
    border-bottom: var(--hairline);
    /* ⚠️ 不要在此处添加 backdrop-filter / filter / transform：
       它们会让顶栏内部的 position:fixed 元素（通知下拉、通知中心弹层）
       改为相对顶栏定位，导致遮罩尺寸错乱、弹层跑到屏幕外 */
}

.topbar h2 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .3px;
    padding-left: 14px;
    border-left: 4px solid var(--sky);
    line-height: 1.35;
}

/* ==================== 5. 表格（更舒展） ==================== */
.table,
.case-table {
    border-collapse: separate;
    border-spacing: 0;
}

.table th,
.case-table th {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    color: var(--text-secondary);
    background: #F8FAFC;
    border-bottom: 1px solid rgba(148, 163, 184, .34);
    padding: 16px 22px;
    white-space: nowrap;
    /* 2026-10-24：表头数字列同样等宽，表头与数据才能对齐 */
    font-variant-numeric: tabular-nums;
}

.table td,
.case-table td {
    padding: 16px 22px;
    border-bottom: var(--hairline);
    transition: background var(--t-fast);
    /* 2026-10-24：数字等宽，让案号/金额/次数在同一列自然对齐（不影响中文排版） */
    font-variant-numeric: tabular-nums;
}

/* 数字列右对齐工具类：金额、扫描次数、条数等（在模板里按需加 class="num"） */
.table td.num,
.case-table td.num,
td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 表头数字列同样右对齐，保证表头与数据同向 */
.table th.num,
.case-table th.num,
th.num {
    text-align: right;
}

.table tbody tr,
.case-table tbody tr {
    transition: background var(--t-fast), box-shadow var(--t-fast);
}

.table tbody tr:nth-child(even),
.case-table tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, .045);
}

.table tbody tr:hover,
.case-table tbody tr:hover {
    background: var(--primary-lighter);
    box-shadow: inset 4px 0 0 var(--sky);
}

/* ==================== 6. 按钮 ==================== */
.btn,
.btn-primary,
.btn-secondary,
.btn-default,
.btn-outline,
.btn-danger,
.btn-sm,
.btn-lg,
.action-btn,
.template-btn,
.template-btn-primary,
.template-btn-outline,
.nav-btn {
    border-radius: var(--radius-md);
    transition: all var(--t-fast);
}

.btn:not(:disabled):active,
.btn-primary:not(:disabled):active,
.btn-secondary:not(:disabled):active,
.action-btn:active,
.template-btn-primary:active {
    transform: translateY(1px) scale(.99);
}

.btn:disabled,
.btn-primary:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-primary,
.template-btn-primary,
.primary {
    background-image: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
    border-color: transparent;
    box-shadow: 0 3px 10px -2px rgba(30, 58, 95, .30);
}

.btn-primary:not(:disabled):hover,
.template-btn-primary:hover {
    background-image: linear-gradient(135deg, #24476f 0%, #35659c 100%);
    box-shadow: 0 6px 18px -3px rgba(30, 58, 95, .42);
    transform: translateY(-2px);
}

.action-btn {
    border-radius: var(--radius-sm);
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px -2px rgba(30, 58, 95, .28);
}

/* ==================== 7. 表单控件 ==================== */
.form-input,
.form-select,
.search-input input,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="search"] {
    border-radius: var(--radius-md);
    border-color: rgba(148, 163, 184, .45);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.form-input:hover:not(:focus),
.search-input input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
    border-color: rgba(30, 58, 95, .42);
}

.form-input:focus,
.search-input input:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus {
    border-color: var(--primary);
    box-shadow: var(--ring-strong);
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: .3px;
}

.search-input {
    border-radius: var(--radius-pill);
    overflow: hidden;
}

/* ==================== 8. 字号层级（数值更醒目） ==================== */
.stat-value,
.stats-mini-value {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.5px;
}

.stat-label,
.stats-mini-label {
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: .3px;
}

/* ==================== 9. 弹窗 ==================== */
.modal-content,
.qr-detail-modal-content {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}

.modal-header,
.qr-detail-modal-header {
    border-bottom: var(--hairline);
}

.modal-footer,
.qr-detail-modal-actions {
    border-top: var(--hairline);
}

.modal-mask,
.modal-overlay,
.qr-detail-modal {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* ==================== 10. 标签与徽章 ==================== */
.status-tag,
.case-type-badge,
.tag,
.badge,
.qr-status-badge,
.quick-badge,
.qr-quick-badge {
    border-radius: var(--radius-pill);
    font-weight: 600;
    letter-spacing: .3px;
    transition: all var(--t-fast);
}

.status-dot {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .95);
}

/* ==================== 11. 侧边栏 ==================== */
.sidebar {
    border-right: var(--hairline);
}

.nav-item {
    border-radius: var(--radius-md);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.nav-item:hover {
    transform: translateX(3px);
}

/* 激活态：金色描边强化 */
.nav-item.active {
    background: rgba(59,111,163,.16);
    color: #fff;
}

/* 导航指示条：原设计金色，统一为天空蓝 */
.nav-item::before {
    background: var(--sky);
}

.nav-item.active::before {
    transform: translateY(-50%) scaleY(1);
}

.nav-section-title {
    font-size: 12px; /* 2026-10-24 回退到改版前字号，避免覆盖 index.html */
    font-weight: 700;
    letter-spacing: 1px;
    opacity: .8;
}

.sidebar-footer {
    border-top: var(--hairline);
}

/* ==================== 12. 各页面适配 ==================== */

/* 12.1 积分考核页 score.html */
.page-header,
.toolbar,
.tab,
.tab-item,
.sc-mention,
.rc-item,
.rc-row,
.rank-item,
.stats-card,
.stat-item {
    border-radius: var(--radius-md);
}

.tab,
.tab-item {
    transition: all var(--t-fast);
}

/* 12.2 查询页 query.html —— 统一主色为律所深蓝 */
:root {
    --primary: #1e3a5f;
    --primary-light: #2c5282;
}

.btn-primary,
.primary,
[class*="btn-primary"] {
    background-color: #1e3a5f;
    border-color: #1e3a5f;
}

.result-item,
.file-item,
.info-item,
.timeline-item,
.comment-item,
.notification-item,
.preview-box,
.admin-panel {
    border-radius: var(--radius-md);
    transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}

.result-item:hover,
.file-item:hover,
.info-item:hover,
.comment-item:hover,
.notification-item:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--sky);
    transform: translateY(-2px);
}

/* ==================== 13. 动效降级与移动端 ==================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* 窄屏：标题与留白收敛，保留质感 */
@media (max-width: 768px) {
    .topbar {
        padding: 16px 18px;
    }

    .topbar h2 {
        font-size: 21px;
        padding-left: 11px;
    }

    .card-body {
        padding: 18px;
    }

    .case-card {
        padding: 18px;
    }

    .table th,
    .table td,
    .case-table th,
    .case-table td {
        padding: 12px 14px;
    }

    .card:hover,
    .case-card:hover,
    .stat-card:hover {
        transform: none;
    }
}