/* 共通スタイル (Nyaangate) */
/*
  カラーテーマ変数
  - ここで定義したCSSカスタムプロパティ（変数）を上書きすることで、配色を一括で切り替え可能
  - 例）ダークテーマ時は .theme-dark や @media (prefers-color-scheme: dark) で再定義
*/
:root {
  /* ブラウザへライト/ダーク対応を通知（フォーム要素等のネイティブUI） */
  color-scheme: light;
  /* ベース */
  --color-white: #ffffff;
  --color-black: #000000;

  /* テキスト */
  /* うっすいチャトラ感（暖色・薄いオレンジ/キャメル基調） */
  --color-text: #2a1f16;           /* 濃いめのブラウン */
  --color-muted: #8a6e58;          /* ミュートなブラウン */
  --color-link: #c06f23;           /* アンバー系リンク */
  --color-error: #b00020;
  --color-ok: #0a7d00;

  /* 背景 */
  --color-bg: #faf5ef;             /* 温かみのあるごく薄いベージュ */
  --color-footer-bg: #f3ebe2;
  --color-footer-text: #6d5a4b;
  --color-code-bg: #f5eee6;        /* コード背景も温かみのあるトーンに */
  --color-card-bg: #fffaf5;        /* ほんのりクリーム */

  /* ヘッダー */
  --color-header-grad-start: #e0a86a;  /* 薄いチャトラの明るい部分 */
  --color-header-grad-end: #c8873e;    /* すこし濃いアンバー */
  --color-header-fg: var(--color-white);
  --color-nav-link: #fff1dd;           /* 明るいクリーム文字色 */
  --color-nav-link-hover-bg: rgba(255,255,255,.16);

  /* ボーダー */
  --color-card-border: #e6d7c7;    /* 温かみのある薄いタン色 */
  --color-input-border: #dccab8;

  /* 入力 */
  --color-input-bg: #fff9f2;
  --color-focus-outline: #f0a43a;  /* 視認性の高いアンバー */
  --color-label: #7b4f26;          /* ラベルもブラウン系 */

  /* ボタン */
  --color-button-bg: #c97a2b;
  --color-button-hover-bg: #b56c23;
  --color-button-active-bg: #9f5f1e;
  --color-button-text: var(--color-white);
  /* セカンダリボタン（控えめなスタイル） */
  --color-button-secondary-text: var(--color-button-bg);
  --color-button-secondary-border: #dccab8; /* 入力ボーダーと合わせる */
  --color-button-secondary-bg-hover: rgba(201,122,43,0.06);
  --color-button-secondary-active-bg: rgba(201,122,43,0.10);

  /* 影（shadow） */
  --shadow-header: 0 2px 4px rgba(0,0,0,.12);
  --shadow-card: 0 2px 6px rgba(0,0,0,.08);
  --shadow-button: 0 1px 2px rgba(0,0,0,.18);
  /* 全体で使うフォントファミリ（ここを変えるだけで全体のフォントを切り替え可能） */
  --font-family: monospace;
  /* カードの最大幅を一箇所で管理（全ページの外郭カードを統一するため） */
  --card-max-width: 480px;
}
/*
  ダークモード（自動検出）
  - OS/ブラウザの設定がダークの場合に発動
*/
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* テキスト（白いアンダーコートの柔らかい印象） */
    --color-text: #e8ecef;
    --color-muted: #aeb6bd;
    --color-link: #7bd3a8;   /* 緑の瞳のアクセント */
    --color-error: #ff808a;  /* 柔らかいコーラル */
    --color-ok: #7bd3a8;     /* ミント寄りのグリーン */

    /* 背景（薄めのチャコール） */
    --color-bg: #0f1114;
    --color-footer-bg: #111418;
    --color-footer-text: #c7ced4;
    --color-code-bg: #171b20;
    --color-card-bg: #14181c;

    /* ヘッダー（ごく僅かにグリーンニュアンス） */
    --color-header-grad-start: #14191c;
    --color-header-grad-end: #0f1417;
    --color-header-fg: #f2f5f7;
    --color-nav-link: #e6f4ec; /* 緑味をほんのり含む淡色 */
    --color-nav-link-hover-bg: rgba(255,255,255,.08);

    /* ボーダー */
    --color-card-border: #2a3036;
    --color-input-border: #30363d;

    /* 入力 */
    --color-input-bg: #12171c;
    --color-focus-outline: #7bd3a8; /* 緑目アクセントで統一 */
    --color-label: #bfd4c9;

    /* ボタン（緑系でやや低彩度） */
    --color-button-bg: #3b8068;
    --color-button-hover-bg: #33725c;
    --color-button-active-bg: #2b5f4c;
    --color-button-text: #ffffff;
  /* ダークテーマ用のセカンダリ色 */
  --color-button-secondary-text: #7bd3a8;
  --color-button-secondary-border: #30363d;
  --color-button-secondary-bg-hover: rgba(123,211,168,0.06);
  --color-button-secondary-active-bg: rgba(123,211,168,0.10);

    /* 影（shadow）: ダークで自然に見える強さに調整 */
    --shadow-header: 0 2px 4px rgba(0,0,0,.55);
    --shadow-card: 0 2px 6px rgba(0,0,0,.5);
    --shadow-button: 0 1px 2px rgba(0,0,0,.45);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-family);
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.ng-header {
  background: linear-gradient(90deg, var(--color-header-grad-start), var(--color-header-grad-end));
  color: var(--color-header-fg);
  padding: .5rem 0;
  box-shadow: var(--shadow-header);
}
.ng-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}
.logo { font-weight: 600; font-size: 1.05rem; letter-spacing: .5px; }
.nav { display: flex; gap: .75rem; }
.nav__link { color: var(--color-nav-link); font-size: .9rem; padding: .35rem .6rem; border-radius: 4px; }
.nav__link:hover { background: var(--color-nav-link-hover-bg); }
.session { margin-left: auto; font-size: .75rem; opacity: .85; }

.ng-main { max-width: 960px; margin: 1.5rem auto 2.5rem; padding: 0 1rem; }
.ng-footer { text-align: center; padding: 1.25rem 0 2rem; background: var(--color-footer-bg); font-size: .75rem; color: var(--color-footer-text); }

/* Card コンポーネント */
.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  margin: 0 auto 1.6rem;
  /* 幅は変数で管理して全ページで統一。モバイルでは幅いっぱいに広がるよう width:100% を併用 */
  width: 100%;
  max-width: var(--card-max-width);
  box-shadow: var(--shadow-card);
}
/* form-card 系クラスもデフォルトでは共通幅を使う（必要なら個別上書き可能） */
.form-card--narrow { max-width: var(--card-max-width); }
.form-card--medium { max-width: var(--card-max-width); }
.card h1 { margin-top: 0; font-size: 1.25rem; }
.row { margin: .85rem 0; }
label { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 600; letter-spacing: .5px; color: var(--color-label); }
input[type=text], input[type=password], input[type=email] {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--color-input-border); border-radius: 6px; font-size: .9rem; background: var(--color-input-bg);
}
input:focus { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; }
button { cursor: pointer; border: none; background: var(--color-button-bg); color: var(--color-button-text); padding: .6rem 1.1rem; border-radius: 6px; font-size: .9rem; box-shadow: var(--shadow-button); }
button:hover { background: var(--color-button-hover-bg); }
button:active { background: var(--color-button-active-bg); }


code { background: var(--color-code-bg); padding: .2rem .45rem; border-radius: 4px; font-size: .8rem; }

.error { color: var(--color-error); }
.ok { color: var(--color-ok); }

/* Utility */
.text-center { text-align: center; }
.muted { color: var(--color-muted); }

/* Layout utilities */
.row--space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

/* 右寄せ（ボタンなどを右端に寄せる） */
.row--right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.logs {
  /* テーブルをスクロール可能なコンテナにするため block にする（テンプレートでは table に class="logs" が付く） */
  display: block;
  max-height: 300px;
  overflow: auto;
  background: var(--color-code-bg);
  padding: .6rem;
  font-size: .85rem;
  line-height: 1.4;
  border-radius: 6px;
}

/* logs テーブル内のヘッダー/セルスタイル */
.logs thead th {
  text-align: left;
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-label);
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--color-card-border);
}
.logs tbody td {
  padding: .45rem .6rem;
  border-bottom: 1px dashed var(--color-input-border);
  vertical-align: middle;
  word-break: break-word;
}
.logs tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.02);
}
.logs tbody tr:hover {
  background: rgba(0,0,0,0.03);
}
.logs small { color: var(--color-muted); }

/* 日時・種別列は折り返し禁止（第1・第2列） */
.logs thead th:nth-child(1),
.logs thead th:nth-child(2),
.logs tbody td:nth-child(1),
.logs tbody td:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 幅制限（長い種別や余計な幅を抑える） */
.logs tbody td:nth-child(1) { max-width: 11rem; }
.logs tbody td:nth-child(2) { max-width: 8.5rem; }

/* Tokens テーブル用スタイル
   - API トークン一覧ページ (`tokens.html`) のテーブル表示を整えます
   - 小さい「Revoke」ボタンをトークン行に合わせて調整します
*/
.tokens {
  width: 100%;
  border-collapse: collapse;
  margin-top: .9rem;
  font-size: .95rem;
  background: transparent;
}
.tokens thead th {
  text-align: left;
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-label);
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--color-card-border);
}
.tokens tbody td {
  padding: .6rem .7rem;
  border-bottom: 1px dashed var(--color-input-border);
  vertical-align: middle;
  word-break: break-word;
}
.tokens tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.02);
}
.tokens tbody tr:hover {
  background: rgba(0,0,0,0.03);
}
.tokens small { color: var(--color-muted); }

/* Revoke ボタンは小さめにして状態に応じた色を付ける（グローバルな button に影響を与えない） */
.tokens .revoke {
  background: transparent;
  border: 1px solid var(--color-input-border);
  color: var(--color-button-bg);
  padding: .28rem .5rem;
  border-radius: 6px;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
}
.tokens .revoke:hover {
  background: var(--color-button-hover-bg);
  color: var(--color-button-text);
  box-shadow: var(--shadow-button);
}

/* 作成日時・トークン名・有効期限 列は折り返し禁止 */
.tokens thead th:nth-child(1),
.tokens thead th:nth-child(2),
.tokens thead th:nth-child(3),
.tokens tbody td:nth-child(1),
.tokens tbody td:nth-child(2),
.tokens tbody td:nth-child(3) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tokens tbody td:nth-child(1) { max-width: 11rem; }
.tokens tbody td:nth-child(2) { max-width: 15rem; }
.tokens tbody td:nth-child(3) { max-width: 11rem; }

/* token 名と site を同じセル内で良い見た目にする */
.token-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.token-site { margin-top: .25rem; color: var(--color-muted); }

/* セカンダリボタン（目立たせないオプション） */
.btn--secondary {
  background: transparent;
  border: 1px solid var(--color-button-secondary-border);
  color: var(--color-button-secondary-text);
  padding: .55rem 1rem;
  border-radius: 6px;
  font-size: .9rem;
  box-shadow: none;
}
.btn--secondary:hover {
  background: var(--color-button-secondary-bg-hover);
  box-shadow: none;
}
.btn--secondary:active {
  background: var(--color-button-secondary-active-bg);
}

@media (max-width: 640px) {
  .nav { flex-wrap: wrap; }
  .nav__link { padding: .4rem .55rem; }
  .card { padding: 1.2rem 1.2rem; }
}