/* =========================================================
	Beauty Salon EC Admin Theme for Bootstrap 5
	bootstrap の後に読み込むだけで使える上書きCSS
========================================================= */

/* =========================
	1. Color tokens
========================= */
:root {
	--bs-primary: #223a5e;
	--bs-primary-rgb: 34, 58, 94;

	--bs-secondary: #8e7b6a;
	--bs-secondary-rgb: 142, 123, 106;

	--bs-success: #9c7b5b;
	--bs-success-rgb: 156, 123, 91;

	--bs-info: #2d4a73;
	--bs-info-rgb: 45, 74, 115;

	--bs-warning: #d7b98c;
	--bs-warning-rgb: 215, 185, 140;

	--bs-danger: #b85c5c;
	--bs-danger-rgb: 184, 92, 92;

	--bs-light: #f7f7f7;
	--bs-light-rgb: 247, 247, 247;

	--bs-dark: #4c4f56;
	--bs-dark-rgb: 76, 79, 86;

	--admin-body-bg: #f7f3ee;
	--admin-surface-bg: #ffffff;
	--admin-surface-soft: #fcfaf7;
	--admin-border: #dccfc0;
	--admin-border-soft: #ebe2d8;
	--admin-text: #3f3a36;
	--admin-text-muted: #7a7068;
	--admin-navy-soft: #eaf0f7;
	--admin-brown-soft: #f3ece4;
	--admin-shadow: 0 8px 24px rgba(34, 58, 94, 0.08);
	--admin-radius: 0.75rem;
}

/* =========================
	2. Base
========================= */
body {
	background-color: var(--admin-body-bg);
	color: var(--admin-text);
	letter-spacing: 0.01em;
}

a {
	color: var(--bs-info);
	text-decoration: none;
}

a:hover {
	color: #1f3554;
	// text-decoration: underline;
}

hr {
	border-color: var(--admin-border-soft);
	opacity: 1;
}

.text-muted {
	color: var(--admin-text-muted) !important;
}

/* =========================
	3. Layout surfaces
========================= */
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.accordion-item,
.offcanvas,
.toast {
	border: 1px solid var(--admin-border-soft);
	border-radius: var(--admin-radius);
	box-shadow: var(--admin-shadow);
	background-color: var(--admin-surface-bg);
}

.card-header,
.modal-header,
.offcanvas-header,
.accordion-button {
	background-color: var(--admin-surface-soft);
	border-color: var(--admin-border-soft);
	color: var(--bs-info);
	font-weight: 600;
}

.card-footer,
.modal-footer {
	background-color: #faf7f3;
	border-color: var(--admin-border-soft);
}

/* =========================
	4. Navbar / Header
========================= */
.navbar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.navbar-dark {
	background: linear-gradient(135deg, #223a5e 0%, #2d4a73 100%) !important;
}

.navbar-light {
	background: linear-gradient(135deg, #ffffff 0%, #f8f4ef 100%) !important;
	border-bottom: 1px solid var(--admin-border-soft);
}

.navbar-brand,
.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.navbar-dark .nav-link {
	color: rgba(255, 255, 255, 0.88);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus,
.navbar-dark .nav-link.active {
	color: #ffffff;
}

.navbar-light .navbar-brand,
.navbar-light .nav-link {
	color: var(--bs-info);
}

.navbar-light .nav-link:hover,
.navbar-light .nav-link:focus,
.navbar-light .nav-link.active {
	color: #1f3554;
}

/* =========================
	5. Buttons
========================= */
.btn {
	border-radius: 0.65rem;
	font-weight: 300;
	padding: 0.5rem 0.9rem;
	box-shadow: none;
	transition: all 0.2s ease;
	font-size: 100%;
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(34, 58, 94, 0.10);
}

.btn:focus {
	box-shadow: 0 0 0 0.2rem rgba(var(--bs-info-rgb), 0.18);
}

/* info = 紺系 */
.btn-info {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-info);
	--bs-btn-border-color: var(--bs-info);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #243d5f;
	--bs-btn-hover-border-color: #243d5f;
	--bs-btn-focus-shadow-rgb: 45, 74, 115;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #243d5f;
	--bs-btn-active-border-color: #243d5f;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-info);
	--bs-btn-disabled-border-color: var(--bs-info);
	background-color: var(--bs-info);
	border-color: var(--bs-info);
	color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
	background-color: #243d5f;
	border-color: #243d5f;
	color: #fff;
}

/* success = 薄茶系 */
.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-success);
	--bs-btn-border-color: var(--bs-success);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #876749;
	--bs-btn-hover-border-color: #876749;
	--bs-btn-focus-shadow-rgb: 156, 123, 91;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #876749;
	--bs-btn-active-border-color: #876749;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-success);
	--bs-btn-disabled-border-color: var(--bs-success);
	background-color: var(--bs-success);
	border-color: var(--bs-success);
	color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
	background-color: #876749;
	border-color: #876749;
	color: #fff;
}

/* secondary = グレージュ */
.btn-secondary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #8f8172;
	--bs-btn-border-color: #8f8172;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #7d6f61;
	--bs-btn-hover-border-color: #7d6f61;
	--bs-btn-focus-shadow-rgb: 143, 129, 114;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #7d6f61;
	--bs-btn-active-border-color: #7d6f61;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #8f8172;
	--bs-btn-disabled-border-color: #8f8172;
	background-color: #8f8172;
	border-color: #8f8172;
	color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
	background-color: #7d6f61;
	border-color: #7d6f61;
	color: #fff;
}

/* dark / light はグレー基調維持 */
.btn-dark {
	--bs-btn-color: #fff;
	--bs-btn-bg: #4c4f56;
	--bs-btn-border-color: #4c4f56;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #3f4248;
	--bs-btn-hover-border-color: #3f4248;
	--bs-btn-focus-shadow-rgb: 76, 79, 86;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #3f4248;
	--bs-btn-active-border-color: #3f4248;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #4c4f56;
	--bs-btn-disabled-border-color: #4c4f56;
	background-color: #4c4f56;
	border-color: #4c4f56;
	color: #fff;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
	background-color: #3f4248;
	border-color: #3f4248;
	color: #fff;
}

.btn-light {
	--bs-btn-color: #4c4f56;
	--bs-btn-bg: #f2f3f5;
	--bs-btn-border-color: #d7dbe0;
	--bs-btn-hover-color: #3f4248;
	--bs-btn-hover-bg: #e8ebef;
	--bs-btn-hover-border-color: #ccd2d9;
	--bs-btn-focus-shadow-rgb: 215, 219, 224;
	--bs-btn-active-color: #3f4248;
	--bs-btn-active-bg: #e8ebef;
	--bs-btn-active-border-color: #ccd2d9;
	--bs-btn-disabled-color: #4c4f56;
	--bs-btn-disabled-bg: #f2f3f5;
	--bs-btn-disabled-border-color: #d7dbe0;
	background-color: #f2f3f5;
	border-color: #d7dbe0;
	color: #4c4f56;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
	background-color: #e8ebef;
	border-color: #ccd2d9;
	color: #3f4248;
}

.btn-outline-info {
	color: var(--bs-info);
	border-color: var(--bs-info);
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
	background-color: var(--bs-info);
	border-color: var(--bs-info);
	color: #fff;
}

.btn-outline-success {
	color: var(--bs-success);
	border-color: var(--bs-success);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
	background-color: var(--bs-success);
	border-color: var(--bs-success);
	color: #fff;
}

/* =========================
	6. Forms
========================= */
.form-control,
.form-select,
.input-group-text {
	border-color: var(--admin-border);
	border-radius: 0.65rem;
	background-color: #fff;
	color: var(--admin-text);
}

.form-control,
.form-select {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

.form-control:focus,
.form-select:focus {
	border-color: rgba(var(--bs-info-rgb), 0.5);
	box-shadow: 0 0 0 0.2rem rgba(var(--bs-info-rgb), 0.14);
	background-color: #fff;
}

.input-group-text {
	background-color: #f7f2ec;
	color: var(--bs-info);
	font-weight: 600;
}

.form-label {
	font-weight: 600;
	color: var(--bs-info);
	margin-bottom: 0.45rem;
}

.form-check-input {
	border-color: var(--admin-border);
}

.form-check-input:checked {
	background-color: var(--bs-info);
	border-color: var(--bs-info);
}

.form-check-input:focus {
	box-shadow: 0 0 0 0.2rem rgba(var(--bs-info-rgb), 0.15);
}

/* =========================
	7. Tables
========================= */
.table {
	--bs-table-bg: #ffffff;
	--bs-table-color: var(--admin-text);
	--bs-table-border-color: var(--admin-border-soft);
	vertical-align: middle;
	margin-bottom: 0;
}

.table > :not(caption) > * > * {
	padding: 0.35rem 0.75rem;
	border-bottom-color: var(--admin-border-soft);
}

.table-bordered {
	border-color: var(--admin-border-soft);
}

.table-bordered > :not(caption) > * {
	border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
	border-width: 0 1px;
	border-color: var(--admin-border-soft);
}

.table-hover > tbody > tr:hover > * {
	background-color: #f7f2ec;
	color: var(--admin-text);
}

.table thead th {
	background: linear-gradient(180deg, #f4ede5 0%, #efe5da 100%);
	color: var(--bs-info);
	font-weight: 300;
	border-bottom: 1px solid var(--admin-border);
	white-space: nowrap;
}

.table tbody tr:nth-of-type(even) {
	background-color: #fffdfa;
}

.table-light,
.table-light > :not(caption) > * > * {
	background-color: #f7f7f7 !important;
	color: #4c4f56 !important;
}

.table-dark,
.table-dark > :not(caption) > * > * {
	background-color: #5b6068 !important;
	color: #ffffff !important;
	border-color: #70757d !important;
}

/* =========================
	8. Alerts
========================= */
.alert {
	border-radius: 0.75rem;
	border-width: 1px;
	font-weight: 500;
}

.alert-info {
	background-color: var(--admin-navy-soft);
	border-color: #cad8ea;
	color: #274263;
}

.alert-success {
	background-color: var(--admin-brown-soft);
	border-color: #e2d2bf;
	color: #6a533b;
}

.alert-warning {
	background-color: #fbf4e7;
	border-color: #f0dfbc;
	color: #7e6237;
}

.alert-danger {
	background-color: #f9eaea;
	border-color: #eabcbc;
	color: #8f4a4a;
}

.alert-light {
	background-color: #f7f7f7;
	border-color: #e4e6e9;
	color: #555b63;
}

.alert-dark {
	background-color: #eceef1;
	border-color: #d4d8dd;
	color: #43474d;
}

/* =========================
	9. Badges
========================= */
.badge {
	border-radius: 999px;
	padding: 0.45em 0.7em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bg-info {
	background-color: var(--bs-info) !important;
	color: #fff !important;
}

.bg-success {
	background-color: var(--bs-success) !important;
	color: #fff !important;
}

.bg-secondary {
	background-color: #8f8172 !important;
	color: #fff !important;
}

.bg-light {
	background-color: #f2f3f5 !important;
	color: #4c4f56 !important;
}

.bg-dark {
	background-color: #4c4f56 !important;
	color: #fff !important;
}

/* =========================
	10. Pagination
========================= */
.page-link {
	color: var(--bs-info);
	background-color: #fff;
	border-color: var(--admin-border-soft);
}

.page-link:hover {
	color: #1f3554;
	background-color: #f7f2ec;
	border-color: var(--admin-border);
}

.page-item.active .page-link {
	background-color: var(--bs-info);
	border-color: var(--bs-info);
	color: #fff;
}

.page-item.disabled .page-link {
	color: #9aa0a8;
	background-color: #f8f9fa;
	border-color: #e6e9ed;
}

/* =========================
	11. Nav tabs / pills
========================= */
.nav-tabs {
	border-bottom-color: var(--admin-border-soft);
}

.nav-tabs .nav-link {
	color: var(--admin-text-muted);
	border-radius: 0.75rem 0.75rem 0 0;
	border: 1px solid transparent;
	font-weight: 600;
}

.nav-tabs .nav-link:hover {
	border-color: transparent;
	color: var(--bs-info);
	background-color: #f8f4ef;
}

.nav-tabs .nav-link.active {
	color: var(--bs-info);
	background-color: #fff;
	border-color: var(--admin-border-soft) var(--admin-border-soft) #fff;
}

.nav-pills .nav-link {
	color: var(--bs-info);
	border-radius: 999px;
	font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--bs-info);
	color: #fff;
}

/* =========================
	12. Dropdown / List group
========================= */
.dropdown-item {
	border-radius: 0.5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: #f7f2ec;
	color: var(--bs-info);
}

.list-group-item {
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}

.list-group-item.active {
	background-color: var(--bs-info);
	border-color: var(--bs-info);
	color: #fff;
}

/* =========================
	13. Breadcrumb / Progress / Spinner
========================= */
.breadcrumb {
	margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
	color: #a09283;
}

.breadcrumb-item a {
	color: var(--bs-info);
}

.progress {
	height: 0.8rem;
	border-radius: 999px;
	background-color: #ebe5de;
	overflow: hidden;
}

.progress-bar.bg-info {
	background-color: var(--bs-info) !important;
}

.progress-bar.bg-success {
	background-color: var(--bs-success) !important;
}

.spinner-border.text-info,
.spinner-grow.text-info {
	color: var(--bs-info) !important;
}

.spinner-border.text-success,
.spinner-grow.text-success {
	color: var(--bs-success) !important;
}

/* =========================
	14. Modal / Toast
========================= */
.modal-content {
	overflow: hidden;
}

.modal-header .btn-close {
	filter: none;
	opacity: 0.7;
}

.modal-header .btn-close:hover {
	opacity: 1;
}

.toast-header {
	background-color: #faf7f3;
	color: var(--bs-info);
	border-bottom: 1px solid var(--admin-border-soft);
}

/* =========================
	15. Utility-like polish
========================= */
.border {
	border-color: var(--admin-border-soft) !important;
}

.border-top,
.border-end,
.border-bottom,
.border-start {
	border-color: var(--admin-border-soft) !important;
}

.shadow-sm {
	box-shadow: 0 4px 12px rgba(34, 58, 94, 0.06) !important;
}

.shadow {
	box-shadow: 0 8px 24px rgba(34, 58, 94, 0.08) !important;
}

.shadow-lg {
	box-shadow: 0 14px 36px rgba(34, 58, 94, 0.12) !important;
}

.rounded {
	border-radius: 0.75rem !important;
}

.rounded-3 {
	border-radius: 1rem !important;
}

/* =========================
	16. Optional page wrappers
========================= */
.admin-page-header {
	background: linear-gradient(135deg, #ffffff 0%, #f8f3ed 100%);
	border: 1px solid var(--admin-border-soft);
	border-radius: 1rem;
	padding: 1.25rem 1.25rem;
	box-shadow: var(--admin-shadow);
	margin-bottom: 1rem;
}

.admin-page-title {
	margin-bottom: 0.25rem;
	color: var(--bs-info);
	font-weight: 700;
}

.admin-section {
	background-color: var(--admin-surface-bg);
	border: 1px solid var(--admin-border-soft);
	border-radius: 1rem;
	padding: 1rem;
	box-shadow: var(--admin-shadow);
}

/* =========================
	17. Responsive
========================= */
@media (max-width: 767.98px) {
	.table > :not(caption) > * > * {
		padding: 0.65rem 0.55rem;
	}

	.btn {
		padding: 0.5rem 0.75rem;
	}

	.card,
	.modal-content,
	.dropdown-menu,
	.list-group-item,
	.accordion-item,
	.offcanvas,
	.toast {
		border-radius: 0.65rem;
	}
}