/* ============================================================
 * theme-maison.css — エステサロン版 テーマ（Maison）
 * 2026-09-13
 *
 * 方向性: ホワイト × ブラック × シャンパンゴールド × ピンク。
 *         見出しは高コントラストのセリフ体を広いレタースペースで。
 *         罫線はヘアライン。余白を広く取り、装飾は足さない。
 *
 * 読み込み位置: 各ページの </head> 直前（ページ内 <style> より後）。
 *               既存 style.css とページ内インラインスタイルの色・書体だけを
 *               上書きするための重ねがけ。レイアウトは変更しない。
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Jost:wght@300;400;500&family=Shippori+Mincho:wght@400;500;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root {
  /* 地と面 */
  --m-ground:       #FAF7F7;
  --m-ground-alt:   #F1ECEC;
  --m-surface:      #FFFFFF;
  --m-surface-soft: #FCFAFA;

  /* 文字 */
  --m-ink:          #111111;
  --m-ink-soft:     #3A3533;
  --m-muted:        #8A807E;
  --m-muted-light:  #ADA3A1;

  /* 罫線 */
  --m-hairline:     rgba(17, 17, 17, 0.10);
  --m-hairline-sub: rgba(17, 17, 17, 0.06);

  /* アクセント（ゴールド） */
  --m-gold:         #C8A96E;
  --m-gold-deep:    #9A7C42;
  --m-gold-light:   #E3CFA8;
  --m-gold-pale:    #F7EFDF;

  /* 差し色（ブラッシュ） */
  --m-blush:        #D9A6B0;
  --m-blush-pale:   #FBF0F2;

  /* 状態色（4色の中で役割を分ける）
     完了・確定 = ゴールド / 要対応 = ピンク / キャンセル・エラー = ローズ / 情報 = 黒とグレー */
  --m-sage:         #9A7C42;   /* 完了・確定 */
  --m-sage-pale:    #F7EFDF;
  --m-amber:        #A85A6C;   /* 要対応・未確認 */
  --m-amber-pale:   #FBF0F2;
  --m-wine:         #9E4257;   /* キャンセル・エラー */
  --m-wine-pale:    #FAEAEE;

  /* 書体 */
  --m-serif: "Playfair Display", "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --m-sans:  "Jost", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* 既存システムの変数名を上書き（style.css 側の参照をそのまま活かす） */
  --color-bg:             #FAF7F7;
  --color-bg-card:        #FFFFFF;
  --color-bg-secondary:   #FCFAFA;
  --color-text:           #111111;
  --color-text-secondary: #3A3533;
  --color-text-muted:     #8A807E;
  --color-border:         rgba(17, 17, 17, 0.10);
  --color-border-light:   rgba(17, 17, 17, 0.06);
  --color-primary:        #C8A96E;
  --color-blue:           #C8A96E;
  --color-teal:           #9A7C42;
  --color-coral:          #D9A6B0;
  --radius-sm:  3px;
  --radius-md:  4px;
  --radius-lg:  6px;
}

/* ------------------------------------------------------------
 * 1. 基本
 * ---------------------------------------------------------- */

body {
  background: var(--m-ground) !important;
  color: var(--m-ink) !important;
  font-family: var(--m-sans) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

a { color: var(--m-gold-deep); }

::selection { background: var(--m-gold-pale); color: var(--m-ink); }

/* ------------------------------------------------------------
 * 2. ヘッダー（ノワール地・ブランドはセリフ大文字）
 * ---------------------------------------------------------- */

.navbar {
  background: var(--m-ink) !important;
  color: #FAF7F7 !important;
  height: auto !important;
  min-height: 70px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap;
  gap: 14px;
  padding: 0 1.75rem !important;
  border-bottom: 1px solid rgba(227, 207, 168, 0.28);
}
.container {
  max-width: 1760px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}

.navbar-brand,
.navbar-brand a {
  font-family: var(--m-serif) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: #FAF7F7 !important;
}
.navbar-brand i { display: none; }

.navbar-right {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: rgba(255, 255, 255, 0.62) !important;
  gap: 14px !important;
}
.navbar-right a {
  color: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(227, 207, 168, 0.32) !important;
  border-radius: 2px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em;
  transition: border-color .2s, color .2s, background .2s;
}
.navbar-right a:hover {
  color: #FFF !important;
  border-color: var(--m-gold-light) !important;
  background: rgba(227, 207, 168, 0.10) !important;
}
.shop-name {
  background: transparent !important;
  border: 1px solid rgba(227, 207, 168, 0.32);
  border-radius: 2px !important;
  color: var(--m-gold-light) !important;
  font-size: 12px !important;
  letter-spacing: 0.10em;
  padding: 5px 13px !important;
}

/* ------------------------------------------------------------
 * 3. メインナビ（下線タブ。塗りつぶさない）
 * ---------------------------------------------------------- */

.mainnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--m-hairline) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
}
.mainnav .nav-link,
a.nav-link {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1.5px solid transparent !important;
  border-radius: 0 !important;
  color: var(--m-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
  padding: 11px 15px 10px !important;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.mainnav .nav-link i { font-size: 15px; opacity: .75; }
.mainnav .nav-link:hover { color: var(--m-ink) !important; }
.mainnav .nav-link.active,
a.nav-link.active {
  background: transparent !important;
  color: var(--m-ink) !important;
  border-bottom-color: var(--m-gold) !important;
  font-weight: 500 !important;
}
.mainnav .nav-link.active i { opacity: 1; color: var(--m-gold-deep); }

.subnav, .cast-subnav, .tab-bar, .tabs {
  border-bottom: 1px solid var(--m-hairline) !important;
  background: transparent !important;
}

/* ------------------------------------------------------------
 * 4. カード・指標
 * ---------------------------------------------------------- */

.card, .metric, .stat-card, .period-card, .slot-card, .res-card,
.announcement-card, .post-card, .template-card, .preview-box,
.setting-section, .control-panel {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-hairline) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

.card-title, .section-title, .ctitle, .metrics-group-label, .page-title {
  font-family: var(--m-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--m-muted) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--m-hairline-sub);
  margin-bottom: 14px !important;
}

.metric { padding: 1.05rem 1.15rem !important; }
.mlabel, .metric-label, .stat-label, .plabel, .timer-label, .kpi-item > div:first-child {
  font-size: 11px !important;
  color: var(--m-muted) !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.mval, .metric-value, .stat-value, .pval, .timer-value, .num, .value, .val,
.res-total, .amount-value, .month-row-amount, .ptotal {
  font-family: var(--m-serif) !important;
  font-weight: 400 !important;
  color: var(--m-ink) !important;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.mval, .metric-value, .stat-value { font-size: 33px !important; line-height: 1.15; }
.msub, .metric-sub, .pexp, .note, .footer-note, .id-hint, .msg-time {
  font-size: 11.5px !important;
  color: var(--m-muted-light) !important;
}

.trend-up   { color: var(--m-sage) !important; }
.trend-down { color: var(--m-wine) !important; }
.green      { color: var(--m-sage) !important; }
.red        { color: var(--m-wine) !important; }

.progress-bar-wrap, .progress-wrap {
  background: var(--m-ground-alt) !important;
  border-radius: 0 !important;
  height: 2px !important;
}
.progress-bar, .progress-fill {
  background: var(--m-gold) !important;
  border-radius: 0 !important;
  height: 2px !important;
}

.kpi-item { border-right: 1px solid var(--m-hairline-sub) !important; }

/* ------------------------------------------------------------
 * 5. ボタン（角丸を落とし、主ボタンはノワール、金は細線で）
 * ---------------------------------------------------------- */

.btn, button.btn, a.btn, .vt-btn, .mark-btn, .save-btn-wrap .btn {
  font-family: var(--m-sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.07em !important;
  border-radius: 2px !important;
  border: 1px solid var(--m-hairline) !important;
  background: var(--m-surface) !important;
  color: var(--m-ink) !important;
  padding: 9px 18px !important;
  box-shadow: none !important;
  transition: background .2s, border-color .2s, color .2s;
}
.btn:hover {
  background: var(--m-surface-soft) !important;
  border-color: var(--m-gold-light) !important;
}

.btn-primary, .btn-blue, .btn-confirm, .btn-login, .btn-start {
  background: var(--m-ink) !important;
  border-color: var(--m-ink) !important;
  color: #FAF7F7 !important;
}
.btn-primary:hover, .btn-blue:hover, .btn-confirm:hover, .btn-login:hover, .btn-start:hover {
  background: #2B2725 !important;
  border-color: #2B2725 !important;
  color: #FFF !important;
}

.btn-teal, .btn-complete {
  background: transparent !important;
  border-color: var(--m-sage) !important;
  color: var(--m-sage) !important;
}
.btn-teal:hover, .btn-complete:hover { background: var(--m-sage-pale) !important; }

.btn-danger, .btn-delete, .btn-del, .image-delete-btn {
  background: transparent !important;
  border-color: var(--m-wine) !important;
  color: var(--m-wine) !important;
}
.btn-danger:hover, .btn-delete:hover, .btn-del:hover { background: var(--m-wine-pale) !important; }

.btn-outline {
  background: transparent !important;
  border-color: var(--m-gold) !important;
  color: var(--m-gold-deep) !important;
}
.btn-outline:hover { background: var(--m-gold-pale) !important; }

.btn-ghost, .btn-back, .btn-cancel {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--m-muted) !important;
}
.btn-ghost:hover, .btn-back:hover, .btn-cancel:hover {
  color: var(--m-ink) !important;
  background: var(--m-ground-alt) !important;
}

.btn-sm { font-size: 11.5px !important; padding: 6px 12px !important; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] {
  opacity: .42 !important;
  cursor: not-allowed !important;
  border-color: var(--m-hairline) !important;
  background: var(--m-ground-alt) !important;
  color: var(--m-muted) !important;
}

/* ------------------------------------------------------------
 * 6. バッジ（塗りは淡く、文字は濃く）
 * ---------------------------------------------------------- */

.badge, .type-badge, .status-badge, .shop-badge, .tax-badge, .slot-badge,
.deadline-badge, .img-badge, .main-badge, .closed-badge, .cdm-type-badge,
.unread-badge, .notify-badge, .res-chip, .shift-chip {
  font-family: var(--m-sans) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em !important;
  border-radius: 2px !important;
  padding: 3px 9px !important;
  background: var(--m-ground-alt) !important;
  color: var(--m-ink-soft) !important;
  border: 0 !important;
}
.badge-teal, .badge-ok, .badge-success, .badge-active, .badge-completed,
.badge-confirmed, .badge-done, .badge-paid, .alert-ok {
  background: var(--m-sage-pale) !important; color: var(--m-sage) !important;
}
.badge-gray, .badge-read, .badge-locked {
  background: var(--m-ground-alt) !important; color: var(--m-muted) !important;
}
.badge-blue {
  background: var(--m-ground-alt) !important; color: var(--m-ink-soft) !important;
}
.badge-amber, .badge-pending, .badge-unread {
  background: var(--m-amber-pale) !important; color: var(--m-amber) !important;
}
.badge-coral, .badge-cancelled, .badge-failed {
  background: var(--m-wine-pale) !important; color: var(--m-wine) !important;
}
.type-vip  { background: var(--m-gold-pale) !important; color: var(--m-gold-deep) !important; }
.type-normal { background: var(--m-ground-alt) !important; color: var(--m-muted) !important; }
.type-caution { background: var(--m-amber-pale) !important; color: var(--m-amber) !important; }
.type-ng   { background: var(--m-wine-pale) !important; color: var(--m-wine) !important; }

.rank.gold   { color: var(--m-gold-deep) !important; }
.rank.silver { color: #A9A2A0 !important; }
.rank.bronze { color: #B08A62 !important; }

/* ------------------------------------------------------------
 * 7. 入力
 * ---------------------------------------------------------- */

.field label, .form-label, label, .label, .plabel, .opt-label {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--m-muted) !important;
  letter-spacing: 0.09em;
}
input[type=text], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=email], input[type=tel], input[type=search],
select, textarea, .input, .form-control, .rate-input, .rate-type-sel {
  font-family: var(--m-sans) !important;
  font-size: 14px !important;
  color: var(--m-ink) !important;
  background: var(--m-surface) !important;
  border: 1px solid var(--m-hairline) !important;
  border-radius: 2px !important;
  padding: 9px 11px !important;
  box-shadow: none !important;
  transition: border-color .2s;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--m-gold) !important;
  box-shadow: 0 0 0 2px var(--m-gold-pale) !important;
}
input::placeholder, textarea::placeholder { color: var(--m-muted-light) !important; }
input[readonly], input:disabled, select:disabled, textarea[readonly], .form-readonly {
  background: var(--m-ground-alt) !important;
  color: var(--m-muted) !important;
}
input[type=checkbox], input[type=radio] { accent-color: var(--m-gold-deep); }

/* ------------------------------------------------------------
 * 8. 表
 * ---------------------------------------------------------- */

table, .data-table, .matrix-table, .shift-table, .exp-table,
.receipt-table, .summary-table {
  border-collapse: collapse !important;
  font-size: 13.5px !important;
}
th {
  font-family: var(--m-sans) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: var(--m-muted) !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
  background: transparent !important;
  border-bottom: 1px solid var(--m-hairline) !important;
  padding: 10px 9px !important;
}
td {
  color: var(--m-ink) !important;
  border-bottom: 1px solid var(--m-hairline-sub) !important;
  padding: 11px 9px !important;
}
tbody tr:hover td { background: var(--m-surface-soft) !important; }
.text-right { text-align: right !important; }
td.num, .text-right .num {
  font-family: var(--m-serif) !important;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
 * 9. 一覧行・予約カード
 * ---------------------------------------------------------- */

.rsv-item, .item-row, .customer-row, .cast-row, .month-row, .history-row,
.announcement-item, .perm-item, .course-row, .prow, .summary-row, .info-row,
.date-row, .app-row, .shift-row, .timer-row, .amount-row {
  border-bottom: 1px solid var(--m-hairline-sub) !important;
}
.rsv-item:hover, .item-row:hover, .customer-row:hover, .month-row:hover,
.cast-row:hover { background: var(--m-surface-soft) !important; }
.rsv-time, .res-time, .month-row-time, .history-date, .shift-date, .date-day {
  font-family: var(--m-serif) !important;
  font-weight: 500 !important;
  color: var(--m-ink) !important;
  letter-spacing: 0.02em;
}
.cast-name, .customer-name, .course-name, .res-no, .modal-title, .month-title,
.announcement-title, .post-title, .drawer-head, .res-head, .slot-header {
  font-family: var(--m-serif) !important;
  font-weight: 500 !important;
  color: var(--m-ink) !important;
  letter-spacing: 0.03em;
}
.month-title, .modal-title { font-size: 19px !important; }

/* ------------------------------------------------------------
 * 10. モーダル・ドロワー
 * ---------------------------------------------------------- */

.modal-overlay, .cast-drawer-overlay {
  background: rgba(17, 17, 17, 0.42) !important;
  backdrop-filter: blur(2px);
}
.modal, .shift-modal, .cast-drawer {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-hairline) !important;
  border-radius: 3px !important;
  box-shadow: 0 18px 48px rgba(17, 17, 17, 0.14) !important;
}
.modal-title {
  border-bottom: 1px solid var(--m-hairline-sub);
  padding-bottom: 12px;
}
.modal-close, .drawer-close {
  color: var(--m-muted) !important;
  background: none !important;
  border: 0 !important;
}
.modal-close:hover { color: var(--m-ink) !important; }
.modal-footer { border-top: 1px solid var(--m-hairline-sub) !important; }

/* ------------------------------------------------------------
 * 11. 通知
 * ---------------------------------------------------------- */

.alert, .flash, .msg, .error-box {
  font-size: 13px !important;
  border-radius: 2px !important;
  border: 1px solid var(--m-hairline) !important;
  border-left-width: 2px !important;
  padding: 11px 14px !important;
  background: var(--m-surface-soft) !important;
  color: var(--m-ink-soft) !important;
}
.alert-ok, .alert-success, .alert-green, .msg-ok {
  background: var(--m-sage-pale) !important;
  border-left-color: var(--m-sage) !important;
  color: var(--m-sage) !important;
}
.alert-err, .alert-danger, .msg-err, .error-box {
  background: var(--m-wine-pale) !important;
  border-left-color: var(--m-wine) !important;
  color: var(--m-wine) !important;
}
.alert-yellow, .alert-info {
  background: var(--m-amber-pale) !important;
  border-left-color: var(--m-amber) !important;
  color: var(--m-amber) !important;
}

/* ------------------------------------------------------------
 * 12. 空状態
 * ---------------------------------------------------------- */

.empty, .empty-state {
  color: var(--m-muted-light) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.06em;
  padding: 3rem 1rem !important;
}
.empty-icon { color: var(--m-ground-alt) !important; font-size: 34px; }

/* ------------------------------------------------------------
 * 13. カレンダー・シフト表
 * ---------------------------------------------------------- */

.cal-grid, .cal-header, .cal-day, .cal-date, .matrix-cell, .rt-slot {
  border-color: var(--m-hairline-sub) !important;
}
.cal-day.today, .today-col, .is-active, .selected {
  background: var(--m-gold-pale) !important;
  box-shadow: inset 0 -2px 0 var(--m-gold) !important;
}
.sun { color: var(--m-wine) !important; }
.sat { color: #8A807E !important; }
.rt-slot-free        { background: var(--m-surface) !important; }
.rt-slot-busy-auto   { background: var(--m-gold-pale) !important; }
.rt-slot-busy-closure{ background: var(--m-ground-alt) !important; }
.matrix-shift, .has-shift { background: var(--m-sage-pale) !important; }
.legend-dot, .status-dot { border-radius: 50% !important; }
.dot-ok { background: var(--m-sage) !important; }
.dot-ng { background: var(--m-wine) !important; }

/* ------------------------------------------------------------
 * 14. ログイン（縦中央・ブランド主役）
 * ---------------------------------------------------------- */

body.login, .login-page { background: var(--m-ground) !important; }
.brand {
  font-family: var(--m-serif) !important;
  font-weight: 300 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  color: var(--m-ink) !important;
}

/* ------------------------------------------------------------
 * 15. キャスト（セラピスト）マイページ
 * ---------------------------------------------------------- */

.cast-topbar {
  background: var(--m-ink) !important;
  color: #FAF7F7 !important;
  border-bottom: 1px solid rgba(227, 207, 168, 0.28) !important;
}
.cast-topbar a, .cast-hamburger { color: rgba(255, 255, 255, 0.78) !important; }
.msg-cast  { background: var(--m-gold-pale) !important; color: var(--m-ink) !important; }
.msg-admin { background: var(--m-ground-alt) !important; color: var(--m-ink-soft) !important; }

/* ------------------------------------------------------------
 * 16. 領収書・印刷
 * ---------------------------------------------------------- */

.receipt-wrap { background: #FFF !important; border: 1px solid var(--m-hairline) !important; }
.receipt-header, .atena-name, .amount-value {
  font-family: var(--m-serif) !important;
  letter-spacing: 0.04em;
}
@media print {
  body { background: #FFF !important; }
  .no-print, .navbar, .mainnav { display: none !important; }
  .card, .receipt-wrap { border-color: #CCC !important; }
}

/* ------------------------------------------------------------
 * 17. スマートフォン
 * ---------------------------------------------------------- */

@media (max-width: 600px) {
  .navbar { height: auto !important; padding: 12px 1rem !important; flex-wrap: wrap; gap: 8px; }
  .navbar-brand, .navbar-brand a { font-size: 17px !important; letter-spacing: 0.16em !important; }
  .mainnav { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .mainnav .nav-link { white-space: nowrap; padding: 10px 12px !important; }
  .mval, .metric-value, .stat-value { font-size: 27px !important; }
  .card-title, .section-title { letter-spacing: 0.12em !important; }
}