/*======================================================================
  同朋寺 寺務管理システム Web版 / 共通スタイル

  ※ご住職のご要望（令和8年9月4日「追加のお願い・補足事項」）
    「茶色を基本色として残さず、白を基調とした明るくシンプルな画面に。
      薄いグレー等で必要な区切りをつけ、十分な余白を取る。
      色は装飾ではなく、予定や状態などを見分けるために使う」

  画面そのものは無彩色（白・グレー）でまとめ、
  色は 予定の種類・入金の状態・警告 だけに使います。
  ※当初はFileMakerの画面に合わせたベージュ・茶でしたが、
    ご住職のご判断により白基調へ改めました。
======================================================================*/

:root {
    /* ---- 配色（白基調・無彩色） ---- */
    --bg:          #FFFFFF;   /* 全体の地色（白） */
    --panel:       #FFFFFF;   /* パネルの背景 */
    --panel-alt:   #F5F5F5;   /* 交互行・見出し帯（ごく薄いグレー） */
    --tab:         #F0F0F0;   /* タブ（非選択） */
    --tab-active:  #333333;   /* タブ（選択中）・主要ボタン */
    --accent:      #222222;   /* 見出し・強調（黒に近いグレー） */
    --accent-soft: #CCCCCC;   /* 補助の罫線 */
    --text:        #333333;   /* 本文 */
    --text-muted:  #777777;   /* 補足 */
    --line:        #E5E5E5;   /* 区切りの罫線（薄いグレー） */
    --white:       #FFFFFF;
    --danger:      #C0392B;   /* 未納・警告（赤） */
    --ok:          #2E7D4F;   /* 入金済（緑） */
    --link:        #1F5FA8;   /* リンク（青） */

    /* ---- 余白 ---- */
    --gap:  14px;
    --gap-s: 8px;
    --gap-l: 24px;

    --radius: 4px;   /* 角丸は控えめに。業務システムらしさを保つため */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", "Yu Gothic", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

a { color: var(--link); }

/*----------------------------------------------------------------------
  ヘッダー・ナビゲーション
----------------------------------------------------------------------*/
.app-header {
    background: var(--white);
    color: var(--text);
    padding: 0 var(--gap-l);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line);
}
.app-header .title {
    font-weight: bold;
    font-size: 15px;
    letter-spacing: .04em;
}
.app-header .user {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: var(--gap);
}
.app-header .user a { color: var(--text-muted); text-decoration: none; }
.app-header .user a:hover { text-decoration: underline; }

.app-nav {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 2px;
    padding: 0 var(--gap-l);
    overflow-x: auto;          /* スマートフォンでは横スクロールします */
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 48px;
    z-index: 49;
}
.app-nav a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.app-nav a:hover { color: var(--text); background: var(--panel-alt); }
.app-nav a.on {
    color: var(--text);
    font-weight: bold;
    border-bottom-color: var(--tab-active);   /* 選択中は下線だけで示します */
}

/*----------------------------------------------------------------------
  レイアウト
----------------------------------------------------------------------*/
.wrap { max-width: 1280px; margin: 0 auto; padding: var(--gap-l); }

.page-title {
    font-size: 20px;
    color: var(--accent);
    margin: 0 0 var(--gap) 0;
    padding-bottom: var(--gap-s);
    border-bottom: 1px solid var(--line);
    letter-spacing: .06em;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--gap);
    margin-bottom: var(--gap);
}
.panel > h2 {
    font-size: 14px;
    color: var(--accent);
    margin: 0 0 var(--gap-s) 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* 一覧＋詳細の2ペイン構成 */
.split { display: grid; grid-template-columns: 340px 1fr; gap: var(--gap); align-items: start; }

/* ※ご住職のご要望（令和8年9月16日）
      「PCの『登録者の編集』では案内板の表示が大きく、住所などの基本情報が
        一画面の中ですべて確認できない。案内板をもう少しコンパクトにして、
        基本情報ができるだけ一画面で確認できるようなバランスに。
        iPhoneは現在の表示のままで大丈夫」

   登録者の編集だけ、左（基本情報）を広く、右（案内板）を控えめにいたします。
   狭い画面（iPhone）では下の @media で1列になりますので、影響はございません。 */
/* ※ご住職のご要望（令和8年9月16日）
      「案内板はChromeで開く前提で行くので元の形でも構わない。
        混んでるよりはバランスよくが良い。
        基本情報のところも広すぎてというよりはバランス重視で」

   左（基本情報）と右（案内板）を、ほどよい割合にいたします。
   右を広げすぎず、左も詰まりすぎない形でございます。        */
/* ※ご住職のご要望（令和8年9月18日）
      「右側の案内板については、現在の2列表示ではなく1列表示でよいと思います。
        案内板の横幅を必要最小限にして、その分、基本情報とのバランスを
        整えていただければと思います。」                                */
.split-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 210px); }

/* ※ご住職のご要望（令和8年9月18日）
      過去帳の登録画面：左（故人の情報）を広く、右（永代経）を控えめに */
.split-deceased { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.split-edit .notice-board h2 { margin-bottom: 8px; }

/* ※ご住職のご要望（令和8年9月16日）
      案内板を「2列の表」から「札を並べる形」に改めました。
      表は中身が収まる幅を要求しますので、右側が広がり、
      左の基本情報が押し潰されておりました。
      札は幅に合わせて折り返しますので、狭い幅にも収まります。 */
/* 案内板は1列に並べます（札を縦に積みます） */
/* ※ご住職のご要望（令和8年9月23日）
      「案内板は、iPhoneでは1列表示になっているが、PCでは2列表示になっている。
        PCでも1列表示に」

   ※初心者向け解説
    flex-direction: column で縦に積む指定にしておりますが、
    念のため flex-wrap: nowrap も添えております。
    これで、どのような幅でも必ず1列に並びます。
    札の幅も、枠いっぱいに広げております。                     */
.notice-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 3px; }
.notice-item {
    display: flex; align-items: center; gap: 5px;
    width: 100%; box-sizing: border-box;
    font-size: 12px; padding: 2px 6px;
    border: 1px solid var(--line); border-radius: 3px;
    background: var(--panel); cursor: pointer; white-space: nowrap;
}
.notice-item input { margin: 0; }
.notice-item:has(input:checked) { background: #E8F0FE; border-color: #1A73E8; }

/* ※ご住職のご要望（令和8年9月18日）
      「すべて同じような幅ではなく、入力する内容に応じた幅に」
      幅は各項目でお決めしておりますので、こちらでは上限を設けません。 */
.split-edit table.form td > input[type="date"] { width: auto; }

/* 一覧を主役にする2段組み
   ※ご住職のご要望（令和8年8月・追加確認事項3 項目6）
     「対応履歴」は、左に一覧・右に入力欄という並びですが、
     .split のままですと左が340pxに固定され、
     画面を広げるほど一覧だけが狭いまま取り残されておりました。
     こちらは逆に、一覧を可変幅・入力欄を固定幅にいたします。
     1200px以下では、上下に積んで一覧を全幅で使います。 */
.split-list { grid-template-columns: minmax(0, 1fr) 380px; }

/*----------------------------------------------------------------------
  ダッシュボードの指標カード
----------------------------------------------------------------------*/
.stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent-soft);
    border-radius: var(--radius);
    padding: var(--gap);
}
.stat .label { font-size: 12px; color: var(--text-muted); }
.stat .value { font-size: 26px; font-weight: bold; color: var(--accent); line-height: 1.2; }
.stat .value .unit { font-size: 13px; font-weight: normal; margin-left: 2px; }
.stat .sub { font-size: 11px; color: var(--text-muted); }
.stat.alert { border-left-color: var(--danger); }
.stat.alert .value { color: var(--danger); }

/*----------------------------------------------------------------------
  表
----------------------------------------------------------------------*/
table.list {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    font-size: 13px;
}
table.list th {
    background: var(--panel-alt);
    color: var(--accent);
    text-align: left;
    padding: 6px 8px;
    border: 1px solid var(--line);
    font-weight: bold;
    white-space: nowrap;
}
table.list td {
    padding: 5px 8px;
    border: 1px solid var(--line);
    vertical-align: top;
}
table.list tbody tr:nth-child(even) { background: #FAFAFA; }
table.list tbody tr:hover { background: #F0F0F0; }
table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.list td.center { text-align: center; }

/* 表がはみ出す場合は、指やマウスで横に送れるようにします。
   ※以前は「768px以下のとき」だけ効いておりました。
     そのため広い画面では、はみ出した列が隣の枠に隠れて
     見えなくなっておりました（追加確認事項3 項目6の原因）。 */
.scroll-x { overflow-x: auto; }

/* 列の幅をあらかじめ決める一覧
   ※ご住職のご要望（令和8年8月・追加確認事項3 項目4）
     「関係者」「配布担当」を開いたときだけ列の割り振りが変わる件への対応です。
     長いお名前（「ふぁみり庵はいから亭　　坂元玉里店」など）が
     1行に伸びきって、他の列を押しのけてしまうのを防ぎます。
     見出し（th）に指定した幅が、そのまま列の幅になります。 */
table.list-fixed { table-layout: fixed; }
table.list-fixed td,
table.list-fixed th { overflow-wrap: anywhere; }

/* 項目名と値を並べる表（詳細画面用） */
table.form { width: 100%; border-collapse: collapse; font-size: 13px; }
table.form th {
    width: 110px;
    text-align: right;
    padding: 5px 10px 5px 0;
    color: var(--text-muted);
    font-weight: normal;
    vertical-align: top;
    white-space: nowrap;
}
table.form td { padding: 5px 0; border-bottom: 1px dotted var(--line); }

/*----------------------------------------------------------------------
  タブ（門信徒詳細画面。現行FileMakerの並びを踏襲）
----------------------------------------------------------------------*/
.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--tab-active);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tabs button {
    background: var(--tab);
    color: var(--text-muted);
    border: none;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 7px 16px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.tabs button:hover { background: #E0E0E0; }
.tabs button.on {
    background: var(--tab-active);
    color: var(--white);
    font-weight: bold;
}
.tab-body { background: var(--panel); border: 1px solid var(--line); border-top: none; padding: var(--gap); }
.tab-pane { display: none; }
.tab-pane.on { display: block; }

/*----------------------------------------------------------------------
  絞り込みタブ（門信徒一覧の上部。件数バッジ付き）
----------------------------------------------------------------------*/
.filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--gap); }
.filters a {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 5px 12px;
    font-size: 13px;
    text-decoration: none;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.filters a:hover { background: var(--panel-alt); }
.filters a.on { background: var(--tab-active); color: var(--white); border-color: var(--tab-active); }
.filters .badge {
    background: rgba(0,0,0,.12);
    border-radius: 9px;
    padding: 0 7px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.filters a.on .badge { background: rgba(255,255,255,.25); }

/*----------------------------------------------------------------------
  入力欄・ボタン
----------------------------------------------------------------------*/
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
    font-family: inherit;
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    max-width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent-soft);
    outline-offset: -1px;
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    padding: 6px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--tab-active); }
.btn.sub { background: var(--white); color: var(--text); border: 1px solid #CCCCCC; }
.btn.sub:hover { background: var(--line); }

/*----------------------------------------------------------------------
  状態表示
----------------------------------------------------------------------*/
.chip {
    display: inline-block;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--panel-alt);
    color: var(--accent);
    border: 1px solid var(--line);
}
.chip.paid   { background: #E6F2EA; color: var(--ok);     border-color: #BFDCC8; }
.chip.unpaid { background: #FBE9E7; color: var(--danger); border-color: #EFC2BD; }

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

.empty {
    padding: 28px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.pager { display: flex; gap: 4px; justify-content: center; margin-top: var(--gap); flex-wrap: wrap; }
.pager a, .pager span {
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    text-decoration: none;
    font-size: 13px;
    color: var(--text);
}
.pager .on { background: var(--tab-active); color: var(--white); border-color: var(--tab-active); }

/*----------------------------------------------------------------------
  ログイン画面
----------------------------------------------------------------------*/
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-l);
}
.login-box {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 32px 28px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 3px 12px rgba(0,0,0,.10);
}
.login-box h1 {
    font-size: 17px;
    color: var(--accent);
    text-align: center;
    margin: 0 0 4px 0;
    letter-spacing: .08em;
}
.login-box .sect { text-align: center; font-size: 11px; color: var(--text-muted); margin-bottom: var(--gap-l); }
.login-box label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.login-box input { width: 100%; margin-bottom: var(--gap); padding: 8px; }
.login-box .btn { width: 100%; padding: 10px; font-size: 14px; }
.error {
    background: #FBE9E7;
    border: 1px solid #EFC2BD;
    color: var(--danger);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: var(--gap);
}

/*----------------------------------------------------------------------
  スマートフォン対応（iPhoneでの利用を想定）
----------------------------------------------------------------------*/
/*----------------------------------------------------------------------
  画面の大きさによる出し分け

    sp-hide … スマートフォンでは隠します（副次的な列など）
    sp-only … スマートフォンでだけ出します
----------------------------------------------------------------------*/
.sp-only { display: none; }

/*----------------------------------------------------------------------
  やや狭いパソコンの画面（1200px 以下）

  ※ご住職のご要望（令和8年8月・追加確認事項3 項目6）
    「パソコンでも画面を狭くして使うことがある」とのことでしたので、
    一覧を主役にした2段組みは、この幅から上下に積みます。
    一覧が全幅を使えるようになり、操作ボタンまで見えます。
----------------------------------------------------------------------*/
@media (max-width: 1200px) {
    .split-list { grid-template-columns: 1fr; }
}

/*----------------------------------------------------------------------
  タブレット（iPad など・1024px 以下）
----------------------------------------------------------------------*/
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .split  { grid-template-columns: 1fr; }
    .split-edit { grid-template-columns: 1fr; }   /* iPhoneはこれまでどおり1列 */
    .split-deceased { grid-template-columns: 1fr; }
}

/*----------------------------------------------------------------------
  スマートフォン（iPhone など・768px 以下）

  ※ご住職は現在、FileMakerをiPhone・iPadでもお使いでございます。
    （FileMakerには iPhone 専用のレイアウトが10件ございました）
    そのため、主要な画面が手のひらでも使えるようにしております。
----------------------------------------------------------------------*/
@media (max-width: 768px) {
    .wrap { padding: var(--gap); }
    .split { grid-template-columns: 1fr; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .app-header { padding: 0 var(--gap); }
    .app-header .title { font-size: 13px; }

    /* ---- ナビゲーション ----
       項目が10件ございますので、横に流して指で送れるようにします。
       画面の上に貼り付けておき、いつでも移動できるようにいたします。 */
    .app-nav {
        padding: 0 var(--gap);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        scrollbar-width: none;
    }
    .app-nav::-webkit-scrollbar { display: none; }
    .app-nav a {
        display: inline-block;
        padding: 10px 12px;      /* 指で押しやすい高さにします */
        font-size: 13px;
    }

    /* ---- 入力欄 ----
       ※iOSは文字が16px未満の入力欄に触れると、画面を勝手に拡大します。
         拡大されますと元に戻すのが面倒でございますので、
         16pxにしてそれを防ぎます。 */
    input[type=text], input[type=password], input[type=date],
    input[type=number], input[type=email], input[type=tel],
    select, textarea {
        font-size: 16px;
        padding: 8px 10px;
    }

    /* ---- ボタン ----
       指で押しやすい大きさにします（44px は Apple の目安でございます） */
    .btn {
        padding: 10px 16px;
        font-size: 14px;
        min-height: 44px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn.sub { min-height: 38px; }

    /* ---- 入力の表 ----
       横に「項目名｜入力欄」と並べますと窮屈でございますので、
       縦に積みます。 */
    table.form, table.form tbody, table.form tr,
    table.form th, table.form td {
        display: block;
        width: auto;
    }
    table.form th {
        width: auto;
        text-align: left;
        padding: 10px 0 2px;
        font-size: 12px;
        border-bottom: none;
        white-space: normal;
    }
    table.form td {
        padding: 0 0 8px;
        border-bottom: 1px dotted var(--line);
    }
    table.form input[type=text], table.form select, table.form textarea {
        width: 100% !important;
        max-width: none;
    }

    /* ---- 一覧表 ----
       横スクロールで見せます。指で払って動かせます。 */
    .scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* 端が切れていることが分かるよう、薄い影を出します */
        background:
            linear-gradient(to right, var(--panel) 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), var(--panel) 70%) 100% 0,
            linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0)),
            linear-gradient(to left,  rgba(0,0,0,.08), rgba(0,0,0,0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    table.list { font-size: 12px; }
    table.list th, table.list td { padding: 8px 6px; }

    /* ---- タブ ----
       門信徒の詳細は9つのタブがございます。
       指で送れるようにし、押しやすい高さにいたします。 */
    .tabs button { padding: 10px 14px; font-size: 13px; min-height: 42px; }

    /* ---- 数字の大きな表示 ---- */
    .stat .value { font-size: 22px; }

    /* ---- 列の出し分け ----
       副次的な列を隠し、そのぶん見やすくいたします。
       隠した内容は、お名前の下などに小さく添えております。 */
    .sp-hide { display: none !important; }
    .sp-only { display: block; }

    /* ---- 合計行 ----
       colspan を使っている合計行は、列を隠すと位置がずれます。
       スマートフォンでは左寄せにして、崩れて見えないようにします。 */
    table.list tfoot th[colspan] { text-align: left !important; }

    /* ---- ページ送り ----
       指で押しやすい大きさにします。 */
    .pager a {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ---- 絞り込みの並び ----
       横に並べますとはみ出しますので、縦に積みます。 */
    .panel form[method=get] { flex-direction: column; align-items: stretch !important; }
    .panel form[method=get] > * { width: 100%; }
    .panel form[method=get] label { display: block; }
    .panel form[method=get] label select,
    .panel form[method=get] label input { width: 100%; }
}

/*----------------------------------------------------------------------
  小さなスマートフォン（iPhone SE など・420px 以下）
----------------------------------------------------------------------*/
@media (max-width: 420px) {
    .page-title { font-size: 17px; }
    .stat .value { font-size: 20px; }
    table.list { font-size: 11px; }
    .app-header .title { font-size: 12px; }
}

/*----------------------------------------------------------------------
  印刷
----------------------------------------------------------------------*/
@media print {
    .app-header, .app-nav, .no-print, .tabs, .filters, .pager { display: none !important; }
    body { background: var(--white); font-size: 11pt; }
    .panel, .tab-body { border: none; background: var(--white); padding: 0; }
    .tab-pane { display: block !important; }
    table.list { font-size: 10pt; }
    /* 横スクロールの枠は、紙に出すと内容を切ってしまいます。
       印刷のときだけ、はみ出しをそのまま出します。 */
    .scroll-x { overflow: visible !important; }
}

/* 動きを減らす設定にしている方への配慮 */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}