/*
 * 画面の土台。色・文字・角の丸み・影はすべて CSS の変数で書き、値はデザインごとのファイル
 * (theme-fluent.css・theme-material.css・theme-lightning.css・theme-smarthr.css)が [data-theme="…"] の下で決める。
 * <body data-theme> は ApplicationController#current_theme が付ける(Turbo が入れ替えるのは <body> なので <html> には付けない)。
 * ここには直接の色の値を書かない(どのデザインでも読めるように)。
 */

/* ===== 文書全体 ===== */
/* 背景は body に持たせる(html に背景が無ければ、body の背景が画面全体に広がる) */
body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; font-size: var(--font-size, 0.9375rem); }
a { color: var(--color-link); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* 上の帯の中は、帯の文字の色で枠を描く(主色と帯の色が同じ・近いデザインで枠が見えなくなるため) */
.site-brand:focus-visible, .site-tools :focus-visible { outline-color: var(--color-on-header); }
h1, h2, h3 { line-height: 1.35; }
h1 { font-size: var(--h1-size, 1.5rem); font-weight: var(--h1-weight, 700); }

/* ===== 骨組み: メニューと本文 =====
 * ログイン中は .site-nav の中身(ブランド・主な行き先・道具)を、.app-shell の格子に直接並べる(display: contents)。
 * 既定は「上の帯に ブランド・道具、2段目に 主な行き先」。デザインごとのファイルが格子の形を変える */
.app-shell { min-height: 100vh; }
.app-shell-signed-in { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); grid-template-areas: "brand tools" "links links" "main main"; grid-template-rows: auto auto 1fr; }
.site-nav { display: contents; }
.site-brand { grid-area: brand; display: flex; align-items: center; padding: 0 1rem; min-height: var(--header-height, 3rem); font-weight: 700; white-space: nowrap; text-decoration: none; color: var(--color-on-header); background: var(--color-header); }
.site-tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.4rem 1rem; min-height: var(--header-height, 3rem); box-sizing: border-box; color: var(--color-on-header); background: var(--color-header); min-width: 0; }
.site-links { grid-area: links; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem 0.75rem; background: var(--color-nav-bg); border-bottom: 1px solid var(--color-border); }
.site-links a { display: block; padding: 0.45rem 0.75rem; border-radius: var(--radius); color: var(--color-nav-text); text-decoration: none; white-space: nowrap; }
.site-links a:hover { background: var(--color-nav-hover-bg); }
.site-links a[aria-current="page"] { background: var(--color-nav-active-bg); color: var(--color-nav-active-text); font-weight: 700; }
.site-main { grid-area: main; min-width: 0; }
.site-search { display: flex; gap: 0.25rem; flex: 1 1 14rem; max-width: 24rem; min-width: 0; }
.site-search input[type="search"] { flex: 1; min-width: 0; width: auto; }
.site-nav form.button_to { display: inline; margin: 0; }
.site-user { margin-left: auto; font-size: 0.875rem; opacity: 0.9; white-space: nowrap; }
.site-logout { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 幅が狭いときは、どのデザインでも 上の帯(ブランド・道具)と、横並びの主な行き先に畳む */
@media (max-width: 40rem) {
  .app-shell-signed-in.app-shell-signed-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "tools" "links" "main"; grid-template-rows: auto auto auto 1fr; }
  .app-shell-signed-in .site-links { flex-direction: row; flex-wrap: wrap; width: auto; padding: 0.25rem 0.5rem; }
  .app-shell-signed-in .site-brand { min-height: 2.5rem; }
  .site-search { max-width: none; flex-basis: 100%; }
  .site-user { margin-left: 0; }
}

/* ===== 部品の土台 ===== */
input[type="text"], input[type="search"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="number"], input[type="email"], input[type="tel"], select, textarea {
  font: inherit; color: var(--color-text); background: var(--color-field-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-field, var(--radius));
  min-height: var(--control-height, 2rem); padding: 0.25rem 0.5rem; box-sizing: border-box; max-width: 100%;
}
textarea { min-height: 6rem; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); width: 1rem; height: 1rem; vertical-align: -0.15em; }
button, input[type="submit"], input[type="button"], .karte-button, .site-nav .button_to button {
  font: inherit; font-size: 0.875rem; font-weight: var(--button-weight, 600); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-height, 2rem); padding: 0 var(--button-padding, 0.9rem); border-radius: var(--radius-button, var(--radius)); box-sizing: border-box;
  color: var(--color-button-text); background: var(--color-button-bg); border: 1px solid var(--color-button-border); text-decoration: none; white-space: nowrap;
}
button:hover, input[type="submit"]:hover, .karte-button:hover { background: var(--color-button-hover-bg); }
/* 主な操作(保存・ログイン・記録する、など)は塗りつぶし */
input[type="submit"].karte-button, .karte .karte-button, .karte-record-buttons .karte-button, .activity-form input[type="submit"], .theme-picker input[type="submit"] {
  color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary);
}
input[type="submit"].karte-button:hover, .karte .karte-button:hover, .activity-form input[type="submit"]:hover, .theme-picker input[type="submit"]:hover { background: var(--color-primary-hover); }
/* 上の帯の中のボタン・入力欄は帯の色に合わせる */
.site-tools input[type="search"] { background: var(--color-header-field-bg); border-color: var(--color-header-field-border); color: var(--color-text); }
.site-tools button, .site-tools input[type="submit"] { color: var(--color-header-button-text); background: var(--color-header-button-bg); border-color: var(--color-header-button-border); }

/* 状態の印(タグ) */
.activity-kind, .inquiry-kind, .inquiry-status, .badge-late, .karte-closed-badge {
  display: inline-block; padding: 0 0.5rem; border-radius: var(--radius-tag, var(--radius)); font-size: 0.8125rem; line-height: 1.6; border: 1px solid var(--tag-border-color, transparent);
}

/* ===== カルテ ===== */
.karte { max-width: 72rem; margin: 0 auto; padding: var(--page-padding, 1.25rem 1rem); color: var(--color-text); }
.karte a { color: var(--color-link); }
.karte-breadcrumb { font-size: 0.875rem; margin-bottom: 0.5rem; color: var(--color-muted); }
.karte-sep { color: var(--color-muted); margin: 0 0.25rem; }
.karte-header { margin-bottom: 1rem; }
.karte-header h1 { font-size: var(--h1-size, 1.5rem); margin: 0 0 0.5rem; }
.karte-header-list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; }
.karte-header-list > div { display: flex; gap: 0.5rem; }
.karte-header-list dt { color: var(--color-muted); }
.karte-header-list dd { margin: 0; overflow-wrap: anywhere; }
/* カードは同じ幅で横幅いっぱいに並べ、狭ければ折り返す(grid の auto-fit だと、時点の行が全列にまたがって空の列を残す) */
.karte-summary { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.karte-summary > .karte-card { flex: 1 1 0; min-width: 9rem; }
.karte-card { border: 1px solid var(--color-card-border); border-radius: var(--radius-card); padding: 0.75rem 0.9rem; background: var(--color-surface); box-shadow: var(--shadow-card); }
.karte-card h2 { font-size: 0.75rem; font-weight: 600; color: var(--color-muted); margin: 0 0 0.25rem; }
.karte-figure { font-size: 1.25rem; font-weight: var(--figure-weight, 700); margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.karte-note { font-size: 0.75rem; color: var(--color-muted); margin: 0.25rem 0 0; }
.karte-refreshed { flex-basis: 100%; font-size: 0.75rem; color: var(--color-muted); margin: 0; }
.karte-tabs { display: flex; flex-wrap: wrap; gap: var(--tabs-gap, 0.25rem); border-bottom: 1px solid var(--color-border); }
.karte-tabs a { padding: 0.5rem 0.75rem; text-decoration: none; color: var(--color-tab-text); border-bottom: var(--tab-underline, 2px) solid transparent; margin-bottom: -1px; }
.karte-tabs a.active { border-bottom-color: var(--color-primary); color: var(--color-tab-active-text); font-weight: 700; }
.karte-panel { padding: 1rem 0; }
.karte-basic > div { display: grid; grid-template-columns: 10rem 1fr; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--color-divider); }
.karte-basic dt { color: var(--color-muted); }
.karte-basic dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.karte-store-group { font-size: 1.05rem; margin: 1rem 0 0.5rem; }
.karte-subtotal { font-size: 0.875rem; font-weight: 400; color: var(--color-muted); margin-left: 0.75rem; }
.karte-table-wrap { overflow-x: auto; }
.karte-table { width: 100%; border-collapse: collapse; background: var(--color-table-bg); }
.karte-table th, .karte-table td { text-align: left; padding: var(--cell-padding, 0.45rem 0.6rem); border-bottom: 1px solid var(--color-divider); }
.karte-table th { background: var(--color-table-head-bg); color: var(--color-table-head-text); font-weight: 600; font-size: 0.8125rem; }
.karte-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) {
  .karte-basic > div { grid-template-columns: 1fr; gap: 0; }
}
.karte-unit { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.karte-unit a { padding: 0.25rem 0.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-button, var(--radius)); text-decoration: none; }
.karte-unit a.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.karte-chart { margin-bottom: 1rem; }
.karte-chart h2, .karte-panel h2.karte-section { font-size: 0.95rem; margin: 1rem 0 0.5rem; }
.karte-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin-bottom: 0.75rem; }
.karte-pagination { margin: 0.75rem 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.karte-empty { color: var(--color-muted); }

/* 商談・訪問 */
.karte-notice { background: var(--color-success-bg); color: var(--color-success-fg); padding: 0.5rem 0.75rem; border-radius: var(--radius); margin: 0 0 0.75rem; }
.karte-record-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.activity { border-bottom: 1px solid var(--color-border); padding: 0.75rem 0; }
.activity p { margin: 0 0 0.25rem; }
.activity-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--color-muted); font-size: 0.875rem; }
.activity-kind { background: var(--color-info-bg); color: var(--color-info-fg); }
.activity-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-menus, .activity-next { font-size: 0.875rem; color: var(--color-muted); }
.activity-form { max-width: 40rem; }
.activity-form .field { margin-bottom: 0.9rem; border: 0; padding: 0; }
.activity-form label, .activity-form legend { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.activity-form .check label { display: inline; font-weight: 400; }
.activity-form input[type=text], .activity-form textarea, .activity-form select { width: 100%; }
.activity-form .actions { display: flex; gap: 1rem; align-items: center; }
.form-errors { background: var(--color-danger-bg); color: var(--color-danger-fg); padding: 0.5rem 0.75rem; border-radius: var(--radius); margin-bottom: 1rem; }
.form-errors p, .form-errors ul { margin: 0; }

/* 問い合わせ */
.inquiry, .inquiry-entry { border-bottom: 1px solid var(--color-border); padding: 0.75rem 0; }
.inquiry p, .inquiry-entry p { margin: 0 0 0.25rem; }
.inquiry-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--color-muted); font-size: 0.875rem; }
.inquiry-kind, .inquiry-status { background: var(--color-info-bg); color: var(--color-info-fg); }
.inquiry-kind-complaint { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.inquiry-status-open { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.inquiry-status-done { background: var(--color-neutral-bg); color: var(--color-neutral-fg); }
.badge-late { background: var(--color-late-bg); color: var(--color-late-fg); }
.karte-closed-badge { background: var(--color-neutral-bg); color: var(--color-neutral-fg); font-size: 0.875rem; font-weight: 400; vertical-align: middle; }
.inquiry-title { font-weight: 600; }
.inquiry-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.inquiry-completed { font-size: 0.875rem; color: var(--color-muted); }
.inquiry-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 1rem; }
.karte-unclosed { font-size: 0.7rem; color: var(--color-late-fg); }

/* ログイン */
.login { max-width: 24rem; margin: 4rem auto; padding: 1.5rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.login-title { font-size: 1.5rem; text-align: center; margin: 0 0 1.5rem; }
.login-form .field { margin-bottom: 1rem; }
.login-form label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.login-form input[type=text], .login-form input[type=password] { width: 100%; }
.login-submit { width: 100%; font-size: 1rem; }
@media (max-width: 26rem) {
  .login { margin: 1.5rem 1rem; }
}

/* 一覧の続きの読み込み(infinite_scroll_controller.js) */
.list-more { margin: 0.75rem 0; min-height: 1.5rem; font-size: 0.875rem; }
.list-more.is-loading a { visibility: hidden; }
.list-more.is-loading::after { content: "読み込み中…"; color: var(--color-muted); }

/* 顧客の検索の絞り込み */
.customer-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 1rem; padding: 0.75rem; background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.customer-filter input[type="search"] { width: 16rem; max-width: 100%; }
/* 顧客の一覧のタブ(グループ・法人・店舗)と、タブごとの表 */
.customer-tabs { margin-bottom: 0.75rem; }
.customer-tab-count { display: inline-block; min-width: 1.5em; padding: 0 0.4em; border-radius: 999px; background: var(--color-neutral-bg); color: var(--color-neutral-fg); font-size: 0.75rem; font-weight: 400; text-align: center; font-variant-numeric: tabular-nums; }
.customer-table .nowrap { white-space: nowrap; }
/* 列が多いので、狭い幅では名称・住所を1文字ずつに潰さず、表を横に送る */
.customer-table .wide { min-width: 10rem; }
/* 並べ替えられる列の見出し。並べている列に ▲▼ */
.customer-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.customer-sort:hover { text-decoration: underline; }
.customer-sort-mark { margin-left: 0.2em; font-size: 0.7em; }
/* グループの営業担当は全員を1人1行で。人数が多いので字を小さく */
.customer-reps { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; line-height: 1.4; white-space: nowrap; }
.customer-reps-count { color: var(--color-muted); font-size: 0.75rem; }

/* ===== 表示の設定 ===== */
.theme-picker fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
.theme-picker legend { font-weight: 600; margin-bottom: 0.5rem; }
.theme-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.theme-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.5rem; align-items: start; padding: 0.75rem; cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.theme-option:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.theme-option input { grid-row: 1 / span 3; margin-top: 0.2rem; }
.theme-option-name { font-weight: 700; }
.theme-option-description { font-size: 0.8125rem; color: var(--color-muted); }
/* 見本の箱。data-theme でそのデザインの変数が効く */
.theme-sample { display: block; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); font-family: var(--font-body); }
.theme-sample-bar { display: block; height: 1.25rem; background: var(--color-header); }
.theme-sample-body { display: flex; gap: 0.5rem; align-items: center; padding: 0.6rem; }
.theme-sample-button { display: inline-block; padding: 0.15rem 0.7rem; font-size: 0.75rem; font-weight: 600; color: var(--color-on-primary); background: var(--color-primary); border-radius: var(--radius-button, var(--radius)); }
.theme-sample-tag { display: inline-block; padding: 0 0.45rem; font-size: 0.7rem; color: var(--color-info-fg); background: var(--color-info-bg); border: 1px solid var(--tag-border-color, transparent); border-radius: var(--radius-tag, var(--radius)); }