/* ============================================================
   資金管理アプリ スタイル
   事業=緑(#2E7D32) / 個人=青(#1565C0)
   ============================================================ */
:root {
    --biz: #2E7D32;
    --biz-light: #E8F5E9;
    --biz-dark: #1B5E20;
    --per: #1565C0;
    --per-light: #E3F2FD;
    --per-dark: #0D47A1;
    --ink: #212121;
    --muted: #757575;
    --line: #e0e0e0;
    --bg: #f5f5f5;
    --danger: #c62828;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
        "Yu Gothic", Meiryo, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
}

/* ---------- ヘッダ ---------- */
.app-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 2px solid var(--line);
    flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.15rem; }
.main-nav { display: flex; gap: 16px; flex: 1; }
.main-nav a { color: var(--ink); text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent; }
.main-nav a:hover { border-bottom-color: var(--ink); }
.user-box { display: flex; align-items: center; gap: 12px; }
.user-email { color: var(--muted); font-size: .85rem; }

.app-main { padding: 16px; }
.guest-main { max-width: 420px; margin: 8vh auto; padding: 16px; }

/* ---------- フラッシュ ---------- */
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 12px; font-size: .92rem; }
.flash-success { background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
.flash-error   { background: #FFEBEE; color: #B71C1C; border: 1px solid #EF9A9A; }

/* ---------- ボタン ---------- */
.btn {
    display: inline-block;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: .9rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
.btn:hover { background: #f0f0f0; }
.btn-primary { background: #1565C0; color: #fff; border-color: #1565C0; }
.btn-primary:hover { background: #0D47A1; }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn-small { padding: 5px 10px; font-size: .82rem; }
.btn-tiny { padding: 3px 7px; font-size: .75rem; }
.btn-danger { color: var(--danger); border-color: #EF9A9A; }
.btn-danger:hover { background: #FFEBEE; }
.btn-transfer { background: #455A64; color: #fff; border-color: #455A64; font-weight: 600; }
.btn-transfer:hover { background: #37474F; }
form.inline { display: inline; }

/* ---------- 認証カード ---------- */
.auth-card { background: #fff; padding: 28px; border-radius: var(--radius); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.auth-card h1 { margin-top: 0; font-size: 1.3rem; }
.auth-card label { display: block; margin-bottom: 14px; font-size: .9rem; }
.auth-card input { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 6px; margin-top: 4px; font-size: 1rem; }
.auth-links { margin-top: 16px; font-size: .88rem; text-align: center; }
.hint { color: var(--muted); font-size: .82rem; }

/* ---------- ダッシュボード ---------- */
.dash-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.side-tabs { display: none; gap: 6px; }
.side-tab { padding: 8px 18px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; }
.side-tab.is-active[data-target="business"] { background: var(--biz); color: #fff; border-color: var(--biz); }
.side-tab.is-active[data-target="personal"] { background: var(--per); color: #fff; border-color: var(--per); }

.dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

.pane { background: #fff; border-radius: var(--radius); border-top: 4px solid; overflow: hidden; }
.pane-business { border-top-color: var(--biz); }
.pane-personal { border-top-color: var(--per); }
.pane-head { padding: 10px 14px; }
.pane-business .pane-head { background: var(--biz-light); }
.pane-personal .pane-head { background: var(--per-light); }
.pane-head h2 { margin: 0; font-size: 1.05rem; }
.pane-business .pane-head h2 { color: var(--biz-dark); }
.pane-personal .pane-head h2 { color: var(--per-dark); }

/* フィルタ */
.filter-form { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.filter-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 8px; flex-wrap: wrap; }
.filter-row label { font-size: .78rem; color: var(--muted); display: flex; flex-direction: column; }
.filter-row label.grow { flex: 1; }
.filter-form input, .filter-form select { padding: 6px; border: 1px solid var(--line); border-radius: 5px; font-size: .85rem; }
.tilde { padding-bottom: 8px; }

/* 集計 */
.totals { display: flex; gap: 16px; padding: 10px 14px; flex-wrap: wrap; background: #fafafa; border-bottom: 1px solid var(--line); }
.total-item { font-size: .82rem; color: var(--muted); }
.total-item strong { font-size: 1rem; color: var(--ink); margin-left: 4px; }
.total-item strong.neg { color: var(--danger); }

.pane-actions { display: flex; gap: 8px; padding: 10px 14px; }

/* 元帳テーブル */
.ledger-wrap { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ledger th, .ledger td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ledger thead th { background: #fafafa; color: var(--muted); font-weight: 600; position: sticky; top: 0; }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger .num.neg { color: var(--danger); font-weight: 600; }
.ledger tr.is-transfer { background: #FFF8E1; }
.badge-transfer { color: #455A64; font-weight: 700; }
.memo { cursor: help; }
.empty { text-align: center; color: var(--muted); padding: 20px; }
.row-actions { display: flex; gap: 4px; align-items: center; }

/* ---------- マスタ管理 ---------- */
.page-title { font-size: 1.25rem; }
.master-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.master-pane { background: #fff; border-radius: var(--radius); padding: 14px; border-top: 4px solid; }
.master-pane.pane-business { border-top-color: var(--biz); }
.master-pane.pane-personal { border-top-color: var(--per); }
.master-pane h2 { margin-top: 0; font-size: 1.05rem; }
.master-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 14px; }
.master-table th, .master-table td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.master-table tr.is-inactive { color: var(--muted); background: #fafafa; }
.master-form { border-top: 1px dashed var(--line); padding-top: 10px; }
.form-title { font-size: .9rem; margin: 0 0 8px; }
.form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.master-form input { padding: 7px; border: 1px solid var(--line); border-radius: 5px; flex: 1; }

/* ---------- モーダル ---------- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 5vh 16px; z-index: 100; overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }
.modal { background: #fff; border-radius: var(--radius); padding: 22px; width: 100%; max-width: 460px; }
.modal h2 { margin-top: 0; font-size: 1.15rem; }
.modal label { display: block; margin-bottom: 12px; font-size: .85rem; }
.modal input, .modal select, .modal textarea {
    width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px; margin-top: 4px; font-size: .95rem;
}
.modal .form-row { gap: 12px; }
.modal .form-row label { flex: 1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------- レスポンシブ（768px でタブ切替） ---------- */
@media (max-width: 768px) {
    .side-tabs { display: flex; }
    .dashboard, .master-grid { grid-template-columns: 1fr; }
    /* 既定では事業のみ表示。JSで切替 */
    .dashboard .pane[data-side="personal"] { display: none; }
    .dashboard.show-personal .pane[data-side="business"] { display: none; }
    .dashboard.show-personal .pane[data-side="personal"] { display: block; }
}