/* ═══════════════════════════════════════
   Maintenance Page — Redesigned
═══════════════════════════════════════ */

/* ── Page wrapper ── */
.mt-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 48px;
}

/* ── Breadcrumb ── */
.breadcrumb {
    font-size: 16px;
    color: #8aa4b0;
    padding: 16px 0 20px;
}
.breadcrumb a {
    color: #4a8fa8;
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }

/* ── Page header ── */
.mt-header {
    margin-bottom: 28px;
}
.mt-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 32px;
    font-weight: bold;
    color: #1e3548;
    margin-bottom: 6px;
}
.mt-title svg { color: #4a8fa8; flex-shrink: 0; }
.mt-subtitle {
    font-size: 15px;
    color: #8aa4b0;
    padding-left: 4px;
}

/* ── Table wrapper ── */
.mt-table-wrap {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow-x: auto;
    margin-bottom: 20px;
}

/* ── Top bar: legend + note ── */
.mt-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 13px 24px;
    border-bottom: 1px solid #e8eef2;
    flex-wrap: wrap;
}
.mt-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    color: #1e3548;
}
.mt-dot-fill {
    width: 15px;
    height: 15px;
    background: #3a7fa0;
    border-radius: 50%;
    flex-shrink: 0;
}
.mt-dot-outline {
    width: 15px;
    height: 15px;
    border: 2.5px solid #3a7fa0;
    border-radius: 50%;
    box-sizing: border-box;
    flex-shrink: 0;
}
.mt-legend-sep {
    width: 1px;
    height: 18px;
    background: #dde6ed;
    flex-shrink: 0;
}
.mt-legend-note {
    font-size: 14px;
    color: #8aa4b0;
}

/* ── Table inner (min-width keeps it scrollable on small screens) ── */
.mt-table {
    min-width: 860px;
}

/* ── Km header row ── */
.mt-km-row {
    display: flex;
    align-items: flex-end;
    border-bottom: 2px solid #d4e2ea;
    background: #f4f8fb;
}
.mt-km-label-cell {
    width: 226px;
    flex-shrink: 0;
    font-size: 16px;
    color: #a0b4c0;
    padding: 10px 0 10px 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    align-self: flex-end;
}
.mt-km-cell {
    flex: 1;
    min-width: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    height: 106px;
}
.mt-km-cell span {
    display: block;
    font-size: 16px;
    color: #7a9aaa;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* ── Data rows ── */
.maintain_line {
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #eef2f5;
    min-height: 50px;
    float: none !important;
}
.maintain_line:last-child { border-bottom: none; }
.maintain_line:hover { background: #f8fbfd; }

/* ── Item name ── */
.maintain_item {
    width: 170px;
    flex-shrink: 0;
    font-size: 19px;
    font-weight: 600;
    color: #1e3548;
    padding: 10px 0 10px 20px;
    float: none !important;
}

/* ── 說明 button ── */
.maintain_explain_btn {
    width: 50px;
    flex-shrink: 0;
    background: none !important;
    border-radius: 0 !important;
    margin: 0 6px 0 0 !important;
    text-align: center;
    float: none !important;
}
.maintain_explain_btn a {
    display: inline-block !important;
    padding: 5px 11px !important;
    font-size: 16px !important;
    color: #4a8fa8 !important;
    background: #eaf4f8 !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    font-weight: 600;
    border: 1.5px solid #b3d8ee;
    white-space: nowrap;
    transition: all 0.15s;
}
.maintain_explain_btn a:hover {
    background: #3a7fa0 !important;
    color: #fff !important;
    border-color: #3a7fa0 !important;
    border-radius: 20px !important;
}

/* ── Dot cells (更換 / 檢查 / 空) ── */
.maintain_change,
.maintain_nope,
.maintain_check {
    flex: 1;
    min-width: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 50px;
    float: none !important;
    background: none !important;
}

/* 更換: filled circle */
.maintain_change::after {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    background: #3a7fa0;
    border-radius: 50%;
}

/* 檢查: outlined circle */
.maintain_check::after {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    border: 2.5px solid #3a7fa0;
    border-radius: 50%;
    box-sizing: border-box;
}

/* 空: nothing */
.maintain_nope::after { display: none; }

/* hide old legend area (replaced with .mt-topbar) */
.maintain_num { display: none !important; }

/* ── Modal backdrop ── */
#mtModalBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 35, 50, 0.5);
    z-index: 9998;
    backdrop-filter: blur(2px);
}

/* ── Explain modal ── */
.maintain_explain_bg {
    display: none;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 740px;
    max-width: 94vw;
    max-height: 88vh;
    background: #fff !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.24) !important;
    z-index: 9999;
    padding: 0 !important;
    overflow: hidden;
}

/* Inner flex row: left image + right content */
.mt-modal-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/* Modal image area — left column, natural image size */
.maintain_explain_pic {
    float: none !important;
    width: 220px !important;
    flex-shrink: 0;
    background: none !important;
    padding: 0 !important;
    border-radius: 16px 0 0 16px;
    overflow: hidden;
    background-color: #dde8ef !important;
    display: flex;
    align-items: flex-start;
}
.maintain_explain_pic img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px 0 0 0;
}

/* Modal close button */
.mt-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1e3548;
    font-size: 18px;
    line-height: 1;
    z-index: 10;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    border: none;
    font-weight: bold;
    transition: background 0.15s;
}
.mt-modal-close:hover { background: #fff; }

/* Modal content — right scrollable column */
.mt-modal-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 26px 26px 26px 24px;
    position: relative;
}

/* Modal title */
.maintain_explain_title {
    float: none !important;
    width: auto !important;
    font-size: 22px !important;
    font-weight: bold;
    color: #1e3548;
    padding: 0 0 14px !important;
    margin-bottom: 16px;
    border-bottom: 1px solid #e2e8ed !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* Gear icon before title via SVG injected via JS */
.maintain_explain_title svg { color: #4a8fa8; flex-shrink: 0; }

/* Modal body */
.maintain_explain_txt {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: #3a4a58;
}
.mt-modal-section {
    margin-bottom: 14px;
}
.mt-modal-section:last-child { margin-bottom: 0; }
.mt-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 7px;
}
.mt-section-badge.cap { background: #dbeeff; color: #1a5f8a; }
.mt-section-badge.brk { background: #ffe5e5; color: #a00; }
.mt-modal-condition-box {
    background: #f4f8fb;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 14px;
}
.mt-modal-condition-label {
    font-size: 14px;
    color: #8aa4b0;
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.mt-modal-condition-value {
    font-size: 18px;
    font-weight: bold;
    color: #1e3548;
}

/* Hide old br clear elements inside lines */
.maintain_line br { display: none; }

/* ── Responsive ── */
@media (max-width: 720px) {
    .mt-title { font-size: 24px; }
    .mt-topbar { justify-content: flex-start; }
    .maintain_explain_bg { width: 95vw; }
}