/* /css/massing.css - 量體評估表專屬樣式 (已整合 2026 最新排版) */

/* === 1. 整體佈局 === */
.massing-grid {
    display: flex; /* 改用 flex 確保左右面板絕對等高 */
    gap: 20px;
    align-items: stretch; 
}
aside.panel {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* === 2. KPI 數據卡片 === */
.kpi-row-arch {
    display: flex;
    gap: 1px;
    background: #111; 
    border: 1.5px solid #111;
    margin-bottom: 20px;
}
.kpi-card {
    flex: 1;
    background: #fff;
    padding: 15px;
    padding-bottom: 22px; /* 為下方的 kpi-sub 預留空間 */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.kpi-card .label {
    font-size: 10px;
    color: var(--text2);
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.1em;
}
.kpi-card .value {
    font-size: 24px;
    font-family: var(--font-mono);
    font-weight: 700;
}
.kpi-card .unit {
    font-size: 11px;
    margin-left: 4px;
}
.kpi-sub {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: var(--text3);
    font-weight: 500;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    height: 14px;
    line-height: 14px;
}

/* === 3. 左側輸入元件 === */
.spec-input {
    width: 100%;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px 0 !important;
}
.spec-input:focus {
    border-bottom: 1px solid #111 !important;
    outline: none !important;
}
.split-box { display: flex; gap: 10px; }
.split-item { flex: 1; position: relative; }
.split-lbl { position: absolute; left: 0; top: 10px; font-size: 11px; color: var(--text3); font-weight: 700; font-family: var(--font-mono); }
.split-input { padding-left: 16px !important; }

/* === 4. 右側表格區塊 (含無縫貫穿線) === */
.gantt-outer { 
    flex: 1; 
    background: var(--bg); 
    border: 1px solid #111; 
    border-bottom: none; 
    margin-bottom: 0; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
}
.gantt-outer::before,
.gantt-outer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--border-light, #ddd);
    z-index: 1; 
    pointer-events: none; 
}
.gantt-outer::before { left: 20%; }
.gantt-outer::after { left: 65%; }

.gantt-outer table { 
    width: 100% !important; 
    border-collapse: collapse; 
    table-layout: fixed; 
    position: relative; 
    z-index: 2; 
}
.gantt-outer table th,
.gantt-outer table td {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-light, #ddd) !important;
    font-size: 13.5px;
    padding: 10px 12px;
    line-height: 1.5;
}
.td-unit { font-size: 13.5px !important; font-weight: 700; text-align: center; }
.tbl-input { border: none; background: transparent; width: 100%; font-family: var(--font); font-size: 13.5px; color: var(--text); outline: none; padding: 2px 0; }
.tbl-input:focus { background: #F9FAFB; outline: 1px solid #111; }

/* === 5. NOTES 與 版權區塊 === */
.notes-section { 
    margin-top: 0 !important; 
    border: 1px solid #111 !important; 
    display: flex;
    flex-direction: column;
}
.notes-copy-row {
    text-align: left;
    padding: 8px 12px;
    font-size: 10.5px;
    color: #555;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
    border-top: 1px solid #111;
    background-color: transparent;
}

/* === 6. 防護機制隱藏鋼印 === */
.stealth-watermark { position: absolute; top: -9999px; left: -9999px; color: transparent; font-size: 1px; z-index: -100; opacity: 0; pointer-events: none; }

/* === 7. 列印優化樣式 === */
@media print {
    @page { size: A4 portrait; margin: 0; }
    body { background: #fff !important; }
    .wrap { width: 95% !important; max-width: none !important; margin: 15mm auto !important; transform: none !important; box-sizing: border-box !important; border: none !important; }
    .massing-grid { display: block; width: 100% !important; }
    aside.panel { margin-bottom: 20px; border: 1px solid #111 !important; page-break-inside: avoid; display: block; width: 100% !important; flex: none; }
    .gantt-outer { display: block; width: 100% !important; border: 1px solid #111 !important; border-bottom: none !important; }
    .gantt-outer::before, .gantt-outer::after { background-color: #ddd !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .notes-section { border: 1px solid #111 !important; margin-top: 0 !important; } 
    .notes-copy-row { border-top: 1px solid #111 !important; } 
    * { box-sizing: border-box !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #restrictedBtns { display: flex !important; }
    #btnUnlock { display: none !important; }
    .stealth-watermark { display: none !important; }
}