:root {
    --bg: #f5f6f8;
    --panel: #ffffff;
    --ink: #1f2328;
    --muted: #6b7280;
    --line: #e3e6ea;
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --warn: #b45309;
    --warn-bg: #fffbeb;
    --ok: #15803d;
    --ok-bg: #f0fdf4;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

header.topbar {
    background: #111827;
    color: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

header.topbar .brand {
    font-weight: 700;
    font-size: 16px;
    padding: 12px 0;
    margin-right: 8px;
}

header.topbar nav { display: flex; gap: 2px; flex-wrap: wrap; }

header.topbar nav a {
    color: #d1d5db;
    text-decoration: none;
    padding: 12px 14px;
    border-bottom: 2px solid transparent;
}

header.topbar nav a:hover { color: #fff; background: #1f2937; }
header.topbar nav a.active { color: #fff; border-bottom-color: var(--brand); }

header.topbar form.logout { margin-left: auto; }
header.topbar form.logout button {
    background: none;
    border: 0;
    color: #9ca3af;
    font: inherit;
    cursor: pointer;
    padding: 12px 0;
}
header.topbar form.logout button:hover { color: #fff; }

main.login { max-width: 360px; padding-top: 12vh; }
main.login h1 { margin-bottom: 16px; }
main.login label.check { display: flex; align-items: center; gap: 6px; font-weight: normal; margin-bottom: 14px; }
main.login .btn { width: 100%; padding: 8px 14px; }

main { max-width: 1280px; margin: 0 auto; padding: 20px; }

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 12px; }
.subtitle { color: var(--muted); margin: 0 0 18px; }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 18px;
}

.panel > h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.stat .label { color: var(--muted); font-size: 13px; }
.stat .value { font-size: 24px; font-weight: 700; margin-top: 2px; }
.stat.danger .value { color: var(--danger); }
.stat.warn .value { color: var(--warn); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { background: #f9fafb; font-weight: 600; color: #374151; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #fafbfc; }
tfoot td { font-weight: 700; background: #f9fafb; }

.table-wrap { overflow-x: auto; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.muted { background: #f3f4f6; color: var(--muted); }

.btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}

.btn:hover { background: #f3f4f6; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.danger { color: var(--danger); border-color: #fca5a5; }
.btn.sm { padding: 3px 10px; font-size: 13px; }

.toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .right { display: flex; gap: 8px; align-items: center; }

form .field { margin-bottom: 12px; }
form label { display: block; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #cbd2d9;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #bfdbfe; border-color: var(--brand); }
input.inline { width: 110px; padding: 4px 8px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 3px; }

.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; border: 1px solid; }
.alert.error { background: var(--danger-bg); border-color: #fecaca; color: #991b1b; }
.alert.warn { background: var(--warn-bg); border-color: #fde68a; color: #92400e; }
.alert.ok { background: var(--ok-bg); border-color: #bbf7d0; color: #166534; }
.alert ul { margin: 6px 0 0; padding-left: 20px; }

.empty { color: var(--muted); padding: 18px; text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }

/* ---------- 手機版 ---------- */
@media (max-width: 640px) {
    main { padding: 12px; }
    h1 { font-size: 18px; }

    /* 導覽列：單行可橫滑，不折行 */
    header.topbar { padding: 0 12px; gap: 10px; flex-wrap: nowrap; }
    header.topbar .brand { padding: 10px 0; font-size: 15px; white-space: nowrap; }
    header.topbar nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    header.topbar nav::-webkit-scrollbar { display: none; }
    header.topbar nav a { padding: 10px 10px; white-space: nowrap; font-size: 14px; }

    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar .right { flex-wrap: wrap; }
    .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat .value { font-size: 20px; }
    .form-grid { grid-template-columns: 1fr; }
    input.inline { width: 100%; }

    /* 表格變卡片：每列一張，欄名由 data-label 帶出來（common.html 的 script 會填） */
    table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
    table.cards thead { display: none; }
    table.cards tbody tr {
        border: 1px solid var(--line);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 6px 12px;
        background: #fff;
    }
    table.cards tbody tr:hover { background: #fff; }
    table.cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 5px 0;
        border-bottom: 1px dashed var(--line);
        text-align: right;
    }
    table.cards td:last-child { border-bottom: none; }
    table.cards td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        flex: 0 0 auto;
        text-align: left;
    }
    table.cards td[data-label=""]::before { content: none; }
    table.cards td.card-empty { display: none; }
    table.cards td.card-title {
        justify-content: flex-start;
        font-size: 16px;
        border-bottom: 1px solid var(--line);
        padding-bottom: 8px;
        margin-bottom: 2px;
    }
    table.cards td.card-title::before { content: none; }
    table.cards td.card-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 10px;
    }
    table.cards td.card-actions::before { content: none; }
    table.cards td.card-actions form { display: inline; }
    table.cards td.card-actions .btn { margin: 0; }
    table.cards tfoot { display: block; }
    table.cards tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 12px; }
    table.cards tfoot td { display: inline; padding: 0; border: none; width: auto; }
    table.cards tfoot td:empty { display: none; }
    table.cards td input[type=text], table.cards td select { width: 60%; }
    table.cards td input.inline { width: 110px; }
}

/* 年度收支：房間支出排名。每列是 <details>，點開看明細 */
.rank-list { border-top: 1px solid var(--line); }
.rank-row { border-bottom: 1px solid var(--line); }
.rank-row > summary {
    display: grid;
    grid-template-columns: 28px 72px 1fr 52px 48px 96px 14px;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    cursor: pointer;
    list-style: none;
}
.rank-row > summary::-webkit-details-marker { display: none; }
.rank-row > summary::after { content: '▸'; color: var(--muted); transition: transform .15s; }
.rank-row[open] > summary::after { transform: rotate(90deg); }
.rank-row > summary:hover { background: #f9fafb; }
.rank-row[open] > summary { background: #f3f4f6; }
.rank-row .rank-no { color: var(--muted); font-weight: 600; text-align: right; }
.rank-row .rank-room { font-weight: 700; white-space: nowrap; }
.rank-row .rank-share, .rank-row .rank-count { text-align: right; white-space: nowrap; }
.rank-row .rank-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-bar { height: 8px; background: #eef2f7; border-radius: 4px; overflow: hidden; }
.rank-bar > span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.rank-row.building .rank-bar > span { background: #9ca3af; }
.rank-detail { padding: 6px 6px 14px 44px; }
table.rank-total { width: auto; min-width: 260px; margin: 14px 0 0 auto; }
table.rank-total td { padding: 5px 10px; }

@media (max-width: 640px) {
    .rank-row > summary { grid-template-columns: 22px 1fr 44px 84px 12px; gap: 8px; }
    .rank-row .rank-bar, .rank-row .rank-count { display: none; }
    .rank-detail { padding: 4px 0 10px; }
    table.rank-total { width: 100%; }
}

/* 支出頁：編輯中的那筆 —— 表單加框、清單那一列標黃，一眼看出在改哪一筆 */
.panel.editing { border-color: var(--brand); box-shadow: 0 0 0 2px #bfdbfe; }
tr.row-editing td { background: var(--warn-bg); }

/* 年度收支：每月收支。房租（藍）與支出（橘）用同一把尺的細橫條，左端貼齊、右端圓角，兩條間隔 2px；
   預估的月份淡色。顏色是參考色盤的第 1、2 格（紅色留給負數的狀態色） */
.legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; color: var(--muted); }
.legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.swatch.s-rent, .mbar.rent { background: #2a78d6; }
.swatch.s-expense, .mbar.expense { background: #eb6834; }
.month-table td.month-bars { width: 45%; min-width: 140px; }
.mbar { display: block; height: 8px; border-radius: 0 4px 4px 0; }
.mbar + .mbar { margin-top: 2px; }
.month-table tr.estimated .mbar { opacity: .4; }
.month-table tr.estimated td:not(.month-bars) { color: var(--muted); }
.month-table tr.current td { background: #f9fafb; }
.month-table td.net-neg { color: var(--danger); font-weight: 600; }

/* 照片（fragments/attachments.html） */
.visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.photo-upload { border: 2px dashed var(--line); border-radius: 8px; padding: 12px; margin-bottom: 14px; }
.photo-upload.drag { border-color: var(--brand); background: #eff6ff; }
.photo-upload.busy { opacity: .6; pointer-events: none; }
.photo-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.photo-buttons label.btn { display: inline-block; position: relative; margin: 0; font-weight: 600; }
.photo-buttons .photo-note { flex: 1; min-width: 180px; width: auto; }
.photo-status:not(:empty) { margin-top: 8px; color: var(--muted); }
.photo-status.error { color: var(--danger); }
.drop-hint { margin-top: 6px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.photo-grid.compact { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 6px; }
.photo-card { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.photo-card > a { display: block; position: relative; aspect-ratio: 1; background: #f3f4f6; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-card .photo-role { position: absolute; top: 6px; left: 6px; box-shadow: 0 0 0 1px #fff; }
.photo-card figcaption { padding: 6px 8px 8px; }
.photo-note-form { display: flex; gap: 4px; }
.photo-note-form input.inline { flex: 1; width: auto; min-width: 0; }
.photo-actions { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-top: 4px; }
.photo-actions select { width: auto; padding: 3px 6px; font-size: 13px; }
/* 「拍照」只給手機（有觸控、沒滑鼠）；「拖進框」只給電腦 */
@media (hover: hover) and (pointer: fine) { .only-touch { display: none !important; } }
@media not all and (hover: hover) and (pointer: fine) { .only-mouse { display: none !important; } }
@media (max-width: 640px) {
    .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .photo-buttons label.btn { flex: 1; text-align: center; padding: 10px; font-size: 15px; }
    .photo-buttons .photo-note { flex-basis: 100%; }
}
.room-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

/* 只給房東看的面板（電費損益、吸收度數試算）：列印帳單時不印 */
.landlord-only { border-color: #fcd34d; }
.landlord-only h2 .badge { vertical-align: middle; margin-left: 6px; }
td.neg, .neg { color: var(--danger); font-weight: 600; }
@media print {
    .no-print { display: none !important; }
}