/* Tags */
a {
	text-decoration: none;
	color: hsl(215, 66%, 38%);
}

body {
	font-size: 95%;
}
/* 擬似要素で背景画像を管理 */
#div-container-customer::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/bg.jpg');
	background-size: cover;
	background-position: center;
	opacity: 0.4;
	z-index: -1;
}

/* Common */
.pointer {
	cursor: pointer;
}
.span-inline {
	cursor: pointer;
}

.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spin {
    -moz-appearance: textfield;
}

.bg-trans {
	background: var(--bs-body-bg) !important;
	border-left: none;
	border-right: none;
}


/* Custom */
.btn-info {
	--bs-btn-color: #fff;
	--bs-btn-bg: #2156a2;
	--bs-btn-border-color: #2156a2;

	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #1c4b8c;
	--bs-btn-hover-border-color: #1c4b8c;

	--bs-btn-focus-shadow-rgb: 33, 86, 162;

	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #173f78;
	--bs-btn-active-border-color: #173f78;
	--bs-btn-active-shadow: none;

	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #2156a2;
	--bs-btn-disabled-border-color: #2156a2;
}

.form-check-input {
    border: var(--bs-border-width) solid #333;
}

.text-info {
	--bs-info-rgb: 33, 86, 162;
	color: rgb(var(--bs-info-rgb)) !important;
}

.text-warning {
	--bs-warning-rgb: 245, 158, 11;
	color: rgb(var(--bs-warning-rgb)) !important;
}

:root,
[data-bs-theme='light'] {
		--bs-border-radius: 0.9rem;
		--bs-border-radius-sm: 0.75rem;
		--bs-border-radius-lg: 1.1rem;

		--ro-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
		--ro-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.container,
.container-fluid {
		/* 余白感を少しだけ増やす */
		padding-left: 1.25rem;
		padding-right: 1.25rem;
}

.dropdown-menu {
    --bs-dropdown-font-size: 100%;
}


/* ==============================
	Navbar (green bar)
============================== */

.navbar.bg-primary,
.navbar.navbar-light,
footer {
		background-color: var(--bs-secondary) !important;
		box-shadow: var(--ro-shadow-sm);
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text {
		color: #FFFFFF !important;
		opacity: 0.95;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
		opacity: 1;
		text-decoration: none;
}

.navbar .dropdown-menu {
		border-radius: var(--bs-border-radius);
		border: 1px solid var(--bs-border-color);
		box-shadow: var(--ro-shadow);
}

.navbar .dropdown-item:active {
		background-color: rgba(var(--bs-secondary-rgb), 0.25);
		color: var(--bs-body-color);
}

:root {
	/* Palette (green based) */
	--bs-primary: #16a34a;		/* Main Green */
	--bs-secondary: #065f46;	/* Deep Green */
	--bs-warning: #F59E0B;		/* Warm (keep) */
	--bs-info: #22c55e;			/* Light Green */
	--bs-success: #008631;		/* Strong Green */
	--bs-dark: #14532d;			/* Dark Green */

	--bs-primary-rgb: 22, 163, 74;		/* #16a34a */
	--bs-secondary-rgb: 6, 95, 70;		/* #065f46 */
	--bs-warning-rgb: 245, 158, 11;		/* #F59E0B */
	--bs-info-rgb: 34, 197, 94;			/* #22c55e */
	--bs-success-rgb: 0, 134, 49;		/* #008631 */
	--bs-dark-rgb: 20, 83, 45;			/* #14532d */

	/* Base */
	--bs-body-color: #052e16;			/* Very dark green */
	--bs-body-bg: #f6fbf8;				/* Green-tinted white */
	--bs-secondary-color: #4d7c6f;

	/* Border / Radius */
	--bs-border-color: #339361;			/* Soft green border */
	--bs-border-radius: 0.875rem;		/* 14px */
	--bs-border-radius-sm: 0.75rem;
	--bs-border-radius-lg: 1rem;

	/* Shadows */
	--ro-shadow-sm: 0 2px 12px rgba(2, 44, 34, 0.06);
	--ro-shadow: 0 10px 28px rgba(2, 44, 34, 0.08);

	/* Focus ring */
	--ro-ring: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.18);

	--bs-light: #eef1f3;
	--bs-light-rgb: 238, 241, 243;
}

/* Page */
body {
		background: var(--bs-body-bg);
		color: var(--bs-body-color);
}

.container,
.container-fluid {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
}

/* Headings (friendly bold) */
h1, h2, h3, h4, h5 {
		letter-spacing: 0.01em;
}

.text-primary {
		color: var(--bs-primary) !important;
}

.table-confirms {
	width: 100%;
}
.table-confirms th {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.table-confirms td {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.table-confirms tbody tr:hover {
		background-color: rgba(var(--bs-table-bg-state, 0, 0, 0), 0.05);
}

/* ==============================
	Cards (white panels + soft shadow)
============================== */

.card {
		border: 1px solid var(--bs-border-color);
		border-radius: var(--bs-border-radius-lg);
		box-shadow: var(--ro-shadow-sm);
		background: #FFFFFF;
}

.card-header {
		background: #FFFFFF;
		border-bottom: 1px solid rgba(2, 6, 23, 0.06);
		font-weight: 800;
}

.card-body {
		background: #FFFFFF;
}

.card .text-muted,
.small.text-muted {
		color: #64748B !important;
}

/* Make “section cards” breathe like the mock */
.card + .card {
		margin-top: 1rem;
}

/* ==============================
	Forms (inputs like the mock)
============================== */

.form-label {
		/*font-weight: 600;*/
		color: #0B1220;
		margin-bottom: 0.35rem;
}

.form-control,
.form-select,
.input-group-text {
		border-radius: var(--bs-border-radius);
		border: 1px solid var(--bs-border-color);
		box-shadow: none;
		background: #FFFFFF;
}

.form-control::placeholder {
		color: #94A3B8;
}

.form-control:focus,
.form-select:focus {
		border-color: rgba(var(--bs-primary-rgb), 0.65);
		box-shadow: var(--ro-ring);
}

.form-text {
		color: #64748B;
}

/* Optional: slightly larger controls (closer to the mock) */
.form-control,
.form-select {
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
}

/* ==============================
	Buttons (pill + friendly)
============================== */

.btn {
		border-radius: 999px;
		font-weight: 600;
		padding: 0.65rem 1.1rem;
		box-shadow: none;
}

.btn-primary {
		background-color: var(--bs-primary);
		border-color: var(--bs-primary);
}

.btn-primary:hover,
.btn-primary:focus {
		background-color: #16A34A;
		border-color: #16A34A;
}

.btn-secondary {
		background-color: var(--bs-secondary);
		border-color: var(--bs-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
		background-color: #0891B2;
		border-color: #0891B2;
}

.btn-warning {
		background-color: var(--bs-warning);
		border-color: var(--bs-warning);
		color: #111827;
}

.btn-warning:hover,
.btn-warning:focus {
		background-color: #D97706;
		border-color: #D97706;
		color: #111827;
}

.btn-outline-primary {
		color: var(--bs-primary);
		border-color: rgba(var(--bs-primary-rgb), 0.7);
		background: #FFFFFF;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
		color: #FFFFFF;
		background: var(--bs-primary);
		border-color: var(--bs-primary);
}

.btn-outline-secondary {
		color: #0B1220;
		border-color: rgba(2, 6, 23, 0.14);
		background: #FFFFFF;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
		background: rgba(2, 6, 23, 0.04);
		border-color: rgba(2, 6, 23, 0.18);
}

/* Circle icon button (use: btn btn-primary rounded-circle p-0) */
.btn.rounded-circle {
		width: 42px;
		height: 42px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
}
.btn {
    --bs-btn-font-size: 100%;
}

/* ==============================
	Badges (step number circles)
	Use: badge rounded-pill text-bg-primary / text-bg-secondary / text-bg-warning
	or badge bg-primary-subtle text-primary-emphasis
============================== */

.badge {
		font-weight: 900;
}

.badge.rounded-circle {
		width: 34px;
		height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
}

/* Subtle backgrounds closer to the mock */
.bg-primary-subtle {
		background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
}

.bg-secondary-subtle {
		background-color: rgba(var(--bs-secondary-rgb), 0.12) !important;
}

.bg-warning-subtle {
		background-color: rgba(var(--bs-warning-rgb), 0.14) !important;
}

/* ==============================
	Stepper (Bootstrap標準で表現)
	推奨構成:
	- 上段: d-flex align-items-center gap-3
	- 丸: badge rounded-circle
	- 線: progress flex-grow-1 (height を細く)
	このCSSは progress を “細い線” に寄せる
============================== */

.progress {
		height: 4px;
		border-radius: 999px;
		background: #E5E7EB;
}

.progress-bar {
		border-radius: 999px;
}

/* Stepper label text (use: small fw-bold) */
.small.fw-bold {
		letter-spacing: 0.01em;
}

/* ==============================
	Accordion / Collapsible blocks (optional)
============================== */

.accordion-item {
		border: 1px solid var(--bs-border-color);
		border-radius: var(--bs-border-radius-lg);
		overflow: hidden;
		box-shadow: var(--ro-shadow-sm);
}

.accordion-item + .accordion-item {
		margin-top: 0.9rem;
}

.accordion-button {
		font-weight: 900;
		background: #FFFFFF;
}

.accordion-button:not(.collapsed) {
		color: #0B1220;
		background: rgba(var(--bs-primary-rgb), 0.10);
		box-shadow: none;
}

.accordion-button:focus {
		border-color: rgba(var(--bs-primary-rgb), 0.65);
		box-shadow: var(--ro-ring);
}

/* ==============================
	Alerts (soft helper blocks)
============================== */

.alert {
		border-radius: var(--bs-border-radius);
		border: 1px solid var(--bs-border-color);
		box-shadow: none;
}

.alert-info {
		background: rgba(var(--bs-secondary-rgb), 0.10);
		border-color: rgba(var(--bs-secondary-rgb), 0.18);
		color: #0B1220;
}

.alert-success {
		background: rgba(var(--bs-primary-rgb), 0.10);
		border-color: rgba(var(--bs-primary-rgb), 0.18);
		color: #0B1220;
}

.alert-warning {
		background: rgba(var(--bs-warning-rgb), 0.12);
		border-color: rgba(var(--bs-warning-rgb), 0.20);
		color: #0B1220;
}

/* ==============================
	List-group (optional: left-side palette blocks)
============================== */

.list-group-item {
		border-color: var(--bs-border-color);
}

.list-group-item:first-child {
		border-top-left-radius: var(--bs-border-radius-lg);
		border-top-right-radius: var(--bs-border-radius-lg);
}

.list-group-item:last-child {
		border-bottom-left-radius: var(--bs-border-radius-lg);
		border-bottom-right-radius: var(--bs-border-radius-lg);
}

/* ==============================
	Spacing helpers (match airy layout)
============================== */

.gap-4 {
		gap: 1.25rem !important;
}

.py-4 {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
}

.shadow-sm {
		box-shadow: var(--ro-shadow-sm) !important;
}

.shadow {
		box-shadow: var(--ro-shadow) !important;
}