@idds/styles 1.2.10 → 1.2.12

package/src/components/date-picker.css

@@ -1,1059 +0,0 @@
-/* =========================== */
-/* date picker STYLES          */
-/* =========================== */
-
-.ina-date-picker {
-  position: relative;
-  display: inline-block;
-  background-color: var(--ina-white);
-}
-
-/* Trigger Button - Same layout as TextField wrapper */
-.ina-date-picker__trigger {
-  display: flex;
-  align-items: center;
-  gap: var(--ina-spacing-2);
-  width: 100%;
-  padding: var(--ina-spacing-2) var(--ina-spacing-3);
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-radius-lg);
-  background-color: var(--ina-background-primary);
-  cursor: pointer;
-  transition: all var(--ina-transition-base);
-}
-
-/* Size variants */
-.ina-date-picker__trigger--size-sm {
-  /* Desktop >= 768px */
-  height: 40px;
-}
-
-.ina-date-picker__trigger--size-md {
-  /* Desktop >= 768px */
-  height: 44px;
-}
-
-.ina-date-picker__trigger--size-lg {
-  /* Desktop >= 768px */
-  height: 48px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 767px) {
-  .ina-date-picker__trigger--size-sm {
-    height: 36px;
-  }
-
-  .ina-date-picker__trigger--size-md {
-    height: 40px;
-  }
-
-  .ina-date-picker__trigger--size-lg {
-    height: 44px;
-  }
-}
-
-.ina-date-picker__trigger:hover {
-  background-color: var(--ina-neutral-50);
-}
-
-.ina-date-picker__trigger:focus {
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
-  outline: none;
-  background-color: var(--ina-background-primary);
-  border-color: var(--ina-content-primary);
-}
-
-.ina-date-picker__trigger--disabled {
-  background-color: var(--ina-background-secondary);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.ina-date-picker__trigger--disabled:hover {
-  background-color: var(--ina-background-secondary);
-  border-color: var(--ina-stroke-primary);
-}
-
-.ina-date-picker__trigger--readonly {
-  background-color: var(--ina-background-secondary);
-  cursor: default;
-}
-
-.ina-date-picker__trigger--readonly:hover {
-  background-color: var(--ina-background-secondary);
-  border-color: var(--ina-stroke-primary);
-}
-
-/* Trigger Icon - Same as prefix icon in TextField */
-.ina-date-picker__trigger-icon {
-  color: var(--ina-content-tertiary);
-  flex-shrink: 0;
-}
-
-/* Trigger Text - Same as input field in TextField */
-.ina-date-picker__trigger-text {
-  flex: 1;
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-normal);
-  color: var(--ina-content-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: left;
-}
-
-.ina-date-picker__trigger-text--placeholder {
-  color: var(--ina-content-tertiary);
-  font-size: var(--ina-font-sm);
-}
-
-/* Clear Button - Same styling as TextField */
-.ina-date-picker__clear-button {
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--ina-content-dark-secondary);
-  transition: color var(--ina-transition-base);
-}
-
-.ina-date-picker__clear-button:hover:not(:disabled) {
-  color: var(--ina-content-secondary);
-}
-
-.ina-date-picker__clear-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.ina-date-picker__clear-icon {
-  width: 16px;
-  height: 16px;
-}
-
-/* Calendar Panel */
-.ina-date-picker__panel {
-  position: absolute;
-  z-index: 10004; /* Higher than YearPicker panel */
-  top: 100%;
-  left: 0;
-  margin-top: var(--ina-spacing-1);
-  background-color: var(--ina-background-primary);
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-radius-xl);
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  padding: var(--ina-spacing-4);
-  animation: date-picker-panel-fade-in 0.15s ease-out;
-  /* Width and height follow content */
-  width: fit-content;
-  height: fit-content;
-  min-width: 280px; /* Minimum width to ensure calendar is readable */
-  max-height: 440px; /* Maximum height as requested */
-  /* Ensure panel content is solid */
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-  /* Allow vertical scrolling if content exceeds max-height */
-  overflow-x: visible;
-}
-
-@keyframes date-picker-panel-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Panel Positioning */
-.ina-date-picker__panel--bottom {
-  top: 100%;
-  margin-top: var(--ina-spacing-1);
-}
-
-.ina-date-picker__panel--top {
-  bottom: 100%;
-  margin-bottom: var(--ina-spacing-1);
-}
-
-.ina-date-picker__panel--left {
-  right: 100%;
-  margin-right: var(--ina-spacing-1);
-}
-
-.ina-date-picker__panel--right {
-  left: 100%;
-  margin-left: var(--ina-spacing-1);
-}
-
-/* Dynamic right positioning to prevent overflow */
-.ina-date-picker__panel--right-aligned {
-  left: auto !important;
-  right: 0;
-}
-
-/* Panel Content */
-.ina-date-picker__panel-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ina-spacing-4);
-  /* Ensure content fits naturally */
-  width: fit-content;
-  height: fit-content;
-  /* Allow content to overflow if needed */
-  overflow: visible;
-  min-height: 0; /* Allow flex shrinking */
-  /* Prevent stretching beyond viewport */
-  max-width: 100%;
-}
-
-.ina-date-picker__panel-content--responsive {
-  flex-direction: column;
-}
-
-/* Single column layout for single mode */
-.ina-date-picker__panel-content--single {
-  flex-direction: column;
-}
-
-/* Dual column layout for range/multiple mode */
-.ina-date-picker__panel-content--dual {
-  flex-direction: column;
-}
-
-.ina-date-picker__day.ina-date-picker__day--other-month.ina-date-picker__day--range-in.ina-date-picker__day--in-range {
-  color: var(--ina-content-tertiary) !important;
-}
-
-@media (min-width: 1280px) {
-  .ina-date-picker__panel-content--responsive {
-    flex-direction: row;
-  }
-
-  .ina-date-picker__panel-content--dual {
-    flex-direction: row;
-    /* Ensure dual panel doesn't exceed viewport width */
-    max-width: 100%;
-    width: fit-content;
-    /* Prevent stretching */
-    align-items: flex-start;
-    /* Prevent content from stretching vertically */
-    align-content: flex-start;
-  }
-
-  /* Limit calendar container width in dual mode */
-  .ina-date-picker__panel-content--dual .ina-date-picker__calendar-container {
-    flex: 0 0 auto; /* Don't grow or shrink, use auto basis */
-    width: auto; /* Let content determine width */
-    min-width: 280px; /* Minimum readable width */
-    max-width: calc(
-      50% - var(--ina-spacing-2)
-    ); /* Each calendar takes max 50% minus gap */
-  }
-
-  /* Limit calendar width in dual mode */
-  .ina-date-picker__panel-content--dual .ina-date-picker__calendar {
-    flex: 0 0 auto; /* Don't grow or shrink, use auto basis */
-    width: auto; /* Let content determine width */
-    min-width: 280px; /* Minimum readable width */
-    max-width: 100%; /* Don't exceed container */
-    /* Prevent calendar from stretching vertically */
-    height: fit-content;
-  }
-}
-
-@media (max-width: 1279px) {
-  /* Hide second panel on mobile and tablet (below 1280px) */
-  .ina-date-picker__calendar:last-child {
-    display: none;
-  }
-
-  /* Ensure dual panel layout stays vertical on mobile and tablet */
-  .ina-date-picker__panel-content--dual {
-    flex-direction: column;
-  }
-}
-
-.ina-date-picker__calendar-container {
-  flex: 1;
-  min-width: 0; /* Allow flex shrinking */
-}
-
-.ina-date-picker__calendar {
-  flex: 1;
-  min-width: 0; /* Allow flex shrinking */
-}
-
-/* Calendar Navigation */
-.ina-date-picker__calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--ina-spacing-3);
-  position: relative;
-  min-height: 40px; /* Ensure consistent height */
-}
-
-.ina-date-picker__calendar-title {
-  font-size: var(--ina-font-lg);
-  font-weight: var(--ina-font-semibold);
-  color: var(--ina-content-primary);
-}
-
-.ina-date-picker__nav-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--ina-spacing-1);
-  border: none;
-  background-color: transparent;
-  color: var(--ina-text-secondary);
-  cursor: pointer;
-  border-radius: var(--ina-radius-base);
-  transition: all var(--ina-transition-fast);
-}
-
-.ina-date-picker__nav-button:hover {
-  background-color: var(--ina-background-tertiary);
-  color: var(--ina-content-primary);
-}
-
-.ina-date-picker__nav-icon {
-  color: inherit;
-}
-
-/* Ensure next chevron visible in single mode */
-.ina-date-picker__panel-content--single
-  .ina-date-picker__calendar-header
-  .ina-date-picker__nav-button:last-child {
-  display: inline-flex;
-}
-
-/* Calendar Grid */
-.ina-date-picker__calendar-grid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 0 !important;
-}
-
-.ina-date-picker__day-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--ina-spacing-2);
-  font-size: var(--ina-font-xs);
-  font-weight: var(--ina-font-medium);
-  color: var(--ina-content-tertiary);
-  text-align: center;
-}
-
-.ina-date-picker__day-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.ina-date-picker__day {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  font-size: var(--ina-font-xs);
-  font-weight: var(--ina-font-medium);
-  color: var(--ina-content-primary);
-  background-color: var(--ina-background-primary);
-  cursor: pointer;
-  border: none;
-  border-radius: var(--ina-radius-lg);
-  transition: all var(--ina-transition-fast);
-  height: 40px;
-  width: 40px;
-}
-
-.ina-date-picker__day:hover {
-  background-color: var(--ina-background-tertiary);
-}
-
-.ina-date-picker__day--selected {
-  background-color: var(--ina-content-primary);
-  color: var(--ina-white);
-  border-radius: var(--ina-radius-lg);
-}
-
-.ina-date-picker__day--selected:hover {
-  background-color: var(--ina-content-primary);
-}
-
-.ina-date-picker__day--range-start {
-  background-color: var(--ina-content-primary) !important;
-  color: var(--ina-white) !important;
-  border-radius: var(--ina-radius-lg);
-}
-
-.ina-date-picker__day--range-end {
-  background-color: var(--ina-content-primary) !important;
-  color: var(--ina-white) !important;
-
-  border-radius: var(--ina-radius-lg);
-}
-
-.ina-date-picker__day--range-in {
-  background-color: var(--ina-background-tertiary) !important;
-  color: var(--ina-text-primary) !important;
-  border-radius: 0;
-}
-
-.ina-date-picker__day--start {
-  background-color: var(--ina-content-primary);
-  color: var(--ina-white);
-  border-radius: var(--ina-radius-lg);
-}
-
-.ina-date-picker__day--end {
-  background-color: var(--ina-content-primary);
-  border-radius: var(--ina-radius-lg);
-}
-
-.ina-date-picker__day--in-range {
-  background-color: var(--ina-background-tertiary);
-  border-radius: 0;
-}
-
-.ina-date-picker__day--disabled {
-  color: var(--ina-content-secondary);
-  cursor: not-allowed;
-  background-color: var(--ina-background-secondary);
-}
-
-.ina-date-picker__day--disabled:hover {
-  opacity: 0.4;
-}
-
-.ina-date-picker__day.ina-date-picker__day--today {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.ina-date-picker__day--today::before {
-  content: 'Hari Ini';
-  display: block;
-  font-size: 10px;
-  margin-bottom: 4px;
-  color: var(--ina-content-primary);
-}
-
-.ina-date-picker__day--today.ina-date-picker__day--selected::before {
-  color: var(--ina-white);
-}
-
-.ina-date-picker__day--other-month {
-  color: var(--ina-content-tertiary);
-}
-
-/* Month/Year Selector */
-.ina-date-picker__month-selector {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--ina-spacing-3);
-}
-
-.ina-date-picker__month-text {
-  font-size: var(--ina-font-base);
-  font-weight: var(--ina-font-semibold);
-  color: var(--ina-content-primary);
-  cursor: pointer;
-  padding: var(--ina-spacing-1) var(--ina-spacing-2);
-  border-radius: var(--ina-radius-base);
-  transition: all var(--ina-transition-fast);
-}
-
-.ina-date-picker__month-text:hover {
-  background-color: var(--ina-background-tertiary);
-}
-
-/* Range Display */
-.ina-date-picker__range-display {
-  border-top: 1px solid var(--ina-stroke-primary);
-  padding-top: var(--ina-spacing-3);
-  margin-top: var(--ina-spacing-3);
-}
-
-.ina-date-picker__range-text {
-  font-size: var(--ina-font-sm);
-  color: var(--ina-text-secondary);
-  text-align: center;
-}
-
-/* Disabled State */
-.ina-date-picker--disabled .ina-date-picker__trigger {
-  background-color: var(--ina-background-secondary);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.ina-date-picker--disabled .ina-date-picker__trigger:hover {
-  background-color: var(--ina-background-secondary);
-  border-color: var(--ina-stroke-primary);
-}
-
-/* Focus Visible */
-.ina-date-picker__trigger:focus-visible {
-  outline: 2px solid var(--ina-content-primary);
-  outline-offset: 2px;
-}
-
-/* High Contrast Mode */
-@media (prefers-contrast: high) {
-  .ina-date-picker__trigger,
-  .ina-date-picker__panel {
-    border-width: 2px;
-  }
-
-  .ina-date-picker__trigger:focus {
-    outline-width: 3px;
-  }
-}
-
-/* Reduced Motion */
-@media (prefers-reduced-motion: reduce) {
-  .ina-date-picker__trigger,
-  .ina-date-picker__day,
-  .ina-date-picker__nav-button {
-    transition: none;
-  }
-
-  .ina-date-picker__panel {
-    animation: none;
-  }
-}
-
-/* Responsive Design */
-@media (max-width: 640px) {
-  .ina-date-picker__trigger--size-sm {
-    height: 32px;
-  }
-
-  .ina-date-picker__trigger--size-md {
-    height: 36px;
-  }
-
-  .ina-date-picker__trigger--size-lg {
-    height: 40px;
-  }
-  .ina-date-picker__dropdown-panel {
-    min-width: 280px;
-  }
-  /* Trigger adjustments */
-  .ina-date-picker__trigger {
-    padding: 0.375rem var(--ina-spacing-2); /* 6px 8px */
-    gap: 0.375rem; /* 6px */
-  }
-
-  .ina-date-picker__trigger-icon {
-    width: 18px;
-    height: 18px;
-  }
-
-  .ina-date-picker__trigger-text {
-    font-size: var(--ina-font-xs);
-  }
-
-  .ina-date-picker__trigger-text--placeholder {
-    font-size: var(--ina-font-xs);
-  }
-
-  .ina-date-picker__clear-icon {
-    width: 14px;
-    height: 14px;
-  }
-
-  /* Panel adjustments */
-  .ina-date-picker__panel {
-    position: absolute !important;
-    top: 100% !important;
-    left: 0 !important;
-    margin-top: var(--ina-spacing-1) !important;
-    width: calc(100vw - 2rem) !important;
-    max-width: 100% !important;
-    padding: var(--ina-spacing-3) !important;
-    max-height: 420px !important; /* Consistent max-height */
-  }
-
-  .ina-date-picker__panel-content {
-    gap: var(--ina-spacing-3);
-  }
-
-  .ina-date-picker__panel-content--responsive {
-    flex-direction: column;
-  }
-
-  /* Calendar header adjustments */
-  .ina-date-picker__calendar-header {
-    margin-bottom: var(--ina-spacing-2);
-    min-height: 36px;
-    padding: 0 var(--ina-spacing-1);
-  }
-
-  .ina-date-picker__nav-button {
-    padding: var(--ina-spacing-1);
-    min-width: 32px;
-    min-height: 32px;
-  }
-
-  .ina-date-picker__nav-icon {
-    width: 18px;
-    height: 18px;
-  }
-
-  .ina-date-picker__header-controls {
-    gap: 0.375rem; /* 6px */
-  }
-
-  .ina-date-picker__day-header {
-    padding: var(--ina-spacing-1);
-    font-size: 0.625rem; /* 10px */
-    font-weight: var(--ina-font-medium);
-    min-height: 28px;
-  }
-
-  .ina-date-picker__day {
-    padding: var(--ina-spacing-1);
-    font-size: var(--ina-font-2xs);
-    width: 32px !important;
-    height: 32px !important;
-  }
-
-  /* Calendar title adjustments */
-  .ina-date-picker__calendar-title {
-    font-size: var(--ina-font-base);
-  }
-
-  /* Apply button adjustments */
-  .ina-date-picker__apply-container {
-    margin-top: var(--ina-spacing-2);
-    padding-top: var(--ina-spacing-2);
-  }
-
-  .ina-date-picker__apply-button {
-    padding: var(--ina-spacing-2);
-    font-size: var(--ina-font-2xs);
-    height: 36px;
-  }
-
-  /* Hide second calendar panel on mobile for range/multiple modes */
-  .ina-date-picker__calendar:last-child {
-    display: none;
-  }
-
-  /* Next month header adjustments */
-  .ina-date-picker__next-month-header {
-    margin-bottom: var(--ina-spacing-2);
-    min-height: 36px;
-  }
-
-  .ina-date-picker__next-month-controls {
-    gap: 0.375rem; /* 6px */
-  }
-
-  /* MonthPicker and YearPicker adjustments in DatePicker context */
-  .ina-date-picker__dropdown-container .ina-month-picker__trigger,
-  .ina-date-picker__dropdown-container .ina-year-picker__trigger {
-    height: 28px;
-    padding: var(--ina-spacing-1) 0.375rem !important; /* 4px 6px */
-    font-size: var(--ina-font-xs) !important;
-    min-width: 45px !important;
-  }
-
-  .ina-date-picker__dropdown-container .ina-month-picker__trigger-text,
-  .ina-date-picker__dropdown-container .ina-year-picker__trigger-text {
-    font-size: var(--ina-font-xs) !important;
-    font-weight: var(--ina-font-medium);
-  }
-}
-
-/* Tablet adjustments */
-@media (min-width: 641px) and (max-width: 1279px) {
-  .ina-date-picker__panel {
-    max-width: max-content !important;
-    padding: 0.875rem !important; /* 14px */
-  }
-
-  .ina-date-picker__day-header {
-    font-size: var(--ina-font-xs);
-    padding: 0.375rem; /* 6px */
-  }
-
-  .ina-date-picker__calendar-header {
-    margin-bottom: var(--ina-spacing-3);
-  }
-
-  /* Ensure second panel is hidden on tablet */
-  .ina-date-picker__calendar:last-child {
-    display: none;
-  }
-}
-
-/* Desktop XL: Show both calendar panels for range/multiple modes (>= 1280px) */
-@media (min-width: 1280px) {
-  .ina-date-picker__calendar:last-child {
-    display: block;
-  }
-
-  /* Ensure all chevrons are visible in dual panel mode */
-  .ina-date-picker__panel-content--dual
-    .ina-date-picker__calendar-container
-    .ina-date-picker__calendar-header
-    .ina-date-picker__nav-button:last-child {
-    display: inline-flex;
-  }
-
-  /* Ensure panel width is appropriate for dual mode */
-  /* When panel contains dual content, limit its width */
-  .ina-date-picker__panel {
-    max-width: calc(100vw - 2rem); /* Prevent exceeding viewport */
-  }
-}
-
-/* Dark Mode Support */
-/* [data-theme='dark'] .ina-date-picker__trigger {
-  background-color: var(--ina-background-primary);
-  border-color: var(--ina-stroke-primary);
-}
-
-[data-theme='dark'] .ina-date-picker__trigger:hover {
-  background-color: var(--ina-background-secondary);
-}
-
-[data-theme='dark'] .ina-date-picker__trigger:focus {
-  box-shadow: 0 0 0 2px var(--ina-primary-50);
-}
-
-[data-theme='dark'] .ina-date-picker__panel {
-  background-color: var(--ina-background-primary);
-  border-color: var(--ina-stroke-primary);
-}
-
-[data-theme='dark'] .ina-date-picker__day {
-  background-color: var(--ina-background-primary);
-  color: var(--ina-content-primary);
-}
-
-[data-theme='dark'] .ina-date-picker__day:hover {
-  background-color: var(--ina-background-tertiary);
-}
-
-[data-theme='dark'] .ina-date-picker__day--selected {
-  background-color: var(--ina-content-primary);
-  color: var(--ina-white);
-}
-
-[data-theme='dark'] .ina-date-picker__day--range-start,
-[data-theme='dark'] .ina-date-picker__day--range-end {
-  background-color: var(--ina-content-primary) !important;
-  color: var(--ina-white) !important;
-}
-
-[data-theme='dark'] .ina-date-picker__day--range-in {
-  background-color: var(--ina-primary-200) !important;
-  color: var(--ina-primary-800) !important;
-}
-
-[data-theme='dark'] .ina-date-picker__day--in-range {
-  background-color: var(--ina-primary-200);
-}
-
-[data-theme='dark'] .ina-date-picker__day--disabled {
-  color: var(--ina-content-tertiary);
-  opacity: 0.4;
-  background-color: var(--ina-background-secondary);
-}
-
-[data-theme='dark'] .ina-date-picker__day--disabled:hover {
-  background-color: var(--ina-background-secondary);
-  opacity: 0.4;
-}
-
-[data-theme='dark'] .ina-date-picker__apply-container {
-  border-top-color: var(--ina-stroke-primary);
-}
-
-[data-theme='dark'] .ina-date-picker__apply-button {
-  background-color: var(--ina-content-primary);
-  color: var(--ina-white);
-}
-
-[data-theme='dark'] .ina-date-picker__apply-button:hover:not(:disabled) {
-  background-color: var(--ina-text-secondary);
-}
-
-[data-theme='dark'] .ina-date-picker__apply-button:disabled {
-  background-color: var(--ina-stroke-primary);
-  color: var(--ina-content-tertiary);
-}
-
-[data-theme='dark'] .ina-date-picker__cancel-button {
-  background-color: var(--ina-background-secondary);
-  color: var(--ina-text-secondary);
-  border-color: var(--ina-stroke-primary);
-}
-
-[data-theme='dark'] .ina-date-picker__cancel-button:hover {
-  background-color: var(--ina-background-tertiary);
-  color: var(--ina-content-primary);
-  border-color: var(--ina-stroke-secondary);
-}
-
-/* =========================== */
-/* DROPDOWN COMPONENTS         */
-/* =========================== */
-
-/* Dropdown trigger buttons */
-.ina-date-picker__dropdown-trigger {
-  padding: var(--ina-spacing-1) var(--ina-spacing-3);
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-radius-base);
-  background-color: var(--ina-background-primary);
-  color: var(--ina-content-primary);
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-medium);
-  cursor: pointer;
-  transition: all var(--ina-transition-fast);
-}
-
-.ina-date-picker__dropdown-trigger:hover {
-  background-color: var(--ina-neutral-50);
-}
-
-/* Dropdown options */
-.ina-date-picker__dropdown-option {
-  width: 100%;
-  padding: var(--ina-spacing-2) var(--ina-spacing-3);
-  text-align: left;
-  background-color: var(--ina-background-primary);
-  color: var(--ina-content-primary);
-  font-size: var(--ina-font-sm);
-  cursor: pointer;
-  transition: all var(--ina-transition-fast);
-}
-
-.ina-date-picker__dropdown-option:hover {
-  background-color: var(--ina-neutral-50);
-}
-
-/* Decade navigation */
-.ina-date-picker__decade-nav-button {
-  padding: var(--ina-spacing-2);
-  background-color: transparent;
-  color: var(--ina-content-primary);
-  border-radius: var(--ina-radius-base);
-  cursor: pointer;
-  transition: all var(--ina-transition-fast);
-}
-
-.ina-date-picker__decade-nav-button:hover {
-  background-color: var(--ina-neutral-50);
-}
-
-.ina-date-picker__decade-label {
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-medium);
-  color: var(--ina-content-primary);
-}
-
-/* Year options */
-.ina-date-picker__year-option {
-  padding: var(--ina-spacing-2);
-  font-size: var(--ina-font-sm);
-  border-radius: var(--ina-radius-base);
-  background-color: transparent;
-  color: var(--ina-content-primary);
-  cursor: pointer;
-  transition: all var(--ina-transition-fast);
-}
-
-.ina-date-picker__year-option:hover {
-  background-color: var(--ina-neutral-50);
-}
-
-.ina-date-picker__year-option--selected {
-  background-color: var(--ina-content-primary);
-  color: var(--ina-white);
-}
-
-.ina-date-picker__year-option--selected:hover {
-  background-color: var(--ina-content-primary);
-}
-
-/* =========================== */
-/* LAYOUT COMPONENTS           */
-/* =========================== */
-
-/* Header controls */
-.ina-date-picker__header-controls {
-  display: flex;
-  align-items: center;
-  gap: var(--ina-spacing-2);
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  justify-content: center;
-}
-
-/* Dropdown container */
-.ina-date-picker__dropdown-container {
-  position: relative;
-}
-
-/* Dropdown panels */
-.ina-date-picker__dropdown-panel {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: var(--ina-spacing-1);
-  background-color: var(--ina-background-primary);
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-radius-lg);
-  box-shadow: var(--ina-shadow-lg);
-  z-index: 50;
-  min-width: 320px;
-}
-
-/* Decade panels */
-.ina-date-picker__decade-panel {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: var(--ina-spacing-1);
-  background-color: var(--ina-background-primary);
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-radius-lg);
-  box-shadow: var(--ina-shadow-lg);
-  z-index: 50;
-  width: 320px;
-  padding: var(--ina-spacing-4);
-}
-
-/* Decade headers */
-.ina-date-picker__decade-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--ina-spacing-4);
-}
-
-/* Decade grid */
-.ina-date-picker__decade-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: var(--ina-spacing-1);
-}
-
-/* Next month header */
-.ina-date-picker__next-month-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--ina-spacing-3);
-  position: relative;
-  min-height: 40px; /* Ensure consistent height with left panel */
-}
-
-/* Next month controls */
-.ina-date-picker__next-month-controls {
-  display: flex;
-  align-items: center;
-  gap: var(--ina-spacing-2);
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  justify-content: center;
-}
-
-/* Today button */
-.ina-date-picker__today-button {
-  padding: var(--ina-spacing-2);
-  background-color: transparent;
-  color: var(--ina-content-primary);
-  border-radius: var(--ina-radius-base);
-  cursor: pointer;
-  transition: all var(--ina-transition-fast);
-}
-
-.ina-date-picker__today-button:hover {
-  background-color: var(--ina-neutral-50);
-}
-
-/* Apply/Cancel Buttons */
-.ina-date-picker__apply-container {
-  margin-top: var(--ina-spacing-4);
-  padding-top: var(--ina-spacing-3);
-  padding-bottom: var(
-    --ina-spacing-1
-  ); /* Add bottom padding to prevent button overflow */
-  border-top: 1px solid var(--ina-stroke-primary);
-}
-
-.ina-date-picker__button-group {
-  display: flex;
-  gap: var(--ina-spacing-2);
-}
-
-.ina-date-picker__apply-button {
-  flex: 1;
-  padding: var(--ina-spacing-3) var(--ina-spacing-4);
-  background-color: var(--ina-content-primary);
-  color: var(--ina-white);
-  border: none;
-  border-radius: var(--ina-radius-lg);
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-medium);
-  cursor: pointer;
-  transition: all var(--ina-transition-fast);
-}
-
-.ina-date-picker__apply-button:hover:not(:disabled) {
-  background-color: var(--ina-text-secondary);
-}
-
-.ina-date-picker__apply-button:disabled {
-  background-color: var(--ina-stroke-primary);
-  color: var(--ina-content-tertiary);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.ina-date-picker__cancel-button {
-  flex: 1;
-  padding: var(--ina-spacing-3) var(--ina-spacing-4);
-  background-color: var(--ina-background-secondary);
-  color: var(--ina-text-secondary);
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-radius-lg);
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-medium);
-  cursor: pointer;
-  transition: all var(--ina-transition-fast);
-}
-
-.ina-date-picker__cancel-button:hover {
-  background-color: var(--ina-background-tertiary);
-  color: var(--ina-content-primary);
-  border-color: var(--ina-stroke-secondary);
-}
-.ina-date-picker__day.ina-date-picker__day--selected.ina-date-picker__day--disabled {
-  background-color: var(--ina-content-primary);
-  color: white;
-}