/* ==========================================================================
   equipment-depreciation-tracker · 个人设备折旧台账
   视觉概念：「资产档案盒」—— 灰蓝硬壳 + 铜色编号牌 + 卡纸标签格
   字体层级：衬线标题（档案盒标签）/ 无衬线正文 / 等宽金额
   特色构件：资产卡片（带虚线撕线与铜色编号）、类别占比条、折旧进度槽
   ========================================================================== */

.edt-page {
    --edt-slate: #334155;
    --edt-slate-d: #1e293b;
    --edt-copper: #b45309;
    --edt-copper-s: #f7ead8;
    --edt-paper: #fbf9f4;
    --edt-paper2: #f3f0e8;
    --edt-ink: #1b2432;
    --edt-ink2: #4c5a6b;
    --edt-ink3: #8792a3;
    --edt-line: #ddd8cb;
    --edt-line2: #ebe7dc;
    --edt-green: #2f7a55;
    --edt-green-s: #e4f1ea;
    --edt-red: #a8382c;
    --edt-red-s: #f8e8e6;
    --edt-amber: #96700c;
    --edt-amber-s: #f9f0d9;

    --tk-bg: #eeece5;
    --tk-card: #ffffff;
    --tk-card2: var(--edt-paper2);
    --tk-ink: var(--edt-ink);
    --tk-ink2: var(--edt-ink2);
    --tk-ink3: var(--edt-ink3);
    --tk-line: var(--edt-line);
    --tk-line2: var(--edt-line2);
    --tk-accent: var(--edt-slate);
    --tk-accent2: var(--edt-slate-d);
    --tk-accent-soft: #e7eaef;
    --tk-ok: var(--edt-green);
    --tk-ok-soft: var(--edt-green-s);
    --tk-warn: var(--edt-amber);
    --tk-warn-soft: var(--edt-amber-s);
    --tk-danger: var(--edt-red);
    --tk-danger-soft: var(--edt-red-s);

    background:
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(30, 41, 59, .03) 39px 40px),
        repeating-linear-gradient(180deg, transparent 0 39px, rgba(30, 41, 59, .03) 39px 40px),
        var(--tk-bg);
}

[data-theme="dark"] .edt-page {
    --edt-slate: #9fb0c9;
    --edt-slate-d: #c3cfe0;
    --edt-copper: #e0a45c;
    --edt-copper-s: #33240f;
    --edt-paper: #131922;
    --edt-paper2: #182029;
    --edt-ink: #e6ecf4;
    --edt-ink2: #a9b6c6;
    --edt-ink3: #78859a;
    --edt-line: #2b3542;
    --edt-line2: #212a35;
    --edt-green: #63c69a;
    --edt-green-s: #14301f;
    --edt-red: #ef8d80;
    --edt-red-s: #331d1a;
    --edt-amber: #dfb453;
    --edt-amber-s: #30270f;

    --tk-bg: #0d1219;
    --tk-card: #161d26;
    --tk-accent-soft: #1e2733;
    background:
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, .015) 39px 40px),
        repeating-linear-gradient(180deg, transparent 0 39px, rgba(255, 255, 255, .015) 39px 40px),
        var(--tk-bg);
}

/* ---------------- 首屏 ---------------- */
.edt-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr);
    gap: 28px;
    padding: 28px 30px;
    border: 1px solid var(--edt-line);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(30, 41, 59, .05), transparent 46%),
        var(--tk-card);
    box-shadow: 0 24px 50px -44px rgba(30, 41, 59, .6);
}
.edt-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--edt-slate);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
}
[data-theme="dark"] .edt-label { background: var(--edt-copper); color: #22160a; }
.edt-hero h1 {
    margin: 14px 0 10px;
    font-family: var(--tk-serif);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.26;
    color: var(--edt-slate-d);
}
[data-theme="dark"] .edt-hero h1 { color: var(--edt-ink); }
.edt-sub { margin: 0 0 12px; font-size: 15.5px; line-height: 1.78; color: var(--edt-ink2); max-width: 60ch; }
.edt-leadtext { margin: 0 0 16px; font-size: 14px; line-height: 1.85; color: var(--edt-ink2); max-width: 64ch; }
.edt-leadtext b { color: var(--edt-copper); }
[data-theme="dark"] .edt-leadtext b { color: var(--edt-copper); }
.edt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.edt-chips li {
    padding: 4px 11px;
    border-radius: 6px;
    border: 1px dashed var(--edt-line);
    background: var(--edt-paper2);
    font-size: 12.5px;
    color: var(--edt-ink2);
}

/* 右侧资产总览 */
.edt-total {
    align-self: center;
    padding: 20px 18px;
    border-radius: 14px;
    background: var(--edt-paper);
    border: 1px solid var(--edt-line);
    box-shadow: inset 0 0 0 4px rgba(180, 83, 9, .05);
}
.edt-total-label { font-size: 12px; letter-spacing: .14em; color: var(--edt-ink3); font-weight: 700; }
.edt-total-num {
    font-family: var(--tk-mono);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--edt-copper);
    font-variant-numeric: tabular-nums;
}
.edt-total-rows { margin-top: 10px; font-size: 12.5px; }
.edt-total-rows div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--edt-line2); }
.edt-total-rows div:last-child { border-bottom: none; }
.edt-total-rows dt { color: var(--edt-ink3); }
.edt-total-rows dd { margin: 0; font-family: var(--tk-mono); color: var(--edt-ink2); }

/* ---------------- 主区 ---------------- */
.edt-main { display: grid; grid-template-columns: minmax(0, 350px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; }
.edt-side { display: grid; gap: 18px; align-content: start; }

/* 资产档案卡 */
.edt-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.edt-asset {
    position: relative;
    padding: 16px 16px 14px;
    border-radius: 12px;
    background: var(--edt-paper);
    border: 1px solid var(--edt-line);
    box-shadow: 0 6px 16px -14px rgba(30, 41, 59, .5);
    overflow: hidden;
}
.edt-asset::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 46px;
    background: var(--edt-paper2);
    border-right: 1px dashed var(--edt-line);
}
.edt-asset::after {
    content: "";
    position: absolute;
    left: 16px; top: 0; bottom: 0;
    width: 14px;
    background:
        radial-gradient(circle at 50% 8px, var(--tk-card) 3.4px, transparent 3.8px) 0 0 / 14px 30px repeat-y;
}
.edt-asset-body { padding-left: 62px; }
.edt-asset-no {
    display: inline-block;
    font-family: var(--tk-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--edt-copper);
    letter-spacing: .08em;
}
.edt-asset h3 { margin: 4px 0 2px; font-size: 15.5px; font-weight: 800; color: var(--edt-ink); line-height: 1.4; }
.edt-asset .edt-asset-cat { font-size: 12px; color: var(--edt-ink3); margin-bottom: 10px; }
.edt-asset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    font-size: 12.5px;
}
.edt-asset-grid div { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dotted var(--edt-line2); padding-bottom: 3px; }
.edt-asset-grid dt { color: var(--edt-ink3); }
.edt-asset-grid dd { margin: 0; font-family: var(--tk-mono); color: var(--edt-ink2); }
.edt-asset-grid .wide { grid-column: 1 / -1; }
.edt-asset-grid .net dd { color: var(--edt-copper); font-weight: 700; }
.edt-progress {
    margin-top: 11px;
    height: 9px;
    border-radius: 3px;
    background: var(--edt-line2);
    border: 1px solid var(--edt-line);
    overflow: hidden;
    position: relative;
}
.edt-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--edt-copper), #d99a4e); }
.edt-progress i {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--edt-green);
}
.edt-asset-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.edt-del {
    border: none;
    background: transparent;
    color: var(--edt-ink3);
    cursor: pointer;
    font-size: 14px;
    padding: 1px 6px;
    border-radius: 5px;
}
.edt-del:hover { color: var(--edt-red); background: var(--edt-red-s); }

/* 类别占比 */
.edt-cats { display: grid; gap: 10px; }
.edt-cat-row { display: grid; grid-template-columns: 74px 1fr 132px; gap: 10px; align-items: center; font-size: 13px; }
.edt-cat-row .nm { color: var(--edt-ink2); font-weight: 600; }
.edt-cat-bar { height: 12px; border-radius: 3px; background: var(--edt-line2); border: 1px solid var(--edt-line); overflow: hidden; }
.edt-cat-bar span { display: block; height: 100%; background: var(--edt-slate); }
.edt-cat-row .val { font-family: var(--tk-mono); font-size: 12.5px; color: var(--edt-ink2); text-align: right; }
[data-theme="dark"] .edt-cat-bar span { background: var(--edt-copper); }

/* 到期提醒 */
.edt-alerts { display: grid; gap: 9px; }
.edt-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 13.5px;
    line-height: 1.7;
    border: 1px solid transparent;
}
.edt-alert.is-warn { background: var(--edt-amber-s); color: var(--edt-amber); }
.edt-alert.is-err { background: var(--edt-red-s); color: var(--edt-red); }
.edt-alert.is-info { background: var(--edt-accent-soft); color: var(--edt-ink2); }
.edt-alert .ic { flex: none; font-size: 15px; line-height: 1.5; }
.edt-alert b { color: inherit; }

/* 台账表 */
.edt-table td.num { font-family: var(--tk-mono); }
.edt-table tr.is-over td { background: var(--edt-red-s); }
.edt-table tr.is-soon td { background: var(--edt-amber-s); }

/* 说明 */
.edt-spec { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.edt-spec th, .edt-spec td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edt-line2); }
.edt-spec th { width: 130px; color: var(--edt-copper); font-weight: 700; background: var(--edt-paper2); }
.edt-spec td { color: var(--edt-ink2); line-height: 1.8; }
.edt-spec tr:last-child th, .edt-spec tr:last-child td { border-bottom: none; }

@media (max-width: 1080px) {
    .edt-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .edt-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
    .edt-hero h1 { font-size: 27px; }
    .edt-assets { grid-template-columns: minmax(0, 1fr); }
    .edt-cat-row { grid-template-columns: 64px 1fr 108px; }
    .edt-spec th { width: auto; display: block; border-bottom: none; padding-bottom: 2px; }
    .edt-spec td { padding-top: 2px; }
}