@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
/**
 * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
 * Important: Always import this file _before_ layering your own styles!
 */
@layer lmvz-ds.theme {
/**
 * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
 */

@font-face {
  font-family: Router;
  src:
    local('RouterBook-Regular'),
    local('Router-Book'),
    url('/assets/fonts/Router-Book.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: Router;
  src:
    local('RouterMedium-Regular'),
    local('Router-Medium'),
    url('/assets/fonts/Router-Medium.woff') format('woff');
  font-weight: 500;
}

@font-face {
  font-family: Router;
  src:
    local('RouterBold-Regular'),
    local('Router-Bold'),
    url('/assets/fonts/Router-Bold.woff') format('woff');
  font-weight: 700;
}

}
:host {
  display: inline-block;
  width: 100%;
}
/*
 * Card chrome (background, border-radius, padding, shadow) is provided by the
 * `lmvz-wrapper-card-md` class on the composed `lmvz-popover` — do not duplicate it here.
 */
.datepicker-panel {
  display: flex;
  flex-direction: column;
  gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
}
.datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.datepicker-month-label {
  /* Reset native button styles */
  all: unset;
  /* Re-apply needed styles */
  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
    Router);
  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
  text-align: center;
  cursor: default;
  /* Disabled state: no pointer events, but remains visible */
  pointer-events: none;
  user-select: none;
}
.datepicker-weekday-row {
  display: flex;
  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
  width: 100%;
}
.datepicker-weekday {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
    Router);
  color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
  min-width: 0;
  text-align: center;
}
.datepicker-grid {
  display: flex;
  flex-direction: column;
  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
}
.datepicker-week-row {
  display: flex;
  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
}
[part~='day'] {
  /* Reset native button */
  all: unset;
  /* Flex child of week-row (replaces removed .datepicker-cell wrapper) */
  flex: 1;
  /* Sizing: fluid square matching input-size-md */
  width: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
  height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
  min-width: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
    Router);
  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
  background-color: transparent;
  cursor: pointer;
  /* Smooth state transitions */
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  /* Ensure the outline renders outside the border-radius */
  position: relative;
}
[part~='day--disabled'],
[part~='day']:disabled {
  opacity: var(--lmvz-global-opacity-disabled, 40%);
  pointer-events: none;
}
[part~='day']:focus-visible {
  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
}
[part~='day']:not(:disabled):hover {
  background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
}
[part~='day--today'] {
  box-shadow: inset 0 0 0 1px var(--lmvz-semantic-color-border-active, #0f8acc);
}
[part~='day--today']:not(:disabled):hover {
  background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
  box-shadow: inset 0 0 0 1px var(--lmvz-semantic-color-border-active, #0f8acc);
}
[part~='day--selected'] {
  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
  box-shadow: none;
}
[part~='day--today'][part~='day--selected'] {
  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
  box-shadow: none;
}
[part~='day--selected']:not(:disabled):hover {
  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
}
[part~='day--out-of-month'] {
  color: var(--lmvz-semantic-color-on-surface-tertiary, #7a7a7a);
}