@charset "UTF-8";

/**
 * Third-Party Plugin Integrations for Loon Multi-Tenant CMS/ERP (Bootstrap 6)
 *
 * Styling for third-party plugins and libraries.
 * All values reference variables.css - no custom properties are defined here.
 * Sits in Bootstrap 6's "custom" layer, like components.css.
 *
 * Included Plugins:
 * - Bootstrap Avatar Plugin
 * - DataTables.js Integration
 * - jQuery UI Components
 * - Google Places Integration
 * - Notification Systems
 * - Virtual Select Integration
 * - Datetimepicker Integration (temporary – replaced by Vanilla Calendar Pro)
 *
 * The Bootstrap Icons font and base icon rule live in reset.css.
 *
 * Dependencies: variables.css only
 */

@layer custom {


/* =============================================================================
   BOOTSTRAP AVATAR PLUGIN INTEGRATION
   ============================================================================= */

/**
 * Bootstrap Avatar v1.3.1 Integration
 * Source: https://github.com/ghostiface/bootstrap-avatar
 */

/* Avatar Base Styles */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: calc(var(--component-item-height) * .65);
  width: calc(var(--component-item-height) * .65);
  line-height: calc(var(--component-item-height) * .65);
  font-size: calc(var(--bs-body-font-size) * .85);
}

.avatar.img-thumbnail {
  padding: 4px;
  max-width: none;
}

.avatar > * {
  height: 100%;
  width: 100%;
}

/* Avatar Size Variants */
.avatar-16 {
  height: 16px;
  width: 16px;
  font-size: 11px;
  line-height: 16px;
}

.avatar-24 {
  height: 24px;
  width: 24px;
  font-size: 16px;
  line-height: 24px;
}

.avatar-32 {
  height: 32px;
  width: 32px;
  font-size: 16px;
  line-height: 32px;
}

/* The page header's avatar – initials fit inside the circle */
.avatar-36 {
  height: 36px;
  width: 36px;
  font-size: 14px;
  line-height: 36px;
}

/* A photo avatar fills its circle without stretching */
img.avatar {
  object-fit: cover;
}

/* A page's icon in the page header: a grey circle, the icon centred at one size on every screen */
.avatar-icon {
  background-color: var(--bs-bg-2);
  color: var(--bs-fg-1);
  font-size: 1.125rem;
}

.avatar-icon > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Initials on a soft tint (page header, navbar and profile photo) */
.avatar-soft {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-fg-emphasis);
}

.avatar-48 {
  height: 48px;
  width: 48px;
  font-size: 32px;
  line-height: 48px;
}

.avatar-64 {
  height: 64px;
  width: 64px;
  font-size: 43px;
  line-height: 64px;
}

.avatar-96 {
  height: 96px;
  width: 96px;
  font-size: 64px;
  line-height: 96px;
}

.avatar-128 {
  height: 128px;
  width: 128px;
  font-size: 64px;
  line-height: 128px;
}

/* Avatar Dark Theme */
[data-bs-theme=dark] .avatar {
  /* background-color: var(--bs-gray-700); */
  /* color: var(--bs-white); */
}

/* Avatar Dropdown - Specific styling for dropdowns with avatars */
.dropdown-avatar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  /* Add invisible content to maintain consistent height */
  min-height: calc(var(--bs-body-font-size) * var(--bs-body-line-height) + (var(--bs-spacing-3) * 2));
}

/* Add invisible text content to maintain height with other nav-items */
.dropdown-avatar::before {
  content: "User";
  visibility: hidden;
  height: 0;
  overflow: hidden;
  position: absolute;
}

/* The avatar container - reserve width for avatar but remove from height calculation */
.dropdown-avatar > div:first-child {
  position: relative;
  flex-shrink: 0;
  width: 32px; /* Reserve width for the avatar */
  height: 0; /* Remove from height calculation */
  overflow: visible;
}

/* Position avatar absolutely within its container */
.dropdown-avatar .avatar {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  /* Use a fixed size that won't affect navbar height */
  height: 32px !important;
  width: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
  margin: 0;
  padding: 0;
}

/* Ensure the status indicator follows the avatar */
.dropdown-avatar .status-indicator {
  position: absolute;
  top: calc(50% - 18px); /* Adjust based on avatar position */
  right: -2px;
}

/* Text container stays in normal flow */
.dropdown-avatar > div:last-child {
  /* Keep text in normal flow for proper horizontal positioning */
}

/* =============================================================================
   DATATABLES.JS INTEGRATION
   ============================================================================= */

/* DataTables Responsive – on a narrow table the columns that do not fit move into a
   details row under it; tap the row to open it (app.js passes the click on). A small
   chevron at the end of the row says so: it sits in the last cell still showing
   (Responsive hides the others with .dtr-hidden) and turns over while the row is open. */
.dataTable.collapsed > tbody > tr:not(.child) > td:not(.dt-empty):nth-last-child(1 of :not(.dtr-hidden)) {
  position: relative;
  padding-inline-end: calc(var(--loon-space) + 1.25rem);
}

.dataTable.collapsed > tbody > tr:not(.child) > td:not(.dt-empty):nth-last-child(1 of :not(.dtr-hidden))::after {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--loon-space);
  display: flex;
  align-items: center;
  font-family: var(--bs-icon-font-family) !important;
  font-size: 0.75rem;
  content: "\f282"; /* chevron-down */
  color: var(--bs-fg-4);
  transition: transform var(--bs-transition-base-timer);
}

.dataTable.collapsed > tbody > tr.dtr-expanded > td:nth-last-child(1 of :not(.dtr-hidden))::after {
  transform: rotate(180deg);
}

.dataTable thead > tr > th {
  border-top: 0;
}

/* DataTables Header and Cell Styling */
.dataTable thead > tr > th,
.dataTable tbody > tr > td:not(.dt-empty) {
  text-wrap: nowrap;
}

/* The open row and its details share a light grey, so they read as one */
.dataTable > tbody > tr.dtr-expanded > td,
.dataTable > tbody > tr.child > td {
  background-color: var(--bs-bg-1);
}

.dataTable > tbody > tr.child > td.child {
  padding-top: 0;
  border-top-width: 0;
}

/* Details: label on the left (muted), value on the right; empty values are left out */
.dataTable .dtr-details {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dataTable .dtr-details > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 1rem;
}

/* The line carries its column's classes (text-end on amounts): label and value stay on the left */
.dataTable .dtr-details > li > * {
  text-align: start;
}

.dataTable .dtr-details > li:has(> .dtr-data:empty) {
  display: none;
}

.dataTable .dtr-details .dtr-title {
  flex: 0 0 7.5rem;
  font-size: var(--bs-btn-input-sm-font-size);
  font-weight: 500;
  line-height: inherit;
  color: var(--bs-fg-3);
}

.dataTable .dtr-details .dtr-data {
  flex: 1 1 10rem;
  min-width: 0;
  white-space: normal;
}

/* DataTables List Group Integration */
.dataTable td > ul.list-group {
  /* Custom list group styling within DataTables cells */
}

.dataTable td > ul.list-group > .list-group-item {
  /* List group item styling */
}

.dataTable td > ul.list-group > .list-group-item:last-child {
  /* Last item styling */
}

.dataTable td > ul.list-group > .list-group-item .dtr-data > .dropdown {
  /* Dropdown integration */
}

/* DataTables Hover Effects */
.dataTable.table-hover > tbody > tr.dtr-expanded:hover > *,
.dataTable.table-hover > tbody > tr.child:hover > * {
  box-shadow: none;
}

.dt-container {
  position: relative;
}

/* DataTables wraps the table in Bootstrap grid classes (.row, .col-12, .mt-2); their
   gutters made the table area 12px wider than its box, so it could slide sideways.
   Inside a table card the table runs edge to edge: no gutters, no gap above. */
.table-card .dt-container > .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin: 0 !important; /* beats the .mt-2 utility */
}

.table-card .dt-container > .row > * {
  padding: 0;
}
.loader-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background-color: var(--bs-component-bg);
  z-index: 5;
  height: 100%;
  width: 100%;
}

/* DataTables busy indicator: a thin bar on the bottom edge of the table header
   (top is set by DataTablesManager.loaderPosition). DataTables gives it the .card
   class and its own dots – both switched off here. */
.dt-processing {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  width: auto;
  height: 2px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--bs-primary-bg-subtle);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.dt-processing > :not(.table-progress) {
  display: none;
}

.table-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background-color: var(--bs-primary);
  animation: table-progress 1.1s ease-in-out infinite;
}

@keyframes table-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

/* During the first load the skeleton rows say enough */
.preload .dt-processing {
  display: none !important;
}
.dialog .loader-wrapper {
  position: relative;
}

.dt-layout-full {
  overflow: hidden;
  position: relative;
}

@media (max-width: 991px) {
  .dt-layout-full {
    overflow-x: auto;
  }
}

/* DataTables Empty State */
.dt-empty {
  position: relative;
  height: 200px;
  pointer-events: none !important;
}

/* DataTables Clickable Rows */
table[data-href] > tbody > tr > * {
  cursor: pointer;
}

/* DataTables Dark Theme */
[data-bs-theme=dark] .dataTable {
  --dt-row-hover: var(--bs-gray-800);
  --dt-row-stripe: var(--bs-gray-900);
  --dt-column-ordering: var(--bs-gray-700);
}

/* =============================================================================
   JQUERY UI COMPONENTS
   ============================================================================= */

/* jQuery UI Base Widget */
.ui-widget {
  font-family: var(--bs-font-sans-serif);
  font-size: var(--bs-body-font-size);
}

.ui-widget-content {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.ui-widget-header {
  background-color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  color: var(--bs-white);
}

.ui-button {
  background-color: var(--bs-btn-bg);
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  color: var(--bs-btn-color);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

.ui-button:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

/* jQuery UI Autocomplete */
.ui-autocomplete {
  position: absolute;
  min-width: 240px;
  background: var(--bs-body-bg-secondary);
  background-clip: padding-box;
  border: var(--bs-border-width) solid rgba(0, 0, 0, 0.25);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-lg);
  z-index: 1055;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  padding: var(--bs-spacer-2) 0;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
}

.ui-autocomplete li,
.ui-autocomplete dl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.ui-autocomplete dl {
  user-select: none;
  -webkit-user-select: none;
  display: block;
  width: 100%;
  padding: var(--bs-spacing);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}

.ui-autocomplete dl dt {
  float: left;
  font-weight: normal;
}

.ui-autocomplete dl dt:after {
  content: '\b7';
  margin: 0 10px;
}

.ui-autocomplete dl dt:first-child {
  float: none;
}

.ui-autocomplete dl dt:first-child:after {
  content: '';
  margin: 0;
}

.ui-autocomplete dl dt:last-child:after {
  content: '';
  margin: 0;
}

.ui-autocomplete dl:hover {
  color: var(--bs-hover-color);
  background-color: var(--bs-hover-bg);
  cursor: pointer !important;
}

/* jQuery UI Dark Theme */
[data-bs-theme=dark] .ui-widget-content {
  background-color: var(--bs-gray-800);
  border-color: var(--bs-gray-700);
  color: var(--bs-white);
}

[data-bs-theme=dark] .ui-widget-header {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* =============================================================================
   GOOGLE PLACES INTEGRATION
   ============================================================================= */

/* Google Places Container */
.pac-container {
  position: absolute;
  min-width: 240px;
  background: var(--bs-body-bg-secondary);
  background-clip: padding-box;
  border: var(--bs-border-width) solid rgba(0, 0, 0, 0.25);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-lg);
  z-index: 1055;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  padding: var(--bs-spacer-2) 0;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
}

.pac-item {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  user-select: none;
  -webkit-user-select: none;
  display: block;
  width: 100%;
  padding: var(--bs-spacing);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}

.pac-item:hover {
  color: var(--bs-hover-color);
  background-color: var(--bs-hover-bg);
  cursor: pointer !important;
}

.pac-icon {
  display: none !important;
}

.pac-item,
.pac-item-query {
  color: var(--bs-body-color) !important;
  font-size: var(--bs-body-font-size) !important;
  line-height: var(--bs-body-line-height) !important;
}

.pac-logo:after {
  margin: 0 15px !important;
}

/* =============================================================================
   NOTIFICATION SYSTEMS
   ============================================================================= */

/* Toast Notification Container */
.notify-container {
  --bs-toast-zindex: 1090;
  position: absolute;
  z-index: var(--bs-toast-zindex);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}

.notify-container > :not(:last-child) {
  margin-bottom: var(--bs-spacer);
}

/* Alert Component Enhancement */
.alert {
  pointer-events: auto;
}

/* =============================================================================
   VIRTUAL SELECT INTEGRATION
   ============================================================================= */

/**
 * Virtual Select v1.1.0 Integration
 * Streamlined and optimized for Loon CMS/ERP integration
 * Uses Bootstrap variables for consistent theming
 */

/* Animations */
@keyframes vscomp-animation-spin {
  to { transform: rotateZ(360deg) }
}

/* Base Wrapper */
.vscomp-wrapper {
  box-sizing: border-box;
}

.vscomp-wrapper *, 
.vscomp-wrapper *::before, 
.vscomp-wrapper *::after {
  box-sizing: border-box;
}

.vscomp-wrapper:focus {
  outline: none;
}

/* Dropbox Container – the shared floating-list look from variables.css (same as menus) */
.vscomp-dropbox-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
}

.vscomp-dropbox-container {
  display: none;
  flex-wrap: wrap;
  width: 100%;
  min-width: var(--bs-component-min-width);
  padding: var(--loon-pop-padding) 0;
  opacity: 0;
  color: var(--bs-body-color);
  text-align: left;
  background-color: var(--bs-component-bg);
  border: var(--bs-border-width) solid var(--loon-pop-border-color);
  border-radius: var(--loon-pop-radius);
  box-shadow: var(--loon-pop-shadow);
  z-index: 1;
  transition-duration: unset !important;
}

.vscomp-dropbox {
  width: 100%;
  color: var(--bs-body-color);
  background-color: transparent;
}

/* Dropdown Arrow (Hidden) */
.vscomp-arrow {
  display: none;
}

/* Clear Button */
.vscomp-clear-icon {
  /* height: 12px;
  position: relative;
  width: 12px; */
  display: inline-block;
  font-family: var(--bs-icon-font-family) !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  color: var(--bs-placeholder-color);
}
.vscomp-clear-icon::before {
  content: "\f62a";
}

.vscomp-clear-icon:hover::before {
  color: var(--bs-hover-color);
}

.vscomp-clear-button {
  align-items: center;
  border-radius: 50%;
  display: none;
  height: 24px;
  justify-content: center;
  margin-top: -12px;
  position: absolute;
  right: 30px;
  top: 50%;
  width: 24px;
}

.vscomp-clear-button:hover {
  color: var(--bs-hover-color);
}

/* Options Container */
.vscomp-options-container {
  overflow: auto;
  position: relative;
}

.vscomp-options-bottom-freezer {
  bottom: 0;
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}

/* Options – same size, inset and corners as menu items. VirtualSelect sets each
   option's height from optionHeight (app.js reads --loon-item-height), so no
   vertical padding here: the text is centred in that height. */
.vscomp-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 var(--loon-item-padding-x);
  font-size: var(--bs-btn-input-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background-color: transparent;
  border-radius: var(--loon-item-radius);
  cursor: pointer;
}

.vscomp-option:hover,
.vscomp-option.focused {
  background-color: var(--loon-item-hover-bg);
}

/* Selected: soft blue tint (single select also gets a tick on the right; multi-select
   shows the circle) */
.vscomp-option.selected {
  font-weight: 500;
  color: var(--loon-item-selected-color);
  background-color: var(--loon-item-selected-bg);
}

.vscomp-wrapper:not(.multiple) .vscomp-option.selected::after {
  content: "\f633"; /* icon-check-lg */
  margin-inline-start: auto;
  font-family: var(--bs-icon-font-family);
  font-size: 0.875rem;
  line-height: 1;
}

/* Disabled options */
.vscomp-option.disabled {
  color: var(--bs-disabled-color);
  cursor: default;
}

.vscomp-option.disabled:hover {
  background-color: transparent;
}

/* Option group headers: a small grey caption in normal case – the same as menu headers */
.vscomp-option.group-title {
  align-items: flex-end;
  padding-bottom: var(--loon-item-padding-y);
  font-size: 0.8125rem; /* same as help text under a field */
  font-weight: 600;
  color: var(--bs-fg-3);
  cursor: default;
}

.vscomp-option.group-title:hover,
.vscomp-option.group-title.focused {
  background-color: transparent;
}

/* Empty states */
.vscomp-no-options,
.vscomp-no-search-results {
  padding: var(--loon-item-padding-y) var(--loon-item-padding-x);
  font-size: var(--bs-body-font-size-sm);
  color: var(--bs-fg-3);
}

/* New Option Icon */
.vscomp-new-option-icon {
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
}

.vscomp-new-option-icon::before {
  border: 15px solid var(--bs-primary);
  border-bottom-color: transparent;
  border-left-color: transparent;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
}

.vscomp-new-option-icon::after {
  align-items: center;
  color: var(--bs-white);
  content: "+";
  display: flex;
  font-size: 18px;
  height: 15px;
  justify-content: center;
  position: absolute;
  right: 1px;
  top: 0;
  width: 15px;
}

/* Option Text and Description */
.vscomp-option-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
}

.vscomp-option-text mark {
  padding: 0 !important;
  color: inherit;
  background-color: var(--bs-highlight-bg);
  border-radius: 2px;
}

/* With a description: label on top, description below, both left aligned */
.vscomp-option:has(> .vscomp-option-description) {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.vscomp-option:has(> .vscomp-option-description) > .vscomp-option-text {
  flex: 0 0 auto;
  width: 100%;
}

.vscomp-option-description {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bs-body-font-size-xs);
  line-height: var(--bs-body-line-height-sm);
  color: var(--bs-fg-3);
}

/* Search: full width at the top with a hairline under it; the text lines up with the options */
.vscomp-search-container {
  display: flex;
  align-items: center;
  min-height: var(--loon-item-height); /* a full row, also when it holds only "Select all" */
  margin: calc(var(--loon-pop-padding) * -1) 0 var(--loon-pop-padding);
  padding: 0 var(--bs-input-padding-x);
  border-bottom: var(--bs-border-width) solid var(--bs-border-body);
}

.vscomp-search-wrapper {
  flex: 1 1 auto;
}

/* Hidden Elements */
.vscomp-search-label,
.vscomp-live-region,
.vscomp-dropbox-container-top,
.vscomp-dropbox-container-bottom {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Search Input */
.vscomp-search-input {
  width: 100%;
  padding: var(--loon-item-padding-y) 0;
  font-size: var(--bs-btn-input-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background-color: transparent;
  border: 0;
}

.vscomp-search-input::placeholder {
  color: var(--bs-placeholder-color);
}

.vscomp-search-input:focus {
  outline: none;
}

.vscomp-search-clear {
  display: none;
}

/* No Options/Results */
.vscomp-no-options,
.vscomp-no-search-results {
  align-items: center;
  display: none;
  justify-content: center;
}

/* Options Loader */
.vscomp-options-loader {
  display: none;
  padding: var(--bs-spacer-4) 0;
  text-align: center;
}

.vscomp-options-loader::before {
  animation: vscomp-animation-spin 0.8s infinite linear;
  background-color: var(--bs-white);
  border-radius: 50%;
  box-shadow: -4px -5px 3px -3px rgba(0, 0, 0, 0.3);
  content: "";
  display: inline-block;
  height: 40px;
  opacity: 0.7;
  width: 40px;
}

/* Element States */
.vscomp-ele[disabled] {
  cursor: not-allowed;
  user-select: none;
}

.vscomp-ele[disabled] .vscomp-wrapper {
  opacity: 0.7;
  pointer-events: none;
}

/* Checkboxes (multi-select): the Loon circle – an empty grey circle, and a blue circle
   with a tick when selected */
.vscomp-wrapper .checkbox-icon,
.vscomp-toggle-all-checkbox {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--bs-icon-font-size);
  height: var(--bs-icon-font-size);
  font-family: var(--bs-icon-font-family);
  font-size: var(--bs-icon-font-size);
  line-height: 1;
}

.vscomp-wrapper .checkbox-icon::after,
.vscomp-toggle-all-checkbox::after {
  display: none !important;
}

.vscomp-wrapper .checkbox-icon::before,
.vscomp-toggle-all-checkbox::before {
  content: "\f28a"; /* icon-circle */
  color: var(--bs-gray-500);
  transition: color var(--bs-transition-base-timer) ease-in-out;
}

.vscomp-option:hover .checkbox-icon::before,
.vscomp-toggle-all-button:hover .vscomp-toggle-all-checkbox::before {
  color: var(--bs-body-color);
}

.vscomp-option.selected .checkbox-icon::before,
.vscomp-toggle-all-button .vscomp-toggle-all-checkbox.checked::before {
  content: "\f270"; /* icon-check2-circle */
  color: var(--bs-primary);
}

/* Without a search box, "Select All" is the first row, spaced and hovered like the
   options, with a hairline under it */
.vscomp-wrapper:not(.has-search-input) .vscomp-search-container {
  margin-top: 0;
}

.vscomp-wrapper:not(.has-search-input) .vscomp-search-container:hover {
  background-color: var(--loon-item-hover-bg);
}

.vscomp-wrapper:not(.has-search-input) .vscomp-toggle-all-button {
  flex: 1 1 auto;
  align-self: stretch;
}

/* Everything selected: "Select All" looks selected too, like the options */
.vscomp-wrapper:not(.has-search-input) .vscomp-search-container:has(.vscomp-toggle-all-checkbox.checked) {
  background-color: var(--loon-item-selected-bg);
}

.vscomp-toggle-all-button:has(.vscomp-toggle-all-checkbox.checked) .vscomp-toggle-all-label {
  font-weight: 500;
  color: var(--loon-item-selected-color);
}

/* Select all: sits in the search row */
.vscomp-toggle-all-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-end: 0.5rem;
  cursor: pointer;
  background: none !important;
  border: 0;
}

.vscomp-toggle-all-label {
  font-size: var(--bs-btn-input-font-size);
  color: var(--bs-body-color);
  user-select: none;
}

/* Focus States */
.vscomp-wrapper.focused .vscomp-toggle-button,
.vscomp-wrapper:focus .vscomp-toggle-button {
  /* Focus styling handled by .form-control */
}

/* State Classes */
.vscomp-wrapper.closed .vscomp-dropbox-container,
.vscomp-wrapper.closed.vscomp-dropbox-wrapper,
.vscomp-dropbox-close-button {
  display: none;
}

.vscomp-wrapper:not(.has-value) .vscomp-value {
  /* opacity: 0.5; */
  color: var(--bs-placeholder-color);
}

.vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button {
  display: flex;
}

/* Form Control Integration – the select becomes a div, so it needs the select chevron */
.form-control.vscomp-ele {
  display: block; /* Bootstrap 6 makes .form-control a flex box, which squeezes the toggle */
  padding: unset !important;
  background-image: var(--bs-control-select-bg);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.form-control.vscomp-ele.pop-comp-active {
  background-color: var(--bs-input-focus-bg);
  border-color: var(--bs-input-focus-border-color) !important;
  outline: 0 !important;
  box-shadow: var(--bs-input-focus-box-shadow);
}

.vscomp-wrapper .vscomp-toggle-button {
  min-height: calc(var(--bs-btn-input-min-height) - var(--bs-border-width) * 2); /* inside the field's border: 44px in all, with or without tags */
  padding: var(--bs-input-padding-y) var(--bs-input-padding-x) !important;
  position: relative;
}

/* Small select (select.form-control-sm): the small control's height and text, like a
   small field or button */
.form-control-sm.vscomp-ele .vscomp-toggle-button {
  min-height: calc(var(--bs-btn-input-sm-min-height) - var(--bs-border-width) * 2);
  padding: var(--bs-btn-input-sm-padding-y) var(--bs-control-padding-x) !important;
  font-size: var(--bs-btn-input-sm-font-size);
  line-height: var(--bs-btn-input-sm-line-height);
}

/* The value stops short of the chevron (and of the clear button when it shows), so a long
   value – or a select only as wide as its value – never runs under them */
.form-control.vscomp-ele .vscomp-toggle-button {
  padding-inline-end: calc(0.75rem + 16px + 0.5rem) !important;
}

.form-control.vscomp-ele .vscomp-wrapper.has-clear-button.has-value .vscomp-toggle-button {
  padding-inline-end: calc(30px + 24px + 0.25rem) !important;
}

/* No Options States */
.vscomp-wrapper.has-no-options .vscomp-options-container,
.vscomp-wrapper.has-no-search-results .vscomp-options-container {
  display: none;
}

.vscomp-wrapper.has-no-options .vscomp-no-options {
  display: flex;
}

.vscomp-wrapper.has-no-search-results .vscomp-no-search-results {
  display: flex;
}

.vscomp-wrapper.has-search-value .vscomp-search-clear {
  visibility: visible;
}

/* Keep Always Open */
.vscomp-wrapper.keep-always-open .vscomp-toggle-button {
  padding-right: 24px;
}

.vscomp-wrapper.keep-always-open .vscomp-clear-button {
  right: 5px;
}

.vscomp-wrapper.keep-always-open .vscomp-arrow {
  display: none;
}

.vscomp-wrapper.keep-always-open .vscomp-dropbox-container {
  position: relative;
  z-index: 1;
}

.vscomp-wrapper.keep-always-open .vscomp-dropbox {
  transition-duration: 0s;
  border: var(--bs-border-width) solid var(--bs-border-color);
  box-shadow: none;
}

/* Server Searching */
.vscomp-wrapper.server-searching .vscomp-options-list {
  display: none;
}

.vscomp-wrapper.server-searching .vscomp-options-loader {
  display: block;
}

/* Error State */
.vscomp-wrapper.has-error .vscomp-toggle-button {
  border-color: var(--bs-danger);
}

/* Show Value as Tags – small grey chips */
.vscomp-wrapper.has-value.show-value-as-tags .vscomp-toggle-button {
  /* one row of chips sits centred in a field-high box (chips have 4px below them) */
  --loon-tags-pad: calc((var(--bs-btn-input-min-height) - var(--bs-border-width) * 2 - var(--bs-body-font-size-sm) * var(--bs-body-line-height-sm) - 0.25rem) / 2);
  padding: var(--loon-tags-pad) var(--bs-spacer-5) calc(var(--loon-tags-pad) - 0.25rem) calc(var(--bs-input-padding-x) - 0.25rem) !important;
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.125rem 0.125rem 0.125rem 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bs-body-font-size-sm);
  line-height: var(--bs-body-line-height-sm);
  background-color: var(--loon-item-hover-bg);
  border: 0;
  border-radius: var(--bs-radius-4);
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag.more-value-count {
  white-space: nowrap;
  padding-right: 0.5rem;
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 20px);
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-clear-button {
  align-items: center;
  display: flex;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-clear-button .vscomp-clear-icon {
  transform: scale(0.8);
}

/* Popup Mode – phones (below VirtualSelect's 576px breakpoint). The list opens as a
   bottom sheet over the dimmed page, like a native picker: the container is the
   backdrop (so it drops the floating-list card look), the dropbox is the sheet.
   Tapping the backdrop closes it. */
.vscomp-wrapper.show-as-popup .vscomp-dropbox-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 1;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.vscomp-wrapper.show-as-popup .vscomp-dropbox {
  --loon-sheet-padding-x: 1.5rem;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
  background-color: var(--bs-component-bg);
  border-radius: 1rem 1rem 0 0;
  box-shadow: var(--loon-pop-shadow);
  animation: vscomp-sheet-in 0.2s ease-out;
}

/* Sheet title – the field's name (app.js adds it; only the sheet shows it) */
.vscomp-sheet-title {
  display: none;
}

.vscomp-wrapper.show-as-popup .vscomp-sheet-title {
  display: block;
  padding: 0 var(--loon-sheet-padding-x) 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--bs-body-color);
}

/* Options in the sheet: the sheet's side space, body-size text */
.vscomp-wrapper.show-as-popup .vscomp-option {
  padding-inline: var(--loon-sheet-padding-x);
  font-size: var(--bs-body-font-size);
}

.vscomp-wrapper.show-as-popup:not(.multiple) .vscomp-option.selected::after {
  font-size: 1.125rem;
}

/* Search in the sheet: a filled field inside the side space, not a bare line */
.vscomp-wrapper.show-as-popup.has-search-input .vscomp-search-container {
  min-height: var(--bs-btn-input-min-height);
  margin: 0 var(--loon-sheet-padding-x) 0.5rem;
  padding: 0 var(--bs-input-padding-x);
  border: 0;
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-bg-2);
}

.vscomp-wrapper.show-as-popup .vscomp-search-input {
  font-size: var(--bs-body-font-size);
}

/* Multi-select without a search: "Select all" is a row like the options */
.vscomp-wrapper.show-as-popup:not(.has-search-input) .vscomp-search-container {
  margin: 0 0 0.25rem;
  padding: 0 var(--loon-sheet-padding-x);
}

/* Grab handle at the top of the sheet */
.vscomp-wrapper.show-as-popup .vscomp-dropbox::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: calc(50% - 1.125rem);
  width: 2.25rem;
  height: 0.25rem;
  border-radius: 1rem;
  background-color: var(--bs-border-color);
}

@keyframes vscomp-sheet-in {
  from { transform: translateY(100%); }
}

/* The library's round close button sits under a centred popup; the sheet closes from the backdrop */
.vscomp-dropbox-close-button {
  display: none;
}

/* The page behind the sheet doesn't scroll */
body.vscomp-popup-active {
  overflow: hidden;
}

.vscomp-wrapper.popup-position-left .vscomp-dropbox-container {
  justify-content: flex-start;
}

.vscomp-wrapper.popup-position-right .vscomp-dropbox-container {
  justify-content: flex-end;
}

/* Has Select All */
.vscomp-wrapper.has-select-all .vscomp-search-input {
  padding-left: 0;
}

.vscomp-wrapper.has-select-all .vscomp-toggle-all-label {
  display: none;
}

.vscomp-wrapper:not(.has-search-input) .vscomp-toggle-all-label {
  display: inline-block;
}

/* =============================================================================
   PLUGIN PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

/* Hardware Acceleration for Smooth Animations
   (not on table cells: a transformed cell paints over the row line above it) */
.avatar {
  will-change: transform;
  transform: translateZ(0);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .avatar {
    will-change: auto;
    transform: none;
  }
}


/* =============================================================================
   DATE AND TIME PICKERS – VANILLA CALENDAR PRO 3.4.0
   The calendar (load.js) is set up by DatePicker in app.js. Don't link the
   library's index.css: its layout (structure only, no colours) is copied below,
   and the Loon look follows it.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Layout – vanilla-calendar-pro/styles/layout.css v3.4.0, unchanged (MIT,
   https://github.com/uvarov-frontend/vanilla-calendar-pro). Replace this block
   as a whole when updating the library.
   ----------------------------------------------------------------------------- */
[data-vc=calendar]{position:relative;box-sizing:border-box;display:flex;min-width:17rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-direction:column;border-radius:.75rem;padding:1rem;opacity:1;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
[data-vc=calendar] [tabindex="0"]:focus-visible,[data-vc=calendar] button:focus-visible,[data-vc=calendar]:focus-visible{border-radius:.5rem;outline-style:solid;outline-width:1px;outline-offset:-1px}
[data-vc=calendar][data-vc-calendar-hidden]{pointer-events:none;opacity:0}
[data-vc=calendar][data-vc-calendar-hidden] *{pointer-events:none!important}
[data-vc=calendar][data-vc-input]{position:absolute}
[data-vc=calendar][data-vc-input][data-vc-position=bottom]{margin-top:.25rem}
[data-vc=calendar][data-vc-input][data-vc-position=top]{margin-top:-.25rem}
[data-vc-arrow]{pointer-events:auto;position:relative;display:block;height:1.5rem;width:1.5rem;cursor:pointer;border-width:0;background-color:transparent}
[data-vc-arrow]:before{position:absolute;left:0;top:0;height:100%;width:100%;background-position:50%;background-repeat:no-repeat;--tw-content:"";content:var(--tw-content)}
[data-vc-arrow=prev]:before{transform:rotate(90deg)}
[data-vc-arrow=next]:before{transform:rotate(-90deg)}
[data-vc=header]{position:relative;margin-bottom:.75rem;display:flex;align-items:center}
[data-vc-header=content]{display:grid;flex-grow:1;grid-auto-columns:max-content;grid-auto-flow:column;align-items:center;justify-content:center;white-space:pre-wrap;padding-left:1rem;padding-right:1rem}
[data-vc=month],[data-vc=year]{cursor:pointer;border-radius:.25rem;border-width:0;background-color:transparent;padding:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}
[data-vc=month]:disabled,[data-vc=year]:disabled{pointer-events:none}
[data-vc=content],[data-vc=wrapper]{display:flex;flex-grow:1}
[data-vc=content]{flex-direction:column}
[data-vc=months]{display:grid;flex-grow:1;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-rows:auto;align-items:center;row-gap:1rem}
[data-vc-months=row]{display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;-moz-column-gap:.25rem;column-gap:.25rem}
[data-vc=years]{display:grid;flex-grow:1;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-rows:auto;align-items:center;row-gap:1rem}
[data-vc-years=row]{display:grid;width:100%;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;-moz-column-gap:.25rem;column-gap:.25rem}
[data-vc-months-month],[data-vc-months=cell],[data-vc-years-year],[data-vc-years=cell]{display:flex;width:100%;align-items:center;justify-content:center}
[data-vc-months-month],[data-vc-years-year]{height:2.5rem;cursor:pointer;word-break:break-all;border-radius:.5rem;border-width:0;padding:.25rem;text-align:center;font-size:.75rem;line-height:1rem;font-weight:600}
[data-vc-months-month]:disabled,[data-vc-years-year]:disabled{pointer-events:none}
[data-vc=week]{margin-bottom:.375rem;display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}
[data-vc-week-day]{margin:0;display:flex;min-height:1.5rem;width:100%;min-width:1.875rem;align-items:center;justify-content:center;border-style:none;background-color:transparent;padding:0;font-size:.75rem;line-height:1rem;font-weight:700}
[data-vc=dates]{pointer-events:none;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-rows:auto;align-items:center;justify-items:center}
[data-vc=dates][data-vc-dates-disabled] [data-vc-date-btn]{cursor:default}
[data-vc-dates=row]{display:grid;width:100%;grid-template-columns:repeat(7,1fr);align-items:center;justify-items:center}
[data-vc-date]{pointer-events:auto;position:relative;display:flex;width:100%;align-items:center;justify-content:center;padding-top:.125rem;padding-bottom:.125rem}
[data-vc-date]:not(:has([data-vc-date-btn])),[data-vc-date][data-vc-date-disabled],[data-vc-date][data-vc-date-disabled] [data-vc-date-btn]{pointer-events:none}
[data-vc-date][data-vc-date-hover] [data-vc-date-btn]{border-radius:0}
[data-vc-date][data-vc-date-hover=first] [data-vc-date-btn]{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}
[data-vc-date][data-vc-date-hover=last] [data-vc-date-btn]{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}
[data-vc-date][data-vc-date-hover=first-and-last] [data-vc-date-btn]{border-radius:.5rem}
[data-vc-date][data-vc-date-hover=first][data-vc-date-selected] [data-vc-date-btn]{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}
[data-vc-date][data-vc-date-hover=last][data-vc-date-selected] [data-vc-date-btn]{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}
[data-vc-date][data-vc-date-selected=first] [data-vc-date-btn]{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}
[data-vc-date][data-vc-date-selected=last] [data-vc-date-btn]{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}
[data-vc-date][data-vc-date-selected=first-and-last] [data-vc-date-btn]{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}
[data-vc-date][data-vc-date-selected=middle] [data-vc-date-btn]{border-radius:0}
[data-vc-date][data-vc-date-disabled]+[data-vc-date-hover] [data-vc-date-btn],[data-vc-date][data-vc-date-disabled]+[data-vc-date-selected] [data-vc-date-btn]{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}
[data-vc-date][data-vc-date-hover]:has(+[data-vc-date-disabled]) [data-vc-date-btn],[data-vc-date][data-vc-date-selected]:has(+[data-vc-date-disabled]) [data-vc-date-btn]{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}
[data-vc-date-btn]{display:flex;height:100%;min-height:1.875rem;width:100%;min-width:1.875rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.5rem;border-width:0;padding:0;font-size:.75rem;line-height:1rem;font-weight:400;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}
[data-vc-date][data-vc-date-today] [data-vc-date-btn]{font-weight:700}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  [data-vc=collapse]:before{transition:transform .2s ease-in-out}
}
[data-vc-swipe] [data-vc=content]{touch-action:pan-y}
[data-vc-dragging]{cursor:grabbing}
[data-vc-dragging] *{cursor:grabbing!important}
[data-vc-collapsing]{flex:none;align-content:start;overflow:hidden;overflow:clip}
[data-vc=dates]{flex-grow:1}
[data-vc-clip]{position:relative;overflow:hidden;overflow:clip}
[data-vc-ghost]{pointer-events:none;position:absolute;overflow:hidden;overflow:clip}
[data-vc=time]{margin-top:.75rem;display:grid;grid-template-columns:auto 1fr;gap:.75rem;border-width:1px 0 0;border-style:solid;padding-top:.75rem}
[data-vc-time=content]{display:grid;grid-auto-flow:column;align-items:center}
[data-vc-time-input=hour]{position:relative;margin-right:.35rem;width:1.75rem}
[data-vc-time-input=hour]:after{position:absolute;right:-.3125rem;top:50%;margin-top:calc(-50% + 1px);display:block;--tw-content:":";content:var(--tw-content)}
[data-vc-time-input=minute]{width:1.75rem}
[data-vc-time-input=hour] input,[data-vc-time-input=minute] input{position:relative;margin:0;box-sizing:border-box;display:block;width:100%;-webkit-user-select:text;-moz-user-select:text;user-select:text;border-radius:.25rem;border-width:0;padding:.125rem;text-align:center;font-size:1.125rem;font-weight:600;line-height:1.125rem}
[data-vc-time-input=hour] input:focus-visible,[data-vc-time-input=minute] input:focus-visible{outline-style:solid;outline-width:1px}
[data-vc-time-input=hour] input:disabled,[data-vc-time-input=minute] input:disabled{cursor:default}
[data-vc-time-input=hour] input:hover:disabled,[data-vc-time-input=minute] input:hover:disabled,[data-vc-time=keeping]{background-color:transparent}
[data-vc-time=keeping]{margin-left:.0625rem;margin-top:.25rem;width:1.375rem;cursor:pointer;border-radius:.25rem;border-width:0;padding:0;font-size:.69rem}
[data-vc-time=keeping]:focus-visible{outline-style:solid;outline-width:1px}
[data-vc-time=keeping]:disabled{cursor:default}
[data-vc-time=keeping]:hover:disabled{background-color:transparent}
[data-vc-time=ranges]{display:grid;grid-auto-flow:row}
[data-vc-time-range]{position:relative;z-index:10;font-size:0}
[data-vc-time-range]:before{content:var(--tw-content);left:0}
[data-vc-time-range]:after{content:var(--tw-content);right:0}
[data-vc-time-range]:after,[data-vc-time-range]:before{content:"";transform:translateY(-50%);pointer-events:none;position:absolute;top:50%;z-index:10;height:.5rem;width:.0625rem}
[data-vc-time-range] input{position:relative;margin:0;height:1.5rem;width:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline-width:0}
[data-vc-time-range] input::-webkit-slider-thumb{position:relative;z-index:20;margin-top:-.5rem;box-sizing:border-box;height:1rem;width:.75rem;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:.25rem;border-width:1px;border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
[data-vc-time-range] input::-moz-range-thumb{position:relative;z-index:20;box-sizing:border-box;height:1rem;width:.75rem;cursor:pointer;border-radius:.25rem;border-width:1px;border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
[data-vc-time-range] input::-webkit-slider-runnable-track{margin-top:1px;box-sizing:border-box;height:1px;width:100%;cursor:pointer;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
[data-vc-time-range] input::-moz-range-track{margin-top:1px;box-sizing:border-box;height:1px;width:100%;cursor:pointer;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
[data-vc-date-btn]:focus-visible+[data-vc-date-popup],[data-vc-date-popup]:focus-visible,[data-vc-date-popup]:hover,[data-vc-date]:hover>[data-vc-date-popup]{pointer-events:auto;opacity:1}
[data-vc-date-popup]{top:100%;left:0;transform:translateX(-50%);pointer-events:none;position:absolute;z-index:20;min-width:5rem;max-width:9rem;border-radius:.5rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}
[data-vc-date-popup]:hover{pointer-events:auto;opacity:1}
[data-vc-date-range-tooltip]{transform:translate(-50%,-100%);pointer-events:none;position:absolute;z-index:30;max-width:9rem;border-radius:.375rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400}
[data-vc-date-range-tooltip=hidden]{opacity:0}
[data-vc-date-range-tooltip=visible]{opacity:1}
[data-vc-week=numbers]{display:flex;flex-direction:column}
[data-vc-week-numbers=title]{margin-bottom:.375rem;display:flex;min-height:1.5rem;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;font-weight:700}
[data-vc-week-numbers=content]{display:grid;grid-auto-flow:row;align-items:center;justify-items:center;row-gap:.25rem;padding-top:.125rem;padding-bottom:.125rem}
[data-vc-week-number]{min-height:1.875rem;min-width:1.875rem;font-weight:600}
[data-vc-week-day-btn],[data-vc-week-number]{margin:0;display:flex;width:100%;cursor:pointer;align-items:center;justify-content:center;border-style:none;background-color:transparent;padding:0;font-size:.75rem;line-height:1rem}
[data-vc-week-day-btn]{height:100%;min-height:1.5rem;font-weight:700}
[data-vc=collapse]{position:relative;margin-top:.25rem;margin-bottom:-.25rem;display:block;height:1rem;width:100%;flex-shrink:0;cursor:pointer;touch-action:none;border-width:0;background-color:transparent}
[data-vc=collapse]:before{position:absolute;left:50%;top:50%;height:.1875rem;width:2rem;border-radius:9999px;--tw-content:"";content:var(--tw-content)}
@media (hover:hover) and (pointer:fine) {
  [data-vc=collapse]:before{height:1rem;width:1rem;border-radius:0;background-position:50%;content:var(--tw-content);background-repeat:no-repeat}
}
[data-vc=collapse]:before{transform:translate(-50%,-50%)}
@media (hover:hover) and (pointer:fine) {
  [data-vc=collapse]:before{transform:translate(-50%,-50%) rotate(180deg)}
  [data-vc-type=default]:has([data-vc-collapsing]) [data-vc=collapse]:before,[data-vc-type=week] [data-vc=collapse]:before{transform:translate(-50%,-50%) rotate(0deg)}
  [data-vc-type=week]:has([data-vc-collapsing]) [data-vc=collapse]:before{transform:translate(-50%,-50%) rotate(180deg)}
}
[data-vc=calendar][data-vc-type=multiple] [data-vc=dates]{flex-grow:0}
[data-vc=controls]{pointer-events:none;position:absolute;left:0;right:0;top:0;z-index:20;box-sizing:content-box;display:flex;align-items:center;justify-content:space-between;padding-left:1rem;padding-right:1rem;padding-top:1.25rem}
[data-vc=grid]{display:flex;flex-grow:1;flex-wrap:wrap;gap:1.75rem}
[data-vc=grid][data-vc-grid=hidden] [data-vc=column]{pointer-events:none;opacity:.3}
[data-vc=grid][data-vc-grid=hidden] [data-vc=column][data-vc-column=month],[data-vc=grid][data-vc-grid=hidden] [data-vc=column][data-vc-column=year]{pointer-events:auto;opacity:1}
[data-vc=column]{display:flex;min-width:15rem;flex-grow:1;flex-direction:column}

/* -----------------------------------------------------------------------------
   Loon look – everything below is ours, with the same tokens as menus and select
   lists: the panel is a floating list (8px corners, hairline, soft shadow); every
   day, month, year and arrow is a 36px button with 6px corners; hover is the list
   grey, the picked day/month/year is the list's light blue with blue text, a range
   is one light blue band, and today has a small blue dot.
   ----------------------------------------------------------------------------- */

/* The field: read-only text that opens the calendar */
.date-field {
  cursor: pointer;
}

.date-field[readonly]:not(:disabled) {
  background-color: var(--bs-control-bg, var(--bs-component-bg));
}

/* Floating panel (lives in the modal when the field is in one) */
.date-pop {
  --loon-cal-cell: 2.25rem;               /* a day: 36px square */
  --loon-cal-radius: var(--bs-border-radius);
  --loon-cal-accent: var(--bs-component-active-bg);
  position: fixed;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  color: var(--bs-body-color);
  font-size: var(--bs-btn-input-font-size);
  background-color: var(--bs-component-bg);
  border: var(--bs-border-width) solid var(--loon-pop-border-color);
  border-radius: var(--loon-pop-radius);
  box-shadow: var(--loon-pop-shadow);
  opacity: 0;
  transition: opacity 0.12s ease-out;
}

.date-pop.show {
  opacity: 1;
}

/* As a sheet on phones (FloatingPanel): the calendar fills the sheet – seven even columns
   across any phone's width, the arrows at its two ends (left to itself it kept its desktop
   width, on the left). Days are 44px squares in the middle of their columns. */
@media (width < 576px) {
  .date-pop.floating-sheet {
    --loon-cal-cell: 2.75rem;
  }

  .date-pop.floating-sheet [data-vc=calendar] {
    width: 100%;
    padding: 0 calc(var(--loon-sheet-padding-x) - 0.5rem) 0.5rem;
  }

  /* A range or a week keeps full-width days, so its band runs unbroken */
  .date-pop.floating-sheet:not(.date-pop-range, .date-pop-week) [data-vc-date-btn] {
    width: var(--loon-cal-cell);
  }

  .date-pop.floating-sheet .date-pop-footer {
    padding-inline: calc(var(--loon-sheet-padding-x) - 0.5rem);
  }
}

/* Calendar */
.date-pop [data-vc=calendar] {
  min-width: calc(var(--loon-cal-cell) * 7 + 1.5rem);
  padding: 0.75rem;
  color: inherit;
  background: transparent;
  border-radius: inherit;
}

.date-pop [data-vc=calendar] button {
  font-family: inherit;
}

.date-pop [data-vc=calendar] button:focus-visible,
.date-pop [data-vc=calendar] [tabindex="0"]:focus-visible {
  outline: 2px solid var(--loon-cal-accent);
  outline-offset: -2px;
  border-radius: var(--loon-cal-radius);
}

/* Header: one row of 36px buttons – arrow, month, year, arrow. Month and year share
   the space between the arrows evenly. */
.date-pop [data-vc=header] {
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.date-pop [data-vc-header=content] {
  display: flex;
  flex: 1 1 0;
  gap: 0.25rem;
  padding: 0;
}

.date-pop [data-vc=month],
.date-pop [data-vc=year],
.date-pop [data-vc-arrow] {
  height: var(--loon-cal-cell);
  color: var(--bs-body-color);
  background-color: transparent;
  border-radius: var(--loon-cal-radius);
}

.date-pop [data-vc=month],
.date-pop [data-vc=year] {
  flex: 1 1 0;
  padding: 0 0.75rem;
  font-size: var(--bs-btn-input-font-size);
  font-weight: 600;
  line-height: var(--loon-cal-cell);
}

.date-pop [data-vc-arrow] {
  flex: 0 0 var(--loon-cal-cell);
  width: var(--loon-cal-cell);
}

.date-pop [data-vc=month]:hover,
.date-pop [data-vc=year]:hover,
.date-pop [data-vc-arrow]:hover {
  background-color: var(--loon-item-hover-bg);
}

/* Chevrons drawn with a mask, so they take the text colour */
.date-pop [data-vc-arrow]::before {
  content: "";
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / 1rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

.date-pop [data-vc-arrow]:disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Weekday names */
.date-pop [data-vc=week] {
  margin-bottom: 0.125rem;
}

.date-pop [data-vc-week-day],
.date-pop [data-vc-week-numbers=title] {
  min-height: 2rem;
  font-size: var(--bs-body-font-size-xs);
  font-weight: 500;
  color: var(--bs-fg-3);
}

/* Days */
.date-pop [data-vc-date] {
  padding: 0.0625rem 0;
}

.date-pop [data-vc-date-btn] {
  min-width: var(--loon-cal-cell);
  min-height: var(--loon-cal-cell);
  font-size: var(--bs-btn-input-font-size);
  font-weight: 400;
  color: var(--bs-body-color);
  background-color: transparent;
  border-radius: var(--loon-cal-radius);
  transition: background-color 0.1s, color 0.1s;
}

.date-pop [data-vc-date-btn]:hover {
  background-color: var(--loon-item-hover-bg);
}

/* Days of the next and previous month */
.date-pop :is([data-vc-date-month=prev], [data-vc-date-month=next]) [data-vc-date-btn] {
  color: var(--bs-gray-400);
}

/* Today: semibold with a small blue dot under the number */
.date-pop [data-vc-date-today] [data-vc-date-btn] {
  position: relative;
  font-weight: 600;
}

.date-pop [data-vc-date-today] [data-vc-date-btn]::after {
  content: "";
  position: absolute;
  bottom: 0.3125rem;
  left: 50%;
  width: 0.25rem;
  height: 0.25rem;
  margin-left: -0.125rem;
  background-color: var(--loon-cal-accent);
  border-radius: 50%;
}

/* Days you can't pick: faded */
.date-pop [data-vc-date-disabled] [data-vc-date-btn] {
  color: var(--bs-disabled-color);
  opacity: 0.45;
}

/* Picked day: the list's selected look – light blue, blue semibold text */
.date-pop [data-vc-date-selected] [data-vc-date-btn],
.date-pop [data-vc-date-selected] [data-vc-date-btn]:hover,
.date-pop [data-vc-date-hover] [data-vc-date-btn] {
  font-weight: 600;
  color: var(--loon-item-selected-color);
  background-color: var(--loon-item-selected-bg);
}

/* Range: one light blue band (also while you hover the second end); the two ends
   semibold, the days between them regular */
.date-pop [data-vc-date-selected=middle] [data-vc-date-btn],
.date-pop [data-vc-date-hover=""] [data-vc-date-btn] {
  font-weight: 400;
}

/* Range corners: the band is square inside, round at its two ends */
.date-pop [data-vc-date-selected=first] [data-vc-date-btn],
.date-pop [data-vc-date-hover=first] [data-vc-date-btn] {
  border-radius: var(--loon-cal-radius) 0 0 var(--loon-cal-radius);
}

.date-pop [data-vc-date-selected=last] [data-vc-date-btn],
.date-pop [data-vc-date-hover=last] [data-vc-date-btn] {
  border-radius: 0 var(--loon-cal-radius) var(--loon-cal-radius) 0;
}

.date-pop [data-vc-date-selected=first-and-last] [data-vc-date-btn],
.date-pop [data-vc-date-hover=first-and-last] [data-vc-date-btn] {
  border-radius: var(--loon-cal-radius);
}

/* Week picker: the picked week is one light band */
.date-pop-week [data-vc-date-selected] [data-vc-date-btn],
.date-pop-week [data-vc-date-selected] [data-vc-date-btn]:hover {
  font-weight: 400;
  border-radius: 0;
}

.date-pop-week [data-vc-dates=row] > [data-vc-date-selected]:nth-child(1) [data-vc-date-btn] {
  border-radius: var(--loon-cal-radius) 0 0 var(--loon-cal-radius);
}

.date-pop-week [data-vc-dates=row] > [data-vc-date-selected]:nth-child(7) [data-vc-date-btn] {
  border-radius: 0 var(--loon-cal-radius) var(--loon-cal-radius) 0;
}

/* Week numbers (week picker) */
.date-pop [data-vc-week=numbers] {
  margin-right: 0.25rem;
}

.date-pop [data-vc-week-number] {
  min-width: var(--loon-cal-cell);
  min-height: var(--loon-cal-cell);
  font-size: var(--bs-body-font-size-xs);
  font-weight: 500;
  color: var(--bs-fg-3);
  border-radius: var(--loon-cal-radius);
}

.date-pop [data-vc-week-number]:hover {
  color: var(--bs-body-color);
  background-color: var(--loon-item-hover-bg);
}

.date-pop [data-vc-week-numbers=title] {
  margin-bottom: 0.125rem;
}

/* Week numbers line up with the rows of days (36px cells, 2px apart) */
.date-pop [data-vc-week-numbers=content] {
  row-gap: 0.125rem;
  padding-block: 0.0625rem;
}

/* Month and year pickers: the header shows the year only */
.date-pop [data-vc-type=month] [data-vc=month],
.date-pop [data-vc-type=year] [data-vc=month] {
  display: none;
}

/* Month and year grids */
.date-pop [data-vc=months],
.date-pop [data-vc=years] {
  row-gap: 0.25rem;
}

.date-pop [data-vc-months-month],
.date-pop [data-vc-years-year] {
  height: 2.5rem;
  font-size: var(--bs-btn-input-font-size);
  font-weight: 400;
  word-break: normal;
  color: var(--bs-body-color);
  background-color: transparent;
  border-radius: var(--loon-cal-radius);
}

.date-pop [data-vc-months-month]:hover,
.date-pop [data-vc-years-year]:hover {
  background-color: var(--loon-item-hover-bg);
}

.date-pop [data-vc-months-month]:disabled,
.date-pop [data-vc-years-year]:disabled {
  color: var(--bs-disabled-color);
  opacity: 0.5;
}

.date-pop [data-vc-months-month][data-vc-months-month-selected],
.date-pop [data-vc-years-year][data-vc-years-year-selected] {
  font-weight: 600;
  color: var(--loon-item-selected-color);
  background-color: var(--loon-item-selected-bg);
}

/* Two months side by side (range) */
.date-pop [data-vc=grid] {
  gap: 1.5rem;
}

.date-pop [data-vc=column] {
  min-width: calc(var(--loon-cal-cell) * 7);
}

.date-pop [data-vc=controls] {
  padding: 0.75rem 0.75rem 0;
}

/* Time: hour and minute fields with sliders, under the days */
.date-pop [data-vc=time] {
  margin: 0.75rem -0.75rem 0;
  padding: 0.75rem 0.75rem 0;
  gap: 1rem;
  border-top: var(--bs-border-width) solid var(--bs-border-body);
}

.date-pop [data-vc-time-input=hour],
.date-pop [data-vc-time-input=minute] {
  width: 2.5rem;
}

.date-pop [data-vc-time-input=hour] {
  margin-right: 0.5rem;
}

.date-pop [data-vc-time-input=hour]::after {
  right: -0.375rem;
  color: var(--bs-fg-3);
}

.date-pop [data-vc-time-input] input {
  height: var(--loon-cal-cell);
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: var(--loon-cal-cell);
  color: var(--bs-body-color);
  background-color: var(--bs-component-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--loon-cal-radius);
}

.date-pop [data-vc-time-input] input:focus {
  border-color: var(--bs-input-focus-border-color);
  outline: 0;
  box-shadow: var(--bs-input-focus-box-shadow);
}

.date-pop [data-vc-time=keeping] {
  width: auto;
  height: var(--loon-cal-cell);
  margin: 0 0 0 0.5rem;
  padding: 0 0.5rem;
  font-size: var(--bs-body-font-size-xs);
  font-weight: 600;
  color: var(--bs-body-color);
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--loon-cal-radius);
}

.date-pop [data-vc-time=keeping]:hover {
  background-color: var(--loon-item-hover-bg);
}

.date-pop [data-vc=time] [data-vc-time=ranges] {
  align-content: center;
  row-gap: 0.25rem;
}

/* Sliders: a thin grey track, a white round knob with a blue ring */
.date-pop [data-vc-time-range]::before,
.date-pop [data-vc-time-range]::after {
  display: none;
}

.date-pop [data-vc-time-range] input {
  height: 1.25rem;
  background: transparent;
}

.date-pop [data-vc-time-range] input::-webkit-slider-runnable-track {
  height: 0.25rem;
  margin-top: 0;
  background-color: var(--bs-border-body);
  border-radius: 1rem;
}

.date-pop [data-vc-time-range] input::-moz-range-track {
  height: 0.25rem;
  margin-top: 0;
  background-color: var(--bs-border-body);
  border-radius: 1rem;
}

.date-pop [data-vc-time-range] input::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.375rem;
  background-color: var(--bs-component-bg);
  border: 2px solid var(--loon-cal-accent);
  border-radius: 50%;
}

.date-pop [data-vc-time-range] input::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: var(--bs-component-bg);
  border: 2px solid var(--loon-cal-accent);
  border-radius: 50%;
}

/* Time only: just the time row, no calendar */
.date-pop-time [data-vc=header],
.date-pop-time [data-vc=wrapper] {
  display: none;
}

.date-pop-time [data-vc=calendar] {
  min-width: 18rem;
}

.date-pop-time [data-vc=time] {
  margin: 0;
  padding: 0;
  border-top: 0;
}

/* Footer: Clear on the left, Today / Now on the right */
.date-pop-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: var(--bs-border-width) solid var(--bs-border-body);
}

.date-pop-footer .btn-text {
  --bs-btn-color: var(--bs-fg-3);
  --bs-btn-hover-color: var(--bs-body-color);
  padding-inline: 0.5rem;
}