/**
* Qmitate UI Enhancement Kit - スタイルシート
*/
/* ==========================================================================
0. 設計トークン (LP と共通の視覚言語を WebApp 全域に適用)
--------------------------------------------------------------------------
- qmt-num : KPI 数値・金額などを tabular-nums + Inter ss01 で揃える
- qmt-display : 見出しに ss01/ss02/cv11 を当てて幾何学的な字形を引き出す
- qmt-surface : カード・パネル系の角丸・影・境界の統一トークン
- qmt-accent-* : brass 系アクセント (業界 KPI ラベル等の限定用途)
========================================================================== */
/* タイポ個性化: 見出しに Inter Stylistic Set 1 系を適用 */
.qmt-display,
h1, h2, h3, .h1, .h2, .h3 {
font-feature-settings: "ss01" 1, "ss02" 1, "cv11" 1;
letter-spacing: 0;
}
/* 数値表示: tabular-nums で字幅統一、letter-spacing 詰め */
.qmt-num {
font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: 0;
}
/* テーブル全体に当てやすい派生 */
table.qmt-num-table td:not(:first-child),
table.qmt-num-table th:not(:first-child) {
font-feature-settings: "tnum" 1, "lnum" 1;
font-variant-numeric: tabular-nums lining-nums;
}
/* カード共通: 角丸・影・境界の規格 */
.qmt-surface {
border-radius: 12px;
box-shadow: 0 14px 40px -16px rgba(14, 34, 29, 0.16);
border: 1px solid rgba(14, 34, 29, 0.08);
background: var(--qm-neutral-0, #fff);
}
.qmt-surface-flat {
border-radius: 12px;
border: 1px solid rgba(14, 34, 29, 0.10);
background: var(--qm-neutral-0, #fff);
}
/* 業界アクセント (brass): 業界固有 KPI ラベル等の限定用途 */
.qmt-accent-rose { color: var(--qm-brand-brass-dark, #6f5a3b) !important; }
.qmt-accent-rose-bg { background-color: rgba(168, 143, 99, 0.14) !important; }
.qmt-accent-rose-border{ border-color: rgba(168, 143, 99, 0.36) !important; }
.text-rose { color: var(--qm-brand-brass-dark, #6f5a3b) !important; }
/* ── 主要 CTA: Pure Horizon forest ─────────────────────────────────
主要アクション (新規登録・保存・確定・登録する) に btn-rose を使用。
行操作 = btn-falcon-default、削除 = btn-outline-danger と使い分ける。
ボタンは UI 言語であり、qmt-tag-rose (情報分類) と用途が異なる。
高級サロン向けの静けさを保つため、深い forest を主軸に統一する。 */
.btn-rose {
color: #fff;
background-color: var(--qm-brand-forest, #0e221d);
border-color: var(--qm-brand-forest, #0e221d);
}
.btn-rose:hover, .btn-rose:focus {
color: #fff;
background-color: var(--qm-brand-forest-2, #18352d);
border-color: var(--qm-brand-forest-2, #18352d);
box-shadow: 0 0 0 0.15rem rgba(168, 143, 99, 0.30);
}
.btn-rose:active,
.btn-rose:focus:active {
color: #fff;
background-color: #071512;
border-color: #071512;
}
.btn-rose:disabled,
.btn-rose.disabled {
color: #fff;
background-color: #85938c;
border-color: #85938c;
opacity: 0.7;
}
.btn-outline-rose {
color: var(--qm-brand-forest, #0e221d);
background-color: transparent;
border-color: var(--qm-brand-brass, #a88f63);
}
.btn-outline-rose:hover,
.btn-outline-rose:focus {
color: #fff;
background-color: var(--qm-brand-forest, #0e221d);
border-color: var(--qm-brand-forest, #0e221d);
}
.btn-outline-rose:disabled,
.btn-outline-rose.disabled {
color: #a59c8e;
border-color: #d6cfc2;
background-color: transparent;
}
/* ── タグ (神経質に色を使わない・ニュートラル基調) ──────────────────
「色 = 状態または特別性」の原則に基づき、
ID・コード・カテゴリラベルなど "意味のない識別子" には
無色のニュートラルタグを使う。
状態 (確定・注意・危険) は引き続き badge-subtle-{success,warning,danger} を使う。
業界 KPI 系のラベルだけ qmt-tag-rose で例外的に brass アクセント。 */
.qmt-tag {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
color: var(--qm-neutral-600, #596a73);
background: var(--qm-neutral-100, #f4f1ea);
border: 1px solid var(--qm-neutral-200, #e7e2d8);
border-radius: 9999px;
letter-spacing: 0.005em;
white-space: nowrap;
}
.qmt-tag.qmt-tag-mono {
font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: 0;
}
.qmt-tag-rose {
color: var(--qm-brand-brass-dark, #6f5a3b);
background: rgba(168, 143, 99, 0.12);
border-color: rgba(168, 143, 99, 0.34);
}
.qmt-tag-strong {
color: var(--qm-brand-forest, #0e221d);
background: var(--qm-brand-mist, #dde8e1);
border-color: #c8d8cf;
}
/* 数値 KPI の流動サイズ (ダッシュボード内で使う) */
.qmt-kpi-value {
font-size: clamp(1.4rem, 1.8vw, 1.75rem);
font-weight: 700;
color: var(--qm-brand-forest, #0e221d);
font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: 0;
line-height: 1.15;
}
.qmt-kpi-label {
font-size: 0.78rem;
color: var(--qm-brand-slate, #596a73);
letter-spacing: 0.02em;
text-transform: none;
}
.qmt-kpi-delta-up { color: #00875a; }
.qmt-kpi-delta-down { color: #b54552; }
.qmt-kpi-delta-flat { color: #748194; }
/* スピンアニメーション (旧来) */
@keyframes qm-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.material-symbols-spin {
animation: qm-spin 1s linear infinite;
}
/* ドロップダウン内のアクティブ項目 */
.dropdown-menu .dropdown-item.active {
background-color: transparent;
color: var(--qm-brand-rose, #a88f63);
font-weight: 600;
}
/*
* 配置先: resources/css/qmitate-ui.css
*
* Falcon v3.26.0 (Bootstrap 5) と共存する前提で設計
* すべてのクラス名に qm- プレフィックスを付与（名前衝突を回避）
*/
/* ==========================================================================
1. ツールチップ ヘルプアイコン
========================================================================== */
.qm-help-tip {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 4px;
cursor: help;
color: #748194; /* Falcon のセカンダリテキスト色 */
vertical-align: middle;
transition: color 0.15s ease;
}
.qm-help-tip:hover,
.qm-help-tip:focus {
color: #a88f63;
}
.qm-help-icon {
width: 16px;
height: 16px;
}
/* Bootstrap ツールチップのカスタマイズ（Falcon テーマに合わせる） */
.tooltip-inner {
max-width: 320px;
text-align: left;
font-size: 0.8125rem; /* 13px - Falcon の小文字サイズ */
line-height: 1.5;
padding: 8px 12px;
}
/* ==========================================================================
2. ローディングオーバーレイ
========================================================================== */
.qm-loading-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.qm-loading-overlay.qm-loading-visible {
opacity: 1;
visibility: visible;
}
.qm-loading-content {
text-align: center;
padding: 40px;
}
.qm-loading-spinner {
margin-bottom: 16px;
}
.qm-loading-spinner .spinner-border {
width: 3rem;
height: 3rem;
border-width: 0.3rem;
}
.qm-loading-message {
font-size: 1rem;
font-weight: 600;
color: #0e221d;
margin-bottom: 8px;
}
.qm-loading-sub-message {
font-size: 0.8125rem;
color: #748194; /* Falcon Secondary */
margin-bottom: 0;
}
.qm-loading-sub-message:empty {
display: none;
}
/* ==========================================================================
3. 確認ダイアログ (window.QmConfirm.show / data-confirm 属性)
--------------------------------------------------------------------------
旧インライン展開型 (.qm-confirm-panel) は画面幅が狭い場面でレイアウト崩れが
多発したため、2026-05-02 に全画面オーバーレイ型 (.qm-modal-confirm-overlay)
に統一済み。以下、3.5 セクションが現行実装。
========================================================================== */
/* ==========================================================================
3.5 プログラマティック確認ダイアログ (window.QmConfirm.show)
--------------------------------------------------------------------------
native window.confirm() の置換。Bootstrap modal の上にも被せられるよう
独自オーバーレイ (z-index 20000) として実装。
========================================================================== */
.qm-modal-confirm-overlay {
position: fixed;
inset: 0;
background: rgba(14, 34, 29, 0.50);
backdrop-filter: blur(2px);
z-index: 20000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
transition: opacity 0.18s ease;
}
.qm-modal-confirm-overlay.qm-modal-confirm-visible {
opacity: 1;
}
.qm-modal-confirm-dialog {
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 60px -10px rgba(14, 34, 29, 0.35);
max-width: 420px;
width: 100%;
padding: 20px 22px 18px;
transform: translateY(-8px);
transition: transform 0.20s ease;
}
.qm-modal-confirm-overlay.qm-modal-confirm-visible .qm-modal-confirm-dialog {
transform: translateY(0);
}
.qm-modal-confirm-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.qm-modal-confirm-icon { display: flex; align-items: center; flex-shrink: 0; }
.qm-modal-confirm-title {
font-size: 1rem;
font-weight: 600;
color: #1f2933;
line-height: 1.4;
}
.qm-modal-confirm-body {
font-size: 0.8625rem;
color: #5e6e82;
margin: 0 0 18px 30px;
line-height: 1.55;
}
.qm-modal-confirm-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.qm-modal-confirm-actions .btn {
font-size: 0.875rem;
padding: 5px 18px;
}
/* ==========================================================================
4. バリデーションエラー表示の改善
========================================================================== */
/**
* Laravelの .invalid-feedback をより目立たせる
* 赤文字 + 左ボーダーで視認性を高める
*/
.invalid-feedback,
.is-invalid ~ .invalid-feedback {
display: block;
font-size: 0.8125rem;
color: #e63757; /* Falcon Danger */
padding: 4px 0 4px 8px;
border-left: 3px solid #e63757;
margin-top: 4px;
background: #fff5f5;
border-radius: 0 4px 4px 0;
}
/**
* エラーサマリ（ページ上部のエラー一覧表示用）
* Blade側: @if ($errors->any()) ...
@endif
*/
.qm-error-summary {
background: #fff5f5;
border: 1px solid #e63757;
border-radius: 8px;
padding: 16px;
margin-bottom: 24px;
}
.qm-error-summary-title {
font-size: 0.9375rem;
font-weight: 600;
color: #e63757;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.qm-error-summary-list {
list-style: none;
padding: 0;
margin: 0;
}
.qm-error-summary-list li {
font-size: 0.8125rem;
color: #0e221d;
padding: 2px 0;
padding-left: 16px;
position: relative;
}
.qm-error-summary-list li::before {
content: '・';
position: absolute;
left: 0;
color: #e63757;
}
/* ==========================================================================
5. フラッシュメッセージの改善
========================================================================== */
/**
* 成功メッセージの自動フェードアウト対応
* Blade側: data-auto-dismiss を付ける
*/
.alert[data-auto-dismiss] {
transition: opacity 0.5s ease;
}
/* ==========================================================================
6. ステータスバッジの統一スタイル
========================================================================== */
.qm-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
}
/* 売上ステータス */
.qm-status-input { background: #fff4dc; color: #876a14; }
.qm-status-submitted { background: #eaf3fb; color: #0c63a4; }
.qm-status-approved { background: #eaf7ef; color: #117c43; }
.qm-status-finalized { background: #edf1f5; color: #0e221d; }
/* 給与ステータス */
.qm-status-draft { background: #fff4dc; color: #876a14; }
.qm-status-confirmed { background: #eaf7ef; color: #117c43; }
/* finalized は共通 */
/* テナントステータス */
.qm-status-active { background: #d4edda; color: #155724; }
.qm-status-suspended { background: #fff3cd; color: #b37400; }
.qm-status-inactive { background: #f8d7da; color: #721c24; }
/* ==========================================================================
7. レスポンシブ対応（モバイル補助）
========================================================================== */
@media (max-width: 768px) {
/* ツールチップアイコンをタップしやすいサイズに */
.qm-help-tip {
padding: 4px;
margin-left: 2px;
}
.qm-help-icon {
width: 20px;
height: 20px;
}
/* エラーサマリのパディング調整 */
.qm-error-summary {
padding: 12px;
}
}
/* ==========================================================================
6. 必須フィールドインジケータ（アクセシビリティ強化）
========================================================================== */
/**
* 色覚障害者対応: 赤い * だけでなく、スクリーンリーダー向けに「必須」テキストを追加
* Blade側は既存の * のままで動作
*/
label .text-danger,
.form-label .text-danger {
font-weight: 700;
font-size: 0.85em;
}
label .text-danger::after,
.form-label .text-danger::after {
content: '必須';
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
8. ユーティリティクラス
========================================================================== */
/* ── Utility: text sizes ── */
.fs-xxs { font-size: 0.7rem !important; }
.fs-xs { font-size: 0.75rem !important; }
/* ── Utility: icon sizing ── */
.icon-lg { font-size: 48px !important; }
.icon-xl { font-size: 64px !important; }
.icon-xxl { font-size: 80px !important; }
/* ── Utility: table column widths ── */
.col-w-80 { width: 80px; }
.col-w-100 { width: 100px; }
.col-w-110 { width: 110px; }
.col-w-120 { width: 120px; }
.col-w-140 { width: 140px; }
.col-w-160 { width: 160px; }
.col-w-180 { width: 180px; }
.col-w-200 { width: 200px; }
.col-w-auto { width: auto; }
/* ── Utility: sticky table cell ── */
.table-cell-sticky {
position: sticky;
left: 0;
background: inherit;
z-index: 2;
}
/* ── Empty state component ── */
.empty-state {
text-align: center;
padding: 3rem 1rem;
}
.empty-state .empty-state-icon {
font-size: 48px;
color: var(--falcon-gray-400);
margin-bottom: 1rem;
}
.empty-state .empty-state-title {
font-size: 1rem;
font-weight: 600;
color: var(--falcon-gray-700);
margin-bottom: 0.5rem;
}
.empty-state .empty-state-text {
color: var(--falcon-gray-500);
font-size: 0.875rem;
margin-bottom: 1rem;
}
/* ── Loading button state ── */
.btn[data-loading] .btn-text { display: inline; }
.btn[data-loading] .btn-spinner { display: none; }
.btn[data-loading].is-loading .btn-text { display: none; }
.btn[data-loading].is-loading .btn-spinner { display: inline-flex; align-items: center; gap: 0.25rem; }
/* ── Dropdown icon color: unified semantic palette ── */
.dropdown-menu .material-symbols-outlined {
font-size: 1.25rem;
width: 1.5rem;
text-align: center;
}
/* ==========================================================================
9. ガイドモード（初心者向け説明の表示/非表示）
========================================================================== */
/* ガイドコンテンツの表示制御 */
.guide-mode-off .qm-guide-content {
display: none !important;
}
.guide-mode-on .qm-guide-content {
display: block;
}
/* inline 要素用 */
.guide-mode-on .qm-guide-content-inline {
display: inline !important;
}
.guide-mode-off .qm-guide-content-inline {
display: none !important;
}
/* ガイドモードON時: ヘルプアイコンは非表示（インラインテキストが出るため） */
.guide-mode-on .qm-help-tip-icon {
display: none;
}
/* ガイドモードOFF時: インラインテキストは非表示 */
.guide-mode-off .qm-help-tip-inline {
display: none !important;
}
/* テーブル見出し内では常に ? アイコン + ポップオーバーのみ
(ガイドモード ON でもインライン展開はレイアウトを崩すため抑制) */
th .qm-help-tip-icon {
display: inline-flex !important;
}
th .qm-help-tip-inline {
display: none !important;
}
/* インラインヘルプテキストのスタイル */
.qm-help-tip-inline {
display: block;
background: #f8f1ed;
border-left: 3px solid #a88f63;
border-radius: 0 4px 4px 0;
padding: 4px 10px;
margin-top: 4px;
font-size: 0.8rem;
color: #5e6e82;
line-height: 1.5;
}
.qm-help-tip-inline .material-symbols-outlined {
font-size: 14px;
vertical-align: middle;
margin-right: 2px;
color: #a88f63;
}
/* 凡例セクション（ガイドモードON時のみ表示） */
.qm-legend {
background: #f9fafd;
border: 1px solid #e3e6f0;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
font-size: 0.8125rem;
color: #5e6e82;
}
.qm-legend-title {
font-weight: 600;
color: #0e221d;
margin-bottom: 6px;
font-size: 0.8125rem;
}
.qm-legend dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 2px 12px;
margin: 0;
}
.qm-legend dt {
font-weight: 600;
color: #0e221d;
white-space: nowrap;
}
.qm-legend dd {
margin: 0;
color: #748194;
}
/* ==========================================================================
10. Sales Grid Table Improvements
========================================================================== */
/* Sticky thead for horizontal scroll context */
#salesTable thead th {
position: sticky;
top: 0;
z-index: 3;
background: inherit;
}
/* Total column highlight */
#salesTable td[style*="sticky"][style*="right"],
#salesTable th[style*="sticky"][style*="right"] {
border-left: 2px solid #d8e2ef;
}
/* ── Readonly form field styling ── */
input[readonly]:not([type="hidden"]),
textarea[readonly] {
background-color: #f9fafd;
cursor: default;
}
/* ── Modal dialog scrollable on small screens ── */
@media (max-height: 600px) {
.modal-body {
max-height: 60vh;
overflow-y: auto;
}
}
/* ── Accessibility: Focus visible for keyboard nav ── */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
outline: 2px solid var(--qm-brand-rose, #a88f63);
outline-offset: 2px;
}
/* ── Help tip icon: ensure keyboard accessible ── */
.qm-help-tip[tabindex] {
outline: none;
}
.qm-help-tip[tabindex]:focus-visible {
outline: 2px solid var(--qm-brand-rose, #a88f63);
outline-offset: 2px;
border-radius: 50%;
}
/* ==========================================================================
11. 売上グリッド 色分け・ハイライト
========================================================================== */
/* 金額入力: ローズウッド左ボーダー */
.sales-input-amount {
border-left: 3px solid #a88f63 !important;
}
/* 客数入力: 緑左ボーダー */
.sales-input-customer {
border-left: 3px solid #117c43 !important;
}
/* 指名入力: 橙左ボーダー */
.sales-input-nomination {
border-left: 3px solid #876a14 !important;
}
/* 行ハイライト */
#salesTable tbody tr:hover {
background-color: rgba(168, 143, 99, 0.03);
}
#salesTable tbody tr:focus-within {
background-color: rgba(168, 143, 99, 0.05);
}
/* 列ハイライト */
#salesTable .qm-col-highlight {
background-color: rgba(168, 143, 99, 0.04) !important;
}
/* sticky列のホバー背景修正 */
#salesTable tbody tr:hover td[style*="sticky"],
#salesTable tbody tr:focus-within td[style*="sticky"] {
background-color: #fbfaf6 !important;
}
/* 任意ラベル */
.qm-optional-label {
font-size: 0.65rem;
color: #9da9bb;
font-weight: 400;
}
/* ==========================================================================
12. ワークフローステップバー
========================================================================== */
.qm-stepbar {
display: flex;
align-items: flex-start;
gap: 0;
margin-bottom: 16px;
}
/* ── パラレルフェーズ対応 stepbar (Option C) ──────────────────────
.qm-stepbar-phased: 横並びの phase グループ + 矢印で接続。
各 phase 内では .qm-step が縦 or 横に並ぶ。 */
.qm-stepbar-phased {
align-items: stretch;
flex-wrap: wrap;
justify-content: center;
}
.qm-phase {
flex: 1 1 auto;
min-width: 110px;
padding: 8px 6px;
border-radius: 8px;
background: #f9fafd;
border: 1px dashed #d8e2ef;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
transition: all 0.25s ease;
}
.qm-phase-active {
background: #f8f1ed;
border-color: #cbb88d;
border-style: solid;
}
.qm-phase-done {
background: #f1faf6;
border-color: #c1ebd5;
border-style: solid;
}
.qm-phase-label {
font-size: 0.72rem;
font-weight: 700;
color: #748194;
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.qm-phase-active .qm-phase-label {
color: #a88f63;
}
.qm-phase-done .qm-phase-label {
color: #00864e;
}
.qm-phase-items {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 4px;
width: 100%;
}
.qm-phase-items .qm-step {
flex: 1 1 0;
min-width: 0;
}
.qm-phase-arrow {
display: flex;
align-items: center;
color: #c4ccd8;
flex: 0 0 auto;
align-self: center;
font-size: 28px;
}
.qm-phase-arrow .material-symbols-outlined { font-size: 28px; }
.qm-phase-arrow-done { color: #117c43; }
@media (max-width: 768px) {
.qm-stepbar-phased {
flex-direction: column;
gap: 4px;
}
.qm-phase-arrow {
transform: rotate(90deg);
align-self: center;
}
.qm-phase {
width: 100%;
}
}
/* ── プラン制約・データ制約による非活性表示 ──────────────────────── */
/* qm-step-locked: プラン制限 (Business+ など) で利用不可 */
.qm-step-locked .qm-step-icon {
background: #f3f4f7;
border-color: #d8e2ef;
color: #b6c1d2;
border-style: dashed;
}
.qm-step-locked .qm-step-label {
color: #b6c1d2;
}
.qm-step-locked .qm-step-desc {
color: #b6c1d2 !important;
}
.qm-step-locked a { cursor: pointer; }
/* qm-step-na: データ制約 (該当従業員なし等) で対象外 */
.qm-step-na .qm-step-icon-na {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
border: 2px dashed #d8e2ef;
background: #f9fafd;
color: #c4ccd8;
}
.qm-step-na .qm-step-label {
color: #b6c1d2;
}
.qm-step-na .qm-step-desc {
color: #b6c1d2 !important;
}
/* qm-phase-locked: フェーズ全体がロック */
.qm-phase-locked {
background: #f9fafd;
border-color: #e3e6ec;
border-style: dashed;
opacity: 0.85;
}
.qm-phase-locked .qm-phase-label {
color: #b6c1d2;
}
.qm-step {
flex: 1;
text-align: center;
position: relative;
}
.qm-step-connector {
position: absolute;
top: 18px;
left: 50%;
right: -50%;
height: 3px;
background: #d8e2ef;
z-index: 0;
}
.qm-step:last-child .qm-step-connector {
display: none;
}
.qm-step-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
position: relative;
z-index: 1;
border: 2px solid #d8e2ef;
background: #fff;
color: #9da9bb;
transition: all 0.3s ease;
}
.qm-step-label {
display: block;
font-size: 0.75rem;
color: #748194;
margin-top: 6px;
font-weight: 500;
}
.qm-step-desc {
display: block;
font-size: 0.7rem;
color: #9da9bb;
margin-top: 2px;
}
/* 完了 */
.qm-step-done .qm-step-icon {
background: #117c43;
border-color: #117c43;
color: #fff;
}
.qm-step-done .qm-step-connector {
background: #117c43;
}
.qm-step-done .qm-step-label {
color: #00864e;
font-weight: 600;
}
/* 進行中 — brand rose で「ここに居る」を強く示す + 拡大 + パルス + 下線 */
.qm-step-active .qm-step-icon {
background: #a88f63;
border-color: #a88f63;
color: #fff;
transform: scale(1.18);
box-shadow: 0 4px 14px rgba(168, 143, 99, 0.34);
animation: qm-step-pulse 1.8s ease-in-out infinite;
}
.qm-step-active .qm-step-label {
color: #6f5a3b;
font-weight: 700;
font-size: 1.05rem;
position: relative;
}
/* 下線でフォーカスを増強 (現在地マーカー) */
.qm-step-active .qm-step-label::after {
content: '';
position: absolute;
left: 50%;
bottom: -4px;
width: 24px;
height: 2px;
background: linear-gradient(90deg, #a88f63, #cbb88d);
border-radius: 2px;
transform: translateX(-50%);
}
.qm-step-active .qm-step-desc {
color: #6f5a3b !important;
font-weight: 600;
}
@keyframes qm-step-pulse {
0%, 100% { box-shadow: 0 4px 14px rgba(168, 143, 99, 0.34), 0 0 0 0 rgba(168, 143, 99, 0.32); }
50% { box-shadow: 0 4px 14px rgba(168, 143, 99, 0.34), 0 0 0 12px rgba(168, 143, 99, 0); }
}
/* 完了済を控えめに (M-3: 完了は淡く、進行中を目立たせるコントラスト) */
.qm-step-done .qm-step-label {
color: #596a73;
}
.qm-step-done .qm-step-desc {
color: #596a73 !important;
}
/* モバイル対応 */
@media (max-width: 576px) {
.qm-stepbar {
flex-direction: column;
gap: 0;
}
.qm-step {
display: flex;
align-items: center;
text-align: left;
gap: 12px;
padding: 8px 0;
}
.qm-step-connector {
position: absolute;
top: auto;
left: 17px;
right: auto;
height: auto;
width: 3px;
bottom: -8px;
top: 44px;
}
.qm-step-label { margin-top: 0; }
.qm-step-desc { margin-top: 0; }
}
/* ==========================================================================
13. 設定ナビ カテゴリグループ
========================================================================== */
.qm-settings-nav .qm-nav-group-label {
font-size: 0.65rem;
font-weight: 700;
color: #9da9bb;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 6px 12px 2px;
border: none;
cursor: default;
white-space: nowrap;
}
.qm-settings-nav .qm-nav-group-separator {
border-left: 1px solid #e3e6f0;
margin: 4px 4px;
padding: 0;
}
/* モバイルでの設定ナビ折り返し改善 */
@media (max-width: 992px) {
.qm-settings-nav {
flex-wrap: wrap !important;
}
.qm-settings-nav .qm-nav-group-separator {
display: none;
}
.qm-settings-nav .qm-nav-group-label {
width: 100%;
padding: 8px 8px 2px;
margin-top: 4px;
border-bottom: 1px solid #e3e6f0;
}
}
/* ==========================================================================
14. モバイル閲覧最適化（参照モード）
========================================================================== */
@media (max-width: 768px) {
/* ── Tier2-7: モバイル用フォントサイズ上書き ── */
/* 11pxの小フォントを可読レベルに引き上げ */
.fs-11, .fs--2 {
font-size: 13px !important;
}
.fs--1 {
font-size: 14px !important;
}
/* 入力フィールドのフォントサイズ（ズーム防止: iOSは16px未満でオートズーム） */
.form-control-sm, .form-select-sm {
font-size: 16px !important;
}
/* 閲覧モード時のフォントサイズ拡大 */
.qm-readonly-view .text-end {
font-size: 0.875rem;
}
/* ── Tier2-8: タッチターゲット拡大（44×44px基準） ── */
/* ボタン */
.btn-sm {
min-height: 44px;
padding: 8px 16px;
font-size: 14px;
}
/* テーブルセル */
.table td, .table th {
padding: 0.5rem 0.4rem;
}
/* ドロップダウン項目 */
.dropdown-item {
padding: 12px 16px;
min-height: 44px;
display: flex;
align-items: center;
}
/* ヘルプアイコン */
.qm-help-tip {
min-width: 44px;
min-height: 44px;
padding: 10px;
}
.qm-help-icon {
width: 20px;
height: 20px;
}
/* ナビゲーションリンク */
.nav-link {
min-height: 44px;
display: flex;
align-items: center;
}
/* 通知バッジ */
.badge {
font-size: 12px;
min-width: 20px;
}
/* ポップオーバーの最大幅 */
.popover {
max-width: 280px;
}
/* ── 汎用モバイルカードレイアウト ──
768px以下でテーブルをカード表示に自動変換。
使い方: + 各| に data-label="列名" */
.qm-mobile-cards {
display: block;
width: 100% !important;
min-width: 0 !important;
}
.qm-mobile-cards thead {
display: none;
}
.qm-mobile-cards tbody {
display: block;
width: 100%;
min-width: 0;
}
.qm-mobile-cards tbody tr {
display: flex;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
border: 1px solid #d8e2ef;
border-radius: 8px;
margin-bottom: 12px;
padding: 12px;
background: #fff;
}
.qm-mobile-cards tbody td {
flex: 0 0 50%;
min-width: 0;
border: none;
padding: 6px 8px;
text-align: left !important;
white-space: normal !important;
word-break: break-word;
}
.qm-mobile-cards tbody td .text-nowrap,
.qm-mobile-cards tbody td.text-nowrap {
white-space: normal !important;
}
.qm-mobile-cards tbody td::before {
content: attr(data-label);
display: block;
font-size: 11px;
color: #748194;
font-weight: 600;
margin-bottom: 2px;
}
.qm-mobile-cards tbody td:first-child {
flex: 0 0 100%;
font-weight: 700;
font-size: 15px;
border-bottom: 1px solid #e3e6f0;
margin-bottom: 6px;
padding-bottom: 8px;
}
/* アクションセル: 独立行で右寄せ */
.qm-mobile-cards tbody td.qm-action-cell {
flex: 0 0 100%;
text-align: right !important;
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid #e3e6f0;
}
.qm-mobile-cards tbody td.qm-action-cell::before {
display: none;
}
/* data-label が未設定のセルはラベル非表示（互換性保持） */
.qm-mobile-cards tbody td:not([data-label])::before {
content: '';
display: none;
}
/* 旧クラス名の互換性維持（既存のsalon.blade.php等） */
.qm-salon-pl-table {
/* 旧クラスを使用していたものは qm-mobile-cards の動作を継承 */
}
.qm-salon-pl-table thead { display: none; }
.qm-salon-pl-table tbody tr {
display: flex; flex-wrap: wrap;
border: 1px solid #d8e2ef; border-radius: 8px;
margin-bottom: 12px; padding: 12px; background: #fff;
}
.qm-salon-pl-table tbody td {
flex: 0 0 50%; border: none; padding: 4px 8px; text-align: left !important;
}
.qm-salon-pl-table tbody td::before {
content: attr(data-label); display: block;
font-size: 11px; color: #748194; font-weight: 600;
}
.qm-salon-pl-table tbody td:first-child {
flex: 0 0 100%; font-weight: 700; font-size: 15px;
border-bottom: 1px solid #e3e6f0; margin-bottom: 6px; padding-bottom: 8px;
}
}
/* ──────────────────────────────────────────────────────────
バッジ統一スタイル (全画面共通)
雇用形態・役職・在籍状態など、テーブル内のラベル系バッジを
テキスト長に関わらず同じ視覚的重みで揃える。
────────────────────────────────────────────────────────── */
.badge {
/* 全バッジの基準: 統一フォントサイズ・パディング */
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.35em 0.75em;
line-height: 1.4;
vertical-align: middle;
}
/* rounded-pill (テーブル内でよく使われる) — テキスト中央 + 最小幅
3 文字 (店長) も 5 文字 (スタイリスト) も同じ視覚的幅で揃うよう
min-width を大きめ (96px) に確保 */
.badge.rounded-pill {
display: inline-block;
min-width: 96px; /* スタイリスト (5 文字) を内包する基準幅 */
text-align: center;
padding: 0.35em 0.85em;
}
/* テーブルセル内のバッジは少し詰める (情報密度のため) */
.table .badge,
.qm-data-table .badge {
font-size: 0.7rem;
}
/* CSV / PDF エクスポートボタン群を「+ 新規登録」と同じ高さに揃える */
.qm-export-buttons .btn {
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0 0.75rem;
line-height: 1;
}
.qm-export-buttons .btn .material-symbols-outlined {
font-size: 16px;
line-height: 1;
}
/* テーブル絞り込みフィルタ機能は撤去 (ページネーション非対応のため)。
サーバ side query 連動の絞り込みは将来別実装で対応予定。 */
/* バッジを 2 つ以上並べる時のギャップ (連続 .badge 間) */
.badge + .badge {
margin-left: 0.25rem;
}
/* ──────────────────────────────────────────────────────────
テーブル人間工学レイアウト (全 .table 共通)
視認性・操作性・列幅バランスの基本ルール
────────────────────────────────────────────────────────── */
/* 基本: すべての .table をベースラインで底上げ */
.table {
border-collapse: separate;
border-spacing: 0;
}
.table > :not(caption) > * > * {
/* セルパディングを業務系画面に最適化 (情報密度と視認性のバランス) */
padding: 0.625rem 0.75rem;
}
.table.table-sm > :not(caption) > * > * {
padding: 0.5rem 0.625rem;
}
/* テーブルの左右端は外枠との余白を確保 (端ぎりぎり配置を防止) */
.table > * > * > *:first-child {
padding-left: 1.25rem;
}
.table > * > * > *:last-child {
padding-right: 1.25rem;
}
/* table-responsive 内ではスクロールバーとの干渉を避けるため余白を強化 */
.table-responsive > .table > * > * > *:last-child {
padding-right: 1.5rem;
}
.table th {
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.01em;
color: var(--bs-gray-700, #4b5563);
white-space: nowrap;
border-bottom: 2px solid var(--bs-gray-300, #d4dce8);
}
.table td {
vertical-align: middle;
}
/* 行ホバー: 視覚フィードバックを強化 (Falcon デフォルトより明確に) */
.table-hover > tbody > tr:hover > * {
background-color: rgba(31, 87, 199, 0.04);
--bs-table-bg-state: rgba(31, 87, 199, 0.04);
}
/* 操作列の標準スタイル: クラス名 .qm-col-actions / .qm-action-cell どちらでも適用
- ヘッダー (th): 中央寄せ (ボタン群の視覚的中心と整列)
- データセル (td): 右寄せ (ボタンを右端に配置)
- tbody のボタン高さを統一 (アイコン有無に関わらず同じ高さ) */
.table th.qm-col-actions,
.table th.qm-action-cell {
text-align: center;
white-space: nowrap;
}
.table td.qm-col-actions,
.table td.qm-action-cell,
.qm-action-cell:not(th) {
text-align: right;
white-space: nowrap;
padding-right: 1rem;
}
/* 操作列のボタンを inline-flex 配置 + ギャップで等間隔に
form 内の button と直接の が混在しても高さ・縦位置が揃う */
.table td.qm-col-actions,
.table td.qm-action-cell,
.qm-action-cell:not(th) {
/* テーブルセル (display: table-cell) はそのまま、内部要素を inline-flex で揃える */
}
.table td.qm-col-actions > .btn,
.table td.qm-col-actions > form,
.table td.qm-col-actions > form > .btn,
.table td.qm-action-cell > .btn,
.table td.qm-action-cell > form,
.table td.qm-action-cell > form > .btn,
.qm-action-cell > .btn,
.qm-action-cell > form,
.qm-action-cell > form > .btn {
vertical-align: middle;
}
/* 操作列のすべてのボタンを統一サイズ (アクセシビリティ最小タップ 32px)
min-width も統一して、アイコン有無に関わらず同じ幅で並ぶ */
.qm-col-actions .btn,
.qm-action-cell .btn {
min-width: 68px; /* 2-3 文字 + アイコン (16px) を余裕で収める */
min-height: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0 0.75rem;
margin: 0;
line-height: 1;
font-size: 0.8125rem;
font-weight: 500;
}
.qm-col-actions form,
.qm-action-cell form {
display: inline-block;
margin: 0 0.25rem 0 0; /* form 単位の右ギャップ (旧 me-1 相当) */
vertical-align: middle;
}
.qm-col-actions form:last-child,
.qm-action-cell form:last-child {
margin-right: 0;
}
.qm-col-actions a.btn + a.btn,
.qm-action-cell a.btn + a.btn,
.qm-col-actions form + a.btn,
.qm-action-cell form + a.btn,
.qm-col-actions a.btn + form,
.qm-action-cell a.btn + form {
margin-left: 0.25rem;
}
.qm-col-actions .btn .material-symbols-outlined,
.qm-action-cell .btn .material-symbols-outlined {
font-size: 16px;
line-height: 1;
margin-right: 0.125rem;
}
/* `me-1` クラスがアイコンに直接付与されている場合の補正 (旧 view) */
.qm-col-actions .btn .material-symbols-outlined.me-1,
.qm-action-cell .btn .material-symbols-outlined.me-1 {
margin-right: 0.125rem !important;
}
/* `py-0 px-2` が直接付与されているレガシー view の高さを統一 */
.qm-col-actions .btn.py-0,
.qm-action-cell .btn.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 32px;
height: 32px;
}
/* ──────────────────────────────────────────────────────────
マスタ設定テーブル: 列幅バランス統一
各設定画面のテーブルを共通ルールで整形し、列幅のばらつきを解消。
.qm-settings-table を table に付与すると適用される。
────────────────────────────────────────────────────────── */
.qm-settings-table {
/* fixed レイアウトで thead/tbody の列幅一致を保証 (auto だとブラウザ任せでズレる) */
table-layout: fixed;
width: 100%;
}
.qm-settings-table td, .qm-settings-table th {
vertical-align: middle;
}
.qm-settings-table .qm-col-code {
width: 140px;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-weight: 600;
white-space: nowrap;
text-align: center;
}
.qm-settings-table .qm-col-sort {
width: 90px;
text-align: center;
}
.qm-settings-table .qm-col-status {
width: 90px;
text-align: center;
}
.qm-settings-table .qm-col-actions {
width: 130px;
text-align: right;
white-space: nowrap;
padding-right: 1.5rem;
}
.qm-settings-table .qm-col-note {
max-width: 240px;
}
.qm-settings-table .qm-col-note,
.qm-settings-table .qm-col-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 操作列のアイコン型ボタン (settings 内では tighter)
H-1: アイコン+ラベル併記 — IT リテラシ低いユーザーへの配慮
アイコン単体だと「目」が表示/無効化どちらか分からない等の混乱を回避 */
.qm-settings-table .qm-action-icon-btn {
min-width: 50px;
min-height: 30px;
padding: 0.2rem 0.5rem;
font-size: 0.72rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
white-space: nowrap;
}
.qm-settings-table .qm-action-icon-btn .material-symbols-outlined {
font-size: 16px;
vertical-align: -2px;
}
/* 操作列の幅を確保 (3 ボタン × アイコン+ラベル) */
.qm-settings-table .qm-col-actions {
width: 260px;
min-width: 260px;
text-align: right;
white-space: nowrap;
}
/* 細幅画面 (~1500px) では操作列のラベルを隠してアイコンのみに */
@media (max-width: 1500px) {
.qm-settings-table .qm-col-actions {
width: 140px;
min-width: 140px;
}
.qm-settings-table .qm-action-icon-btn span:not(.material-symbols-outlined) {
display: none;
}
.qm-settings-table .qm-action-icon-btn {
min-width: 36px;
padding: 0.25rem 0.5rem;
}
/* ホバーでツールチップ風にラベル復活 (アクセシビリティ補助) */
.qm-settings-table .qm-action-icon-btn[title]:not([title=""]) {
/* title 属性で代替表示 */
}
}
/* ──────────────────────────────────────────────────────────
Accessibility: コントラスト改善
Falcon デフォルトの text-muted (#6c757d) は 4.5:1 ギリギリ。
長時間閲覧の眼精疲労を減らすため、より濃い #5e6e82 (5.8:1) に底上げ。
────────────────────────────────────────────────────────── */
.text-muted {
color: #5e6e82 !important;
}
/* small text on light backgrounds for table captions */
.text-500 { color: #5e6e82 !important; }
.text-600 { color: #4d5a6d !important; }
/* より薄い text-400 は禁則。補助テキストには text-muted/500/600 を推奨 */
/* =============================================================================
印刷最適化（PDF以外の画面を Ctrl+P で印刷するときの見た目）
============================================================================= */
@media print {
/* ナビゲーション・サイドバー・ボタン類を非表示 */
.navbar, .navbar-top, nav.navbar,
.navbar-toggler, .btn, button,
#qmKbdHelpBtn, .modal, .toast, .alert-dismissible .btn-close,
.qm-guide-content {
display: none !important;
}
/* カード影・枠線を消し紙面の邪魔を減らす */
.card, .card-header, .card-body, .card-footer {
box-shadow: none !important;
border: none !important;
padding: 8pt 0 !important;
}
/* 背景色を消す（インク節約）*/
.bg-body-tertiary, .bg-200, .bg-100,
.badge-subtle-primary, .badge-subtle-success, .badge-subtle-warning,
.badge-subtle-danger, .badge-subtle-info, .badge-subtle-secondary {
background: transparent !important;
color: #000 !important;
border: 1px solid #999 !important;
}
/* 表のテキストサイズ強化 */
table { font-size: 10pt !important; page-break-inside: auto; }
tr { page-break-inside: avoid; page-break-after: auto; }
thead { display: table-header-group; }
/* リンクの URL を表示しない（見辛くなるため） */
a:link::after, a:visited::after { content: ''; }
/* 本文カラーをインクブラックに */
body, .text-900, .text-700 { color: #000 !important; }
/* 余白調整 */
@page { margin: 12mm 10mm; }
}
/* ════════════════════════════════════════════════════════════════════
* M-11: スタッフ画面 (/me/*) モバイル対応
*
* スタッフは出先・スマホからの利用が多いため、/me/* 配下を
* 480px 以下でも快適に閲覧できるようにする。
* - フォントサイズ拡大 (タップ・読みやすさ)
* - テーブル横スクロール許容
* - カード余白縮小
* - ボタンタップ領域確保 (48px 以上)
* ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
body[data-section="me"] .container,
body[data-section="me"] .container-fluid {
padding-left: 12px;
padding-right: 12px;
}
body[data-section="me"] .card {
border-radius: 8px;
margin-bottom: 12px;
}
body[data-section="me"] .card-header {
padding: 0.75rem;
}
body[data-section="me"] .card-body {
padding: 0.75rem;
}
body[data-section="me"] h1, body[data-section="me"] .page_title {
font-size: 1.25rem;
}
body[data-section="me"] h2 {
font-size: 1.1rem;
}
body[data-section="me"] table {
font-size: 0.875rem;
}
body[data-section="me"] .table-responsive {
margin-bottom: 0;
}
/* タップ領域 48px 確保 */
body[data-section="me"] .btn,
body[data-section="me"] a.btn {
min-height: 44px;
padding: 0.5rem 1rem;
}
body[data-section="me"] .btn-sm {
min-height: 36px;
}
/* 横スクロール時の視覚的ヒント */
body[data-section="me"] .table-responsive {
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
}
/* ─── Sticky bottom save bar (フォーム保存ボタンを画面下部に固定) ─── */
/* 長いフォーム (カウンタ入力等) で保存ボタンが見つからない問題を解消 */
.qm-sticky-save-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #e2e8f0;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
padding: 0.6rem 1rem;
z-index: 1020;
}
.qm-sticky-save-bar .qm-sticky-save-bar-inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
/* 固定バーで隠れないようコンテンツ末尾に余白を確保 */
.qm-sticky-save-bar-spacer {
height: 80px;
}
/* ==========================================================================
A11Y: WCAG 2.1 AA color-contrast 補正
--------------------------------------------------------------------------
Falcon のデフォルト text-500 (#6c757d) / text-400 (#9da9bb) は白背景上で
コントラスト比 4.49:1 (text-500) / 2.85:1 (text-400) と AA 基準 (4.5:1) を満たさない。
グローバルに text-500 を #5e6e82 (5.34:1) / text-400 を #6c757d (4.49:1 → 補強で 5.34:1) に置換。
※ 同色家族の視覚印象を保ちながら可読性を満たすため、深色寄りに調整。
========================================================================== */
.text-500, .text-muted {
color: #5e6e82 !important; /* 5.34:1 on white */
}
.text-400 {
color: #5e6e82 !important; /* 旧 #9da9bb (2.85:1) → 同 5.34:1 で AA 通過 */
}
.text-300 {
color: #748194 !important; /* 4.55:1 — empty state icon 等の装飾用最低ライン */
}
/* fs-xxs (12px 以下) の text-muted は 7:1 を狙ってさらに濃く (AAA 推奨) */
.fs-11 .text-muted, .fs-xxs .text-muted,
.fs-11.text-muted, .fs-xxs.text-muted {
color: #4d5969 !important;
}
.form-text,
.text-muted,
.breadcrumb-item.active {
color: var(--qm-text-muted, #596a73) !important;
}
.qmt-auth-card a:not(.btn),
.qmt-auth-card .text-decoration-underline {
color: var(--qm-brand-brass-dark, #6f5a3b) !important;
}
.main a.text-decoration-underline,
.main a.text-decoration-none:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
color: var(--qm-brand-brass-dark, #6f5a3b) !important;
}
.btn-link {
color: var(--qm-brand-forest, #0e221d) !important;
text-decoration-color: rgba(14, 34, 29, 0.32);
}
.btn-link:hover,
.btn-link:focus {
color: var(--qm-brand-brass-dark, #6f5a3b) !important;
text-decoration-color: currentColor;
}
.modal-header.bg-primary,
.modal-header.bg-info {
color: #fff !important;
}
.modal-header.bg-primary .modal-title,
.modal-header.bg-info .modal-title,
.modal-header.bg-primary .material-symbols-outlined,
.modal-header.bg-info .material-symbols-outlined {
color: #fff !important;
}
.qm-phase-label,
.qm-step-label,
.qm-step-desc,
.qm-step-locked .qm-step-label,
.qm-step-locked .qm-step-desc,
.qm-step-na .qm-step-label,
.qm-step-na .qm-step-desc,
.qm-phase-locked .qm-phase-label,
dd {
color: var(--qm-text-muted, #596a73) !important;
}
.alert-warning,
.alert-warning .alert-link {
color: #7a3d0d !important;
}
/* Bootstrap text-success / text-danger / text-warning は緑/赤/黄系で AA を満たさないことが多いため
小サイズ + 太字以外で使う際は、深色寄りの値に置換する */
.text-success {
color: #117c43 !important; /* 元 #117c43 (1.95:1) → 5.07:1 */
}
.text-warning {
color: #a85f17 !important; /* 元 #f5803e/#fad776 → 5.05:1 */
}
.text-info {
color: #0c63a4 !important; /* 元 #27bcfd (2.05:1) → 7.05:1 */
}
/* qmitate-ui の brand 色 */
a.staff-nav-link, a.brand {
color: #0e221d !important;
}
/* badge-subtle-* の文字色は背景比 4.5:1 を満たすよう微調整 */
.badge-subtle-info {
color: #0c63a4 !important; /* Falcon デフォルト #1d75bb は 3.84:1 → AA 不足 */
}
.badge-subtle-warning {
color: #8a430f !important; /* warning subtle 背景上で AA を満たす */
}
.badge-subtle-success {
color: #0b6b3d !important; /* success subtle 背景上で AA を満たす */
}
/* ==========================================================================
Cmd+K Command Palette (qmitate-cmdk.js と組で動作)
--------------------------------------------------------------------------
Linear / GitHub 風の中央モーダル。Cmd+K (Mac) / Ctrl+K (Win/Linux) で起動。
========================================================================== */
.qm-cmdk-overlay {
position: fixed; inset: 0;
background: rgba(14, 34, 29, 0.55);
backdrop-filter: blur(4px) saturate(120%);
-webkit-backdrop-filter: blur(4px) saturate(120%);
z-index: 1080;
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
opacity: 0;
transition: opacity 120ms ease-out;
}
.qm-cmdk-overlay.is-open {
display: flex;
opacity: 1;
}
.qm-cmdk-modal {
width: 100%;
max-width: 640px;
max-height: 70vh;
background: #fff;
border-radius: 14px;
box-shadow: 0 28px 64px -12px rgba(14, 34, 29, 0.25), 0 0 0 1px rgba(14, 34, 29, 0.05);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(-4px);
transition: transform 120ms ease-out;
}
.qm-cmdk-overlay.is-open .qm-cmdk-modal { transform: translateY(0); }
.qm-cmdk-search {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid rgba(14, 34, 29, 0.08);
}
.qm-cmdk-search-icon { color: #5e6e82; font-size: 22px; }
#qmCmdkInput {
border: 0; outline: 0; flex: 1; min-width: 0;
font-size: 16px; line-height: 1.4;
background: transparent;
color: #0e221d;
font-family: inherit;
}
.qm-cmdk-esc {
font-family: ui-monospace, SF Mono, Menlo, monospace;
font-size: 11px; color: #5e6e82;
background: #f1f3f7;
border: 1px solid rgba(14, 34, 29, 0.08);
border-radius: 4px;
padding: 2px 6px;
}
.qm-cmdk-results {
flex: 1; overflow-y: auto;
padding: 6px 0;
}
.qm-cmdk-section {
padding: 8px 18px 4px;
font-size: 11px; font-weight: 600;
color: #5e6e82; text-transform: uppercase; letter-spacing: 0;
}
.qm-cmdk-item {
display: flex; align-items: center; gap: 12px;
width: 100%;
background: transparent; border: 0;
padding: 9px 18px;
text-align: left;
color: #0e221d;
cursor: pointer;
font-size: 14px;
transition: background 80ms ease;
}
.qm-cmdk-item .material-symbols-outlined {
font-size: 18px; color: #5e6e82;
}
.qm-cmdk-item .qm-cmdk-label { flex: 1; }
.qm-cmdk-item .qm-cmdk-arrow {
opacity: 0;
font-size: 16px;
}
.qm-cmdk-item:hover,
.qm-cmdk-item.is-active {
background: rgba(168, 143, 99, 0.08);
}
.qm-cmdk-item.is-active .qm-cmdk-arrow,
.qm-cmdk-item:hover .qm-cmdk-arrow {
opacity: 0.7;
}
.qm-cmdk-empty {
text-align: center; padding: 32px 24px;
color: #5e6e82;
}
.qm-cmdk-empty .material-symbols-outlined {
font-size: 32px; color: #a8b1c0; margin-bottom: 8px;
}
.qm-cmdk-footer {
border-top: 1px solid rgba(14, 34, 29, 0.06);
padding: 8px 18px;
font-size: 11px; color: #5e6e82;
display: flex; gap: 16px; flex-wrap: wrap;
background: #fafbfc;
}
.qm-cmdk-footer kbd {
font-family: ui-monospace, SF Mono, Menlo, monospace;
font-size: 10px;
background: #fff; border: 1px solid rgba(14, 34, 29, 0.12);
border-radius: 3px; padding: 1px 5px; margin-right: 4px;
box-shadow: 0 1px 0 rgba(14, 34, 29, 0.06);
}
body.qm-cmdk-open { overflow: hidden; }
.qm-cmdk-trigger {
background: rgba(14, 34, 29, 0.04);
border: 1px solid rgba(14, 34, 29, 0.08);
border-radius: 6px;
padding: 4px 10px 4px 8px;
display: inline-flex; align-items: center; gap: 6px;
color: #5e6e82; font-size: 12px;
cursor: pointer;
transition: background 80ms ease;
}
.qm-cmdk-trigger:hover { background: rgba(14, 34, 29, 0.08); }
.qm-cmdk-trigger kbd {
font-family: ui-monospace, SF Mono, Menlo, monospace;
font-size: 10px;
color: var(--qm-neutral-800, #21352f);
background: #fff;
border: 1px solid rgba(14, 34, 29, 0.1);
border-radius: 3px;
padding: 0 4px;
}
/* ==========================================================================
Type-to-confirm モーダル (破壊的操作の二段階確認)
========================================================================== */
.qm-type-confirm-input {
font-family: ui-monospace, SF Mono, Menlo, monospace;
letter-spacing: 0.04em;
}
.qm-type-confirm-input:invalid:not(:placeholder-shown) {
border-color: #e63757;
box-shadow: 0 0 0 2px rgba(230, 55, 87, 0.15);
}
/* ==========================================================================
KPI 基準線 / 目標バー (Tenant KPI カード拡張)
========================================================================== */
.qm-kpi-bench-bar {
position: relative;
height: 6px;
background: #eef1f5;
border-radius: 3px;
margin-top: 10px;
overflow: visible;
}
.qm-kpi-bench-bar__fill {
position: absolute; inset: 0 auto 0 0;
background: linear-gradient(90deg, #0e221d, #5f6d7d);
border-radius: 3px;
}
.qm-kpi-bench-bar__fill--ok { background: linear-gradient(90deg, #117c43, #19a05a); }
.qm-kpi-bench-bar__fill--warn { background: linear-gradient(90deg, #a85f17, #c69225); }
.qm-kpi-bench-bar__fill--bad { background: linear-gradient(90deg, #c93c5b, #e15a76); }
.qm-kpi-bench-marker {
position: absolute; top: -4px; bottom: -4px;
width: 2px; border-radius: 1px;
background: #0e221d;
}
.qm-kpi-bench-marker[data-kind="target"] { background: #a88f63; }
.qm-kpi-bench-marker[data-kind="benchmark"] { background: #5e6e82; opacity: 0.7; border-left: 2px dashed #5e6e82; background: transparent; }
.qm-kpi-bench-legend {
margin-top: 6px;
font-size: 11px; color: #5e6e82;
display: flex; gap: 12px; flex-wrap: wrap;
}
.qm-kpi-bench-legend__chip {
display: inline-flex; align-items: center; gap: 4px;
}
.qm-kpi-bench-legend__chip::before {
content: ''; display: inline-block; width: 10px; height: 2px;
background: #0e221d;
}
.qm-kpi-bench-legend__chip--target::before { background: #a88f63; }
.qm-kpi-bench-legend__chip--benchmark::before {
background: transparent; border-top: 2px dashed #5e6e82; height: 0;
}
/* ==========================================================================
Sticky salon switcher (dashboard scoped filter)
========================================================================== */
.qm-salon-switcher-sticky {
position: sticky;
top: 56px;
/* Keep below Bootstrap dropdowns (1000) so top-nav menus are never masked. */
z-index: 20;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(14, 34, 29, 0.06);
padding: 6px 0;
margin: -12px -16px 12px;
padding-left: 16px;
padding-right: 16px;
}
.qm-salon-switcher-scroll {
display: flex;
align-items: center;
gap: 6px;
min-height: 30px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
white-space: nowrap;
}
.qm-salon-switcher-scroll::-webkit-scrollbar {
display: none;
}
.qm-salon-switcher-item {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 240px;
height: 30px;
padding: 0 12px;
border: 1px solid rgba(14, 34, 29, 0.14);
border-radius: 8px;
background: #fff;
color: #4b5966;
box-shadow: 0 1px 2px rgba(14, 34, 29, 0.04);
font-size: 12px;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.qm-salon-switcher-item:hover,
.qm-salon-switcher-item:focus {
border-color: rgba(14, 34, 29, 0.26);
background: rgba(14, 34, 29, 0.03);
color: #1f2933;
text-decoration: none;
}
.qm-salon-switcher-item:focus-visible {
outline: 0;
box-shadow: 0 0 0 2px rgba(168, 143, 99, 0.28);
}
.qm-salon-switcher-item.is-active {
border-color: var(--qm-brand-forest, #0e221d);
background: var(--qm-brand-forest, #0e221d);
color: #fff;
box-shadow: none;
}
.qm-salon-switcher-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.qm-salon-switcher-sticky .qm-salon-switcher-label {
flex: 0 0 auto;
gap: 4px;
height: 30px;
color: #5e6e82;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
}
.qm-salon-switcher-sticky .qm-salon-switcher-label .material-symbols-outlined {
font-size: 17px;
line-height: 1;
font-variation-settings: 'FILL' 0, 'wght' 420, 'GRAD' -10, 'opsz' 20;
}
@media (max-width: 575.98px) {
.qm-salon-switcher-sticky {
margin: -10px -12px 10px;
padding: 6px 12px;
}
.qm-salon-switcher-item {
max-width: min(220px, 70vw);
}
}
/* ==========================================================================
Health Center (Platform 管理ダッシュボード統合監視カード)
========================================================================== */
.qm-health-center .qm-hc-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid rgba(14, 34, 29, 0.05);
transition: background 80ms ease;
}
.qm-health-center .qm-hc-row:last-child { border-bottom: 0; }
.qm-health-center .qm-hc-row:hover { background: rgba(168, 143, 99, 0.03); }
.qm-health-center .qm-hc-icon {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
border-radius: 8px;
flex-shrink: 0;
}
.qm-health-center .qm-hc-icon--ok { background: rgba(17, 124, 67, 0.10); color: #117c43; }
.qm-health-center .qm-hc-icon--warn { background: rgba(168, 95, 23, 0.12); color: #a85f17; }
.qm-health-center .qm-hc-icon--crit { background: rgba(201, 60, 91, 0.12); color: #c93c5b; }
.qm-health-center .qm-hc-icon--idle { background: rgba(94, 110, 130, 0.10); color: #5e6e82; }
.qm-health-center .qm-hc-body { flex: 1; min-width: 0; }
.qm-health-center .qm-hc-title {
font-size: 13px; font-weight: 600; color: #0e221d;
margin: 0;
}
.qm-health-center .qm-hc-meta {
font-size: 11px; color: #5e6e82; margin: 2px 0 0;
}
.qm-health-center .qm-hc-action {
flex-shrink: 0;
}
/* Platform KPI sparkline canvas — Chart.js の responsive: true 時の hard constraint */
.qm-platform-sparkline-wrap {
position: relative;
width: 100%;
height: 36px;
margin-top: 6px;
overflow: hidden;
}
.qm-platform-sparkline {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
/* ==========================================================================
入力画面のモバイル/タブレット最適化 (売上入力 / 勤怠入力)
========================================================================== */
@media (max-width: 767.98px) {
.qm-mobile-input-grid table {
font-size: 12px;
}
.qm-mobile-input-grid input[type="number"],
.qm-mobile-input-grid input[type="text"] {
min-width: 64px;
font-size: 14px; /* iOS zoom 防止 */
}
/* 売上入力のヘッダーバー (戻る + ステータス + アクション) を縦積みに */
.qm-input-header-bar {
flex-direction: column;
align-items: stretch;
}
.qm-input-header-bar > * {
width: 100%;
justify-content: flex-start;
}
/* アクション群 (保存・提出) は横並びキープ */
.qm-input-header-bar .qm-input-actions {
display: flex; gap: 8px; justify-content: space-between;
}
.qm-input-header-bar .qm-input-actions .btn {
flex: 1;
font-size: 13px;
}
}
/* 入力フォームの「保存」「提出」ボタンを物理的に分離するためのスペーサ */
.qm-action-divider {
display: inline-block;
width: 1px;
align-self: stretch;
background: rgba(14, 34, 29, 0.12);
margin: 0 4px;
}
.qm-action-divider--mobile {
display: none;
}
@media (max-width: 575.98px) {
.qm-action-divider {
display: none;
}
.qm-action-divider--mobile {
display: block;
width: 100%;
height: 1px;
background: rgba(14, 34, 29, 0.08);
margin: 6px 0;
}
}
/* ==========================================================================
me ガード (スタッフ個人ポータル) bottom navigation
========================================================================== */
@media (max-width: 767.98px) {
body.qm-me-bottom-nav {
padding-bottom: 64px; /* nav 高さぶん content を底上げ */
}
.qm-me-bottom-nav-bar {
position: fixed;
bottom: 0; left: 0; right: 0;
background: #fff;
border-top: 1px solid rgba(14, 34, 29, 0.08);
box-shadow: 0 -4px 20px -8px rgba(14, 34, 29, 0.12);
z-index: 1030;
display: flex;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.qm-me-bottom-nav-bar a {
flex: 1;
display: flex; flex-direction: column; align-items: center;
gap: 2px;
padding: 8px 0;
text-decoration: none;
color: #5e6e82;
font-size: 11px; font-weight: 500;
transition: color 80ms ease;
}
.qm-me-bottom-nav-bar a .material-symbols-outlined {
font-size: 22px;
font-variation-settings: 'FILL' 0, 'wght' 400;
}
.qm-me-bottom-nav-bar a.is-active {
color: #a88f63;
}
.qm-me-bottom-nav-bar a.is-active .material-symbols-outlined {
font-variation-settings: 'FILL' 1, 'wght' 600;
}
}
@media (min-width: 768px) {
.qm-me-bottom-nav-bar { display: none !important; }
}
/* ==========================================================================
Tenant detail tab bar (P-V4)
========================================================================== */
.qm-tenant-tabs {
border-bottom: 2px solid rgba(14, 34, 29, 0.06);
margin-bottom: 16px;
}
.qm-tenant-tabs .nav-link {
color: #5e6e82;
font-weight: 600;
font-size: 14px;
padding: 10px 16px;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
.qm-tenant-tabs .nav-link:hover {
color: #0e221d;
background: transparent;
}
.qm-tenant-tabs .nav-link.active {
color: #a88f63;
border-bottom-color: #a88f63;
background: transparent;
}
.qm-tenant-tabs .nav-link .material-symbols-outlined {
font-size: 18px;
vertical-align: -3px;
margin-right: 4px;
}
/* ==========================================================================
Wizard stepper (Platform 新規テナント導入)
========================================================================== */
.qm-wizard-stepper {
display: flex; align-items: center; gap: 8px;
margin-bottom: 24px;
overflow-x: auto;
}
.qm-wizard-step {
display: flex; align-items: center; gap: 8px;
flex-shrink: 0;
}
.qm-wizard-step__num {
width: 28px; height: 28px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 13px;
background: #eef1f5; color: #5e6e82;
border: 2px solid transparent;
flex-shrink: 0;
}
.qm-wizard-step__label {
font-size: 13px; color: #5e6e82;
}
.qm-wizard-step.is-current .qm-wizard-step__num {
background: #fff; color: #a88f63;
border-color: #a88f63;
}
.qm-wizard-step.is-current .qm-wizard-step__label {
color: #0e221d; font-weight: 600;
}
.qm-wizard-step.is-done .qm-wizard-step__num {
background: #117c43; color: #fff;
}
.qm-wizard-step.is-done .qm-wizard-step__label {
color: #117c43;
}
.qm-wizard-step__connector {
flex: 1; min-width: 24px;
height: 2px; background: #eef1f5; border-radius: 1px;
margin: 0 4px;
}
.qm-wizard-step.is-done + .qm-wizard-step__connector,
.qm-wizard-step__connector.is-done {
background: #117c43;
}
/* ==========================================================================
Audit log deeplink chip
========================================================================== */
.qm-audit-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 1px 8px;
border-radius: 999px;
font-size: 11px;
background: rgba(168, 143, 99, 0.08);
color: #a88f63;
text-decoration: none;
transition: background 80ms ease;
font-weight: 500;
}
.qm-audit-chip:hover {
background: rgba(168, 143, 99, 0.16);
color: #6f5a3b;
text-decoration: none;
}
.qm-audit-chip .material-symbols-outlined {
font-size: 12px;
}
/* ==========================================================================
Qmitate Branded Icons (qmt-icon component と組で動作)
--------------------------------------------------------------------------
|