@charset "UTF-8";
/*!
 * vivid-ui.css — Vivid 管理・運営画面の共通UIレイヤ
 *
 * 【目的】
 *   Bootstrap 5.3 の上に薄く重ねて、画面ごとにバラバラだった見た目を統一する。
 *   操作方法・手順・画面構造は一切変えない。見た目だけを揃える。
 *
 * 【適用範囲】
 *   body.vivid-ui 配下のみ。
 *   モバイルオーダー(layouts/mo, mo2) と layouts/none には .vivid-ui を付けないので影響しない。
 *
 * 【触らないもの】※既存画面が壊れるため厳守
 *   - インラインの style 属性（座席配置の絶対座標、会計画面の入力欄幅など）
 *   - width / position / display の指定
 *   - .seat / .seat-empty / .seat-seated / .seat-select / .seat-hilight
 *     （座席の色は業務上の意味を持つ）
 */

/* ==========================================================================
   1. デザイントークン
   色相は現状（青=更新 / 緑=新規・運営 / 赤=削除・システム）を維持し、
   彩度と明度だけ落として長時間の業務でも目が疲れないようにする。
   ========================================================================== */
body.vivid-ui {
	/* --- ブランドカラー（彩度を落とした版） --- */
	--bs-primary: #2b6cb0;
	--bs-primary-rgb: 43, 108, 176;
	--bs-success: #1d7a53;
	--bs-success-rgb: 29, 122, 83;
	--bs-danger: #c53929;
	--bs-danger-rgb: 197, 57, 41;
	--bs-info: #17879b;
	--bs-info-rgb: 23, 135, 155;
	--bs-warning: #cf8b0f;
	--bs-warning-rgb: 207, 139, 15;
	--bs-secondary: #6b7580;
	--bs-secondary-rgb: 107, 117, 128;
	--bs-dark: #232a31;
	--bs-dark-rgb: 35, 42, 49;

	/* --- 文字と境界 --- */
	--bs-body-color: #23282d;
	--bs-body-font-family: system-ui, -apple-system, "Segoe UI",
		"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
		"Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
	--bs-border-color: #dfe3e8;
	--bs-border-radius: 0.375rem;
	--bs-border-radius-sm: 0.25rem;
	--bs-link-color: #2b6cb0;
	--bs-link-color-rgb: 43, 108, 176;
	--bs-link-hover-color: #1f5081;

	/* --- 独自トークン（現状の実測値を定数化したもの） --- */
	--vivid-header-h: 50px;   /* layouts の header{height:50px} と一致させる */
	--vivid-nav-w: 230px;     /* layouts の nav{width:230px} と一致させる */
	--vivid-surface: #f5f7f9; /* コンテンツ領域の背景 */
	--vivid-thead-bg: #eceff3;
	--vivid-accent: var(--bs-secondary); /* モード別アクセント。下で上書き */

	font-family: var(--bs-body-font-family);
	-webkit-font-smoothing: antialiased;
}

/* モード別アクセント色。ヘッダー上端のラインでどの画面にいるか一目で分かるようにする。
   サイドバーの色分け（管理=黒 / 運営=緑 / システム=赤）はそのまま維持している。 */
body.vivid-ui[data-vivid-mode="manage"]  { --vivid-accent: #2b6cb0; }
body.vivid-ui[data-vivid-mode="storeop"] { --vivid-accent: #1d7a53; }
body.vivid-ui[data-vivid-mode="system"]  { --vivid-accent: #c53929; }

/* ==========================================================================
   2. ヘッダー
   ========================================================================== */
body.vivid-ui > header {
	border-bottom: 1px solid var(--bs-border-color);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	background-color: #fff !important;
	box-sizing: border-box;
	border-top: 3px solid var(--vivid-accent);
}

body.vivid-ui > header h1 {
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	margin-bottom: 0;
	color: #1b2026;
}

/* 店舗切替ドロップダウン。h1 の中にあるので文字サイズを親に揃える */
body.vivid-ui > header h1 .dropdown-toggle {
	font-size: inherit !important;
	font-weight: inherit !important;
	color: var(--bs-primary) !important;
}

body.vivid-ui > header .navbar-nav .nav-link {
	font-size: 0.875rem;
	padding: 0.375rem 0.5rem;
	border-radius: var(--bs-border-radius-sm);
}

body.vivid-ui > header .navbar-nav .nav-link:hover {
	background-color: rgba(16, 24, 40, 0.05);
}

/* ==========================================================================
   3. サイドメニュー
   幅・開閉の仕組み（cookie + margin-left）は既存のまま。見た目だけ整える。
   ========================================================================== */
/* html に高さ指定が無く body.h-100 が効かないため、サイドバーの色帯が
   コンテンツの高さで途切れていた。ウィンドウ側のスクロールは従来どおりに保ったまま、
   帯だけ画面下端まで伸ばす。

   あわせてサイドバーの幅を固定する。
   レイアウトは <div class="d-flex flex-row"> の中に nav(width:230px) と
   main(w-100 = width:100%) を並べる作りで、どちらも flex-shrink 既定値1のため
   幅の取り合いになり、実際には nav が 230px まで広がれていなかった（198px）。
   さらにタイムラインのように中身の広い画面では nav が 112px まで潰され、
   メニュー文字が何行にも折り返していた。
     nav  … flex: 0 0 230px で潰れないようにする
     main … min-width: 0 で「中身より小さくなれない」既定を解除する
   main の min-width:0 が無いと、nav を固定した分そのまま横にはみ出す。
   この2つはセットで入れること。 */
body.vivid-ui nav#menu {
	flex: 0 0 var(--vivid-nav-w);
	min-height: calc(100vh - var(--vivid-header-h));
	box-sizing: border-box;
}

body.vivid-ui main#main {
	min-width: 0;
}

body.vivid-ui nav#menu > ul.nav {
	padding: 0.5rem !important;
	gap: 1px;
}

body.vivid-ui nav#menu .nav-link {
	padding: 0.4rem 0.7rem;
	border-radius: var(--bs-border-radius-sm);
	font-size: 0.9rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.86) !important;
	transition: background-color 0.12s ease, color 0.12s ease;
}

body.vivid-ui nav#menu .nav-link:hover {
	background-color: rgba(255, 255, 255, 0.14);
	color: #fff !important;
}

body.vivid-ui nav#menu .nav-link:active {
	background-color: rgba(255, 255, 255, 0.2);
}

/* いま開いているページ。項目が20個前後あるので、どこにいるか一目で分かるようにする。
   左のアクセントバーは padding の内側に置き、文字位置がホバー時とずれないようにする。 */
body.vivid-ui nav#menu .nav-link.active {
	background-color: rgba(255, 255, 255, 0.18);
	color: #fff !important;
	font-weight: 600;
	box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.85);
}

body.vivid-ui nav#menu .nav-link.active:hover {
	background-color: rgba(255, 255, 255, 0.24);
}

/* 区切りとして置かれている「————」の行。線に見えるよう文字を透かす */
body.vivid-ui nav#menu .nav-item > div.nav-link {
	color: rgba(255, 255, 255, 0.28) !important;
	letter-spacing: -0.1em;
	overflow: hidden;
	white-space: nowrap;
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
}

/* ==========================================================================
   4. タイトルバー（トグルボタン + ページ名）
   ========================================================================== */
body.vivid-ui main > .border.shadow-sm {
	border: 0 !important;
	border-bottom: 1px solid var(--bs-border-color) !important;
	box-shadow: none !important;
	background-color: #fff !important;
	padding: 0.4rem 0.5rem;
	min-height: 46px;
}

body.vivid-ui main > .border.shadow-sm .navbar-brand {
	margin: 0;
	padding: 0;
}

body.vivid-ui #togglemenu {
	border: 1px solid var(--bs-border-color);
	background-color: #fff;
	color: #4a5560;
	line-height: 1;
	padding: 0.3rem 0.55rem;
}

body.vivid-ui #togglemenu:hover {
	background-color: #f1f3f5;
	color: #1b2026;
}

body.vivid-ui main > .border.shadow-sm > .fs-4 {
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: #1b2026;
}

/* ==========================================================================
   5. コンテンツ領域
   ========================================================================== */
body.vivid-ui main {
	background-color: var(--vivid-surface) !important;
	min-height: calc(100vh - var(--vivid-header-h));
}

/* ==========================================================================
   6. テーブル
   一覧画面の見出し行を明確にする。多くの画面は <thead> を使わず
   1行目に直接 <th> を書いているため、両方のパターンに当てている。
   ========================================================================== */
body.vivid-ui .table {
	--bs-table-bg: #fff;
	--bs-table-hover-bg: rgba(43, 108, 176, 0.05);
	--bs-table-border-color: var(--bs-border-color);
	vertical-align: middle;
	background-color: #fff;
	border-radius: var(--bs-border-radius);
}

body.vivid-ui .table > thead > tr > th,
body.vivid-ui .table > tbody > tr:first-child > th {
	background-color: var(--vivid-thead-bg);
	font-weight: 600;
	font-size: 0.86rem;
	color: #3d4750;
	/* white-space はブラウザ既定(normal)のまま指定しない。
	   ここで明示すると :first-child の分だけ詳細度が上がり、
	   .table-responsive 側の nowrap 指定に勝ってしまう。 */
	border-bottom: 2px solid #d5dbe1;
	vertical-align: middle;
}

body.vivid-ui .table > tbody > tr > td {
	vertical-align: middle;
}

/* 列の多い表を横スクロールさせる。スクロールできることが分かるよう右端に影を出す。
   背景（--vivid-surface）と同色から透明へのグラデーションなので、
   端まで送ると影が消えて「もう右は無い」と分かる。 */
body.vivid-ui .table-responsive {
	position: relative;
	background:
		linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
		linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center,
		radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, 0.14), rgba(0, 0, 0, 0)) left center,
		radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, 0.14), rgba(0, 0, 0, 0)) right center;
	background-repeat: no-repeat;
	background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* 包んだ表の下マージンは外側で取るので二重にしない */
body.vivid-ui .table-responsive > .table {
	margin-bottom: 0;
}

/* 横スクロールさせる表では、見出しと数値を折り返さない。
   折り返しを許すと「カード」が1文字ずつ縦に割れて潰れるだけで、
   スクロールが働かない（表が縮んでしまう）ため。
   文章が入りうる通常のセルは従来どおり折り返す。 */
body.vivid-ui .table-responsive > .table th,
body.vivid-ui .table-responsive > .table td.text-end,
body.vivid-ui .table-responsive > .table td.text-nowrap {
	white-space: nowrap;
}

/* ==========================================================================
   7. ボタン
   Bootstrap 5.3 のボタンは .btn-* ごとにローカル変数で色を持つため、
   :root の --bs-primary 等を変えても追従しない。ここで個別に上書きする。
   ========================================================================== */
body.vivid-ui .btn {
	--bs-btn-border-radius: var(--bs-border-radius-sm);
	font-weight: 500;
	transition: background-color 0.12s ease, border-color 0.12s ease,
		box-shadow 0.12s ease;
}

/* 更新・保存・実行 */
body.vivid-ui .btn-primary {
	--bs-btn-bg: #2b6cb0;
	--bs-btn-border-color: #2b6cb0;
	--bs-btn-hover-bg: #245c96;
	--bs-btn-hover-border-color: #245c96;
	--bs-btn-active-bg: #1f5081;
	--bs-btn-active-border-color: #1f5081;
	--bs-btn-disabled-bg: #2b6cb0;
	--bs-btn-disabled-border-color: #2b6cb0;
	--bs-btn-focus-shadow-rgb: 43, 108, 176;
}

/* 新規登録 */
body.vivid-ui .btn-success {
	--bs-btn-bg: #1d7a53;
	--bs-btn-border-color: #1d7a53;
	--bs-btn-hover-bg: #196948;
	--bs-btn-hover-border-color: #196948;
	--bs-btn-active-bg: #155a3e;
	--bs-btn-active-border-color: #155a3e;
	--bs-btn-disabled-bg: #1d7a53;
	--bs-btn-disabled-border-color: #1d7a53;
	--bs-btn-focus-shadow-rgb: 29, 122, 83;
}

/* 削除 */
body.vivid-ui .btn-danger {
	--bs-btn-bg: #c53929;
	--bs-btn-border-color: #c53929;
	--bs-btn-hover-bg: #ab3123;
	--bs-btn-hover-border-color: #ab3123;
	--bs-btn-active-bg: #96291d;
	--bs-btn-active-border-color: #96291d;
	--bs-btn-disabled-bg: #c53929;
	--bs-btn-disabled-border-color: #c53929;
	--bs-btn-focus-shadow-rgb: 197, 57, 41;
}

body.vivid-ui .btn-secondary {
	--bs-btn-bg: #6b7580;
	--bs-btn-border-color: #6b7580;
	--bs-btn-hover-bg: #5b646d;
	--bs-btn-hover-border-color: #5b646d;
	--bs-btn-active-bg: #4d555d;
	--bs-btn-active-border-color: #4d555d;
	--bs-btn-focus-shadow-rgb: 107, 117, 128;
}

/* 座席変更・顧客一覧など、特定操作の識別色。役割はそのまま、明るさだけ抑える */
body.vivid-ui .btn-info {
	--bs-btn-color: #fff;
	--bs-btn-bg: #17879b;
	--bs-btn-border-color: #17879b;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #147485;
	--bs-btn-hover-border-color: #147485;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #116372;
	--bs-btn-active-border-color: #116372;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #17879b;
	--bs-btn-disabled-border-color: #17879b;
	--bs-btn-focus-shadow-rgb: 23, 135, 155;
}

/* 相席入店など */
body.vivid-ui .btn-warning {
	--bs-btn-bg: #e0a01a;
	--bs-btn-border-color: #e0a01a;
	--bs-btn-hover-bg: #c98f16;
	--bs-btn-hover-border-color: #c98f16;
	--bs-btn-active-bg: #b17d13;
	--bs-btn-active-border-color: #b17d13;
	--bs-btn-focus-shadow-rgb: 224, 160, 26;
}

/* 戻る・キャンセル用 */
body.vivid-ui .btn-outline-secondary {
	--bs-btn-color: #4d555d;
	--bs-btn-border-color: #c4cbd2;
	--bs-btn-hover-color: #23282d;
	--bs-btn-hover-bg: #eef1f4;
	--bs-btn-hover-border-color: #b3bbc3;
	--bs-btn-active-color: #23282d;
	--bs-btn-active-bg: #e2e6ea;
	--bs-btn-active-border-color: #b3bbc3;
	--bs-btn-focus-shadow-rgb: 107, 117, 128;
}

/* ==========================================================================
   8. フォーム
   x-input-* コンポーネントが出力する .form-group.row の余白を揃える。
   ========================================================================== */
body.vivid-ui .form-group.row {
	margin-bottom: 0.75rem;
	align-items: start;
}

body.vivid-ui .form-group.row > .col-form-label {
	font-weight: 500;
	color: #3d4750;
	padding-top: calc(0.375rem + 1px);
	padding-bottom: calc(0.375rem + 1px);
}

/* x-input-check はラベルが入力列の内側に入る作りで、既定の col-2 が
   狭すぎてラベルと説明文が不自然に折り返していた。
   一覧やテーブル内で使う col-12 指定のチェックボックスには影響させない。 */
body.vivid-ui .form-check.row {
	margin-bottom: 0.75rem;
}

body.vivid-ui .form-check.row .form-check-label.col-2 {
	width: auto;
	flex: 0 0 auto;
	margin-left: 0.35rem;
}

body.vivid-ui .form-control,
body.vivid-ui .form-select {
	border-color: #ccd3da;
	border-radius: var(--bs-border-radius-sm);
}

body.vivid-ui .form-control:focus,
body.vivid-ui .form-select:focus {
	border-color: #7ea6d3;
	box-shadow: 0 0 0 0.2rem rgba(43, 108, 176, 0.18);
}

body.vivid-ui .form-text {
	font-size: 0.8rem;
}

/* ==========================================================================
   9. アラート・バッジ・モーダル
   ========================================================================== */
body.vivid-ui .alert {
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: var(--bs-border-radius-sm);
	padding: 0.65rem 0.9rem;
	font-size: 0.925rem;
}

body.vivid-ui .alert-danger {
	background-color: #fdf2f0;
	border-color: #f0c9c2;
	border-left-color: #c53929;
	color: #8c281c;
}

body.vivid-ui .alert-success {
	background-color: #eff7f3;
	border-color: #c2ddd1;
	border-left-color: #1d7a53;
	color: #145a3d;
}

body.vivid-ui .alert-info {
	background-color: #eff5fa;
	border-color: #c6d9ea;
	border-left-color: #2b6cb0;
	color: #1f4d81;
}

body.vivid-ui .alert-warning {
	background-color: #fdf7e8;
	border-color: #ecdaae;
	border-left-color: #cf8b0f;
	color: #85590a;
}

/* 日付送りナビ（x-datenav）の現在位置セグメント。
   押せないことを示しつつ、Bootstrap の .btn.disabled の薄さ(opacity .65)は打ち消して
   現在日付がはっきり読めるようにする。 */
body.vivid-ui .vivid-datenav-current {
	background-color: var(--vivid-thead-bg);
	border-color: #c4cbd2;
	color: var(--bs-body-color);
	font-weight: 600;
	opacity: 1;
	pointer-events: none;
}

/* ログイン画面のカード */
body.vivid-ui .vivid-authcard {
	max-width: 420px;
	width: 100%;
	margin-top: 4vh;
}

body.vivid-ui .card {
	border-color: var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

body.vivid-ui .card-header {
	background-color: #f5f7f9;
	border-bottom: 1px solid var(--bs-border-color);
	font-weight: 600;
}

body.vivid-ui .badge {
	font-weight: 600;
	letter-spacing: 0.01em;
}

body.vivid-ui .modal-content {
	border: 0;
	border-radius: var(--bs-border-radius);
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
}

body.vivid-ui .modal-header {
	border-bottom: 1px solid var(--bs-border-color);
	padding: 0.85rem 1rem;
}

body.vivid-ui .modal-header .modal-title {
	font-size: 1rem;
	font-weight: 600;
}

body.vivid-ui .modal-footer {
	border-top: 1px solid var(--bs-border-color);
	padding: 0.65rem 1rem;
}

body.vivid-ui .dropdown-menu {
	border-color: var(--bs-border-color);
	box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
	border-radius: var(--bs-border-radius-sm);
	font-size: 0.9rem;
}

/* ==========================================================================
   10. 印刷
   伝票・レシート画面の印刷結果を変えないよう、装飾を落とすだけに留める。
   要素の表示/非表示は既存の d-print-none に任せる。
   ========================================================================== */
@media print {
	body.vivid-ui main {
		background-color: #fff !important;
		overflow: visible !important;
	}
	body.vivid-ui .shadow-sm,
	body.vivid-ui .modal-content {
		box-shadow: none !important;
	}
	body.vivid-ui .table > thead > tr > th,
	body.vivid-ui .table > tbody > tr:first-child > th {
		background-color: transparent !important;
	}
}