@keenmate/web-daterangepicker 1.3.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +144 -63
- package/dist/style.css +1 -1
- package/dist/web-daterangepicker.js +109 -93
- package/dist/web-daterangepicker.umd.js +4 -4
- package/package.json +1 -1
- package/src/scss/_badges.scss +3 -3
- package/src/scss/_base.scss +54 -6
- package/src/scss/_variables.scss +25 -23
package/README.md
CHANGED
|
@@ -29,16 +29,16 @@ npm install @keenmate/web-daterangepicker
|
|
|
29
29
|
```html
|
|
30
30
|
<!-- Single date picker -->
|
|
31
31
|
<web-daterangepicker
|
|
32
|
-
mode="single"
|
|
33
|
-
format="YYYY-MM-DD"
|
|
32
|
+
selection-mode="single"
|
|
33
|
+
date-format-mask="YYYY-MM-DD"
|
|
34
34
|
placeholder="Select date"
|
|
35
35
|
></web-daterangepicker>
|
|
36
36
|
|
|
37
37
|
<!-- Date range picker -->
|
|
38
38
|
<web-daterangepicker
|
|
39
|
-
mode="range"
|
|
40
|
-
format="YYYY-MM-DD"
|
|
41
|
-
months-
|
|
39
|
+
selection-mode="range"
|
|
40
|
+
date-format-mask="YYYY-MM-DD"
|
|
41
|
+
visible-months-count="2"
|
|
42
42
|
placeholder="Select date range"
|
|
43
43
|
></web-daterangepicker>
|
|
44
44
|
```
|
|
@@ -65,9 +65,9 @@ picker.addEventListener('date-select', (e) => {
|
|
|
65
65
|
picker.show(); // Show calendar
|
|
66
66
|
picker.hide(); // Hide calendar
|
|
67
67
|
picker.toggle(); // Toggle calendar
|
|
68
|
-
picker.
|
|
69
|
-
picker.
|
|
70
|
-
picker.
|
|
68
|
+
picker.clearSelection(); // Clear selection
|
|
69
|
+
picker.getInputValue(); // Get current value
|
|
70
|
+
picker.setInputValue('2025-11-15'); // Set value
|
|
71
71
|
```
|
|
72
72
|
|
|
73
73
|
### JavaScript Instantiation (Direct Class Usage)
|
|
@@ -123,28 +123,37 @@ See the [JavaScript Instantiation Examples](examples-javascript-instantiation.ht
|
|
|
123
123
|
|
|
124
124
|
## Attributes
|
|
125
125
|
|
|
126
|
+
> **Note:** HTML attributes use kebab-case (e.g., `selection-mode`), while JavaScript options use camelCase (e.g., `selectionMode`).
|
|
127
|
+
|
|
126
128
|
| Attribute | Type | Default | Description |
|
|
127
129
|
|-----------|------|---------|-------------|
|
|
128
|
-
| `mode` | `'single' \| 'range'` | `'single'` | Single date or date range selection |
|
|
129
|
-
| `format` | `string` | `'YYYY-MM-DD'` | Date format (YYYY-MM-DD, DD.MM.YYYY, MM/DD/YYYY, etc.) |
|
|
130
|
-
| `months-
|
|
131
|
-
| `trigger` | `'
|
|
130
|
+
| `selection-mode` | `'single' \| 'range'` | `'single'` | Single date or date range selection |
|
|
131
|
+
| `date-format-mask` | `string` | `'YYYY-MM-DD'` | Date format (YYYY-MM-DD, DD.MM.YYYY, MM/DD/YYYY, etc.) |
|
|
132
|
+
| `visible-months-count` | `number` | `1` (single), `2` (range) | Number of months to display |
|
|
133
|
+
| `calendar-open-trigger` | `'focus' \| 'typing' \| 'manual'` | `'focus'` | How to open calendar (focus = on input focus, typing = when user types, manual = programmatic only) |
|
|
132
134
|
| `value` | `string` | - | Current value |
|
|
133
135
|
| `placeholder` | `string` | - | Input placeholder text |
|
|
134
136
|
| `disabled` | `boolean` | `false` | Disable the picker |
|
|
135
137
|
| `week-start-day` | `'auto' \| 0-6` | `'auto'` | First day of week (0=Sunday, 1=Monday, etc. 'auto'=detect from locale) |
|
|
136
138
|
| `min-date` | `string` | - | Minimum selectable date (YYYY-MM-DD) |
|
|
137
139
|
| `max-date` | `string` | - | Maximum selectable date (YYYY-MM-DD) |
|
|
138
|
-
| `disabled-
|
|
139
|
-
| `
|
|
140
|
+
| `disabled-weekdays` | `string` | - | Comma-separated day numbers to disable (e.g., "0,6" for weekends) |
|
|
141
|
+
| `disabled-dates-handling` | `'allow' \| 'prevent' \| 'block' \| 'split' \| 'individual'` | `'allow'` | How to handle range selections over disabled dates (see [Range Selection Modes](#range-selection-modes)) |
|
|
140
142
|
| `highlight-disabled-in-range` | `boolean` | `true` | Whether to visually highlight disabled dates within a selected range. Set to `false` to only highlight enabled dates. |
|
|
143
|
+
| `auto-close` | `'never' \| 'selection' \| 'apply'` | `'selection'` | When to close calendar (selection = after picking, apply = after Apply button, never = manual) |
|
|
144
|
+
| `positioning-mode` | `'inline' \| 'floating'` | `'floating'` | Calendar positioning (inline = embedded, floating = popup) |
|
|
145
|
+
| `input-size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Input field size (floating mode only) |
|
|
146
|
+
| `spacing` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Calendar spacing scale |
|
|
147
|
+
| `font-size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Calendar font size scale |
|
|
148
|
+
| `cell-size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Calendar day cell size |
|
|
149
|
+
| `enable-transitions` | `boolean` | `false` | Enable CSS transitions/animations |
|
|
141
150
|
|
|
142
151
|
## Properties
|
|
143
152
|
|
|
144
153
|
```typescript
|
|
145
|
-
// Get/set properties
|
|
146
|
-
picker.
|
|
147
|
-
picker.
|
|
154
|
+
// Get/set properties (use camelCase in JavaScript)
|
|
155
|
+
picker.selectionMode = 'range';
|
|
156
|
+
picker.dateFormatMask = 'DD.MM.YYYY';
|
|
148
157
|
picker.value = '2025-11-15';
|
|
149
158
|
picker.disabled = true;
|
|
150
159
|
```
|
|
@@ -153,12 +162,12 @@ picker.disabled = true;
|
|
|
153
162
|
|
|
154
163
|
| Method | Description |
|
|
155
164
|
|--------|-------------|
|
|
156
|
-
| `show()` | Show the calendar |
|
|
165
|
+
| `show()` | Show the calendar (floating mode only) |
|
|
157
166
|
| `hide()` | Hide the calendar |
|
|
158
167
|
| `toggle()` | Toggle calendar visibility |
|
|
159
|
-
| `
|
|
160
|
-
| `
|
|
161
|
-
| `
|
|
168
|
+
| `clearSelection()` | Clear the current selection |
|
|
169
|
+
| `getInputValue()` | Get the current value as a string |
|
|
170
|
+
| `setInputValue(value: string)` | Set the value |
|
|
162
171
|
|
|
163
172
|
## Events
|
|
164
173
|
|
|
@@ -205,7 +214,7 @@ Control which day the week starts on (auto-detected by default from user's local
|
|
|
205
214
|
|
|
206
215
|
```html
|
|
207
216
|
<!-- Disable weekends -->
|
|
208
|
-
<web-daterangepicker disabled-
|
|
217
|
+
<web-daterangepicker disabled-weekdays="0,6"></web-daterangepicker>
|
|
209
218
|
|
|
210
219
|
<!-- Date range restriction -->
|
|
211
220
|
<web-daterangepicker
|
|
@@ -246,48 +255,48 @@ const picker = document.querySelector('web-daterangepicker');
|
|
|
246
255
|
picker.specialDates = [
|
|
247
256
|
{
|
|
248
257
|
date: '2025-12-25',
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
258
|
+
dayClass: 'holiday', // CSS class for the day cell
|
|
259
|
+
badgeText: '🎄', // Badge overlay (emoji or short text)
|
|
260
|
+
dayTooltip: 'Christmas Day'
|
|
252
261
|
},
|
|
253
262
|
{
|
|
254
263
|
date: '2025-07-04',
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
264
|
+
dayClass: 'holiday',
|
|
265
|
+
badgeText: '🎆',
|
|
266
|
+
dayTooltip: 'Independence Day'
|
|
258
267
|
},
|
|
259
268
|
{
|
|
260
269
|
date: '2025-02-14',
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
270
|
+
dayClass: 'event',
|
|
271
|
+
badgeText: '❤️',
|
|
272
|
+
dayTooltip: 'Valentine\'s Day'
|
|
264
273
|
}
|
|
265
274
|
];
|
|
266
275
|
```
|
|
267
276
|
|
|
268
277
|
### Advanced Styling & Info
|
|
269
278
|
|
|
270
|
-
For complete control, use the `
|
|
279
|
+
For complete control, use the `getDateMetadataCallback`:
|
|
271
280
|
|
|
272
281
|
```javascript
|
|
273
|
-
picker.
|
|
282
|
+
picker.getDateMetadataCallback = (date) => {
|
|
274
283
|
const dateStr = date.toISOString().split('T')[0];
|
|
275
284
|
|
|
276
285
|
// Check if it's a peak season date
|
|
277
286
|
if (isPeakSeason(date)) {
|
|
278
287
|
return {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
288
|
+
dayClass: 'peak-season',
|
|
289
|
+
badgeText: '$$$',
|
|
290
|
+
dayTooltip: 'Peak season pricing'
|
|
282
291
|
};
|
|
283
292
|
}
|
|
284
293
|
|
|
285
294
|
// Check if it's a special offer date
|
|
286
295
|
if (specialOffers[dateStr]) {
|
|
287
296
|
return {
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
297
|
+
dayClass: 'special-offer',
|
|
298
|
+
badgeText: '%',
|
|
299
|
+
dayTooltip: `${specialOffers[dateStr]}% off!`
|
|
291
300
|
};
|
|
292
301
|
}
|
|
293
302
|
|
|
@@ -317,7 +326,7 @@ web-daterangepicker::part(calendar) .pa-date-picker__day.peak-season {
|
|
|
317
326
|
|
|
318
327
|
## Range Selection Modes
|
|
319
328
|
|
|
320
|
-
When selecting date ranges that include disabled dates (e.g., selecting a working week where weekends are disabled), you can control how the selection is handled using the `
|
|
329
|
+
When selecting date ranges that include disabled dates (e.g., selecting a working week where weekends are disabled), you can control how the selection is handled using the `disabled-dates-handling` attribute:
|
|
321
330
|
|
|
322
331
|
### Mode: 'allow' (default)
|
|
323
332
|
|
|
@@ -325,9 +334,9 @@ Allows range selections over disabled dates. Returns both enabled and disabled d
|
|
|
325
334
|
|
|
326
335
|
```html
|
|
327
336
|
<web-daterangepicker
|
|
328
|
-
mode="range"
|
|
329
|
-
disabled-
|
|
330
|
-
|
|
337
|
+
selection-mode="range"
|
|
338
|
+
disabled-weekdays="0,6"
|
|
339
|
+
disabled-dates-handling="allow">
|
|
331
340
|
</web-daterangepicker>
|
|
332
341
|
|
|
333
342
|
<script>
|
|
@@ -342,14 +351,27 @@ picker.addEventListener('date-select', (e) => {
|
|
|
342
351
|
|
|
343
352
|
**Use case:** Selecting working weeks where you need to know both working days and weekends (e.g., "Select 3 weeks of work" where weekends are included in the range but you get a separate array of working days).
|
|
344
353
|
|
|
354
|
+
### Mode: 'prevent'
|
|
355
|
+
|
|
356
|
+
Prevents selecting disabled dates entirely. Clicking a disabled date does nothing:
|
|
357
|
+
|
|
358
|
+
```html
|
|
359
|
+
<web-daterangepicker
|
|
360
|
+
selection-mode="range"
|
|
361
|
+
disabled-dates-handling="prevent">
|
|
362
|
+
</web-daterangepicker>
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
**Use case:** Strict date selection where disabled dates should never be part of any selection.
|
|
366
|
+
|
|
345
367
|
### Mode: 'block'
|
|
346
368
|
|
|
347
369
|
Prevents range selections from crossing disabled dates. Automatically snaps to the last enabled date before the gap:
|
|
348
370
|
|
|
349
371
|
```html
|
|
350
372
|
<web-daterangepicker
|
|
351
|
-
mode="range"
|
|
352
|
-
|
|
373
|
+
selection-mode="range"
|
|
374
|
+
disabled-dates-handling="block">
|
|
353
375
|
</web-daterangepicker>
|
|
354
376
|
```
|
|
355
377
|
|
|
@@ -363,9 +385,9 @@ Returns multiple date ranges separated by disabled dates:
|
|
|
363
385
|
|
|
364
386
|
```html
|
|
365
387
|
<web-daterangepicker
|
|
366
|
-
mode="range"
|
|
367
|
-
disabled-
|
|
368
|
-
|
|
388
|
+
selection-mode="range"
|
|
389
|
+
disabled-weekdays="0,6"
|
|
390
|
+
disabled-dates-handling="split">
|
|
369
391
|
</web-daterangepicker>
|
|
370
392
|
|
|
371
393
|
<script>
|
|
@@ -386,9 +408,9 @@ Returns a flat array of individual enabled dates:
|
|
|
386
408
|
|
|
387
409
|
```html
|
|
388
410
|
<web-daterangepicker
|
|
389
|
-
mode="range"
|
|
390
|
-
disabled-
|
|
391
|
-
|
|
411
|
+
selection-mode="range"
|
|
412
|
+
disabled-weekdays="0,6"
|
|
413
|
+
disabled-dates-handling="individual">
|
|
392
414
|
</web-daterangepicker>
|
|
393
415
|
|
|
394
416
|
<script>
|
|
@@ -408,6 +430,7 @@ picker.addEventListener('date-select', (e) => {
|
|
|
408
430
|
| Mode | Properties | Description |
|
|
409
431
|
|------|-----------|-------------|
|
|
410
432
|
| `allow` | `dateRange`, `enabledDates`, `disabledDates`, `getTotalDays()`, `getEnabledDateCount()` | Full range with helper methods |
|
|
433
|
+
| `prevent` | `dateRange`, `dates` | Only enabled dates can be selected |
|
|
411
434
|
| `block` | `dateRange`, `dates` | Single continuous range (no disabled dates) |
|
|
412
435
|
| `split` | `dateRanges`, `dates` | Multiple ranges split by disabled dates |
|
|
413
436
|
| `individual` | `dates` | Flat array of enabled dates |
|
|
@@ -419,16 +442,16 @@ By default, when you select a range that includes disabled dates, all dates (bot
|
|
|
419
442
|
```html
|
|
420
443
|
<!-- Default: highlights all dates in range, including disabled weekends -->
|
|
421
444
|
<web-daterangepicker
|
|
422
|
-
mode="range"
|
|
423
|
-
disabled-
|
|
424
|
-
|
|
445
|
+
selection-mode="range"
|
|
446
|
+
disabled-weekdays="0,6"
|
|
447
|
+
disabled-dates-handling="split">
|
|
425
448
|
</web-daterangepicker>
|
|
426
449
|
|
|
427
450
|
<!-- Only highlight enabled dates (Mon-Fri), skip weekends -->
|
|
428
451
|
<web-daterangepicker
|
|
429
|
-
mode="range"
|
|
430
|
-
disabled-
|
|
431
|
-
|
|
452
|
+
selection-mode="range"
|
|
453
|
+
disabled-weekdays="0,6"
|
|
454
|
+
disabled-dates-handling="split"
|
|
432
455
|
highlight-disabled-in-range="false">
|
|
433
456
|
</web-daterangepicker>
|
|
434
457
|
```
|
|
@@ -444,6 +467,11 @@ Customize the appearance using CSS custom properties:
|
|
|
444
467
|
|
|
445
468
|
```css
|
|
446
469
|
:root {
|
|
470
|
+
/* Scale Multipliers - adjust these to scale the entire component */
|
|
471
|
+
--drp-font-scale: 1; /* Scale all font sizes (e.g., 1.2 = 20% larger) */
|
|
472
|
+
--drp-spacing-scale: 1; /* Scale all padding/margins/gaps */
|
|
473
|
+
--drp-cell-scale: 1; /* Scale day cell dimensions */
|
|
474
|
+
|
|
447
475
|
/* Colors */
|
|
448
476
|
--drp-card-bg: #ffffff;
|
|
449
477
|
--drp-border-color: #e5e7eb;
|
|
@@ -453,13 +481,15 @@ Customize the appearance using CSS custom properties:
|
|
|
453
481
|
--drp-accent-color-hover: #2563eb;
|
|
454
482
|
--drp-text-primary: #111827;
|
|
455
483
|
--drp-text-secondary: #6b7280;
|
|
484
|
+
--drp-accent-text-color: #ffffff;
|
|
456
485
|
|
|
457
|
-
/*
|
|
458
|
-
--drp-
|
|
459
|
-
--drp-
|
|
460
|
-
--drp-
|
|
461
|
-
--drp-
|
|
462
|
-
--drp-
|
|
486
|
+
/* Input Field */
|
|
487
|
+
--drp-input-background: var(--drp-card-bg);
|
|
488
|
+
--drp-input-color: var(--drp-text-primary);
|
|
489
|
+
--drp-input-border-color: var(--drp-border-color);
|
|
490
|
+
--drp-input-border-color-hover: var(--drp-accent-color);
|
|
491
|
+
--drp-input-border-color-focus: var(--drp-accent-color);
|
|
492
|
+
--drp-input-placeholder-color: var(--drp-text-secondary);
|
|
463
493
|
|
|
464
494
|
/* Typography */
|
|
465
495
|
--drp-font-size-xs: 0.75rem;
|
|
@@ -481,6 +511,57 @@ Customize the appearance using CSS custom properties:
|
|
|
481
511
|
}
|
|
482
512
|
```
|
|
483
513
|
|
|
514
|
+
### Input Size Scale
|
|
515
|
+
|
|
516
|
+
The component uses a 10px-based sizing system (`--drp-rem: 10px`) for clean, predictable dimensions:
|
|
517
|
+
|
|
518
|
+
| Size | Attribute | Height |
|
|
519
|
+
|------|-----------|--------|
|
|
520
|
+
| XS | `input-size="xs"` | 31px |
|
|
521
|
+
| SM | `input-size="sm"` | 33px |
|
|
522
|
+
| MD | `input-size="md"` | 35px (default) |
|
|
523
|
+
| LG | `input-size="lg"` | 38px |
|
|
524
|
+
| XL | `input-size="xl"` | 41px |
|
|
525
|
+
|
|
526
|
+
#### Customizing Input Heights
|
|
527
|
+
|
|
528
|
+
Three ways to customize input dimensions:
|
|
529
|
+
|
|
530
|
+
```css
|
|
531
|
+
/* Option 1: Direct px override */
|
|
532
|
+
web-daterangepicker {
|
|
533
|
+
--drp-input-size-md-height: 42px;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
/* Option 2: Scale all sizes via --drp-rem */
|
|
537
|
+
web-daterangepicker {
|
|
538
|
+
--drp-rem: 12px; /* MD = 3.5 × 12 = 42px */
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
/* Option 3: Override specific size with calc */
|
|
542
|
+
web-daterangepicker {
|
|
543
|
+
--drp-input-size-md-height: calc(4.2 * var(--drp-rem));
|
|
544
|
+
}
|
|
545
|
+
```
|
|
546
|
+
|
|
547
|
+
### Quick Sizing Examples
|
|
548
|
+
|
|
549
|
+
```css
|
|
550
|
+
/* Compact size */
|
|
551
|
+
:root {
|
|
552
|
+
--drp-font-scale: 0.875;
|
|
553
|
+
--drp-spacing-scale: 0.75;
|
|
554
|
+
--drp-cell-scale: 0.875;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
/* Large size */
|
|
558
|
+
:root {
|
|
559
|
+
--drp-font-scale: 1.125;
|
|
560
|
+
--drp-spacing-scale: 1.25;
|
|
561
|
+
--drp-cell-scale: 1.125;
|
|
562
|
+
}
|
|
563
|
+
```
|
|
564
|
+
|
|
484
565
|
## Development
|
|
485
566
|
|
|
486
567
|
```bash
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";:host,:root{--drp-font-scale: 1;--drp-spacing-scale: 1;--drp-cell-scale: 1;--drp-spacing-xs-base: .25rem;--drp-spacing-sm-base: .5rem;--drp-spacing-md-base: 1rem;--drp-spacing-lg-base: 1.5rem;--drp-spacing-xl-base: 2rem;--drp-spacing-xs: calc(var(--drp-spacing-xs-base) * var(--drp-spacing-scale));--drp-spacing-sm: calc(var(--drp-spacing-sm-base) * var(--drp-spacing-scale));--drp-spacing-md: calc(var(--drp-spacing-md-base) * var(--drp-spacing-scale));--drp-spacing-lg: calc(var(--drp-spacing-lg-base) * var(--drp-spacing-scale));--drp-spacing-xl: calc(var(--drp-spacing-xl-base) * var(--drp-spacing-scale));--drp-font-size-2xs-base: .625rem;--drp-font-size-xs-base: .75rem;--drp-font-size-sm-base: .875rem;--drp-font-size-base-base: 1rem;--drp-font-size-lg-base: 1.125rem;--drp-font-size-xl-base: 1.25rem;--drp-font-size-2xl-base: 1.5rem;--drp-font-weight-medium: 500;--drp-font-weight-semibold: 600;--drp-card-bg: #ffffff;--drp-border-color: #e5e7eb;--drp-primary-bg: #f3f4f6;--drp-primary-bg-hover: #e5e7eb;--drp-accent-color: #3b82f6;--drp-accent-color-hover: #2563eb;--drp-text-primary: #111827;--drp-text-secondary: #6b7280;--drp-accent-text-color: #ffffff;--drp-button-text-color: #ffffff;--drp-tooltip-bg: #111827;--drp-tooltip-color: #ffffff;--drp-border-width-base: 1px;--drp-border-radius: .375rem;--drp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--drp-transition-fast: .15s;--drp-easing-snappy: cubic-bezier(.4, 0, .2, 1);--drp-input-padding-h: .75rem;--drp-grid-columns: 3;--drp-grid-rows: 2;--drp-input-background: var(--drp-card-bg);--drp-input-color: var(--drp-text-primary);--drp-input-border-color: var(--drp-border-color);--drp-input-border-color-hover: var(--drp-accent-color);--drp-input-border-color-focus: var(--drp-accent-color);--drp-input-placeholder-color: var(--drp-text-secondary);--drp-input-disabled-background: var(--drp-primary-bg);--drp-input-focus-shadow-color: rgba(59, 130, 246, .1);--drp-input-focus-shadow-size: 3px;--drp-input-icon-opacity: .6;--drp-input-size-sm-font: .875rem;--drp-input-size-sm-padding-v: .25rem;--drp-input-size-sm-padding-h: .5rem;--drp-input-size-sm-height: 2rem;--drp-input-size-sm-icon-size: .875em;--drp-input-size-md-font: 1rem;--drp-input-size-md-padding-v: .5rem;--drp-input-size-md-padding-h: .75rem;--drp-input-size-md-height: 2.5rem;--drp-input-size-md-icon-size: 1em;--drp-input-size-lg-font: 1.125rem;--drp-input-size-lg-padding-v: 1rem;--drp-input-size-lg-padding-h: 1rem;--drp-input-size-lg-height: 3rem;--drp-input-size-lg-icon-size: 1.125em;--drp-header-text-color: var(--drp-text-primary);--drp-header-bg-hover: var(--drp-primary-bg);--drp-header-bg-active: var(--drp-primary-bg-hover);--drp-nav-text-color: var(--drp-text-primary);--drp-nav-border-color: var(--drp-border-color);--drp-nav-bg-hover: var(--drp-primary-bg);--drp-nav-bg-active: var(--drp-primary-bg-hover);--drp-nav-border-hover: var(--drp-accent-color);--drp-rolling-bg: var(--drp-primary-bg);--drp-rolling-border-color: var(--drp-border-color);--drp-rolling-scrollbar-thumb: var(--drp-border-color);--drp-rolling-scrollbar-thumb-hover: var(--drp-accent-color);--drp-rolling-item-bg-hover: var(--drp-primary-bg);--drp-rolling-item-bg-selected: var(--drp-accent-color);--drp-rolling-item-color-selected: var(--drp-accent-text-color);--drp-rolling-item-bg-selected-hover: var(--drp-accent-color-hover);--drp-weekday-color: var(--drp-text-secondary);--drp-day-text-color: var(--drp-text-primary);--drp-day-bg-hover: var(--drp-primary-bg);--drp-day-border-hover: var(--drp-accent-color);--drp-day-today-border: var(--drp-accent-color);--drp-day-selected-bg: var(--drp-accent-color);--drp-day-selected-color: var(--drp-accent-text-color);--drp-day-selected-bg-hover: var(--drp-accent-color-hover);--drp-day-focused-outline: var(--drp-accent-color);--drp-day-disabled-color: var(--drp-text-secondary);--drp-day-other-month-color: var(--drp-text-secondary);--drp-day-range-bg: var(--drp-accent-color);--drp-day-range-color: var(--drp-accent-text-color);--drp-summary-text-color: var(--drp-text-secondary);--drp-summary-border-color: var(--drp-border-color);--drp-summary-count-color: var(--drp-accent-color);--drp-button-border-color: var(--drp-border-color);--drp-button-bg-hover: var(--drp-primary-bg);--drp-button-border-hover: var(--drp-accent-color);--drp-button-today-color: var(--drp-accent-color);--drp-button-clear-color: var(--drp-text-secondary);--drp-button-cancel-color: var(--drp-text-secondary);--drp-button-apply-bg: var(--drp-accent-color);--drp-button-apply-color: var(--drp-button-text-color);--drp-button-apply-border: var(--drp-accent-color);--drp-button-apply-bg-hover: var(--drp-accent-color-hover);--drp-badge-number-bg: var(--drp-accent-color);--drp-badge-number-color: var(--drp-accent-text-color);--drp-badge-count-bg: #ef4444;--drp-badge-count-color: #ffffff;--drp-badge-text-bg: var(--drp-text-secondary);--drp-badge-text-color: #ffffff;--drp-unified-range-text-color: var(--drp-text-primary);--drp-unified-range-bg-hover: var(--drp-primary-bg);--drp-unified-range-bg-active: var(--drp-primary-bg-hover);--drp-unified-month-color: var(--drp-text-secondary);--drp-unified-rolling-disabled-color: var(--drp-text-secondary)}.drp-input{width:100%;font-family:inherit;font-size:var(--drp-input-size-md-font);line-height:1.5;color:var(--drp-input-color);background-color:var(--drp-input-background);border:var(--drp-border-width-base) solid var(--drp-input-border-color);border-radius:var(--drp-border-radius);padding:var(--drp-input-size-md-padding-v) var(--drp-input-size-md-padding-h);padding-right:calc(var(--drp-input-size-md-padding-h) * 2.5);height:var(--drp-input-size-md-height);box-sizing:border-box;transition:border-color var(--drp-transition-fast) var(--drp-easing-snappy),box-shadow var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-input::placeholder{color:var(--drp-input-placeholder-color);opacity:.6}.drp-input:hover:not(:disabled){border-color:var(--drp-input-border-color-hover)}.drp-input:focus{outline:none;border-color:var(--drp-input-border-color-focus);box-shadow:0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color)}.drp-input:disabled{opacity:.6;cursor:not-allowed;background-color:var(--drp-input-disabled-background)}.drp-input.drp-input--sm{font-size:var(--drp-input-size-sm-font);padding:var(--drp-input-size-sm-padding-v) var(--drp-input-size-sm-padding-h);padding-right:calc(var(--drp-input-size-sm-padding-h) * 2.5);height:var(--drp-input-size-sm-height)}.drp-input.drp-input--lg{font-size:var(--drp-input-size-lg-font);padding:var(--drp-input-size-lg-padding-v) var(--drp-input-size-lg-padding-h);padding-right:calc(var(--drp-input-size-lg-padding-h) * 2.5);height:var(--drp-input-size-lg-height)}.drp-date-picker-input{position:relative;cursor:pointer;display:inline-block;width:100%}.drp-date-picker-input:after{content:"📅";position:absolute;right:var(--drp-input-size-md-padding-h);top:50%;transform:translateY(-50%);pointer-events:none;opacity:var(--drp-input-icon-opacity);font-size:var(--drp-input-size-md-icon-size)}.drp-date-picker-input.drp-date-picker-input--sm:after{right:var(--drp-input-size-sm-padding-h);font-size:var(--drp-input-size-sm-icon-size)}.drp-date-picker-input.drp-date-picker-input--lg:after{right:var(--drp-input-size-lg-padding-h);font-size:var(--drp-input-size-lg-icon-size)}.drp-date-picker{position:absolute;z-index:9500;background:var(--drp-card-bg);border:var(--drp-border-width-base) solid var(--drp-border-color);border-radius:var(--drp-border-radius);box-shadow:var(--drp-shadow-xl);padding:var(--drp-spacing-md);min-width:280px;max-width:calc(100vw - 2rem);box-sizing:border-box;-webkit-user-select:none;user-select:none;--drp-font-size-2xs: calc(var(--drp-font-size-2xs-base) * var(--drp-font-scale));--drp-font-size-xs: calc(var(--drp-font-size-xs-base) * var(--drp-font-scale));--drp-font-size-sm: calc(var(--drp-font-size-sm-base) * var(--drp-font-scale));--drp-font-size-base: calc(var(--drp-font-size-base-base) * var(--drp-font-scale));--drp-font-size-lg: calc(var(--drp-font-size-lg-base) * var(--drp-font-scale));--drp-font-size-xl: calc(var(--drp-font-size-xl-base) * var(--drp-font-scale));--drp-font-size-2xl: calc(var(--drp-font-size-2xl-base) * var(--drp-font-scale))}.drp-date-picker:not(.drp-date-picker--visible){display:none}.drp-date-picker--inline{position:relative!important;display:block!important;z-index:auto;min-width:0;max-width:100%;width:fit-content;box-sizing:border-box}.drp-date-picker__months{display:flex;gap:var(--drp-spacing-lg)}.drp-date-picker--inline .drp-date-picker__months{flex-wrap:wrap}.drp-date-picker__months--grid{display:grid;grid-template-columns:repeat(var(--drp-grid-columns, 3),minmax(0,1fr));grid-template-rows:repeat(var(--drp-grid-rows, 2),auto);gap:var(--drp-spacing-lg);width:100%}@media (max-width: 1200px){.drp-date-picker__months--grid{grid-template-columns:repeat(min(var(--drp-grid-columns, 3),3),minmax(0,1fr))}}@media (max-width: 768px){.drp-date-picker__months--grid{grid-template-columns:repeat(min(var(--drp-grid-columns, 3),2),minmax(0,1fr))}}@media (max-width: 480px){.drp-date-picker__months--grid{grid-template-columns:minmax(0,1fr)}}.drp-date-picker__month{flex:1;min-width:calc(280px * var(--drp-cell-scale));display:flex;flex-direction:column}.drp-date-picker--inline .drp-date-picker__month{min-width:calc(250px * var(--drp-cell-scale))}.drp-date-picker__months--grid .drp-date-picker__month{min-width:0;width:100%}.drp-date-picker__calendar-container{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}.drp-date-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--drp-spacing-md);gap:var(--drp-spacing-sm)}.drp-date-picker__header--static{justify-content:center}.drp-date-picker__header--static .drp-date-picker__month-year{cursor:default}.drp-date-picker__header--static .drp-date-picker__month-year:hover{background-color:transparent}.drp-date-picker__month-year{flex:1;text-align:center;font-weight:var(--drp-font-weight-semibold);font-size:var(--drp-font-size-base);color:var(--drp-header-text-color);padding:var(--drp-spacing-sm) var(--drp-spacing-md);border-radius:var(--drp-border-radius);cursor:pointer}.drp-date-picker__month-year:hover{background-color:var(--drp-header-bg-hover)}.drp-date-picker__month-year:active{background-color:var(--drp-header-bg-active)}.drp-date-picker__nav{width:calc(2rem * var(--drp-cell-scale));height:calc(2rem * var(--drp-cell-scale));display:flex;align-items:center;justify-content:center;border:var(--drp-border-width-base) solid var(--drp-nav-border-color);border-radius:var(--drp-border-radius);background:transparent;cursor:pointer;font-size:var(--drp-font-size-lg);color:var(--drp-nav-text-color)}.drp-date-picker__nav:hover{background-color:var(--drp-nav-bg-hover);border-color:var(--drp-nav-border-hover)}.drp-date-picker__nav:active{background-color:var(--drp-nav-bg-active)}.drp-date-picker__nav--disabled,.drp-date-picker__nav[disabled]{opacity:.6;cursor:not-allowed;pointer-events:none}.drp-date-picker__nav--disabled:hover,.drp-date-picker__nav[disabled]:hover{background-color:transparent;border-color:var(--drp-nav-border-color)}.drp-date-picker__nav--prev:before{content:"‹"}.drp-date-picker__nav--next:before{content:"›"}.drp-date-picker__rolling-selector{position:absolute;top:0;right:0;bottom:0;left:0;display:none;z-index:10}.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible{display:flex}.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible~.drp-date-picker__weekdays,.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible~.drp-date-picker__days{visibility:hidden}.drp-date-picker__rolling-selector{gap:var(--drp-spacing-xs)}.drp-date-picker__rolling-list{flex:1;min-width:0;height:100%;overflow-y:auto;border:var(--drp-border-width-base) solid var(--drp-rolling-border-color);border-radius:var(--drp-border-radius);display:flex;flex-direction:column;scroll-behavior:smooth}.drp-date-picker__rolling-list::-webkit-scrollbar{width:6px}.drp-date-picker__rolling-list::-webkit-scrollbar-track{background:var(--drp-rolling-bg)}.drp-date-picker__rolling-list::-webkit-scrollbar-thumb{background:var(--drp-rolling-scrollbar-thumb);border-radius:3px}.drp-date-picker__rolling-list::-webkit-scrollbar-thumb:hover{background:var(--drp-rolling-scrollbar-thumb-hover)}.drp-date-picker__rolling-item{padding:.25rem 1rem;cursor:pointer;font-size:.875rem;min-height:calc(2rem * var(--drp-cell-scale));flex-shrink:0;display:flex;align-items:center;justify-content:var(--drp-rolling-item-justify-content, center)}.drp-date-picker__rolling-item:hover{background-color:var(--drp-rolling-item-bg-hover)}.drp-date-picker__rolling-item--selected{background-color:var(--drp-rolling-item-bg-selected);color:var(--drp-rolling-item-color-selected);font-weight:600}.drp-date-picker__rolling-item--selected:hover{background-color:var(--drp-rolling-item-bg-selected-hover)}.drp-date-picker__rolling-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;min-width:0}.drp-date-picker__unified-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--drp-spacing-lg);gap:var(--drp-spacing-sm);padding:0 var(--drp-spacing-sm)}.drp-date-picker__unified-range{flex:1;text-align:center;font-weight:var(--drp-font-weight-semibold);font-size:var(--drp-font-size-lg);color:var(--drp-unified-range-text-color);padding:var(--drp-spacing-sm) var(--drp-spacing-md);border-radius:var(--drp-border-radius);cursor:pointer}.drp-date-picker__unified-range:hover{background-color:var(--drp-unified-range-bg-hover)}.drp-date-picker__unified-range:active{background-color:var(--drp-unified-range-bg-active)}.drp-date-picker__unified-range--static{cursor:default!important}.drp-date-picker__unified-range--static:hover,.drp-date-picker__unified-range--static:active{background-color:transparent}.drp-date-picker__unified-rolling-selector{position:absolute;top:calc(var(--drp-spacing-lg) + var(--drp-spacing-lg) * 2);left:50%;transform:translate(-50%);width:min(90%,450px);height:350px;max-height:350px;display:none;z-index:100;background:var(--drp-card-bg);gap:var(--drp-spacing-xs)}.drp-date-picker__unified-rolling-selector--visible{display:flex}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list{flex:1;min-width:0;height:100%;overflow-y:auto;border:var(--drp-border-width-base) solid var(--drp-rolling-border-color);border-radius:var(--drp-border-radius);display:flex;flex-direction:column;scroll-behavior:smooth}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar{width:6px}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-track{background:var(--drp-rolling-bg)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-thumb{background:var(--drp-rolling-scrollbar-thumb);border-radius:3px}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-thumb:hover{background:var(--drp-rolling-scrollbar-thumb-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item{padding:.25rem 1rem;cursor:pointer;font-size:.875rem;min-height:calc(2rem * var(--drp-cell-scale));flex-shrink:0;display:flex;align-items:center;justify-content:var(--drp-rolling-item-justify-content, center)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item:hover{background-color:var(--drp-rolling-item-bg-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--selected{background-color:var(--drp-rolling-item-bg-selected);color:var(--drp-rolling-item-color-selected);font-weight:600}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--selected:hover{background-color:var(--drp-rolling-item-bg-selected-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--disabled{color:var(--drp-unified-rolling-disabled-color);opacity:.4;cursor:not-allowed}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;min-width:0}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__nav{display:none}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__month-year{cursor:default;font-size:var(--drp-font-size-base);font-weight:var(--drp-font-weight-normal);color:var(--drp-unified-month-color)}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__month-year:hover{background-color:transparent}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__rolling-selector{display:none!important}.drp-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-sm)}.drp-date-picker__weekday{text-align:center;font-size:var(--drp-font-size-xs);font-weight:var(--drp-font-weight-semibold);color:var(--drp-weekday-color);padding:var(--drp-spacing-xs);text-transform:uppercase}.drp-date-picker__days{display:flex;flex-direction:column;gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-md)}.drp-date-picker__date-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs)}.drp-date-picker__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-sm);color:var(--drp-day-text-color);border-radius:var(--drp-border-radius);cursor:pointer;border:calc(2px * var(--drp-cell-scale)) solid transparent;position:relative}.drp-date-picker__day:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month){background-color:var(--drp-day-bg-hover);border-color:var(--drp-day-border-hover)}.drp-date-picker__day--today{border-color:var(--drp-day-today-border);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__day--selected{background-color:var(--drp-day-selected-bg);color:var(--drp-day-selected-color);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__day--selected:hover{background-color:var(--drp-day-selected-bg-hover)}.drp-date-picker__day--focused{outline:calc(2px * var(--drp-cell-scale)) solid var(--drp-day-focused-outline);outline-offset:calc(2px * var(--drp-cell-scale))}.drp-date-picker__day--disabled{color:var(--drp-day-disabled-color);opacity:.6;cursor:not-allowed;position:relative}.drp-date-picker__day--disabled:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 6px);border-radius:var(--drp-border-radius);pointer-events:none}.drp-date-picker__day--disabled:hover{background-color:transparent;border-color:transparent}.drp-date-picker__day--other-month{color:var(--drp-day-other-month-color);opacity:.5}.drp-date-picker__day--other-month.drp-date-picker__day--range-start,.drp-date-picker__day--other-month.drp-date-picker__day--range-end,.drp-date-picker__day--other-month.drp-date-picker__day--in-range,.drp-date-picker__day--other-month.drp-date-picker__day--drag-preview{opacity:1}.drp-date-picker__day--range-start,.drp-date-picker__day--range-end{background-color:var(--drp-day-range-bg);color:var(--drp-day-range-color);font-weight:var(--drp-font-weight-semibold);cursor:grab;-webkit-user-select:none;user-select:none}.drp-date-picker__day--range-start:active,.drp-date-picker__day--range-end:active{cursor:grabbing}.drp-date-picker__day--in-range{background-color:color-mix(in srgb,var(--drp-day-range-bg) 15%,transparent)}.drp-date-picker__day--in-range:hover{background-color:color-mix(in srgb,var(--drp-day-range-bg) 25%,transparent)}.drp-date-picker__day--dragging{cursor:grabbing!important;opacity:.7;transform:scale(1.1);transition:transform var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker__day--drag-preview{background-color:color-mix(in srgb,var(--drp-day-range-bg) 30%,transparent);border:calc(2px * var(--drp-cell-scale)) dashed var(--drp-day-range-bg)}.drp-date-picker__day--drag-preview.drp-date-picker__day--range-start,.drp-date-picker__day--drag-preview.drp-date-picker__day--range-end{background-color:color-mix(in srgb,var(--drp-day-range-bg) 60%,transparent);color:var(--drp-day-range-color)}.drp-date-picker__day--drag-invalid{background-color:color-mix(in srgb,#ef4444 20%,transparent)!important;border-color:#ef4444!important;border-style:dashed!important}.drp-date-picker__day.holiday{background-color:color-mix(in srgb,#ef4444 10%,transparent)}.drp-date-picker__day.holiday:hover:not(.drp-date-picker__day--disabled){background-color:color-mix(in srgb,#ef4444 20%,transparent)}.drp-date-picker__day.event{background-color:color-mix(in srgb,#10b981 10%,transparent)}.drp-date-picker__day.event:hover:not(.drp-date-picker__day--disabled){background-color:color-mix(in srgb,#10b981 20%,transparent)}.drp-date-picker__rolling-item--disabled{color:var(--drp-unified-rolling-disabled-color);opacity:.4;cursor:not-allowed;pointer-events:none;text-decoration:line-through}.drp-date-picker__rolling-item--disabled:hover{background-color:transparent}.drp-date-picker__badge-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-xs);max-height:calc(1rem * var(--drp-cell-scale));min-height:calc(1rem * var(--drp-cell-scale))}.drp-date-picker__badge-cell{display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-2xs);padding:calc(1px * var(--drp-cell-scale)) calc(2px * var(--drp-cell-scale));border-radius:2px;cursor:pointer;height:100%;max-height:calc(1rem * var(--drp-cell-scale))}.drp-date-picker__badge-cell:empty{visibility:hidden}.drp-date-picker__badge-cell:hover:not(:empty){transform:scale(1.05)}.drp-date-picker__badge-cell.badge-number{background-color:var(--drp-badge-number-bg);color:var(--drp-badge-number-color);font-size:.7rem;font-weight:600}.drp-date-picker__badge-cell.badge-count{background-color:var(--drp-badge-count-bg);color:var(--drp-badge-count-color);font-size:.7rem;font-weight:700}.drp-date-picker__badge-cell.badge-text{background-color:var(--drp-badge-text-bg);color:var(--drp-badge-text-color);font-size:.65rem;font-weight:700;text-transform:uppercase}.drp-date-picker__summary{text-align:center;padding:var(--drp-spacing-md);border-top:var(--drp-border-width-base) solid var(--drp-summary-border-color);font-size:var(--drp-font-size-sm);color:var(--drp-summary-text-color)}.drp-date-picker__summary--visible{display:block}.drp-date-picker__summary--hidden{display:none}.drp-date-picker__summary-count{font-weight:var(--drp-font-weight-semibold);color:var(--drp-summary-count-color);font-size:var(--drp-font-size-base)}.drp-date-picker__actions{display:flex;gap:var(--drp-spacing-sm);justify-content:space-between;padding-top:var(--drp-spacing-sm);border-top:var(--drp-border-width-base) solid var(--drp-summary-border-color)}.drp-date-picker__button{flex:1;padding:var(--drp-spacing-sm) var(--drp-spacing-md);border:var(--drp-border-width-base) solid var(--drp-button-border-color);border-radius:var(--drp-border-radius);background:transparent;cursor:pointer;font-size:var(--drp-font-size-sm);font-weight:var(--drp-font-weight-medium)}.drp-date-picker__button:hover{background-color:var(--drp-button-bg-hover);border-color:var(--drp-button-border-hover)}.drp-date-picker__button:disabled,.drp-date-picker__button[disabled]{opacity:var(--drp-disabled-opacity, .6);cursor:not-allowed;pointer-events:none}.drp-date-picker__button:disabled:hover,.drp-date-picker__button[disabled]:hover{background-color:transparent;border-color:var(--drp-button-border-color)}.drp-date-picker__button--today{color:var(--drp-button-today-color)}.drp-date-picker__button--clear{color:var(--drp-button-clear-color)}.drp-date-picker__button--apply{background-color:var(--drp-button-apply-bg);color:var(--drp-button-apply-color);border-color:var(--drp-button-apply-border)}.drp-date-picker__button--apply:hover{background-color:var(--drp-button-apply-bg-hover)}.drp-date-picker__button--cancel{color:var(--drp-button-cancel-color)}.drp-date-picker__tooltip{position:absolute;z-index:9999;background-color:var(--drp-tooltip-bg);color:var(--drp-tooltip-color);padding:var(--drp-spacing-xs) var(--drp-spacing-sm);border-radius:var(--drp-border-radius);font-size:var(--drp-font-size-xs);line-height:1.4;max-width:200px;word-wrap:break-word;pointer-events:none;opacity:0;transition:opacity var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker__tooltip--visible{opacity:1}.drp-date-picker__tooltip-arrow{position:absolute;background-color:var(--drp-tooltip-bg);width:8px;height:8px;transform:rotate(45deg)}.drp-date-picker__loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fffc;display:flex;align-items:center;justify-content:center;z-index:9500;border-radius:.375rem}.drp-date-picker__loading-spinner{width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:drp-spin .8s linear infinite}@keyframes drp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drp-date-picker.drp-font-xs{--drp-font-scale: .6}.drp-date-picker.drp-font-sm{--drp-font-scale: .8}.drp-date-picker.drp-font-md{--drp-font-scale: 1}.drp-date-picker.drp-font-lg{--drp-font-scale: 1.5}.drp-date-picker.drp-font-xl{--drp-font-scale: 2}.drp-date-picker.drp-spacing-xs{--drp-spacing-scale: .6}.drp-date-picker.drp-spacing-sm{--drp-spacing-scale: .8}.drp-date-picker.drp-spacing-md{--drp-spacing-scale: 1}.drp-date-picker.drp-spacing-lg{--drp-spacing-scale: 1.5}.drp-date-picker.drp-spacing-xl{--drp-spacing-scale: 2}.drp-date-picker.drp-cell-xs{--drp-cell-scale: .6}.drp-date-picker.drp-cell-sm{--drp-cell-scale: .8}.drp-date-picker.drp-cell-md{--drp-cell-scale: 1}.drp-date-picker.drp-cell-lg{--drp-cell-scale: 1.5}.drp-date-picker.drp-cell-xl{--drp-cell-scale: 2}@media (max-width: 1200px){.drp-responsive.drp-font-xl{--drp-font-scale: 1.5}}@media (max-width: 768px){.drp-responsive.drp-font-xl{--drp-font-scale: 1}}@media (max-width: 1200px){.drp-responsive.drp-font-lg{--drp-font-scale: 1}}@media (max-width: 768px){.drp-responsive.drp-font-lg{--drp-font-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-font-md{--drp-font-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-font-sm{--drp-font-scale: .6}}@media (max-width: 1200px){.drp-responsive.drp-spacing-xl{--drp-spacing-scale: 1.5}}@media (max-width: 768px){.drp-responsive.drp-spacing-xl{--drp-spacing-scale: 1}}@media (max-width: 1200px){.drp-responsive.drp-spacing-lg{--drp-spacing-scale: 1}}@media (max-width: 768px){.drp-responsive.drp-spacing-lg{--drp-spacing-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-spacing-md{--drp-spacing-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-spacing-sm{--drp-spacing-scale: .6}}@media (max-width: 1200px){.drp-responsive.drp-cell-xl{--drp-cell-scale: 1.5}}@media (max-width: 768px){.drp-responsive.drp-cell-xl{--drp-cell-scale: 1}}@media (max-width: 1200px){.drp-responsive.drp-cell-lg{--drp-cell-scale: 1}}@media (max-width: 768px){.drp-responsive.drp-cell-lg{--drp-cell-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-cell-md{--drp-cell-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-cell-sm{--drp-cell-scale: .6}}.drp-date-picker--xs{--drp-font-scale: .6;--drp-spacing-scale: .6;--drp-cell-scale: .6;min-width:168px}.drp-date-picker--sm{--drp-font-scale: .8;--drp-spacing-scale: .8;--drp-cell-scale: .8;min-width:224px}.drp-date-picker--lg{--drp-font-scale: 1.5;--drp-spacing-scale: 1.5;--drp-cell-scale: 1.5;min-width:420px}.drp-date-picker--xl{--drp-font-scale: 2;--drp-spacing-scale: 2;--drp-cell-scale: 2;min-width:560px}.drp-date-picker.drp-transitions-enabled .drp-date-picker__badge-cell{transition:transform var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker.drp-transitions-enabled .drp-date-picker__nav,.drp-date-picker.drp-transitions-enabled .drp-date-picker__action-btn{transition:background-color var(--drp-transition-fast) var(--drp-easing-snappy),border-color var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker.drp-transitions-enabled .drp-date-picker__month-year,.drp-date-picker.drp-transitions-enabled .drp-date-picker__rolling-item{transition:background-color var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker--inline{position:static;display:block;box-shadow:none}
|
|
1
|
+
@charset "UTF-8";:host,:root{--drp-rem: 10px;--drp-font-scale: 1;--drp-spacing-scale: 1;--drp-cell-scale: 1;--drp-spacing-xs-base: calc(.4 * var(--drp-rem));--drp-spacing-sm-base: calc(.8 * var(--drp-rem));--drp-spacing-md-base: calc(1.6 * var(--drp-rem));--drp-spacing-lg-base: calc(2.4 * var(--drp-rem));--drp-spacing-xl-base: calc(3.2 * var(--drp-rem));--drp-spacing-xs: calc(var(--drp-spacing-xs-base) * var(--drp-spacing-scale));--drp-spacing-sm: calc(var(--drp-spacing-sm-base) * var(--drp-spacing-scale));--drp-spacing-md: calc(var(--drp-spacing-md-base) * var(--drp-spacing-scale));--drp-spacing-lg: calc(var(--drp-spacing-lg-base) * var(--drp-spacing-scale));--drp-spacing-xl: calc(var(--drp-spacing-xl-base) * var(--drp-spacing-scale));--drp-font-size-2xs-base: calc(1 * var(--drp-rem));--drp-font-size-xs-base: calc(1.2 * var(--drp-rem));--drp-font-size-sm-base: calc(1.4 * var(--drp-rem));--drp-font-size-base-base: calc(1.6 * var(--drp-rem));--drp-font-size-lg-base: calc(1.8 * var(--drp-rem));--drp-font-size-xl-base: calc(2 * var(--drp-rem));--drp-font-size-2xl-base: calc(2.4 * var(--drp-rem));--drp-font-weight-medium: 500;--drp-font-weight-semibold: 600;--drp-card-bg: #ffffff;--drp-border-color: #e5e7eb;--drp-primary-bg: #f3f4f6;--drp-primary-bg-hover: #e5e7eb;--drp-accent-color: #3b82f6;--drp-accent-color-hover: #2563eb;--drp-text-primary: #111827;--drp-text-secondary: #6b7280;--drp-accent-text-color: #ffffff;--drp-button-text-color: #ffffff;--drp-tooltip-bg: #111827;--drp-tooltip-color: #ffffff;--drp-border-width-base: 1px;--drp-border-radius: calc(.6 * var(--drp-rem));--drp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--drp-transition-fast: .15s;--drp-easing-snappy: cubic-bezier(.4, 0, .2, 1);--drp-input-padding-h: calc(1.2 * var(--drp-rem));--drp-grid-columns: 3;--drp-grid-rows: 2;--drp-input-background: var(--drp-card-bg);--drp-input-color: var(--drp-text-primary);--drp-input-border-color: var(--drp-border-color);--drp-input-border-color-hover: var(--drp-accent-color);--drp-input-border-color-focus: var(--drp-accent-color);--drp-input-placeholder-color: var(--drp-text-secondary);--drp-input-disabled-background: var(--drp-primary-bg);--drp-input-focus-shadow-color: rgba(59, 130, 246, .1);--drp-input-focus-shadow-size: 3px;--drp-input-icon-opacity: .6;--drp-input-size-xs-font: calc(1.2 * var(--drp-rem));--drp-input-size-xs-padding-v: calc(.4 * var(--drp-rem));--drp-input-size-xs-padding-h: calc(.4 * var(--drp-rem));--drp-input-size-xs-height: calc(3.1 * var(--drp-rem));--drp-input-size-xs-icon-size: .75em;--drp-input-size-sm-font: calc(1.4 * var(--drp-rem));--drp-input-size-sm-padding-v: calc(.4 * var(--drp-rem));--drp-input-size-sm-padding-h: calc(.8 * var(--drp-rem));--drp-input-size-sm-height: calc(3.3 * var(--drp-rem));--drp-input-size-sm-icon-size: .875em;--drp-input-size-md-font: calc(1.6 * var(--drp-rem));--drp-input-size-md-padding-v: calc(.8 * var(--drp-rem));--drp-input-size-md-padding-h: calc(1.2 * var(--drp-rem));--drp-input-size-md-height: calc(3.5 * var(--drp-rem));--drp-input-size-md-icon-size: 1em;--drp-input-size-lg-font: calc(1.8 * var(--drp-rem));--drp-input-size-lg-padding-v: calc(1.6 * var(--drp-rem));--drp-input-size-lg-padding-h: calc(1.6 * var(--drp-rem));--drp-input-size-lg-height: calc(3.8 * var(--drp-rem));--drp-input-size-lg-icon-size: 1.125em;--drp-input-size-xl-font: calc(2 * var(--drp-rem));--drp-input-size-xl-padding-v: calc(1.6 * var(--drp-rem));--drp-input-size-xl-padding-h: calc(2.4 * var(--drp-rem));--drp-input-size-xl-height: calc(4.1 * var(--drp-rem));--drp-input-size-xl-icon-size: 1.25em;--drp-header-text-color: var(--drp-text-primary);--drp-header-bg-hover: var(--drp-primary-bg);--drp-header-bg-active: var(--drp-primary-bg-hover);--drp-nav-text-color: var(--drp-text-primary);--drp-nav-border-color: var(--drp-border-color);--drp-nav-bg-hover: var(--drp-primary-bg);--drp-nav-bg-active: var(--drp-primary-bg-hover);--drp-nav-border-hover: var(--drp-accent-color);--drp-rolling-bg: var(--drp-primary-bg);--drp-rolling-border-color: var(--drp-border-color);--drp-rolling-scrollbar-thumb: var(--drp-border-color);--drp-rolling-scrollbar-thumb-hover: var(--drp-accent-color);--drp-rolling-item-bg-hover: var(--drp-primary-bg);--drp-rolling-item-bg-selected: var(--drp-accent-color);--drp-rolling-item-color-selected: var(--drp-accent-text-color);--drp-rolling-item-bg-selected-hover: var(--drp-accent-color-hover);--drp-weekday-color: var(--drp-text-secondary);--drp-day-text-color: var(--drp-text-primary);--drp-day-bg-hover: var(--drp-primary-bg);--drp-day-border-hover: var(--drp-accent-color);--drp-day-today-border: var(--drp-accent-color);--drp-day-selected-bg: var(--drp-accent-color);--drp-day-selected-color: var(--drp-accent-text-color);--drp-day-selected-bg-hover: var(--drp-accent-color-hover);--drp-day-focused-outline: var(--drp-accent-color);--drp-day-disabled-color: var(--drp-text-secondary);--drp-day-other-month-color: var(--drp-text-secondary);--drp-day-range-bg: var(--drp-accent-color);--drp-day-range-color: var(--drp-accent-text-color);--drp-summary-text-color: var(--drp-text-secondary);--drp-summary-border-color: var(--drp-border-color);--drp-summary-count-color: var(--drp-accent-color);--drp-button-border-color: var(--drp-border-color);--drp-button-bg-hover: var(--drp-primary-bg);--drp-button-border-hover: var(--drp-accent-color);--drp-button-today-color: var(--drp-accent-color);--drp-button-clear-color: var(--drp-text-secondary);--drp-button-cancel-color: var(--drp-text-secondary);--drp-button-apply-bg: var(--drp-accent-color);--drp-button-apply-color: var(--drp-button-text-color);--drp-button-apply-border: var(--drp-accent-color);--drp-button-apply-bg-hover: var(--drp-accent-color-hover);--drp-badge-number-bg: var(--drp-accent-color);--drp-badge-number-color: var(--drp-accent-text-color);--drp-badge-count-bg: #ef4444;--drp-badge-count-color: #ffffff;--drp-badge-text-bg: var(--drp-text-secondary);--drp-badge-text-color: #ffffff;--drp-unified-range-text-color: var(--drp-text-primary);--drp-unified-range-bg-hover: var(--drp-primary-bg);--drp-unified-range-bg-active: var(--drp-primary-bg-hover);--drp-unified-month-color: var(--drp-text-secondary);--drp-unified-rolling-disabled-color: var(--drp-text-secondary)}.drp-input{width:100%;font-family:inherit;font-size:var(--drp-input-size-md-font);line-height:1.5;color:var(--drp-input-color);background-color:var(--drp-input-background);border:var(--drp-border-width-base) solid var(--drp-input-border-color);border-radius:var(--drp-border-radius);padding:var(--drp-input-size-md-padding-v) var(--drp-input-size-md-padding-h);padding-right:calc(var(--drp-input-size-md-padding-h) * 2.5);height:var(--drp-input-size-md-height);box-sizing:border-box;transition:border-color var(--drp-transition-fast) var(--drp-easing-snappy),box-shadow var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-input::placeholder{color:var(--drp-input-placeholder-color);opacity:.6}.drp-input:hover:not(:disabled){border-color:var(--drp-input-border-color-hover)}.drp-input:focus{outline:none;border-color:var(--drp-input-border-color-focus);box-shadow:0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color)}.drp-input:disabled{opacity:.6;cursor:not-allowed;background-color:var(--drp-input-disabled-background)}.drp-input.drp-input--xs{font-size:var(--drp-input-size-xs-font);padding:var(--drp-input-size-xs-padding-v) var(--drp-input-size-xs-padding-h);padding-right:calc(var(--drp-input-size-xs-padding-h) * 2.5);height:var(--drp-input-size-xs-height)}.drp-input.drp-input--sm{font-size:var(--drp-input-size-sm-font);padding:var(--drp-input-size-sm-padding-v) var(--drp-input-size-sm-padding-h);padding-right:calc(var(--drp-input-size-sm-padding-h) * 2.5);height:var(--drp-input-size-sm-height)}.drp-input.drp-input--lg{font-size:var(--drp-input-size-lg-font);padding:var(--drp-input-size-lg-padding-v) var(--drp-input-size-lg-padding-h);padding-right:calc(var(--drp-input-size-lg-padding-h) * 2.5);height:var(--drp-input-size-lg-height)}.drp-input.drp-input--xl{font-size:var(--drp-input-size-xl-font);padding:var(--drp-input-size-xl-padding-v) var(--drp-input-size-xl-padding-h);padding-right:calc(var(--drp-input-size-xl-padding-h) * 2.5);height:var(--drp-input-size-xl-height)}.drp-date-picker-input{position:relative;cursor:pointer;display:inline-block;width:100%}.drp-date-picker-input:after{content:"📅";position:absolute;right:var(--drp-input-size-md-padding-h);top:50%;transform:translateY(-50%);pointer-events:none;opacity:var(--drp-input-icon-opacity);font-size:var(--drp-input-size-md-icon-size)}.drp-date-picker-input.drp-date-picker-input--xs:after{right:var(--drp-input-size-xs-padding-h);font-size:var(--drp-input-size-xs-icon-size)}.drp-date-picker-input.drp-date-picker-input--sm:after{right:var(--drp-input-size-sm-padding-h);font-size:var(--drp-input-size-sm-icon-size)}.drp-date-picker-input.drp-date-picker-input--lg:after{right:var(--drp-input-size-lg-padding-h);font-size:var(--drp-input-size-lg-icon-size)}.drp-date-picker-input.drp-date-picker-input--xl:after{right:var(--drp-input-size-xl-padding-h);font-size:var(--drp-input-size-xl-icon-size)}.drp-date-picker{position:absolute;z-index:9500;background:var(--drp-card-bg);border:var(--drp-border-width-base) solid var(--drp-border-color);border-radius:var(--drp-border-radius);box-shadow:var(--drp-shadow-xl);padding:var(--drp-spacing-md);min-width:280px;max-width:calc(100vw - 2rem);box-sizing:border-box;-webkit-user-select:none;user-select:none;--drp-font-size-2xs: calc(var(--drp-font-size-2xs-base) * var(--drp-font-scale));--drp-font-size-xs: calc(var(--drp-font-size-xs-base) * var(--drp-font-scale));--drp-font-size-sm: calc(var(--drp-font-size-sm-base) * var(--drp-font-scale));--drp-font-size-base: calc(var(--drp-font-size-base-base) * var(--drp-font-scale));--drp-font-size-lg: calc(var(--drp-font-size-lg-base) * var(--drp-font-scale));--drp-font-size-xl: calc(var(--drp-font-size-xl-base) * var(--drp-font-scale));--drp-font-size-2xl: calc(var(--drp-font-size-2xl-base) * var(--drp-font-scale))}.drp-date-picker:not(.drp-date-picker--visible){display:none}.drp-date-picker--inline{position:relative!important;display:block!important;z-index:auto;min-width:0;max-width:100%;width:fit-content;box-sizing:border-box}.drp-date-picker__months{display:flex;gap:var(--drp-spacing-lg)}.drp-date-picker--inline .drp-date-picker__months{flex-wrap:wrap}.drp-date-picker__months--grid{display:grid;grid-template-columns:repeat(var(--drp-grid-columns, 3),minmax(0,1fr));grid-template-rows:repeat(var(--drp-grid-rows, 2),auto);gap:var(--drp-spacing-lg);width:100%}@media (max-width: 1200px){.drp-date-picker__months--grid{grid-template-columns:repeat(min(var(--drp-grid-columns, 3),3),minmax(0,1fr))}}@media (max-width: 768px){.drp-date-picker__months--grid{grid-template-columns:repeat(min(var(--drp-grid-columns, 3),2),minmax(0,1fr))}}@media (max-width: 480px){.drp-date-picker__months--grid{grid-template-columns:minmax(0,1fr)}}.drp-date-picker__month{flex:1;min-width:calc(280px * var(--drp-cell-scale));display:flex;flex-direction:column}.drp-date-picker--inline .drp-date-picker__month{min-width:calc(250px * var(--drp-cell-scale))}.drp-date-picker__months--grid .drp-date-picker__month{min-width:0;width:100%}.drp-date-picker__calendar-container{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}.drp-date-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--drp-spacing-md);gap:var(--drp-spacing-sm)}.drp-date-picker__header--static{justify-content:center}.drp-date-picker__header--static .drp-date-picker__month-year{cursor:default}.drp-date-picker__header--static .drp-date-picker__month-year:hover{background-color:transparent}.drp-date-picker__month-year{flex:1;text-align:center;font-weight:var(--drp-font-weight-semibold);font-size:var(--drp-font-size-base);color:var(--drp-header-text-color);padding:var(--drp-spacing-sm) var(--drp-spacing-md);border-radius:var(--drp-border-radius);cursor:pointer}.drp-date-picker__month-year:hover{background-color:var(--drp-header-bg-hover)}.drp-date-picker__month-year:active{background-color:var(--drp-header-bg-active)}.drp-date-picker__nav{width:calc(calc(3.2 * var(--drp-rem)) * var(--drp-cell-scale));height:calc(calc(3.2 * var(--drp-rem)) * var(--drp-cell-scale));display:flex;align-items:center;justify-content:center;border:var(--drp-border-width-base) solid var(--drp-nav-border-color);border-radius:var(--drp-border-radius);background:transparent;cursor:pointer;font-size:var(--drp-font-size-lg);color:var(--drp-nav-text-color)}.drp-date-picker__nav:hover{background-color:var(--drp-nav-bg-hover);border-color:var(--drp-nav-border-hover)}.drp-date-picker__nav:active{background-color:var(--drp-nav-bg-active)}.drp-date-picker__nav--disabled,.drp-date-picker__nav[disabled]{opacity:.6;cursor:not-allowed;pointer-events:none}.drp-date-picker__nav--disabled:hover,.drp-date-picker__nav[disabled]:hover{background-color:transparent;border-color:var(--drp-nav-border-color)}.drp-date-picker__nav--prev:before{content:"‹"}.drp-date-picker__nav--next:before{content:"›"}.drp-date-picker__rolling-selector{position:absolute;top:0;right:0;bottom:0;left:0;display:none;z-index:10}.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible{display:flex}.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible~.drp-date-picker__weekdays,.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible~.drp-date-picker__days{visibility:hidden}.drp-date-picker__rolling-selector{gap:var(--drp-spacing-xs)}.drp-date-picker__rolling-list{flex:1;min-width:0;height:100%;overflow-y:auto;border:var(--drp-border-width-base) solid var(--drp-rolling-border-color);border-radius:var(--drp-border-radius);display:flex;flex-direction:column;scroll-behavior:smooth}.drp-date-picker__rolling-list::-webkit-scrollbar{width:6px}.drp-date-picker__rolling-list::-webkit-scrollbar-track{background:var(--drp-rolling-bg)}.drp-date-picker__rolling-list::-webkit-scrollbar-thumb{background:var(--drp-rolling-scrollbar-thumb);border-radius:3px}.drp-date-picker__rolling-list::-webkit-scrollbar-thumb:hover{background:var(--drp-rolling-scrollbar-thumb-hover)}.drp-date-picker__rolling-item{padding:calc(.4 * var(--drp-rem)) calc(1.6 * var(--drp-rem));cursor:pointer;font-size:calc(1.4 * var(--drp-rem));min-height:calc(calc(3.2 * var(--drp-rem)) * var(--drp-cell-scale));flex-shrink:0;display:flex;align-items:center;justify-content:var(--drp-rolling-item-justify-content, center)}.drp-date-picker__rolling-item:hover{background-color:var(--drp-rolling-item-bg-hover)}.drp-date-picker__rolling-item--selected{background-color:var(--drp-rolling-item-bg-selected);color:var(--drp-rolling-item-color-selected);font-weight:600}.drp-date-picker__rolling-item--selected:hover{background-color:var(--drp-rolling-item-bg-selected-hover)}.drp-date-picker__rolling-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;min-width:0}.drp-date-picker__unified-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--drp-spacing-lg);gap:var(--drp-spacing-sm);padding:0 var(--drp-spacing-sm)}.drp-date-picker__unified-range{flex:1;text-align:center;font-weight:var(--drp-font-weight-semibold);font-size:var(--drp-font-size-lg);color:var(--drp-unified-range-text-color);padding:var(--drp-spacing-sm) var(--drp-spacing-md);border-radius:var(--drp-border-radius);cursor:pointer}.drp-date-picker__unified-range:hover{background-color:var(--drp-unified-range-bg-hover)}.drp-date-picker__unified-range:active{background-color:var(--drp-unified-range-bg-active)}.drp-date-picker__unified-range--static{cursor:default!important}.drp-date-picker__unified-range--static:hover,.drp-date-picker__unified-range--static:active{background-color:transparent}.drp-date-picker__unified-rolling-selector{position:absolute;top:calc(var(--drp-spacing-lg) + var(--drp-spacing-lg) * 2);left:50%;transform:translate(-50%);width:min(90%,450px);height:350px;max-height:350px;display:none;z-index:100;background:var(--drp-card-bg);gap:var(--drp-spacing-xs)}.drp-date-picker__unified-rolling-selector--visible{display:flex}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list{flex:1;min-width:0;height:100%;overflow-y:auto;border:var(--drp-border-width-base) solid var(--drp-rolling-border-color);border-radius:var(--drp-border-radius);display:flex;flex-direction:column;scroll-behavior:smooth}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar{width:6px}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-track{background:var(--drp-rolling-bg)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-thumb{background:var(--drp-rolling-scrollbar-thumb);border-radius:3px}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-thumb:hover{background:var(--drp-rolling-scrollbar-thumb-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item{padding:calc(.4 * var(--drp-rem)) calc(1.6 * var(--drp-rem));cursor:pointer;font-size:calc(1.4 * var(--drp-rem));min-height:calc(calc(3.2 * var(--drp-rem)) * var(--drp-cell-scale));flex-shrink:0;display:flex;align-items:center;justify-content:var(--drp-rolling-item-justify-content, center)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item:hover{background-color:var(--drp-rolling-item-bg-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--selected{background-color:var(--drp-rolling-item-bg-selected);color:var(--drp-rolling-item-color-selected);font-weight:600}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--selected:hover{background-color:var(--drp-rolling-item-bg-selected-hover)}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--disabled{color:var(--drp-unified-rolling-disabled-color);opacity:.4;cursor:not-allowed}.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;min-width:0}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__nav{display:none}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__month-year{cursor:default;font-size:var(--drp-font-size-base);font-weight:var(--drp-font-weight-normal);color:var(--drp-unified-month-color)}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__month-year:hover{background-color:transparent}.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__rolling-selector{display:none!important}.drp-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-sm)}.drp-date-picker__weekday{text-align:center;font-size:var(--drp-font-size-xs);font-weight:var(--drp-font-weight-semibold);color:var(--drp-weekday-color);padding:var(--drp-spacing-xs);text-transform:uppercase}.drp-date-picker__days{display:flex;flex-direction:column;gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-md)}.drp-date-picker__date-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs)}.drp-date-picker__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-sm);color:var(--drp-day-text-color);border-radius:var(--drp-border-radius);cursor:pointer;border:calc(2px * var(--drp-cell-scale)) solid transparent;position:relative}.drp-date-picker__day:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month){background-color:var(--drp-day-bg-hover);border-color:var(--drp-day-border-hover)}.drp-date-picker__day--today{border-color:var(--drp-day-today-border);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__day--selected{background-color:var(--drp-day-selected-bg);color:var(--drp-day-selected-color);font-weight:var(--drp-font-weight-semibold)}.drp-date-picker__day--selected:hover{background-color:var(--drp-day-selected-bg-hover)}.drp-date-picker__day--focused{outline:calc(2px * var(--drp-cell-scale)) solid var(--drp-day-focused-outline);outline-offset:calc(2px * var(--drp-cell-scale))}.drp-date-picker__day--disabled{color:var(--drp-day-disabled-color);opacity:.6;cursor:not-allowed;position:relative}.drp-date-picker__day--disabled:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 6px);border-radius:var(--drp-border-radius);pointer-events:none}.drp-date-picker__day--disabled:hover{background-color:transparent;border-color:transparent}.drp-date-picker__day--other-month{color:var(--drp-day-other-month-color);opacity:.5}.drp-date-picker__day--other-month.drp-date-picker__day--range-start,.drp-date-picker__day--other-month.drp-date-picker__day--range-end,.drp-date-picker__day--other-month.drp-date-picker__day--in-range,.drp-date-picker__day--other-month.drp-date-picker__day--drag-preview{opacity:1}.drp-date-picker__day--range-start,.drp-date-picker__day--range-end{background-color:var(--drp-day-range-bg);color:var(--drp-day-range-color);font-weight:var(--drp-font-weight-semibold);cursor:grab;-webkit-user-select:none;user-select:none}.drp-date-picker__day--range-start:active,.drp-date-picker__day--range-end:active{cursor:grabbing}.drp-date-picker__day--in-range{background-color:color-mix(in srgb,var(--drp-day-range-bg) 15%,transparent)}.drp-date-picker__day--in-range:hover{background-color:color-mix(in srgb,var(--drp-day-range-bg) 25%,transparent)}.drp-date-picker__day--dragging{cursor:grabbing!important;opacity:.7;transform:scale(1.1);transition:transform var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker__day--drag-preview{background-color:color-mix(in srgb,var(--drp-day-range-bg) 30%,transparent);border:calc(2px * var(--drp-cell-scale)) dashed var(--drp-day-range-bg)}.drp-date-picker__day--drag-preview.drp-date-picker__day--range-start,.drp-date-picker__day--drag-preview.drp-date-picker__day--range-end{background-color:color-mix(in srgb,var(--drp-day-range-bg) 60%,transparent);color:var(--drp-day-range-color)}.drp-date-picker__day--drag-invalid{background-color:color-mix(in srgb,#ef4444 20%,transparent)!important;border-color:#ef4444!important;border-style:dashed!important}.drp-date-picker__day.holiday{background-color:color-mix(in srgb,#ef4444 10%,transparent)}.drp-date-picker__day.holiday:hover:not(.drp-date-picker__day--disabled){background-color:color-mix(in srgb,#ef4444 20%,transparent)}.drp-date-picker__day.event{background-color:color-mix(in srgb,#10b981 10%,transparent)}.drp-date-picker__day.event:hover:not(.drp-date-picker__day--disabled){background-color:color-mix(in srgb,#10b981 20%,transparent)}.drp-date-picker__rolling-item--disabled{color:var(--drp-unified-rolling-disabled-color);opacity:.4;cursor:not-allowed;pointer-events:none;text-decoration:line-through}.drp-date-picker__rolling-item--disabled:hover{background-color:transparent}.drp-date-picker__badge-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--drp-spacing-xs);margin-bottom:var(--drp-spacing-xs);max-height:calc(calc(1.6 * var(--drp-rem)) * var(--drp-cell-scale));min-height:calc(calc(1.6 * var(--drp-rem)) * var(--drp-cell-scale))}.drp-date-picker__badge-cell{display:flex;align-items:center;justify-content:center;font-size:var(--drp-font-size-2xs);padding:calc(1px * var(--drp-cell-scale)) calc(2px * var(--drp-cell-scale));border-radius:2px;cursor:pointer;height:100%;max-height:calc(calc(1.6 * var(--drp-rem)) * var(--drp-cell-scale))}.drp-date-picker__badge-cell:empty{visibility:hidden}.drp-date-picker__badge-cell:hover:not(:empty){transform:scale(1.05)}.drp-date-picker__badge-cell.badge-number{background-color:var(--drp-badge-number-bg);color:var(--drp-badge-number-color);font-size:calc(1.12 * var(--drp-rem));font-weight:600}.drp-date-picker__badge-cell.badge-count{background-color:var(--drp-badge-count-bg);color:var(--drp-badge-count-color);font-size:calc(1.12 * var(--drp-rem));font-weight:700}.drp-date-picker__badge-cell.badge-text{background-color:var(--drp-badge-text-bg);color:var(--drp-badge-text-color);font-size:calc(1.04 * var(--drp-rem));font-weight:700;text-transform:uppercase}.drp-date-picker__summary{text-align:center;padding:var(--drp-spacing-md);border-top:var(--drp-border-width-base) solid var(--drp-summary-border-color);font-size:var(--drp-font-size-sm);color:var(--drp-summary-text-color)}.drp-date-picker__summary--visible{display:block}.drp-date-picker__summary--hidden{display:none}.drp-date-picker__summary-count{font-weight:var(--drp-font-weight-semibold);color:var(--drp-summary-count-color);font-size:var(--drp-font-size-base)}.drp-date-picker__actions{display:flex;gap:var(--drp-spacing-sm);justify-content:space-between;padding-top:var(--drp-spacing-sm);border-top:var(--drp-border-width-base) solid var(--drp-summary-border-color)}.drp-date-picker__button{flex:1;padding:var(--drp-spacing-sm) var(--drp-spacing-md);border:var(--drp-border-width-base) solid var(--drp-button-border-color);border-radius:var(--drp-border-radius);background:transparent;cursor:pointer;font-size:var(--drp-font-size-sm);font-weight:var(--drp-font-weight-medium)}.drp-date-picker__button:hover{background-color:var(--drp-button-bg-hover);border-color:var(--drp-button-border-hover)}.drp-date-picker__button:disabled,.drp-date-picker__button[disabled]{opacity:var(--drp-disabled-opacity, .6);cursor:not-allowed;pointer-events:none}.drp-date-picker__button:disabled:hover,.drp-date-picker__button[disabled]:hover{background-color:transparent;border-color:var(--drp-button-border-color)}.drp-date-picker__button--today{color:var(--drp-button-today-color)}.drp-date-picker__button--clear{color:var(--drp-button-clear-color)}.drp-date-picker__button--apply{background-color:var(--drp-button-apply-bg);color:var(--drp-button-apply-color);border-color:var(--drp-button-apply-border)}.drp-date-picker__button--apply:hover{background-color:var(--drp-button-apply-bg-hover)}.drp-date-picker__button--cancel{color:var(--drp-button-cancel-color)}.drp-date-picker__tooltip{position:absolute;z-index:9999;background-color:var(--drp-tooltip-bg);color:var(--drp-tooltip-color);padding:var(--drp-spacing-xs) var(--drp-spacing-sm);border-radius:var(--drp-border-radius);font-size:var(--drp-font-size-xs);line-height:1.4;max-width:200px;word-wrap:break-word;pointer-events:none;opacity:0;transition:opacity var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker__tooltip--visible{opacity:1}.drp-date-picker__tooltip-arrow{position:absolute;background-color:var(--drp-tooltip-bg);width:8px;height:8px;transform:rotate(45deg)}.drp-date-picker__loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fffc;display:flex;align-items:center;justify-content:center;z-index:9500;border-radius:calc(.6 * var(--drp-rem))}.drp-date-picker__loading-spinner{width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:drp-spin .8s linear infinite}@keyframes drp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drp-date-picker.drp-font-xs{--drp-font-scale: .6}.drp-date-picker.drp-font-sm{--drp-font-scale: .8}.drp-date-picker.drp-font-md{--drp-font-scale: 1}.drp-date-picker.drp-font-lg{--drp-font-scale: 1.5}.drp-date-picker.drp-font-xl{--drp-font-scale: 2}.drp-date-picker.drp-spacing-xs{--drp-spacing-scale: .6}.drp-date-picker.drp-spacing-sm{--drp-spacing-scale: .8}.drp-date-picker.drp-spacing-md{--drp-spacing-scale: 1}.drp-date-picker.drp-spacing-lg{--drp-spacing-scale: 1.5}.drp-date-picker.drp-spacing-xl{--drp-spacing-scale: 2}.drp-date-picker.drp-cell-xs{--drp-cell-scale: .6}.drp-date-picker.drp-cell-sm{--drp-cell-scale: .8}.drp-date-picker.drp-cell-md{--drp-cell-scale: 1}.drp-date-picker.drp-cell-lg{--drp-cell-scale: 1.5}.drp-date-picker.drp-cell-xl{--drp-cell-scale: 2}@media (max-width: 1200px){.drp-responsive.drp-font-xl{--drp-font-scale: 1.5}}@media (max-width: 768px){.drp-responsive.drp-font-xl{--drp-font-scale: 1}}@media (max-width: 1200px){.drp-responsive.drp-font-lg{--drp-font-scale: 1}}@media (max-width: 768px){.drp-responsive.drp-font-lg{--drp-font-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-font-md{--drp-font-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-font-sm{--drp-font-scale: .6}}@media (max-width: 1200px){.drp-responsive.drp-spacing-xl{--drp-spacing-scale: 1.5}}@media (max-width: 768px){.drp-responsive.drp-spacing-xl{--drp-spacing-scale: 1}}@media (max-width: 1200px){.drp-responsive.drp-spacing-lg{--drp-spacing-scale: 1}}@media (max-width: 768px){.drp-responsive.drp-spacing-lg{--drp-spacing-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-spacing-md{--drp-spacing-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-spacing-sm{--drp-spacing-scale: .6}}@media (max-width: 1200px){.drp-responsive.drp-cell-xl{--drp-cell-scale: 1.5}}@media (max-width: 768px){.drp-responsive.drp-cell-xl{--drp-cell-scale: 1}}@media (max-width: 1200px){.drp-responsive.drp-cell-lg{--drp-cell-scale: 1}}@media (max-width: 768px){.drp-responsive.drp-cell-lg{--drp-cell-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-cell-md{--drp-cell-scale: .8}}@media (max-width: 768px){.drp-responsive.drp-cell-sm{--drp-cell-scale: .6}}.drp-date-picker--xs{--drp-font-scale: .6;--drp-spacing-scale: .6;--drp-cell-scale: .6;min-width:168px}.drp-date-picker--sm{--drp-font-scale: .8;--drp-spacing-scale: .8;--drp-cell-scale: .8;min-width:224px}.drp-date-picker--lg{--drp-font-scale: 1.5;--drp-spacing-scale: 1.5;--drp-cell-scale: 1.5;min-width:420px}.drp-date-picker--xl{--drp-font-scale: 2;--drp-spacing-scale: 2;--drp-cell-scale: 2;min-width:560px}.drp-date-picker.drp-transitions-enabled .drp-date-picker__badge-cell{transition:transform var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker.drp-transitions-enabled .drp-date-picker__nav,.drp-date-picker.drp-transitions-enabled .drp-date-picker__action-btn{transition:background-color var(--drp-transition-fast) var(--drp-easing-snappy),border-color var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker.drp-transitions-enabled .drp-date-picker__month-year,.drp-date-picker.drp-transitions-enabled .drp-date-picker__rolling-item{transition:background-color var(--drp-transition-fast) var(--drp-easing-snappy)}.drp-date-picker--inline{position:static;display:block;box-shadow:none}
|