/* Sprint 32 Sub-9 / Sub-10: SaaS UI (auth + dashboard + admin) */

/* Auth 画面 (login / signup / forgot-password / reset-password) */
.auth-body {
  min-height: 100vh;
  display: flex;
  background: linear-gradient(180deg, var(--camel-main-base) 0%, var(--camel-sub) 100%);
}

.auth-shell {
  margin: auto;
  width: 100%;
  max-width: 440px;
  padding: 48px 24px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo {
  height: 56px;
  display: inline-block;
}

.auth-tagline {
  margin-top: 12px;
  font-size: 14px;
  color: var(--camel-text-muted);
}

.auth-tagline strong {
  color: var(--camel-accent);
}

.auth-card {
  background: var(--camel-sub);
  border: 1px solid var(--camel-border);
  border-radius: var(--camel-radius-lg);
  padding: 32px;
  box-shadow: var(--camel-shadow-md);
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--camel-text);
  margin: 0 0 8px;
  text-align: center;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--camel-text-muted);
  margin: 0 0 24px;
  text-align: center;
}

.auth-error {
  background: #FDE8E8;
  border: 1px solid var(--camel-error);
  color: var(--camel-error);
  padding: 12px 16px;
  border-radius: var(--camel-radius-md);
  font-size: 14px;
  margin-bottom: 16px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 13px;
  color: var(--camel-text);
  font-weight: 500;
}

.auth-field input,
.auth-field select {
  padding: 10px 12px;
  border: 1px solid var(--camel-border-strong);
  border-radius: var(--camel-radius-md);
  font-size: 15px;
  font-family: inherit;
  background: var(--camel-sub);
  color: var(--camel-text);
  min-height: 40px;
}

.auth-field input:focus,
.auth-field select:focus {
  outline: none;
  border-color: var(--camel-accent);
  box-shadow: 0 0 0 3px rgba(31, 77, 138, 0.12);
}

.auth-submit {
  margin-top: 8px;
  padding: 12px 24px;
  background: var(--camel-accent);
  color: var(--camel-sub);
  border: none;
  border-radius: var(--camel-radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 120ms;
}

.auth-submit:hover {
  background: var(--camel-accent-dark);
}

.auth-links {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
}

.auth-links a {
  color: var(--camel-accent);
}

.auth-sep {
  display: inline-block;
  margin: 0 8px;
  color: var(--camel-text-soft);
}

.auth-footnote {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--camel-border);
  font-size: 12px;
  color: var(--camel-text-muted);
  line-height: 1.6;
}

.auth-copy {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  color: var(--camel-text-soft);
}

/* Dashboard 共通 */
.dashboard-body {
  background: var(--camel-main-base);
  min-height: 100vh;
}

.dashboard-main {
  padding-bottom: 64px;
}

.dashboard-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
}

.dashboard-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--camel-text);
  margin: 0 0 8px;
}

.dashboard-subtitle {
  font-size: 14px;
  color: var(--camel-text-muted);
  margin: 0 0 32px;
}

.dashboard-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--camel-text);
  margin: 0 0 16px;
  border-left: 4px solid var(--camel-accent);
  padding-left: 12px;
}

/* 使用量カード */
.usage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.usage-card {
  background: var(--camel-sub);
  border: 1px solid var(--camel-border);
  border-radius: var(--camel-radius-lg);
  padding: 24px;
  box-shadow: var(--camel-shadow-sm);
}

.usage-card__label {
  font-size: 13px;
  color: var(--camel-text-muted);
  margin-bottom: 8px;
}

.usage-card__value {
  font-size: 36px;
  font-weight: 700;
  color: var(--camel-accent);
  line-height: 1;
}

.usage-card__unit {
  font-size: 12px;
  color: var(--camel-text-soft);
  margin-top: 8px;
}

.usage-card--warn .usage-card__value {
  color: var(--camel-warn);
}

.usage-card--error .usage-card__value {
  color: var(--camel-error);
}

/* チャート */
.dashboard-chart-section {
  background: var(--camel-sub);
  border: 1px solid var(--camel-border);
  border-radius: var(--camel-radius-lg);
  padding: 24px;
  margin-bottom: 40px;
  box-shadow: var(--camel-shadow-sm);
}

.chart-container {
  position: relative;
  height: 280px;
  max-width: 100%;
}

/* 通知 */
.dashboard-notice {
  background: var(--camel-sub-accent);
  border: 1px solid var(--camel-warn);
  border-radius: var(--camel-radius-lg);
  padding: 16px 24px;
  margin-bottom: 32px;
}

.dashboard-notice .dashboard-section-title {
  border-color: var(--camel-warn);
}

.notice-body {
  font-size: 14px;
  color: var(--camel-text);
  line-height: 1.7;
}

.notice-body ul {
  margin: 0;
  padding-left: 20px;
}

/* アクション群 */
.dashboard-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ユーザー管理画面 */
.users-actions {
  margin-bottom: 24px;
}

/* dt25 Sub-9: 操作結果の通知行 (ロール変更/無効化/削除/招待の成功・失敗)。
   成功で alert を出さないための表示先。 */
.users-status {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--camel-radius-md);
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--camel-border);
  background: var(--camel-main-base);
  color: var(--camel-text-muted);
}

.users-status[hidden] {
  display: none !important;
}

.users-status--success {
  border-left: 3px solid var(--camel-accent);
}

/* エラー地/文字はトークンの正本ペアを使う。文字は --c-error(#DC2626) ではなく
   --c-error-strong(#B22222) にして #FEE2E2 上で 5.4:1 (WCAG AA 4.5:1 超) を確保する。 */
.users-status--error {
  border-left: 3px solid var(--c-error, #DC2626);
  background: var(--c-error-bg, #FEE2E2);
  color: var(--c-error-strong, #B22222);
}

.users-table-section {
  background: var(--camel-sub);
  border: 1px solid var(--camel-border);
  border-radius: var(--camel-radius-lg);
  overflow: hidden;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.users-table thead {
  background: var(--camel-main-base);
}

.users-table th,
.users-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--camel-border);
  vertical-align: middle;
}

.users-table th {
  font-size: 13px;
  font-weight: 600;
  color: var(--camel-text-muted);
}

.users-table__loading {
  text-align: center;
  color: var(--camel-text-soft);
  padding: 32px;
}

.role-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--camel-border);
}

.role-badge--admin { background: #E0E8F4; color: var(--camel-accent); border-color: var(--camel-accent); }
/* ★dt25 Sub-9: FB3 で admin/member の 2 種へ集約したとき member だけ取り残されていた
   (JS は role-badge--member を出力するのに対応ルールが無く、素の .role-badge のまま
   admin と区別が付かなかった)。admin=アクセント色 / member=無彩色で階層を出す。 */
.role-badge--member { background: #F0F3F7; color: #4B5563; }
/* legacy 値 (chief/staff/executive) は DB 正規化で member へ吸収済み。
   発行済み JWT / 未移行行が残っている間の表示用に残置。 */
.role-badge--chief { background: #FFF6E0; color: #8B6E2C; border-color: #D4A85A; }
.role-badge--staff { background: #F0F3F7; color: #4B5563; }
.role-badge--executive { background: #EBE5D8; color: #7B5B2F; border-color: var(--camel-sandstone); }

.users-row-actions {
  display: flex;
  gap: 8px;
}

.users-row-actions button {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--camel-border-strong);
  background: var(--camel-sub);
  color: var(--camel-text-muted);
  border-radius: var(--camel-radius-sm);
  cursor: pointer;
}

.users-row-actions button:hover {
  background: var(--camel-main-base);
  color: var(--camel-accent);
}

.users-row-actions button.is-danger {
  border-color: var(--camel-error);
  color: var(--camel-error);
}

.users-row-actions button.is-danger:hover {
  background: #FDE8E8;
}

/* 招待モーダル */
.invite-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSS 詳細度バグ修正: 上の .invite-modal{display:flex} が UA の [hidden]{display:none} を
   カスケード起源で常に上書きするため、hidden 属性が効かず (1) ページ表示時に勝手に開く
   (2) キャンセル/バックドロップで modal.hidden=true にしても消えない。
   admin_users.html はグローバル [hidden]{display:none!important} を持つ CSS を読まないため
   この要素を誰も救済していない。class+属性で詳細度を上げ !important で起源差も担保して確実に隠す。
   開く時は hidden 属性が外れるので .invite-modal{display:flex} に素通りし挙動は不変。
   参照: feedback_hidden_attr_vs_class_display */
.invite-modal[hidden] {
  display: none !important;
}

.invite-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 41, 55, 0.5);
}

.invite-modal__panel {
  position: relative;
  background: var(--camel-sub);
  border-radius: var(--camel-radius-lg);
  padding: 32px;
  max-width: 440px;
  width: calc(100% - 32px);
  box-shadow: var(--camel-shadow-lg);
}

.invite-modal__panel h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

.invite-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.invite-result {
  margin-top: 16px;
  padding: 16px;
  background: var(--camel-main-base);
  border: 1px dashed var(--camel-accent);
  border-radius: var(--camel-radius-md);
}

.invite-result__label {
  font-size: 12px;
  color: var(--camel-text-muted);
  margin: 0 0 8px;
}

.invite-result__url {
  display: block;
  font-family: var(--camel-font-mono);
  font-size: 12px;
  word-break: break-all;
  color: var(--camel-accent);
  background: var(--camel-sub);
  padding: 8px;
  border-radius: var(--camel-radius-sm);
  border: 1px solid var(--camel-border);
}

/* ================================================================
   設定画面: デモ用アカウントの注記 (dt25 Sub-9, 2026-07-28)
     demo@camel.co.jp だけは氏名/PW がデプロイのたびに seed 値へ戻る
     (意図的な managed credential)。無言だと「保存が効かない」に見えるので注記する。
     ★sprint37_settings.css ではなくここに置く理由: 本 Sub の変更範囲 (settings.html は
       sprint32_saas.css も読む) に収めるため。トークンは設定画面と同じ --c-* / --sp-* 系。
     既定は非表示。サーバが is-visible を付けたときだけ出す (= デモ用アカウントのときだけ)。
   ================================================================ */
.settings-demo-note {
  display: none;
}

.settings-demo-note.is-visible {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 var(--sp-3, 24px);
  padding: 12px 16px;
  background: var(--c-sand, #FAF6EE);
  border: 1px solid var(--c-border, #E0DCD0);
  border-left: 3px solid var(--c-decor, #C9A77C);
  border-radius: var(--r-md, 8px);
  font-size: var(--fs-sm, 14px);
  line-height: 1.6;
  color: var(--c-text-sub, #4B5563);
  max-width: 70ch;
}

.settings-demo-note__icon {
  flex: none;
  display: inline-flex;
  color: var(--c-decor, #C9A77C);
  margin-top: 1px;
}

/* ================================================================
   ロール変更モーダル (dt25 Sub-9, 2026-07-28)
     オーナー実機FB「ロール変更クリックするとフリーワード入力なんだけど
     ドロップダウンがいい。」→ prompt() を廃してモーダル + <select> に統一。
     レイアウト/backdrop/panel は招待モーダル (.invite-modal) を共有し、
     この画面だけの追加要素 (対象表示 / 補足 / エラー) をここで定義する。
   ================================================================ */

/* .invite-modal を併記しているので既存ルールで既に隠れるが、将来
   併記が外れても勝手に開かないよう同じ保険を明示的に持たせる
   (参照: feedback_hidden_attr_vs_class_display)。 */
.role-modal[hidden] {
  display: none !important;
}

/* 誰のロールを変えるのかを必ず目に入れる (取り違え防止)。 */
.role-modal__target {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--camel-main-base);
  border: 1px solid var(--camel-border);
  border-radius: var(--camel-radius-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--camel-text-muted);
  word-break: break-all;
}

.role-modal__target-name {
  display: block;
  font-weight: 600;
  color: var(--camel-text);
}

.role-modal__hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--camel-text-soft);
}

/* 409 (自己降格 / 最後の管理者) 等、サーバが返した理由をそのまま出す枠。
   文字色は --c-error-strong (地 #FEE2E2 上で 5.4:1 = WCAG AA)。 */
.role-modal__error {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--c-error, #DC2626);
  background: var(--c-error-bg, #FEE2E2);
  border-radius: var(--camel-radius-sm);
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-error-strong, #B22222);
}

.role-modal__error[hidden] {
  display: none !important;
}

/* レスポンシブ */
@media (max-width: 767px) {
  .auth-shell { padding: 24px 16px; }
  .auth-card { padding: 24px; }
  .dashboard-container { padding: 16px; }
  .usage-cards { grid-template-columns: 1fr; }
  .dashboard-title { font-size: 22px; }
}

@media (max-width: 538px) {
  .users-table { font-size: 12px; }
  .users-table th, .users-table td { padding: 8px; }
}