/**
 * app.css
 *
 * アプリケーション共通で使用する CSS 定義
 *
 */

html {
	scrollbar-gutter: stable;
}

body {
	background-color: #fcfbfc;
	margin: 0px !important;
	padding: 0px !important; /* ヘッダーを全幅にするためパディング削除 */
}

/*
//------------------------------------------------------------------------------
// app-font- : 文字の大きさ
//------------------------------------------------------------------------------
*/

/* 基本的な大きさ */
.app-font-me {
	font-weight: 500;
	font-size: 18px;
	line-height: 160%;
	letter-spacing: 0.02%;
}

/* 小さい */
.app-font-sm {
	font-weight: 500;
	font-size: 16px;
	line-height: 160%;
	letter-spacing: 0.02em;
}

/* とても小さい */
.app-font-xsm {
	font-weight: 500;
	font-size: 14px;
	line-height: 160%;
	letter-spacing: 0.02em;
}

/* 太字の場合 */
.app-font-me.app-font-bold {
	font-weight: 800;
	letter-spacing: 0.04px;
}

.app-font-sm.app-font-bold {
	font-weight: 800;
	letter-spacing: 0.03em;
	text-align: center;
}

.app-font-xsm.app-font-bold {
	font-weight: 800;
	letter-spacing: 0.03em;
	text-align: center;
}


/*
//------------------------------------------------------------------------------
// app-form- : フォーム
//------------------------------------------------------------------------------
*/
/* 入力エラーの赤枠 */
.app-form-group.is-invalid .app-form-control {
	border-color: #dc2626 !important;
	/* outline: 1px solid #dc2626 !important; */
	background-color: #fef2f2 !important;
}

/* エラーメッセージは何もなければ表示しない */
.app-form-error-message {
	display: none;
	font-size: 12px;
	color: #dc2626;
}

/*  */
/* .common-custom--was--validated .app-form-group:has(input:required:invalid) .app-form-error-message,
.common-custom--was--validated .app-form-group:has(select:required:invalid) .app-form-error-message */
.common-custom--was--validated .app-form-group .app-form-error-message {
	display: block;
}

/* .common-custom--was--validated .app-form-group:has(select:required:invalid):has(.app-form-error-message) .common-input,
.common-custom--was--validated .app-form-group:has(select:required:invalid):has(.app-form-error-message) .common-textarea,
.common-custom--was--validated .app-form-group:has(select:required:invalid):has(.app-form-error-message) select,
.common-custom--was--validated .app-form-group:has(input:required:invalid):has(.app-form-error-message) input,
.common-custom--was--validated .app-form-group:has(input:required:invalid):has(.app-form-error-message) .custom--input--group, */
.common-custom--was--validated .app-form-group:has(.app-form-error-message) .common-input,
.common-custom--was--validated .app-form-group:has(.app-form-error-message) .common-textarea,
.common-custom--was--validated .app-form-group:has(.app-form-error-message) select,
.common-custom--was--validated .app-form-group:has(.app-form-error-message) input,
.common-custom--was--validated .app-form-group:has(.app-form-error-message) .custom--input--group {
	border-color: #dc2626 !important;
	background-color: #fef2f2 !important;
	box-shadow: none !important;
}

/* .common-custom--was--validated .app-form-group:has(input:required:invalid):has(.app-form-error-message) .custom--input--group * */
.common-custom--was--validated .app-form-group:has(.app-form-error-message) .custom--input--group * {
	background-color: #fef2f2 !important;
}

/*
//------------------------------------------------------------------------------
// app-toast- : トースト通知
//------------------------------------------------------------------------------
*/
/* コンテナ: 画面左下に固定配置 */
#app-toast-container {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 9999;
}

/* トースト共通 */
.app-toast {
	width: 360px;
	box-shadow: 0px 8px 24px rgba(25, 40, 57, 0.12);
	border-radius: 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 8px 12px;
	gap: 16px;
	font-size: 16px;
	letter-spacing: 0.02em;
	line-height: 160%;
	font-weight: 500;
	color: #ffffff;
	margin-bottom: 8px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .2s, transform .2s;
}

.app-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* アイコン + テキストのラッパー */
.app-toast__content {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* アイコン */
.app-toast__icon {
	color: #ffffff;
	font-size: 24px;
}

/* テキスト */
.app-toast__message {
	flex: 1;
}

/* 閉じるボタン */
.app-toast__close {
	width: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
	color: #ffffff;
	padding: 0;
	line-height: 1;
	flex-shrink: 0;
}

/* 種別: success */
.app-toast-success {
	--toast-color: #43a047;
}

/* 種別: error */
.app-toast-error {
	--toast-color: #f59e0b;
}

/* 種別: failed */
.app-toast-failed {
	--toast-color: #d3062a;
}

.app-toast-success,
.app-toast-error,
.app-toast-failed {
	background-color: var(--toast-color);
}



/*
//------------------------------------------------------------------------------
// ページャー
//------------------------------------------------------------------------------
*/
/*
 Kyslik\ColumnSortable\Sortableの links() で出力した ページャーのデザインを変更する CSS
*/

/* ラッパー（任意） */
.common-pagination {
	display: flex;
	justify-content: center;
}

/* ページャー全体 */
.common-pagination .pagination {
	gap: 0px;
	margin: 0;
}

/* 各アイテム */
.common-pagination .page-item {
	display: flex;
	margin: 0;
}

/* ボタン */
.common-pagination .page-link {
	display: flex;
	margin: 0;
	align-items: center;
	justify-content: center;

	min-width: 24px;
	height: 32px;

	padding: 0 12px;
	/*font-size: 14px;*/

	border: 1px solid #dee2e6;
	border-radius: 0px;

	background-color: #fff;
	color: #333;

	transition: all 0.15s ease;
}

/* 端だけ角丸にする（任意） */
/* 最初のボタン */
.common-pagination .page-item:first-child .page-link {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

/* 最後のボタン */
.common-pagination .page-item:last-child .page-link {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

/* hover */
.common-pagination .page-link:hover {
	background-color: #f1f3f5;
	text-decoration: none;
}

/* active（現在ページ） */
.common-pagination .page-item.active .page-link {
	background-color: #cfd4da;
	border-color: #cfd4da;
	color: #000;
	font-weight: 600;
}

/* disabled */
.common-pagination .page-item.disabled .page-link {
	color: #adb5bd;
	background-color: #fff;
	pointer-events: none;
}

/* 矢印ボタン */
.common-pagination .page-link[rel="prev"],
.common-pagination .page-link[rel="next"] {
	font-size: 16px;
	padding: 0 8px;
}

/* …（省略）を少し淡く */
.common-pagination .page-item.disabled span.page-link {
	background: #fff;
	color: #adb5bd;
}



/*
//------------------------------------------------------------------------------
// 管理画面共通
//------------------------------------------------------------------------------
*/
/* 戻るボタン */
.common-back--btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #332628;
    text-decoration: none;
    cursor: pointer;
}

/* 戻るボタンホバー */
.common-back--btn:hover {
    opacity: 0.7;
}

/* ページ全体 */
.common-page--content {
    max-width: 898px;
    margin: 0 auto;
    padding: 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* タイトル */
.common-page--title {
	font-size: 28px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: 0.02em;
	color: #332628;
	margin: 0;
}

/* 編集ボタン(btn-brand-baseを使用する前提) */
.common-edit--btn {
	min-height: 56px;
	font-weight: 500;
	border: 1px solid #332628;
	background-color: #ffffff;
	color: #332628;
	text-align: center;
}

/* 編集ボタンホバー */
.common-edit--btn:hover {
	opacity: 0.8;
}

.common-section--title {
	font-size: 20px;
	font-weight: 500;
	line-height: 140%;
	letter-spacing: 0.02em;
	color: #332628;
}

/* アコーディオン内のセクションタイトル */
.common-accordion-section--title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 160%;
	color: #332628;
}

/* アコーディオン内の情報エリア */
.common-accordion-info--box {
	align-self: stretch;
	background-color: #f7f9fc;
	border-radius: 8px;
	padding: 16px;
	display: flex;
	flex-direction: column;
}

.common-accordion-info--box--label {
	width: 240px;
	padding: 8px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #717171;
}

.common-accordion-info--box--value {
	flex: 1;
	padding: 8px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #332628;
}

/* --- Coming Soon（他タブ） --- */
.coming-soon {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 200px;
	font-size: 24px;
	font-weight: 700;
	color: #6b7280;
}

/* 時間プリセットボタン(btn-brand-base、btn-brand-outline-darkと併用前提) */
.btn-duration {
    min-width: 96px;
	min-height: 48px;
	padding: 12px 17px 12px 16px;
    text-align: center;
}

/* ▼ セパレーター */
.common-filter-separator {
	border: none;
	border-top: 2px solid #717d96;
	margin: 0;
}

.common-title {
	font-size: 28px;
	font-weight: 500;
	line-height: 130%;
	color: #332628;
}

/* フォームの"必須"文字 */
.common-icon-required {
	font-size: 14px;
	letter-spacing: 0.02em;
	line-height: 160%;
	font-weight: 500;
	color: #d3062a;
}

.common-field--label--area {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	font-weight: 500;
	line-height: 160%;
	letter-spacing: 0.02em;
}

/*
inpt系ウィジェットの基底カスタムクラス
*/
.common-input,
.common-textarea,
.common-select,
.custom--input--group {
	width: 100%;
	font-size: 18px;
	font-weight: 500;
	line-height: 160%;
	letter-spacing: 0.02em;
	border-radius: 8px;
	color: #332628;
	border: solid 1px #cbd2e0;
	background-color: #ffffff;
	outline: none;
	background-image: none !important;
}

.common-select {
	padding: 8px 16px;
}

.common-input,
.custom--input--group {
	padding: 4px 16px;
}

.common-textarea {
	padding: 16px;
	resize: vertical;
}

.common-input:hover,
.common-textarea:hover,
.common-select:hover,
.custom--input--group:hover {
	border: solid 1px #cbd2e0 !important;
	box-shadow: 0 0 0 .125rem rgba(203, 210, 224, 1);
}

.common-input:focus,
.common-textarea:focus,
.common-select:focus,
.custom--input--group:focus-within {
	border: solid 1px #624e51 !important;
	box-shadow: 0 0 0 .125rem rgba(98, 78, 81, 1);
}

.common-input:disabled,
.common-textarea:disabled,
.common-select:disabled,
.custom--input--group:has(.app-form-control:disabled) {
	background-color: rgba(255, 255, 255, 0.3);
}

.custom--input--group .form-control:focus {
    box-shadow: none !important;
}



/*
//------------------------------------------------------------------------------
// vn-* : Figma デザインシステム共通レイヤ
//
// staff / customer の登録・編集・詳細・一覧画面で共有する design system クラス群
// レガシー `common-*` クラスは並存させており、置換は段階的に行う。
//------------------------------------------------------------------------------
*/

/* --- ページヘッダ行 (戻る + タイトル + 任意の右ボタン) --- */
.vn-page-header {
	display: flex;
	align-items: center;
	padding: 8px;
	gap: 16px;
}

/* --- タブ内コンテンツ領域 (セクション間の縦余白を 40px に広げる) --- */
.vn-tab-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* --- セクション (見出し + 縦並びフィールド群) --- */
.vn-section {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* --- フォーム行（横並び 2 カラム） --- */
.vn-form-row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

/* --- フォームグループ（1 フィールド） --- */
.vn-form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* 親 .vn-form-row 内で flex:1 を指定したときに、子要素 (select 等) の */
	/* intrinsic width に引っ張られず等幅分配されるようにする。           */
	min-width: 0;
}

.vn-form-group--half {
	width: 392px;
}

.vn-form-group--full {
	align-self: stretch;
}

/* --- サブセクション (家族・関連機関・画像 用の囲みボックス) --- */
/* Figma WF_200 (#edf0f7) を背景に。           */
.vn-sub-section {
	background-color: #edf0f7;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}

/* --- ラベル行 --- */
.vn-label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #332628;
}

.vn-required {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #d3062a;
}

/* --- テキストインプット --- */
.vn-input {
	border-radius: 8px;
	background-color: #fff;
	border: 1px solid #cbd2e0;
	padding: 12px 16px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #332628;
	outline: none;
	box-sizing: border-box;
}

/* <input> / <select> 用は固定高 56px。<textarea> は rows 属性で行数管理させる。 */
input.vn-input,
select.vn-input {
	height: 56px;
}

.vn-input::placeholder {
	color: #cbd2e0;
}

/* 幅バリエーション */
.vn-input--full {
	width: 100%;
}

.vn-input--sm {
	width: 224px;
}

.vn-input--md {
	width: 392px;
}

/* --- プルダウン（Bootstrap form-select ベース） --- */
.vn-select {
	height: 56px;
	border-radius: 8px;
	background-color: #fff;
	border: 1px solid #cbd2e0;
	padding: 8px 16px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #332628;
	outline: none;
	box-sizing: border-box;
}

/* --- ラジオボタン --- */
.vn-radio-group {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
}

.vn-radio-item {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 0;
	cursor: pointer;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
}

.vn-radio-item input[type="radio"] {
	width: 24px;
	height: 24px;
	accent-color: #f1546a;
	cursor: pointer;
}

/* --- チェックボックスグループ --- */
.vn-checkbox-group {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
}

.vn-checkbox-item {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 0;
	cursor: pointer;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
}

.vn-checkbox-item input[type="checkbox"] {
	width: 24px;
	height: 24px;
	accent-color: #f1546a;
	cursor: pointer;
}

/* --- 補助テキスト --- */
.vn-help-text {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #717171;
}

/* --- バリデーションチェックリスト (パスワード要件など) --- */
.vn-validation-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.vn-validation-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #717171;
}

.vn-validation-item--pass {
	color: #332628;
}

.vn-validation-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* --- シフトタブ --- */
.vn-shift-desc {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #332628;
	margin: 0;
}

.vn-shift-rows {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.vn-shift-row {
	border-radius: 8px;
	background-color: #fff;
	border: 1px solid #cbd2e0;
	display: flex;
	align-items: center;
}

.vn-shift-row--holiday {
	background-color: #ececec;
}

.vn-shift-day {
	width: 200px;
	flex-shrink: 0;
	padding: 16px 24px;
	box-sizing: border-box;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #332628;
}

.vn-shift-day--saturday {
	color: #0373d4;
}

.vn-shift-day--sunday {
	color: #d3062a;
}

.vn-shift-toggle {
	min-width: 150px;
	flex-shrink: 0;
	padding: 16px 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vn-shift-time {
	flex: 1;
	padding: 16px 24px;
	box-sizing: border-box;
}

/*
 * TODO: 時間入力フォームの共通コンポーネント化を検討
 * 現在、時刻入力は以下の画面で個別に実装されている:
 *   - スタッフ新規登録（シフトタブ）: .vn-shift-time-wrap
 *   - シフト管理（編集モード）: .vn-shift-time-input
 *   - スケジュール登録/編集モーダル
 * 将来的に共通の時刻入力コンポーネントとして統一できると保守性が向上する
 */
.vn-shift-time-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vn-shift-time-wrap .vn-input {
	flex: 1;
	min-width: 0;
	max-width: 140px;
}

.vn-shift-holiday-text {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #717171;
}

/* --- カスタムトグルスイッチ（出勤/休み） --- */
.vn-shift-switch {
	display: inline-flex;
	cursor: pointer;
	margin: 0;
}

.vn-shift-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.vn-shift-switch-track {
	display: flex;
	align-items: center;
	border-radius: 1000px;
	background-color: #717171;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	padding: 2px 10px 2px 6px;
	gap: 32px;
	transition: background-color 0.2s;
}

/* Thumb（白丸）: 未チェック時は左側 */
.vn-shift-switch-track::before {
	content: '';
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background-color: #fff;
	flex-shrink: 0;
}

/* ラベルテキスト: 未チェック時は「休み」 */
.vn-shift-switch-track::after {
	content: '休み';
}

/* チェック時（出勤）: 青背景、テキスト→サム の順 */
.vn-shift-switch input:checked + .vn-shift-switch-track {
	background-color: #0373d4;
	padding: 2px 6px 2px 10px;
}

.vn-shift-switch input:checked + .vn-shift-switch-track::before {
	order: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%230373d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
	background-size: 14px;
	background-repeat: no-repeat;
	background-position: center;
}

.vn-shift-switch input:checked + .vn-shift-switch-track::after {
	content: '出勤';
}

/* --- アコーディオン (show 画面で利用) --- */
.vn-accordion {
	background-color: #fff;
	border: 1px solid #edf0f7;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 16px;
}

.vn-accordion-header {
	background-color: #edf0f7;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 18px;
	font-weight: 800;
	color: #332628;
}

.vn-accordion-toggle {
	background: none;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	color: #717171;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.vn-accordion-toggle:hover {
	color: #5a5a5a;
}

.vn-accordion-body {
	padding: 24px;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* --- 入力エラー状態 (input/select の赤枠) --- */
.vn-input-error,
.vn-input.vn-input-error,
.vn-select.vn-input-error {
	border-color: #d3062a !important;
}

.vn-input-error:focus,
.vn-input.vn-input-error:focus,
.vn-select.vn-input-error:focus {
	border-color: #d3062a !important;
	box-shadow: 0 0 0 .2rem rgba(211, 6, 42, .25);
}

.vn-input-feedback {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: #d3062a;
	letter-spacing: 0.02em;
	line-height: 160%;
}

/* ラジオ・チェックボックスグループのエラー時 (枠を持つ input の場合のみ意味あり) */
.vn-group-error input {
	border-color: #d3062a !important;
}

/* --- バッジ --- */
.vn-badge-active {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 12px;
	border-radius: 1000px;
	background-color: var(--bs-primary, #0d6efd);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
}

.vn-badge-expired {
	color: #d3062a;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.02em;
}

.vn-badge-expired .bi {
	color: #d3062a;
	margin-left: 4px;
}

/* --- データテーブル (list 画面) --- */
.vn-data-table-wrap {
	border: 1px solid #f4b8cc;
	border-radius: 16px;
	overflow: hidden;
	background-color: #fff;
}

.vn-data-table {
	width: 100%;
	margin-bottom: 0;
	border-collapse: collapse;
}

.vn-data-table thead tr {
	background-color: #fff6f8;
	border-bottom: 1px solid #f4b8cc;
}

.vn-data-table thead th {
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #624e51;
	text-align: left;
	background-color: #fff6f8;
	white-space: nowrap;
}

.vn-data-table tbody tr {
	border-bottom: 1px solid #fce4ef;
}

.vn-data-table tbody tr:last-child {
	border-bottom: none;
}

.vn-data-table tbody td {
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #332628;
	vertical-align: middle;
}

.vn-data-table .vn-data-table-actions {
	text-align: right;
	white-space: nowrap;
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.vn-data-table a.sortable-link,
.vn-data-table thead a {
	color: inherit;
	text-decoration: none;
}

/* --- 画像グリッド (画像一覧) --- */
.vn-image-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

@media (max-width: 575.98px) {
	.vn-image-grid {
		grid-template-columns: 1fr;
	}
}

.vn-image-card {
	border: 1px solid #dbe2ef;
	border-radius: 8px;
	background-color: #fff;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vn-image-card--dashed {
	border-style: dashed;
	border-color: #624e51;
}

.vn-image-card-preview {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background-color: #cbd2e0;
	cursor: pointer;
	aspect-ratio: 287 / 232;
}

.vn-image-card-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vn-image-card-preview-icon {
	position: absolute;
	bottom: 8px;
	right: 8px;
	color: #717171;
	pointer-events: none;
}

.vn-image-card-caption {
	text-align: center;
	font-size: 14px;
	color: #624e51;
}

.vn-image-card-delete {
	background: none;
	border: none;
	color: #717171;
	font-weight: 700;
	text-decoration: underline;
	align-self: flex-start;
	cursor: pointer;
	padding: 0;
}

.vn-image-card-delete:hover {
	color: #5a5a5a;
}

/* --- ドラッグ&ドロップゾーン (画像アップロード) --- */
.vn-dashed-dropzone {
	border: 1px dashed #624e51;
	border-radius: 8px;
	padding: 40px 16px;
	background-color: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* --- 入力グループ (input + アイコン append) --- */
.vn-input-group {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.vn-input-group .vn-input,
.vn-input-group input.form-control {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	flex: 1;
	/* input の規定 min-width: auto (= intrinsic) を解除して、     */
	/* 親 (.vn-input-group / .vn-form-group) の幅以内に収める。   */
	min-width: 0;
}

.vn-input-group-text {
	height: 56px;
	border: 1px solid #cbd2e0;
	border-left: none;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	background-color: #fff;
	color: #624e51;
	display: flex;
	align-items: center;
	padding: 0 16px;
	box-sizing: border-box;
}

/* --- 保険情報のロック表示 (期限切れ ins1 を読み取り専用で見せる) --- */
.vn-insurance-locked .vn-input,
.vn-insurance-locked .vn-select,
.vn-insurance-locked .form-control,
.vn-insurance-locked .form-select,
.vn-insurance-locked .vn-input-group-text {
	background-color: #e9ecef;
	color: #6c757d;
	pointer-events: none;
}

/* --- アラート (flash メッセージ) --- */
.vn-alert {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 8px;
	padding: 8px 12px;
	margin-bottom: 16px;
	font-size: 16px;
	letter-spacing: 0.02em;
	line-height: 160%;
}

.vn-alert--success {
	background-color: #d1f0d8;
	color: #1f6f31;
	border: 1px solid #a3e0b1;
}

.vn-alert--danger {
	background-color: #fde2e6;
	color: #d3062a;
	border: 1px solid #f4a3ad;
}

.vn-alert ul {
	margin: 0;
	padding-left: 16px;
}

/* --- show 用 シフトテーブル --- */
.vn-shift-table-wrap {
	border: 1px solid #ff88a6;
	border-radius: 16px;
	overflow: hidden;
	background-color: #fff;
}

.vn-shift-table {
	width: 100%;
	margin-bottom: 0;
	border-collapse: collapse;
}

.vn-shift-table thead tr {
	background-color: #fff6f8;
}

.vn-shift-table thead th,
.vn-shift-table tbody td {
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 160%;
	color: #332628;
	text-align: left;
	vertical-align: middle;
}

.vn-shift-table thead th {
	background-color: #fff6f8;
	color: #624e51;
	font-size: 14px;
}

.vn-shift-table tbody tr {
	border-top: 1px solid #fce4ef;
}

.vn-shift-table tbody tr.vn-shift-table-row--holiday {
	background-color: #f5f5f5;
}