/* prettier-ignore */
/*# sourceMappingURL=user.css.map */
.py-1-5 {
    padding-top: 0.395rem; /* 6px */
    padding-bottom: 0.395rem; /* 6px */
}

/* Initially hide the panel */
#bulkActionPanel {
	display: none;
	position: absolute;
	top: 15px;
	left: 200px;
	z-index: 1000;
}

/* Show the panel when this class is applied */
.show-panel {
	display: flex !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
	#bulkActionPanel {
		position: fixed;
		top: 15px;
		left: 50%;
		transform: translateX(-50%);
		background-color: rgba(210, 230, 255, 0.1);
		width: 200%;
		max-width: 300px;
		padding: 10px;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	#bulkActionPanel select,
	#bulkActionPanel span,
	#bulkActionPanel button {
		width: 100%;
		text-align: center;
		margin: 5px 0;
	}
}
@font-face {
    font-family: 'CustomFont';
    src: url('/assets/fonts/flexo-bold.woff2') format('woff2'),
         url('/assets/fonts/flexo-bold.woff') format('woff'),
         url('/assets/fonts/flexo-bold.woff') format('eot'),
         url('/assets/fonts/flexo-bold.woff') format('ttf');
    font-weight: normal;
    font-style: normal;
}

.logo-large {
    font-family: 'flexo-bold', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #E94A3F; /* Match the red color */
    letter-spacing: 0.5px;
}

.logo-small {
    font-family: 'flexo-bold', sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #2C3E50; /* Match the dark color */
    text-transform: uppercase;
    letter-spacing: 1px;
}
.text_danger_chronos {
	color: #e84c3d;
}
.text_secondary_chronos {
	color: #4d6175;
}

/* SHOW NOTIFICATION BOX */

.notification-box {
	position: fixed;
	top: 0.69rem;
	right: 15rem;
	z-index: 1500; /* Ensure it stays on top of other elements */
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	white-space: nowrap;
	/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
	transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
}

.notification-box.success {
	background-color: #d4edda;
	color: #155724;
}

.notification-box.error {
	background-color: #f8d7da;
	color: #721c24;
}

.notification-box.warning {
	background-color: #fff3cd;
	color: #856404;
	border: 1px solid #ffeaa7;
}

.notification-box.info {
	background-color: #d1ecf1;
	color: #0c5460;
	border: 1px solid #bee5eb;
}

.notification-box .close-btn {
	background: transparent;
	border: none;
	color: inherit;
	margin-left: 0.5rem;
	cursor: pointer;
	font-size: 1rem;
}

.notification-box.hidden {
	transform: translateY(-150%);
	opacity: 0;
}

@media (max-width: 768px) {
	.notification-box {
		right: 0.5rem;
		left: 0.5rem; /* Centered on smaller screens */
		max-width: unset;
	}
}

.support-chat-container.show {
	z-index: 50000 !important;
}

.support-chat {
  	max-width: 36rem;
	transform-origin: bottom left !important;
	left: 0 !important; /* Force the chat to the left */
  	right: auto !important; /* Ensure it's not positioned on the right */
	bottom: 9rem !important;
	padding-bottom: 0 !important;
	/*margin: 0 !important;
	padding: 0 !important;*/
}

.support-chat .card {
	-webkit-box-shadow: 0px 0px 24px 0px rgba(36, 40, 46, 0.52);
	box-shadow: 0px 0px 24px 0px rgba(36, 40, 46, 0.52);
	border-radius: 0;
}

.support-chat .card .card-header, .support-chat .card .card-footer {
	/*background-color: var(--phoenix-navbar-vertical-link-hover-bg);*/
	border-radius: 0;
}

.navbar-vertical-footer-chrona {
	position: fixed;
	width: 15.875rem;
	height: 4rem;
	bottom: 4rem;
	display: flex;
	align-items: center;
	border-top: 1px solid var(--phoenix-navbar-footer-border-color);
	border-right: 1px solid var(--phoenix-navbar-footer-border-color);
	-webkit-transition: width 0.2s ease;
	-o-transition: width 0.2s ease;
	transition: width 0.2s ease;
	padding: 0;
	margin: 0;
}

.ask-chrona-btn {
  /* Legacy rule — kept for backward compat with old chat.php */
  justify-content: left;
  padding: 0 0 0 22px !important;
  margin: 0 !important;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 4rem !important;
  border-radius: 0;
	
}

.ask-chrona-btn.toggled {
    background-color: var(--phoenix-navbar-vertical-link-hover-bg);
	border-right: 1px solid var(--phoenix-navbar-footer-border-color);
}

.navbar-vertical-collapsed .ask-chrona-btn {
  display: none;
}

.navbar-vertical-collapsed .ask-chrona-btn .chrona-icon {
  margin: 0;
}

.footer-btn:hover{
	background-color: var(--phoenix-navbar-vertical-link-hover-bg);
	border-right: 1px solid var(--phoenix-navbar-footer-border-color);
}

/* Reserve footer height plus breathing room so page content never sits flush against the footer bar. */
:root {
	--chronos-footer-gap: 1.5rem;
}

.content {
	padding-bottom: calc(6rem + var(--chronos-footer-gap));
}

@media (min-width: 576px) {
	.content {
		padding-bottom: calc(4rem + var(--chronos-footer-gap));
	}
}

html.navbar-vertical-collapsed .navbar-vertical-footer-chrona {
    width: 64px; /* Shrinks the width */
    padding: 0; /* Removes extra padding */
    text-align: center; /* Ensures icon stays centered */
}

html.navbar-vertical-collapsed .navbar-vertical-footer-chrona img {
    margin: 0;
    width: 16px;
    height: 16px;
}

html.navbar-vertical-collapsed .navbar-vertical-footer:hover {
    border-right: 0 !important;
	background-color: var(--phoenix-navbar-vertical-link-hover-bg) !important;
}







.support-modal-container {
    position: absolute; /* Position dynamically */
    z-index: 50001; /* Ensure it's above other content */
    display: none; /* Hidden by default */
	right: auto !important;
	bottom: 9rem !important;
	padding-bottom: 0 !important;
	border-radius: 0;
}

.support-modal-container .card {
    width: 100%; /* Match the chat window width */
    border-radius: 0px;
}

.support-modal-container .card-header {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.support-modal-container .card-body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
	max-height: 78.79vh;
	overflow-y: auto;
}



/* Ensure all table cells align vertically */
.table-list .table td, .table th {
    vertical-align: middle !important; /* Enforce vertical alignment across all cells */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Flexbox container for name column */
.table-list .d-flex.align-items-center {
    display: flex;
    align-items: center; /* Align avatar and text vertically */
    gap: 8px; /* Add spacing between avatar and text */
}

/* Avatar container styling */
.avatar-container {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0; /* Prevent shrinking of the avatar */
    background-color: #f0f0f0; /* Background for avatars */
    display: inline-block;
}

/* Avatar image styling */
.avatar-image {
    width: auto;
    height: 100%; /* Ensure the height fills the container */
    position: relative;
    left: 50%; /* Horizontally center the image */
    transform: translateX(-50%);
    object-fit: cover; /* Properly crop the image */
}

.dropdown-avatar-image {
  width: 24px;
  height: 24px;
  object-fit: cover;
}
.dropdown-item.d-flex {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.search-box .dropdown-menu .dropdown-item.active {
  background-color: #eff2f6 !important;  /* Light gray background */
  color: black !important;  /* Black text */
  border-top: none !important;  /* Remove any top border */
  border-bottom: none !important;  /* Remove any bottom border */
  border-left: none !important;  /* Remove any left border */
  border-right: none !important;  /* Remove any right border */
  box-shadow: none !important;  /* Remove any box shadow */
}

/* Firefox-specific focus styles */
.search-box .dropdown-menu .dropdown-item:focus,
.search-box .dropdown-menu .dropdown-item:focus-visible,
.search-box .dropdown-menu .dropdown-item.active:focus,
.search-box .dropdown-menu .dropdown-item.active:focus-visible {
  background-color: #eff2f6 !important;  /* Light gray background */
  color: black !important;  /* Black text */
  border: none !important;  /* Remove all borders */
  outline: none !important;  /* Remove Firefox outline */
  box-shadow: none !important;  /* Remove any box shadow */
}

.dropdown-item.active {
	background-color: #eff2f6 !important; /* Light gray background to match search */
	color: black !important; /* Black text */
	border-top: none !important;  /* Remove any top border */
	border-bottom: none !important;  /* Remove any bottom border */
	border-left: none !important;  /* Remove any left border */
	border-right: none !important;  /* Remove any right border */
	box-shadow: none !important;  /* Remove any box shadow */
}

/* Firefox-specific focus styles for general dropdown items */
.dropdown-item:focus,
.dropdown-item:focus-visible,
.dropdown-item.active:focus,
.dropdown-item.active:focus-visible {
	background-color: #eff2f6 !important; /* Light gray background to match search */
	color: black !important; /* Black text */
	border: none !important;  /* Remove all borders */
	outline: none !important;  /* Remove Firefox outline */
	box-shadow: none !important;  /* Remove any box shadow */
}

/* Additional overrides for any Bootstrap or browser focus styles */
.dropdown-item:focus-within,
.dropdown-item.active:focus-within,
.search-box .dropdown-menu .dropdown-item:focus-within,
.search-box .dropdown-menu .dropdown-item.active:focus-within {
	background-color: #eff2f6 !important;
	color: black !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Override any potential Bootstrap button focus styles */
a.dropdown-item:focus,
a.dropdown-item:focus-visible,
a.dropdown-item.active:focus,
a.dropdown-item.active:focus-visible {
	background-color: #eff2f6 !important;
	color: black !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.form-label {
	padding-left: 0 !important;
}

/* Prevent horizontal scrollbars in search dropdown */
.search-box .accordion-body {
	overflow-x: hidden !important;
	padding-right: 0.5rem !important; /* Small padding to prevent text touching scrollbar */
}

.search-box .dropdown-item {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100% !important;
	padding-right: 1rem !important; /* Ensure some padding on the right */
}

/* Remove ellipsis from the span to prevent it on short names */
.search-box .dropdown-item span {
	overflow: visible !important;
	text-overflow: clip !important;
	display: inline !important;
	max-width: none !important;
	vertical-align: baseline !important;
	white-space: normal !important;
	word-break: break-word !important;
}

/* Ensure the highlight span doesn't cause misalignment */
.search-box .dropdown-item span .highlight {
	display: inline !important;
	vertical-align: baseline !important;
	line-height: 1 !important;
	position: relative !important;
	top: 0 !important;
}

/* Consistent accordion button styling */
.search-box .accordion-button {
	color: #0d6efd !important; /* Use Bootstrap primary blue color like the icons */
	background-color: transparent !important;
	text-decoration: none !important;
	cursor: pointer !important;
	font-size: 0.9rem !important; /* Bigger than before but still smaller than default */
	font-weight: 600 !important; /* Slightly bolder to maintain hierarchy */
}

.search-box .accordion-button:hover {
	background-color: var(--bs-accordion-btn-hover-bg) !important;
	color: #0d6efd !important; /* Keep same blue color on hover */
}

.search-box .accordion-button:focus,
.search-box .accordion-button:focus-visible {
	background-color: #e3f2fd !important;
	color: #0d6efd !important; /* Keep same blue color when focused */
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	z-index: 10 !important;
}

/* Custom focus class for keyboard navigation */
.search-box .accordion-button.search-focused {
	background-color: #e3f2fd !important;
	color: #0d6efd !important; /* Keep same blue color when search-focused */
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	word-break: break-word;
}


.dataTable {
    table-layout: fixed; /* Enforces the column widths */
	
}

table.dataTable td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.dataTable thead th.text-end {
	padding-right:25px !important;
}
table.dataTable thead th.text-start {
	padding-left:10px !important;
}

/*.dataTable tbody tr {
    font-size: 0.75rem;
}*/
/*.dataTables_filter {
	position: relative;
}

.dataTables_filter svg {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}*/


.highlight {
	background-color: #bfe5ff !important;
	display: inline !important;
	vertical-align: baseline !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative !important;
	top: 0 !important;
}

/* More specific selectors to ensure blue highlight in search */
.search-box .highlight,
.search-box .dropdown-item .highlight,
.search-box .dropdown-item span .highlight {
	background-color: #bfe5ff !important;
	color: #000 !important;
}

.search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent overlay */
	z-index: 999; /* Adjust based on your search box z-index to ensure it's below */
	display: none; /* Initially hidden */
}

/* Ensure DataTables processing overlay displays as a centered floating panel (matches default DT behaviour) */


.search-box {
	position: relative;
	z-index: 1000; /* Ensure search box is above overlay */
}

.dropdown-menu {
	z-index: 1001; /* Ensure dropdown is above overlay */
}

#clearSearchX {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #6c757d;
}
#clearSearchX:hover {
	color: #000;
}

/* Dark mode improvements for notifications and table styling */
[data-bs-theme="dark"] .notification-box.warning {
	background-color: #4a3c1a;
	color: #ffeb3b;
	border: 1px solid #6b5b2e;
}

[data-bs-theme="dark"] .notification-box.info {
	background-color: #1a3b4a;
	color: #81d4fa;
	border: 1px solid #2e5b6b;
}

[data-bs-theme="dark"] .notification-box.success {
	background-color: #1e4a1e;
	color: #81c784;
}

[data-bs-theme="dark"] .notification-box.error {
	background-color: #4a1e1e;
	color: #f48fb1;
}

/* ==========================================
   Choices.js global overrides to match Bootstrap
   ========================================== */
.choices {
	font-size: 0.9rem; /* slightly smaller text */
}

.choices__inner {
	/* Match Bootstrap form-select look */
	background-color: var(--bs-form-select-bg, var(--bs-form-control-bg, #fff)) !important;
	border: 1px solid var(--bs-form-select-border-color, #ced4da) !important;
	border-radius: 0.375rem !important; /* match .form-select */
	min-height: calc(2rem + 2px) !important; /* slightly smaller field */
	padding: 0.25rem 0.75rem !important; /* tighter like theme selects */
	font-size: 0.85rem !important; /* smaller text inside field */
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
	border-color: #86b7fe !important; /* Bootstrap focus color */
	box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important; /* focus ring */
}

/* Use Bootstrap select chevron instead of Choices triangle */
.choices[data-type*='select-one']::after { display: none !important; }
.choices[data-type*='select-one'] .choices__list--single {
	position: relative !important;
}
.choices[data-type*='select-one'] .choices__inner {
	/* Use Bootstrap select chevron with a robust var() fallback */
	background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")) !important;
	background-repeat: no-repeat !important;
	background-position: right .75rem center !important;
	background-size: 16px 12px !important;
	padding-right: 2rem !important; /* space for chevron */
}

/* Dropdown panel */
.choices__list--dropdown,
.choices__list[aria-expanded] {
	background-color: #fff !important; /* white like native */
	border: 1px solid var(--bs-border-color) !important;
	border-radius: 0.375rem !important;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; /* dropdown style */
	max-height: 24rem !important; /* show many options but scroll */
	overflow-y: auto !important;
}

/* In case theme styles apply background on the inner list, force white there too */
.choices .choices__list--dropdown .choices__list,
.choices .choices__list[aria-expanded] .choices__list {
	background-color: #fff !important;
}

/* Dropdown search input (cloned) */
.choices__list--dropdown .choices__input--cloned {
	background-color: #fff !important;
	border: 1px solid var(--bs-border-color) !important;
	border-radius: 0.25rem !important;
	margin: 0.25rem 0.5rem !important;
	padding: 0.25rem 0.5rem !important;
	font-size: 0.9rem !important;
	box-shadow: none !important;
}

/* Dropdown items */
.choices__list--dropdown .choices__item--selectable {
	padding: 0.375rem 0.75rem !important;
	color: var(--bs-body-color) !important;
}

/* Ensure all dropdown items use smaller font & white background base */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item,
.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
	font-size: 0.85rem !important; /* smaller for denser list */
	line-height: 1.2 !important;
	background-color: #fff !important;
}

/* Hover/active state to match .dropdown-item:hover */
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable:hover {
	background-color: #eff2f6 !important;
	color: var(--bs-body-color) !important;
}

/* Remove blue badge style for selected single */
.choices__list--single .choices__item {
	color: var(--bs-body-color) !important;
}

/* Remove pill appearance for multiple to keep simple look */
.choices__list--multiple .choices__item {
	background-color: #e9ecef !important;
	border: none !important;
	color: var(--bs-body-color) !important;
}

/* Dropdown z-index above modals content */
.choices__list--dropdown {
	z-index: 1060; /* Bootstrap modal backdrop is 1050 */
}

/* ==========================================
   Selectize.js global overrides to match Bootstrap & Chronos
   Updated: 2024-12-19 - Fixed PO panel dropdown clipping
   ========================================== */
/* Hide original select when selectized */
select.selectized { display: none !important; }
.selectize-control { width: 100% !important; }
.selectize-control.single { position: relative !important; }
	.selectize-control.single .selectize-input {
	height: 34px !important;
	padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
	font-size: 0.75rem !important;
	font-family: var(--bs-body-font-family, inherit) !important;
	font-weight: var(--bs-body-font-weight, 400) !important;
	line-height: 1.5 !important;
	color: #212529 !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	background-size: 16px 12px !important;
	border: 1px solid #ced4da !important;
	border-radius: 0.375rem !important;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.075) !important;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	white-space: nowrap !important;
}
.selectize-control.single .selectize-input:focus {
	border-color: #86b7fe !important;
	outline: 0 !important;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}
.selectize-control.single .selectize-input.disabled { background-color: #e9ecef !important; opacity: 1 !important; }
.selectize-control.single .selectize-input:after { display: none !important; }
	.selectize-control.single .selectize-input input {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0.75rem !important;
	font-family: var(--bs-body-font-family, inherit) !important;
	font-weight: var(--bs-body-font-weight, 400) !important;
	line-height: 1.5 !important;
	color: #212529 !important;
	width: auto !important;
	min-width: 2px !important;
	display: inline-block !important;
	vertical-align: middle !important;
}
.selectize-control.single .selectize-input .item { color: #212529 !important; font-size: 0.75rem !important; line-height: 1.5 !important; }
.selectize-dropdown {
	border: 1px solid #ced4da !important;
	border-radius: 0.375rem !important;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	z-index: 1050 !important;
	background: #fff !important;
	margin-top: 2px !important;
	max-height: 200px !important;
	overflow-y: auto !important;
}
	.selectize-dropdown .selectize-dropdown-content .option { padding: 0.375rem 0.75rem !important; font-size: 0.75rem !important; cursor: pointer !important; color: #212529 !important; }
.selectize-dropdown .selectize-dropdown-content .option.active { background-color: #0d6efd !important; color: #fff !important; }
.selectize-dropdown .selectize-dropdown-content .option:hover { background-color: #f8f9fa !important; }
.selectize-dropdown .selectize-dropdown-content .option.active:hover { background-color: #0b5ed7 !important; }
/* Readable match highlight */
.selectize-dropdown .selectize-dropdown-content .option .highlight { background-color: #cfe2ff !important; color: #212529 !important; border-radius: 2px !important; padding: 0 1px !important; }
.selectize-dropdown .selectize-dropdown-content .option.active .highlight { background-color: #cfe2ff !important; color: #212529 !important; }

/* Allow Selectize dropdowns to break out of PO panels */
.po-panel-selects { overflow: visible !important; }
.po-panel-selects .selectize-dropdown { z-index: 2000 !important; position: absolute !important; }
.accordion-item.po-outer-border { overflow: visible !important; }
.accordion-collapse { overflow: visible !important; }
.accordion-body { overflow: visible !important; }
#poPanelsContainer { overflow: visible !important; }
#poPanelsContainer .accordion-item { overflow: visible !important; }
#poPanelsContainer .accordion-collapse { overflow: visible !important; }
#poPanelsContainer .accordion-body { overflow: visible !important; }

/* Force Selectize dropdowns to break out of any container */
.selectize-dropdown {
	position: absolute !important;
	z-index: 9999 !important;
}

/* Specific targeting for PO panel Selectize dropdowns */
.po-panel-selects .selectize-control .selectize-dropdown {
	position: absolute !important;
	z-index: 9999 !important;
}

/* R2.2 — Beauty list pages: wider custom search (gold = users/index.php) */
.list-table-search {
	min-width: 220px;
	width: 220px;
}
.list-table-search .form-control-sm {
	width: 100%;
}

/* R2.4.1 — match exact #clearSearchX (gold) and scoped dashboard clear buttons
   (e.g. #upcoming-clearSearchX, #attention-clearSearchX) so the X stays
   absolutely positioned inside the search box rather than overflowing inline. */
[id$="clearSearchX"] {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #6c757d;
}
[id$="clearSearchX"]:hover {
	color: #000;
}

/* R2.4.x — Brand logo theming.
   The L Beauty lockup ships white (fill="white"), so it is invisible on the
   light theme. Invert it to dark ink on light/default theme and leave it white
   on dark theme, driven by Phoenix's [data-bs-theme] attribute. */
.brand-logo {
	filter: invert(1);
}
[data-bs-theme="dark"] .brand-logo {
	filter: none;
}

/**
 * R2.2 — Tab bar sizing for Beauty edit/hub pages (R2.1 applies class to markup).
 * Gold reference: account/projects/edit.php — nav-underline fs-7, 36px gap.
 */
.chronos-tab-bar {
	gap: 36px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
}
.chronos-tab-bar .nav-link {
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.5rem 0;
	line-height: 1.25;
	white-space: nowrap;
}

/* B11 — Beauty DataTables gold footer typography (scoped to main shell) */
.main .dataTables_wrapper .dataTables_info,
.main .dataTables_wrapper .dataTables_paginate .paginate_button {
	font-size: 0.75rem;
	line-height: 1.4;
}
.main .dataTables_wrapper .dataTables_info .small,
.main .dataTables_wrapper .dataTables_info .fs-9 {
	font-size: 0.75rem;
}
.main .list-dt-footer,
.main .inline-dt-footer {
	font-size: 0.75rem;
}

/* B11 — page-length dropdown on list + inline tab tables */
.main select[id$="custom-page-length"],
.main select[id$="-custom-page-length"] {
	min-width: 4.25rem;
}

/* B11 — inline / list DataTable chrome (sort icons, borders, responsive child rows) */
.main table.dataTable.beauty-inline-dt,
.main .table-list table.dataTable {
	border-collapse: separate;
	border-spacing: 0;
}
.main table.dataTable thead th.sorting,
.main table.dataTable thead th.sorting_asc,
.main table.dataTable thead th.sorting_desc {
	padding-right: 1.75rem;
}
.main table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
	cursor: pointer;
}
.main table.dataTable > tbody > tr.child td {
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
}
.main table.dataTable.table-hover > tbody > tr:hover > * {
	background-color: var(--phoenix-secondary-bg-subtle, rgba(var(--phoenix-secondary-rgb), 0.25));
}

/* U1 — Beauty UI panels (light + dark via Phoenix CSS variables) */
.beauty-panel {
	border-radius: var(--phoenix-border-radius, 0.5rem);
	padding: 0.875rem 1rem;
	border: 1px solid transparent;
}
.beauty-panel-inner {
	align-items: flex-start;
}
.beauty-panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.125rem;
}
.beauty-panel-eyebrow {
	font-size: 0.65rem;
	letter-spacing: 0.04em;
	margin-bottom: 0.25rem;
	opacity: 0.85;
}
.beauty-panel-title {
	line-height: 1.35;
	margin-bottom: 0.25rem;
}
.beauty-panel-body {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--phoenix-body-color);
}
.beauty-panel-body:last-child {
	margin-bottom: 0;
}
.beauty-panel-future {
	border-left: 4px solid var(--phoenix-warning);
}
.beauty-panel-future .beauty-panel-icon {
	color: var(--phoenix-warning);
}
[data-bs-theme="dark"] .beauty-panel-future {
	--phoenix-alert-color: var(--phoenix-warning-text-emphasis);
	--phoenix-alert-bg: rgba(var(--phoenix-warning-lighter-rgb), 0.32);
	background-color: rgba(var(--phoenix-warning-lighter-rgb), 0.32) !important;
	color: var(--phoenix-warning-text-emphasis);
	border-color: rgba(var(--phoenix-warning-light-rgb), 0.45);
}
[data-bs-theme="dark"] .beauty-panel-future .beauty-panel-title,
[data-bs-theme="dark"] .beauty-panel-future .beauty-panel-eyebrow,
[data-bs-theme="dark"] .beauty-panel-future .beauty-panel-body {
	color: var(--phoenix-emphasis-color, #eff2f6);
}
[data-bs-theme="dark"] .beauty-panel-future .beauty-panel-eyebrow {
	color: var(--phoenix-warning-text-emphasis);
}
[data-bs-theme="dark"] .beauty-panel-future .beauty-panel-icon {
	color: var(--phoenix-warning-text-emphasis);
}
.beauty-panel-explainer {
	background-color: rgba(var(--phoenix-info-rgb), 0.08);
	border-color: rgba(var(--phoenix-info-rgb), 0.2);
}
.beauty-panel-explainer .beauty-panel-icon {
	color: var(--phoenix-info);
}
.beauty-panel-explainer-toggle {
	color: inherit;
}
.beauty-panel-explainer-toggle .beauty-panel-chevron {
	color: var(--phoenix-body-tertiary);
	transition: transform 0.2s ease;
}
.beauty-panel-explainer-toggle[aria-expanded="true"] .beauty-panel-chevron {
	transform: rotate(180deg);
}
.beauty-panel-explainer-body {
	padding-top: 0.5rem;
}
.beauty-panel-notice {
	background-color: var(--phoenix-secondary-bg-subtle);
	border-color: var(--phoenix-border-color-translucent, var(--phoenix-border-color));
}
.beauty-panel-notice .beauty-panel-icon {
	color: var(--phoenix-secondary-color);
}
[data-bs-theme="dark"] .beauty-panel-explainer {
	background-color: rgba(var(--phoenix-info-rgb), 0.12);
}
[data-bs-theme="dark"] .beauty-panel-notice {
	background-color: rgba(var(--phoenix-secondary-rgb), 0.15);
}

/* U1 — Page-help modal */
#pageHelpModal .modal-dialog {
	height: auto;
	max-height: calc(100vh - 2rem);
}
#pageHelpModal .modal-content {
	max-height: calc(100vh - 2rem);
}
#pageHelpModal .modal-header {
	padding: 1rem 1.5rem 0.75rem;
}
#pageHelpModal .modal-body {
	flex: 0 1 auto !important;
	padding: 1rem 1.5rem 1.125rem;
	overflow-y: auto;
}
#pageHelpModal .modal-footer {
	padding: 0.75rem 1.5rem;
}
#pageHelpModal .beauty-page-help-header {
	gap: 0.5rem;
}
#pageHelpModal .beauty-page-help-meta {
	gap: 0.5rem;
}
#pageHelpModal .beauty-page-help-intro {
	color: var(--phoenix-body-emphasis);
	line-height: 1.55;
	margin: 0 0 1.5rem;
}
#pageHelpModal .beauty-page-help-section {
	margin-bottom: 1.5rem;
	padding: 0;
	position: static;
}
#pageHelpModal .beauty-page-help-section:last-child {
	margin-bottom: 0;
}
#pageHelpModal .beauty-page-help-section-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--phoenix-body-secondary-color);
	margin: 0 0 0.5rem;
}
#pageHelpModal .beauty-page-help-why {
	background-color: rgba(var(--phoenix-info-rgb), 0.08);
	border: 1px solid rgba(var(--phoenix-info-rgb), 0.18);
	border-radius: var(--phoenix-border-radius);
	padding: 0.875rem 1rem;
}
[data-bs-theme="dark"] #pageHelpModal .beauty-page-help-why {
	background-color: rgba(var(--phoenix-info-rgb), 0.12);
}
#pageHelpModal .beauty-page-help-steps {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
}
#pageHelpModal .beauty-page-help-step {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
#pageHelpModal .beauty-page-help-step-num {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	background-color: var(--phoenix-primary-bg-subtle);
	color: var(--phoenix-primary);
	flex-shrink: 0;
}
#pageHelpModal .beauty-page-help-step-icon {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--phoenix-body-highlight-bg);
	color: var(--phoenix-body-emphasis);
	flex-shrink: 0;
}
#pageHelpModal .beauty-page-help-step-text {
	font-size: 0.875rem;
	line-height: 1.45;
	padding-top: 0.125rem;
}
#pageHelpModal .beauty-page-help-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
#pageHelpModal .beauty-page-help-chip {
	background-color: var(--phoenix-secondary-bg-subtle);
	color: var(--phoenix-body-emphasis);
	font-weight: 600;
	font-size: 0.7rem;
	padding: 0.35rem 0.65rem;
}
#pageHelpModal .beauty-page-help-outcome-inner {
	background-color: rgba(var(--phoenix-success-rgb), 0.1);
	border: 1px solid rgba(var(--phoenix-success-rgb), 0.25);
	border-radius: var(--phoenix-border-radius);
	padding: 0.875rem 1rem;
	color: var(--phoenix-success-text-emphasis, var(--phoenix-success));
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
#pageHelpModal .beauty-page-help-outcome-inner .fw-bold {
	color: var(--phoenix-success-text-emphasis, var(--phoenix-success));
	margin-bottom: 0.25rem;
}
[data-bs-theme="dark"] #pageHelpModal .beauty-page-help-outcome-inner {
	background-color: rgba(var(--phoenix-success-rgb), 0.15);
}

/* U6 — Appointment journey stepper */
.beauty-apt-journey .letter-spacing-1 {
	letter-spacing: 0.06em;
}
.beauty-apt-journey-lifecycle {
	gap: 0;
}
.beauty-apt-journey-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0;
	min-width: 4.5rem;
	max-width: 8rem;
	text-align: center;
	padding: 0 0.25rem 0.5rem;
}
.beauty-apt-journey-step.is-last {
	flex: 0 0 auto;
}
.beauty-apt-journey-node {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	border: 2px solid var(--phoenix-border-color);
	background: var(--phoenix-body-bg);
	color: var(--phoenix-body-color);
	margin-bottom: 0.35rem;
	z-index: 1;
}
.beauty-apt-journey-step--complete .beauty-apt-journey-node {
	border-color: var(--phoenix-success);
	background-color: var(--phoenix-success-bg-subtle);
	color: var(--phoenix-success);
}
.beauty-apt-journey-step--current .beauty-apt-journey-node {
	border-color: var(--phoenix-success);
	background-color: var(--phoenix-success-bg-subtle);
	color: var(--phoenix-success);
	box-shadow: 0 0 0 3px rgba(var(--phoenix-success-rgb), 0.18);
}
.beauty-apt-journey-step--current .beauty-apt-journey-label {
	color: var(--phoenix-success-text-emphasis, var(--phoenix-success));
	font-weight: 600;
}
.beauty-apt-journey-connector {
	position: absolute;
	top: 0.875rem;
	left: calc(50% + 0.875rem);
	width: calc(100% - 1.75rem);
	height: 2px;
	background: var(--phoenix-border-color);
	z-index: 0;
}
.beauty-apt-journey-step--complete .beauty-apt-journey-connector {
	background: var(--phoenix-success);
}
.beauty-apt-journey-lifecycle.is-muted .beauty-apt-journey-node {
	opacity: 0.55;
}
.beauty-apt-journey-lifecycle.is-muted .beauty-apt-journey-label {
	opacity: 0.65;
}
.beauty-apt-journey-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	border: 1px solid var(--phoenix-border-color);
	background: var(--phoenix-body-bg);
	color: var(--phoenix-body-color);
}
.beauty-apt-journey-chip--done {
	border-color: var(--phoenix-success-border-subtle);
	background-color: var(--phoenix-success-bg-subtle);
	color: var(--phoenix-success-text-emphasis, var(--phoenix-success));
}
.beauty-apt-journey-chip--due {
	border-color: var(--phoenix-warning-border-subtle);
	background-color: var(--phoenix-warning-bg-subtle);
	color: var(--phoenix-warning-text-emphasis, var(--phoenix-warning));
}
.beauty-apt-journey-chip--blocked {
	border-color: var(--phoenix-danger-border-subtle);
	background-color: var(--phoenix-danger-bg-subtle);
	color: var(--phoenix-danger-text-emphasis, var(--phoenix-danger));
}
[data-bs-theme="dark"] .beauty-apt-journey-step--current .beauty-apt-journey-node {
	box-shadow: 0 0 0 3px rgba(var(--phoenix-success-rgb), 0.28);
}
#pageHelpModal .beauty-page-help-diagram {
	margin: 0.75rem 0;
}
#pageHelpModal .beauty-panel-future {
	margin-bottom: 1rem !important;
}

/* Shared page-help tokens (non-modal contexts) */
.beauty-page-help-intro {
	color: var(--phoenix-body-emphasis);
	line-height: 1.5;
}
.beauty-page-help-section-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--phoenix-body-secondary-color);
}
.beauty-page-help-why {
	background-color: rgba(var(--phoenix-info-rgb), 0.08);
	border: 1px solid rgba(var(--phoenix-info-rgb), 0.18);
	border-radius: var(--phoenix-border-radius);
	padding: 0.625rem 0.75rem;
}
[data-bs-theme="dark"] .beauty-page-help-why {
	background-color: rgba(var(--phoenix-info-rgb), 0.12);
}
.beauty-page-help-steps {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.beauty-page-help-step-num {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	background-color: var(--phoenix-primary-bg-subtle);
	color: var(--phoenix-primary);
	flex-shrink: 0;
}
.beauty-page-help-step-icon {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--phoenix-body-highlight-bg);
	color: var(--phoenix-body-emphasis);
}
.beauty-page-help-step-text {
	font-size: 0.875rem;
	line-height: 1.4;
	padding-top: 0.125rem;
}
.beauty-page-help-chip {
	background-color: var(--phoenix-secondary-bg-subtle);
	color: var(--phoenix-body-emphasis);
	font-weight: 600;
	font-size: 0.7rem;
	padding: 0.3rem 0.6rem;
}
.beauty-page-help-outcome-inner {
	background-color: rgba(var(--phoenix-success-rgb), 0.1);
	border: 1px solid rgba(var(--phoenix-success-rgb), 0.25);
	border-radius: var(--phoenix-border-radius);
	padding: 0.625rem 0.75rem;
	color: var(--phoenix-success-text-emphasis, var(--phoenix-success));
}
.beauty-page-help-outcome-inner .fw-bold {
	color: var(--phoenix-success-text-emphasis, var(--phoenix-success));
}
[data-bs-theme="dark"] .beauty-page-help-outcome-inner {
	background-color: rgba(var(--phoenix-success-rgb), 0.15);
}

/* U9 — Calendar quick appointment modal */
.beauty-apt-quick-dialog {
	max-width: min(1440px, 97vw);
}
.beauty-apt-quick-header {
	align-items: center;
}
.beauty-apt-quick-header .btn-close {
	flex-shrink: 0;
	align-self: center;
}
.beauty-apt-quick-avatar .ua-avatar {
	width: 3.25rem;
	height: 3.25rem;
	font-size: 1.1rem;
}

/* Column scroll: timeline is the primary scroller; left scrolls only if it must */
.beauty-apt-quick-actions-scroll,
.beauty-apt-quick-timeline-scroll {
	overflow-y: auto;
	max-height: min(80vh, 860px);
}
.beauty-apt-quick-actions-scroll {
	padding: 0 !important;
}

/* Sectioned panels — clear, line-separated zones with optional state tint */
.beauty-apt-quick-section {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--phoenix-border-color);
}
.beauty-apt-quick-section:last-child {
	border-bottom: 0;
}
.beauty-apt-quick-section-label {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--phoenix-body-secondary-color);
	margin-bottom: 0.6rem;
}
/* Payment intelligence — price / paid / balance grid + ledger */
.beauty-apt-quick-pay-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.4rem 0.85rem;
}
.beauty-apt-quick-pay-grid dt {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--phoenix-body-secondary-color);
	margin: 0;
}
.beauty-apt-quick-pay-grid dd {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0;
}
.beauty-apt-quick-pay-ledger {
	border-top: 1px dashed var(--phoenix-border-color);
	padding-top: 0.5rem;
}
.beauty-apt-quick-pay-ledger li {
	color: var(--phoenix-body-secondary-color);
	padding: 0.1rem 0;
}
.beauty-apt-quick-pay-ledger-amt {
	font-weight: 600;
	color: var(--phoenix-body-color);
}
/* Subtle whole-panel state tints — "you can't move on until this is done" */
.beauty-apt-quick-section--danger {
	background-color: rgba(var(--phoenix-danger-rgb), 0.055);
	box-shadow: inset 3px 0 0 var(--phoenix-danger);
}
.beauty-apt-quick-section--warn {
	background-color: rgba(var(--phoenix-warning-rgb), 0.07);
	box-shadow: inset 3px 0 0 var(--phoenix-warning);
}
.beauty-apt-quick-section--ok {
	background-color: rgba(var(--phoenix-success-rgb), 0.05);
	box-shadow: inset 3px 0 0 var(--phoenix-success);
}
.beauty-apt-quick-section--danger .beauty-apt-quick-section-label {
	color: var(--phoenix-danger-text-emphasis, var(--phoenix-danger));
}
.beauty-apt-quick-section--warn .beauty-apt-quick-section-label {
	color: var(--phoenix-warning-text-emphasis, var(--phoenix-warning));
}
[data-bs-theme="dark"] .beauty-apt-quick-section--danger {
	background-color: rgba(var(--phoenix-danger-rgb), 0.13);
}
[data-bs-theme="dark"] .beauty-apt-quick-section--warn {
	background-color: rgba(var(--phoenix-warning-rgb), 0.13);
}
[data-bs-theme="dark"] .beauty-apt-quick-section--ok {
	background-color: rgba(var(--phoenix-success-rgb), 0.12);
}

/* Restrictions list — softer than a solid alert */
.beauty-apt-quick-restrictions {
	list-style: none;
	margin: 0;
	padding: 0;
}
.beauty-apt-quick-restrictions li {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	padding: 0.2rem 0;
	color: var(--phoenix-danger-text-emphasis, var(--phoenix-danger));
}
.beauty-apt-quick-restrictions li > span[data-feather] {
	flex-shrink: 0;
	margin-top: 0.15rem;
}

/* Sticky lifecycle stepper pinned to the top of the left panel */
.beauty-apt-quick-stepper-fixed {
	position: sticky;
	top: 0;
	z-index: 3;
	background-color: var(--phoenix-modal-bg, var(--phoenix-body-bg));
	border-bottom: 1px solid var(--phoenix-border-color);
}
.beauty-apt-quick-stepper {
	margin: 0 !important;
}
.beauty-apt-quick-stepper .beauty-apt-journey-step {
	min-width: 3.5rem;
	max-width: 7rem;
}
.beauty-apt-quick-stepper .beauty-apt-journey-node {
	width: 1.4rem;
	height: 1.4rem;
}
.beauty-apt-quick-stepper .beauty-apt-journey-connector {
	top: 0.7rem;
	width: calc(100% - 1.4rem);
	left: calc(50% + 0.7rem);
}
/* Keep the final node evenly spaced (don't let it collapse to the left) */
.beauty-apt-quick-stepper .beauty-apt-journey-step.is-last {
	flex: 1 1 0;
	max-width: 7rem;
}

/* Ghosted on-track stages after an off-track event (cancelled / no-show) */
.beauty-apt-journey-step--ghost .beauty-apt-journey-node {
	opacity: 0.4;
	border-style: dashed;
}
.beauty-apt-journey-step--ghost .beauty-apt-journey-label {
	opacity: 0.45;
}
.beauty-apt-journey-step--ghost .beauty-apt-journey-connector {
	opacity: 0.35;
}

/* Off-track node injected at the point the booking left the track */
.beauty-apt-journey-step--off .beauty-apt-journey-node {
	border-color: var(--phoenix-danger);
	background-color: var(--phoenix-danger);
	color: #fff;
}
.beauty-apt-journey-step--off .beauty-apt-journey-label {
	color: var(--phoenix-danger-text-emphasis, var(--phoenix-danger));
	font-weight: 600;
}
.beauty-apt-journey-step--off .beauty-apt-journey-connector {
	background: var(--phoenix-border-color);
	opacity: 0.35;
}
.beauty-apt-journey-step--off.is-noshow .beauty-apt-journey-node {
	border-color: var(--phoenix-secondary, #6c757d);
	background-color: var(--phoenix-secondary, #6c757d);
}
.beauty-apt-journey-step--off.is-noshow .beauty-apt-journey-label {
	color: var(--phoenix-body-secondary-color);
}
.beauty-apt-journey-step--off.is-rescheduled .beauty-apt-journey-node {
	border-color: var(--phoenix-warning);
	background-color: var(--phoenix-warning);
}
.beauty-apt-journey-step--off.is-rescheduled .beauty-apt-journey-label {
	color: var(--phoenix-warning-text-emphasis, var(--phoenix-warning));
}

/* Status section: quick buttons left, "Other status" pushed right */
.beauty-apt-quick-status-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}
.beauty-apt-quick-status-row .beauty-apt-quick-status-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.beauty-apt-quick-status-row .beauty-apt-quick-other-toggle {
	margin-left: auto;
}

/* Secondary actions bar */
.beauty-apt-quick-actionbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Timeline */
.beauty-apt-quick-timeline-scroll .beauty-apt-quick-timeline-heading {
	position: sticky;
	top: 0;
	background-color: var(--phoenix-modal-bg, var(--phoenix-body-bg));
	padding-bottom: 0.5rem;
	margin: 0 0 0.25rem;
	z-index: 2;
}
.beauty-apt-quick-timeline {
	position: relative;
	padding-left: 0.25rem;
}
.beauty-apt-quick-timeline-day {
	margin: 0.75rem 0 0.35rem;
}
.beauty-apt-quick-timeline-day:first-child {
	margin-top: 0;
}
.beauty-apt-quick-timeline-item {
	position: relative;
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem 0 0.5rem 1.25rem;
	border-left: 2px solid var(--phoenix-border-color);
	margin-left: 0.35rem;
}
.beauty-apt-quick-timeline-item:last-child {
	border-left-color: transparent;
}
.beauty-apt-quick-timeline-dot {
	position: absolute;
	left: -0.4rem;
	top: 0.85rem;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--phoenix-primary);
	border: 2px solid var(--phoenix-body-bg);
}
.beauty-apt-quick-timeline-icon {
	flex-shrink: 0;
	color: var(--phoenix-body-secondary-color);
	margin-top: 0.1rem;
}
.beauty-apt-quick-timeline-body {
	min-width: 0;
}
@media (max-width: 991.98px) {
	.beauty-apt-quick-timeline-col {
		border-left: 0 !important;
		border-top: 1px solid var(--phoenix-border-color);
	}
	.beauty-apt-quick-actions-scroll,
	.beauty-apt-quick-timeline-scroll {
		max-height: none;
	}
	.beauty-apt-quick-stepper-fixed {
		position: static;
	}
}

/* U11 — reschedule notify modal: From / To time badges */
.beauty-reschedule-notify-dialog {
	max-width: 42rem;
}
.beauty-reschedule-times {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 0.25rem 0.65rem;
	align-items: center;
}
.beauty-reschedule-time-label {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--phoenix-body-secondary-color);
}
.beauty-reschedule-time-label:nth-of-type(1) {
	grid-column: 1;
	grid-row: 1;
}
.beauty-reschedule-time-label:nth-of-type(2) {
	grid-column: 3;
	grid-row: 1;
}
.beauty-reschedule-time-badge {
	display: block;
	width: 100%;
	padding: 0.45rem 0.6rem;
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	white-space: nowrap;
	border-radius: 0.375rem;
}
.beauty-reschedule-time-badge--from {
	grid-column: 1;
	grid-row: 2;
	background-color: var(--phoenix-secondary-bg-subtle, #eff2f6);
	color: var(--phoenix-secondary-text-emphasis, var(--phoenix-body-color));
	border: 1px solid var(--phoenix-border-color);
}
.beauty-reschedule-time-badge--to {
	grid-column: 3;
	grid-row: 2;
	background-color: var(--phoenix-primary-bg-subtle);
	color: var(--phoenix-primary-text-emphasis, var(--phoenix-primary));
	border: 1px solid var(--phoenix-primary-border-subtle, rgba(var(--phoenix-primary-rgb), 0.25));
}
.beauty-reschedule-arrow {
	grid-column: 2;
	grid-row: 2;
	justify-self: center;
	align-self: center;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1;
	padding: 0 0.1rem;
}
@media (max-width: 575.98px) {
	.beauty-reschedule-notify-dialog {
		max-width: calc(100vw - 1rem);
	}
	.beauty-reschedule-times {
		gap: 0.2rem 0.45rem;
	}
	.beauty-reschedule-time-badge {
		white-space: normal;
	}
}