/*
 * Gazelle 顧客向け画面の要素既定スタイルと共通レイアウト（docs/spec/12_web_ui.md）。
 *
 * カラーコードを直接書かないこと。色は tokens.css のカスタムプロパティを参照する。
 */

/* ========== リセット ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
figure,
table {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

/* ========== 本文 ========== */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--gz-main-50);
  color: var(--gz-ink-900);
  font-family: var(--gz-font-family);
  font-size: var(--gz-font-body);
  line-height: var(--gz-line-height);
}

/* ========== 見出し ========== */
h1,
h2,
h3 {
  margin-bottom: var(--gz-space-2);
  color: var(--gz-main-900);
}

h1 {
  font-size: var(--gz-font-title);
}

h2 {
  font-size: var(--gz-font-section);
}

h3 {
  font-size: var(--gz-font-body);
}

/* ========== リンク ========== */
a {
  color: var(--gz-main-500);
}

a:hover {
  color: var(--gz-main-700);
}

/* ========== フォーカス ========== */
/*
 * キーボード操作で到達した要素に輪郭線を出す。ブラウザ既定の輪郭線は背景色によっては
 * 見えないため、メインカラーで描き直す。この指定を画面ごとに打ち消さないこと
 */
:focus-visible {
  outline: var(--gz-focus-width) solid var(--gz-main-500);
  outline-offset: var(--gz-focus-offset);
}

/* ========== 読み上げ専用 ========== */
/*
 * 画面には出さず、支援技術には読ませる文字。`display: none` や `visibility: hidden` は
 * 読み上げからも外れるため使わない
 */
.gz-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ========== ヘッダ ========== */
.gz-header {
  background-color: var(--gz-main-700);
  color: var(--gz-on-main);
}

.gz-header__inner {
  max-width: var(--gz-content-max-width);
  margin: 0 auto;
  padding: var(--gz-space-2) var(--gz-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gz-space-2);
  align-items: center;
  justify-content: space-between;
}

.gz-header__brand {
  display: block;
  line-height: 0; /* 画像の下に行の余白が入り、ヘッダの上下が非対称になるのを防ぐ */
}

/*
 * ロゴ画像。高さだけを決め、幅は縦横比に任せる。`img` の width / height 属性には元画像の
 * 寸法を書いてあるため、読み込み前でもこの高さ分の領域が確保される（表示のずれが起きない）
 */
.gz-header__logo {
  height: 40px;
  width: auto;
}

/*
 * ヘッダの文字（テナント名・利用者名）。本文と同じ大きさにする。補助テキストの 14px では、
 * 事務所の PC で離れた位置から所属テナントを読み取りにくい
 */
.gz-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gz-space-2);
  align-items: center;
  font-size: var(--gz-font-body);
}

/* ヘッダ上のフォーカス輪郭線は、背景が濃いため白で描く */
.gz-header :focus-visible {
  outline-color: var(--gz-on-main);
}

/* ========== ページ本体 ========== */
.gz-page {
  flex: 1;
  width: 100%;
  max-width: var(--gz-content-max-width);
  margin: 0 auto;
  padding: var(--gz-space-3);
}

.gz-page__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gz-space-2);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--gz-space-3);
}

/* 見出しの下余白は .gz-page__header が持つ（二重に空けない） */
.gz-page__header h1 {
  margin-bottom: 0;
}

.gz-card {
  background-color: var(--gz-surface);
  border: 1px solid var(--gz-ink-300);
  border-radius: var(--gz-radius);
  padding: var(--gz-space-3);
}

.gz-card + .gz-card {
  margin-top: var(--gz-space-3);
}

/* ========== フッタ ========== */
.gz-footer {
  padding: var(--gz-space-2) var(--gz-space-3);
  color: var(--gz-ink-600);
  font-size: var(--gz-font-small);
  text-align: center;
}

/* ========== 表 ========== */
.gz-table {
  width: 100%;
  background-color: var(--gz-surface);
  border-collapse: collapse;
  /* 桁を揃えて読ませるため、数値は等幅にする */
  font-variant-numeric: tabular-nums;
}

.gz-table th,
.gz-table td {
  padding: var(--gz-space-1) var(--gz-space-2);
  text-align: left;
  vertical-align: top;
}

.gz-table thead th {
  background-color: var(--gz-main-100);
  border-top: 3px solid var(--gz-main-500);
  border-bottom: 1px solid var(--gz-main-300);
  font-weight: bold;
  white-space: nowrap;
}

.gz-table tbody td {
  border-bottom: 1px solid var(--gz-ink-300);
}

.gz-table tbody tr:hover td {
  background-color: var(--gz-main-50);
}

/* 行全体が遷移の起点になる表 */
.gz-table--linked tbody tr:hover td {
  cursor: pointer;
}

.gz-table__empty {
  padding: var(--gz-space-3);
  color: var(--gz-ink-600);
  text-align: center;
}

/* 画面幅が狭い端末では表を横スクロールさせる */
.gz-table-scroll {
  overflow-x: auto;
}

/* ========== フォーム部品 ========== */
label {
  display: block;
  font-weight: bold;
}

input[type='text'],
input[type='password'],
input[type='date'],
input[type='datetime-local'],
input[type='number'],
input[type='search'],
select,
textarea {
  width: 100%;
  padding: var(--gz-space-1);
  background-color: var(--gz-surface);
  border: 1px solid var(--gz-ink-300);
  border-radius: var(--gz-radius);
  color: var(--gz-ink-900);
  font-family: inherit;
  font-size: var(--gz-font-body);
  line-height: var(--gz-line-height);
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--gz-ink-100);
  color: var(--gz-ink-600);
}

textarea {
  resize: vertical;
}

/* ========== 画面幅が狭い端末 ========== */
@media (max-width: 767px) {
  .gz-page {
    padding: var(--gz-space-2);
  }

  .gz-header__inner {
    padding: var(--gz-space-2);
  }
}

/* ========== 印刷 ========== */
/*
 * 一覧・詳細をそのまま紙に出す場面を想定し、操作部品と枠を落とす。QR コード発行画面
 * （S-06）はこのファイルを読み込まず、専用の印刷スタイルを持つ
 */
@media print {
  .gz-header,
  .gz-footer,
  .gz-no-print {
    display: none;
  }

  body {
    background-color: var(--gz-surface);
  }

  .gz-card {
    border: none;
    padding: 0;
  }
}