/* 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: var(--index-background-image);
	background-size: cover;
	background-position: center;
	opacity: 0.4;
	z-index: -1;
}

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

.afw-resizable-columns {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.afw-resizable-column {
	flex: 0 0 auto;
	min-width: 0;
	transition: flex-basis 0.12s ease, width 0.12s ease;
}

.afw-resizable-column.is-resizing {
	transition: none;
}

.afw-resize-edge-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	cursor: col-resize;
	z-index: 20;
	touch-action: none;
}

.afw-resize-edge-handle[data-resize-edge="left"] {
	left: 0;
}

.afw-resize-edge-handle[data-resize-edge="right"] {
	right: 0;
}

.afw-resize-edge-handle:hover {
	background: rgba(33, 86, 162, 0.08);
}

body.is-afw-column-resizing {
	cursor: col-resize !important;
	user-select: none;
}

body.is-afw-column-resizing * {
	cursor: col-resize !important;
}

/* Form minimum widths */
.div-suggest-product .input-product-name {
	min-width: 10em;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])[name*="spec"],
textarea[name*="spec"],
select[name*="spec"],
.input-spec,
.input-purchase-spec {
	min-width: 10em;
}

input[type="number"][name*="quantity"],
input[type="number"][name*="quantities"],
input[type="number"].input-quantity,
input[type="number"].input-purchase-quantity,
input[type="number"].input-order-real-quantity {
	min-width: 5em;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])[name*="unit"],
select[name*="unit"],
.input-unit-form {
	min-width: 6em;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])[name*="memo"],
textarea[name*="memo"],
select[name*="memo"] {
	min-width: 20em;
}

/*
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"],
.no-spin,
.no-spinner {
    -moz-appearance: textfield;
	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-secondary {
	--bs-text-opacity: 1;
	color: rgba(108, 117, 125, var(--bs-text-opacity)) !important;
}

.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.2rem;
		--bs-border-radius-sm: 0.1rem;
		--bs-border-radius-lg: 0.4rem;

		--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 (blue 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);
}

.li-header-today-menu {
	display: none;
}

:root {
	/* Palette (blue based) */
	--bs-primary: #2563EB;		/* Main Blue */
	--bs-secondary: #1E3A8A;	/* Deep Blue */
	--bs-light: #1E3A8A;	/* Deep Blue */
	--bs-warning: #F59E0B;		/* Warm (keep) */
	--bs-info: #38BDF8;			/* Light Blue */
	--bs-success: #1D4ED8;		/* Strong Blue */
	--bs-dark: #64748B;			/* Dark Blue Gray */

	--bs-primary-rgb: 37, 99, 235;		/* #2563EB */
	--bs-secondary-rgb: 30, 58, 138;		/* #1E3A8A */
	--bs-light-rgb: 30, 58, 138;		/* #1E3A8A */
	--bs-warning-rgb: 245, 158, 11;		/* #F59E0B */
	--bs-info-rgb: 56, 189, 248;			/* #38BDF8 */
	--bs-success-rgb: 29, 78, 216;		/* #1D4ED8 */
	--bs-dark-rgb: 100, 116, 139;			/* #64748B */

	/* Base */
	--bs-body-color: #0F172A;			/* Very dark blue */
	--bs-body-bg: #F6F9FF;				/* Blue-tinted white */
	--bs-secondary-color: #4D638C;
	--bs-light-color: #4D638C;

	/* Border / Radius */
	--bs-border-color: #7AA7DC;			/* Soft blue border */
	--bs-border-radius: 0.2rem;		/* 14px */
	--bs-border-radius-sm: 0.1rem;
	--bs-border-radius-lg: 0.4rem;

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

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

	--bs-light: #EEF4FF;
	--bs-light-rgb: 238, 244, 255;
}

/* 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-shipment-form {
	width: 100%;
	min-width: 100%;
}
.table-confirms th {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.table-confirms td {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.5rem;
	padding-bottom: 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);
		box-shadow: none;
		background: #FFFFFF;
		overflow: hidden;
}

.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: 0rem;
		padding-bottom: 0rem;
}

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

.btn {
		border-radius: 0.6rem;
		font-weight: 300;
		padding: 0.4rem 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: #1D4ED8;
		border-color: #1D4ED8;
}

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

.btn-secondary:hover,
.btn-secondary:focus {
		background-color: #2563EB;
		border-color: #2563EB;
}

.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;
}

/* ==============================
	Calendar
============================== */

.table-deliver-calendar,
.table-order-confirm-calendar {
	--deliver-calendar-border-color: #adb5bd;
	--bs-border-color: var(--deliver-calendar-border-color);
	table-layout: fixed;
}

.table-deliver-calendar th,
.table-deliver-calendar td,
.table-order-confirm-calendar th,
.table-order-confirm-calendar td {
	width: 14.285%;
	vertical-align: top;
	border-color: var(--deliver-calendar-border-color);
}

.deliver-calendar-day,
.order-confirm-calendar-day {
	min-height: 7em;
	max-height: 7em;
}

.deliver-calendar-day.is-outside,
.order-confirm-calendar-day.is-outside {
	background: #f8f9fa;
	color: #adb5bd;
}

.deliver-calendar-link,
.order-confirm-calendar-link {
	color: inherit;
	display: block;
	min-height: 7em;
	max-height: 7em;
	text-decoration: none;
}

/* ==============================
	Modal forms
============================== */

.modal-form .form-form .form-label,
.modal-form .form-form label,
.modal-form .form-form .fw-bold {
	font-weight: 400 !important;
}

.modal-form .form-form .form-label {
	margin-bottom: 0.5rem !important;
}