:root {
  --color-primary: #1a7f5a;
  --color-primary-dark: #145f44;
  --color-bg: #f4f6f5;
  --color-surface: #ffffff;
  --color-border: #dde3e0;
  --color-text: #232a28;
  --color-text-muted: #6b746f;
  --color-danger: #b3261e;
  --radius: 6px;
}

* {
  box-sizing: border-box;
}

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

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

/* --- 固定メニューバー --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: 56px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.app-header__brand {
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

.app-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}

.app-nav__link {
  padding: 8px 12px;
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}

.app-nav__link:hover {
  background: rgba(255, 255, 255, 0.15);
}

.app-nav__link.is-active {
  background: rgba(255, 255, 255, 0.25);
  font-weight: 700;
}

.app-header__user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  white-space: nowrap;
}

.link-button {
  background: none;
  border: none;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

/* --- 本文 --- */
.app-main {
  max-width: 1452px; /* 元の1100pxの1.2倍(1320px)からさらに10%拡張 */
  margin: 24px auto;
  padding: 0 20px 40px;
}

.app-footer {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
  padding: 20px 0 40px;
}

.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-toolbar h1 {
  margin: 0;
  font-size: 20px;
}

.page-toolbar__actions {
  display: flex;
  gap: 8px;
}

/* --- ボタン --- */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-primary-dark);
}

/* --- 検索・絞り込み枠 --- */
.filter-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}

.filter-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.filter-row input[type="text"],
.filter-row input[type="date"] {
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
}

.filter-row--categories {
  gap: 12px;
}

.filter-row__divider {
  margin-left: 20px;
}

/* Period欄の左に置く、対象日(Issue/Due)切り替えラジオ。スペース節約のため上下に積む(請求書一覧のみ)。 */
.period-field-toggle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

/* Item欄の右側に、フィルター結果の通貨別Subtotal合計を右寄せ表示する(請求書・領収書一覧)。 */
.filter-totals {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.filter-totals__label {
  font-size: 12px;
  color: var(--color-text-muted);
}

.filter-totals__line {
  font-size: 15px;
  font-weight: 700;
}

.period-box {
  /*
   * 幅を固定するとブラウザ(特にFirefox/Edge)のネイティブ日付inputの実際の描画幅が
   * それより広い場合にあふれ出し、隣のQuick Periodブロックと重なって見えるバグが
   * あったため、幅は固定しない(内容に応じた自然な幅のまま)。
   * Filterボタンの幅は、period-filter.js でこの要素の実測幅(offsetWidth)に
   * 合わせて動的に設定する(ブラウザ間の描画差異に依存しない確実な方法のため)。
   */
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/*
 * Quick Period(This Month/Last Month)のブロックは、ラベル+ラジオ行の高さがPeriodの
 * ラベル+日付inputより低い。.filter-rowはalign-items:centerなので、そのままだと
 * Quick Period側だけ縦方向中央寄せになり、ラジオ行がPeriodの日付inputに視覚的に
 * かぶってしまう。align-self:flex-endでこの項目だけ下端をそろえる。
 */
.quick-period-field {
  align-self: flex-end;
}

.filter-submit-btn {
  /* 初期値のフォールバック。実際の幅は period-filter.js が .period-box の実測幅に合わせて上書きする */
  width: 236px;
  text-align: center;
}

.checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 4px !important;
}

/* --- 一覧テーブル --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 13px;
}

.data-table th {
  background: #eef2f0;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* 顧客一覧のCompany Name列見出し: クリックでタイ語/英語/日本語の先頭グループを巡回する */
.sortable-th {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.sortable-th:hover {
  text-decoration: underline;
}

.sortable-th__icon {
  font-size: 9px;
  color: var(--color-text-muted);
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: #f7f9f8;
}

.data-table tr.row-cancelled td {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.data-table tr.row-cancelled:hover {
  background: none;
}

/*
 * 見積書・請求書・領収書の一覧テーブル(列数が多くMemo/Convert番号列などを追加したため、
 * 横スクロールバーを出さず1画面に収まるよう、余白とフォントサイズを少し詰める)。
 */
.data-table--list th,
.data-table--list td {
  padding: 8px 8px;
  font-size: 12.5px;
}

/* Currency列は"THB"/"JPY"の3文字のみのため大きな幅は不要 */
.data-table--list .col-currency {
  width: 52px;
}

/*
 * Memo列は自由入力で長くなり得るため、省略(...)せず全文をそのまま表示する。
 * 横幅は一定に保ちつつ、長い場合はセル内で折り返して縦に伸びる形にする。
 * word-break:break-wordだと収まる単語まで途中で割れてしまうことがあるため、
 * 単語境界(スペース)を優先し、1単語では収まらない場合のみ折り返すoverflow-wrapを使う。
 */
.data-table--list .col-memo {
  /* min-widthが無いと他の列(Actionsなど)との兼ね合いでブラウザの自動レイアウトが
     この列を必要以上に狭く計算することがあるため、下限を明示して確保する */
  min-width: 160px;
  max-width: 260px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* 一覧ページSubtotal欄のマウスオーバーで表示するItem内容の吹き出し(item-preview.js)。 */
.col-subtotal[data-item-preview] {
  cursor: help;
}

.item-preview-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  background: #1a2b22;
  color: #fff;
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.item-preview-tooltip__title {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9fd7bb;
  margin-bottom: 4px;
}

.item-preview-tooltip__line {
  overflow-wrap: break-word;
}

.item-preview-tooltip__line + .item-preview-tooltip__line {
  margin-top: 2px;
}

/* Due Dateを過ぎている請求書の行を薄い赤でハイライトする */
.data-table tr.row-overdue td {
  background: #fdecea;
}

.data-table tr.row-overdue:hover td {
  background: #fbdedb;
}

.status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.status-badge--overdue {
  background: #f8d7d5;
  color: #8a251e;
}

.status-badge--due-this-month {
  background: #fdf0d5;
  color: #8a5a10;
  /* 「Due this month」は他のバッジより長く横幅を取るため、2行に折り返して幅を抑える
     (「DUE THIS」/「MONTH」の2行になる幅に調整済み) */
  white-space: normal;
  max-width: 72px;
  text-align: center;
  line-height: 1.3;
}

.status-badge--paid {
  background: #dcf0e3;
  color: var(--color-primary-dark);
}

.status-badge--cancelled {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: var(--radius);
  background: #eceeed;
  color: var(--color-text-muted);
  margin-left: 6px;
}

.cancel-form {
  display: inline;
}

.cancel-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-danger);
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
}

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: 24px 0;
}

.note {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* --- ダッシュボード統計カード --- */
.stat-cards {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 200px;
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-card__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.stat-card__flag {
  font-size: 18px;
  line-height: 1;
}

.stat-card__value {
  font-size: 24px;
  font-weight: 700;
}

.stat-card__sub {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* --- ダッシュボードのグラフ(通貨ごとに棒グラフ+円グラフを並べる) --- */
.dashboard-charts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.chart-pair {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.chart-pair h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.chart-box__subtitle {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-text-muted);
}

.chart-pair__row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.chart-box {
  /*
   * Chart.jsのresponsive:trueは、canvasの直接の親要素にposition:relativeと
   * 明確な高さがないと正しくサイズ計算できず、円グラフが歪んで(はみ出して)
   * 描画されるバグがあったため、明示的に指定する。
   */
  position: relative;
  height: 340px;
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 560px;
}

.chart-box-wrap {
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 480px;
}

.chart-box__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* --- ログイン画面 --- */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-bg);
}

.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  width: 320px;
}

.login-card h1 {
  margin: 0 0 20px;
  font-size: 18px;
  text-align: center;
  color: var(--color-primary);
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.login-card input {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
}

.alert {
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 12px;
}

.alert--error {
  background: #fbeaea;
  color: var(--color-danger);
  border: 1px solid #f3c8c6;
}

.alert--success {
  background: #e6f4ea;
  color: var(--color-primary-dark);
  border: 1px solid #b8dfc4;
}

/* --- 新規作成フォーム --- */
.form-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.form-section h2 {
  margin: 0 0 16px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.doc-number-badge {
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: #e6f4ea;
  border: 1px solid #b8dfc4;
  border-radius: var(--radius);
  padding: 3px 8px;
}

.doc-number-badge--preview {
  color: var(--color-text-muted);
  background: #f4f6f5;
  border: 1px dashed var(--color-border);
}

.note-inline {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
}

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

/*
 * Issue Date / Due Date(Expiry Date)は上段・下段で別々のform-grid(列数が異なる)に
 * 属しているため、何もしないとそれぞれの列幅(1fr)が異なり枠の横幅がそろわない。
 * 固定幅にすることで、上段・下段の項目数によらず常に同じ幅にそろえる。
 */
.date-field {
  max-width: 220px;
}

/*
 * 日付欄を先頭に持つDocument Infoの行専用。1列目をdate-fieldと同じ固定幅にすることで、
 * 「セルの中で左寄せ、余った分は空白」ではなく「列自体を詰める」形にし、
 * Issue Date/Due Dateの箱とCategory等の間に不自然な余白ができないようにする。
 */
.form-grid--with-date {
  grid-template-columns: 220px repeat(auto-fit, minmax(180px, 1fr));
}

/*
 * Document Infoを「上段: Issue Date/Category/Currency」「下段: Due Date(またはExpiry
 * Date)/VAT Rate以降」の2段で明示的に分ける。form-gridの自動折り返しだけに頼ると、
 * 画面が広いときに列数が増えて下段の項目が上段に入り込んでしまうため、
 * 別々のform-grid divに分けて縦に並べることで、画面幅によらず段の構成を固定する。
 */
.form-grid-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-grid label,
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.form-field input,
.form-field select,
.form-field textarea {
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
}

.form-grid textarea {
  resize: vertical;
  min-height: 60px;
}

/*
 * Remark欄はItemテーブル(.data-table)の直下に、テーブルと同じ幅いっぱいで配置する。
 * .form-gridの外に単独で置くため、.form-grid labelと同じラベル見た目(色・サイズ・
 * 縦積みレイアウト)とtextareaの入力欄スタイル(枠線・padding)をここで明示的に与える。
 */
.remark-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 16px;
}

.remark-field textarea {
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

/*
 * PDF側でPayment Terms/Delivery下に大きくスペースを取って表示するため、
 * 入力側もそれに合わせて広めのテキストエリアにする。
 * width:100%だけだと画面幅(ブラウザ/ウィンドウ)によって初期表示が狭く見えることがあるため、
 * 初期サイズを明示指定する(幅が確保できる画面では1200px、それより狭い画面ではmax-widthで
 * はみ出さないよう自動的に縮小)。resize:verticalで縦方向のみ手動調整可能。
 */
.remark-textarea {
  width: 1200px;
  max-width: 100%;
  min-height: 100px;
}

/*
 * Internal Memo: 見積書/請求書/領収書 共通、Itemsの枠とは別の独立したform-sectionとして
 * 配置する社内向けメモ欄(PDFには印字しない)。ラベル・textareaの見た目は.remark-fieldと同じ。
 */
.internal-memo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.internal-memo-field textarea {
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  /* Remarkと同じ理由で初期サイズを明示指定(詳細は.remark-textareaのコメント参照) */
  width: 1200px;
  max-width: 100%;
  min-height: 100px;
}

.customer-mode-toggle {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--color-text);
}

.customer-mode-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text);
}

.autocomplete-wrapper {
  position: relative;
}

.autocomplete-results {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 220px;
  overflow-y: auto;
}

.autocomplete-item {
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}

.autocomplete-item:hover {
  background: #eef2f0;
}

.items-table input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
}

.items-table td {
  vertical-align: top;
}

.item-row--text td {
  background: #f4f6f5;
}

.item-row--text input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 13px;
  padding: 6px 8px;
}

.row-amount {
  text-align: right;
  padding-top: 12px !important;
  white-space: nowrap;
}

.remove-row-btn {
  font-size: 12px;
  padding: 6px 10px;
}

/* Itemテーブルの行ドラッグ並べ替え用ハンドル(document-form.js)。 */
.row-drag-handle {
  cursor: grab;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 16px;
  padding-top: 10px !important;
  user-select: none;
}

.row-drag-handle:active {
  cursor: grabbing;
}

.item-row.dragging {
  opacity: 0.4;
}

.totals-box {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 13px;
}

.totals-box .totals-row {
  display: flex;
  gap: 12px;
  width: 260px;
  justify-content: space-between;
}

.totals-box .totals-row.totals-row--total {
  font-weight: 700;
  font-size: 15px;
  border-top: 1px solid var(--color-border);
  padding-top: 6px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.field-errors {
  background: #fbeaea;
  border: 1px solid #f3c8c6;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  color: var(--color-danger);
  font-size: 13px;
}

.field-errors ul {
  margin: 4px 0 0;
  padding-left: 18px;
}