mango-ui-kit 1.0.0

package/dist/components/rating/rating.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Rating } from './rating';
+declare const meta: Meta<typeof Rating>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Readonly: Story;
+export declare const LargeStars: Story;
+export declare const TenScale: Story;

package/dist/components/rating/rating.types.d.ts

@@ -0,0 +1,10 @@
+export interface RatingProps {
+    value?: number;
+    max?: number;
+    onChange?: (value: number) => void;
+    readOnly?: boolean;
+    size?: number;
+    label?: string;
+    count?: number;
+    className?: string;
+}

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './sidebar';
+export type * from './sidebar.types';

package/dist/components/sidebar/sidebar.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { SidebarProps } from './sidebar.types';
+export declare const Sidebar: React.FC<SidebarProps>;

package/dist/components/sidebar/sidebar.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Sidebar } from './sidebar';
+declare const meta: Meta<typeof Sidebar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithFooter: Story;

package/dist/components/sidebar/sidebar.types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface SidebarLink {
+    icon: ReactNode;
+    label: string;
+    path?: string;
+    badge?: number | string;
+    active?: boolean;
+    onClick?: () => void;
+}
+export interface SidebarSection {
+    title: string;
+    links: SidebarLink[];
+}
+export interface SidebarProps {
+    sections?: SidebarSection[];
+    isOpen?: boolean;
+    onClose?: () => void;
+    logo?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+}

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './skeleton';
+export type * from './skeleton.types';

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { SkeletonProps } from './skeleton.types';
+export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/skeleton/skeleton.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Skeleton } from './skeleton';
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Text: Story;
+export declare const Circular: Story;
+export declare const Rectangular: Story;
+export declare const Rounded: Story;
+export declare const Multiple: Story;
+export declare const CardSkeleton: Story;

package/dist/components/skeleton/skeleton.types.d.ts

@@ -0,0 +1,11 @@
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+export interface SkeletonProps {
+    variant?: SkeletonVariant;
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string | number;
+    className?: string;
+    count?: number;
+    animate?: boolean;
+    shimmer?: boolean;
+}

package/dist/components/spinner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './spinner';
+export type * from './spinner.types';

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { SpinnerProps } from './spinner.types';
+export declare const Spinner: React.FC<SpinnerProps>;

package/dist/components/spinner/spinner.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Spinner } from './spinner';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Large: Story;
+export declare const CustomColor: Story;
+export declare const Sizes: Story;

package/dist/components/spinner/spinner.types.d.ts

@@ -0,0 +1,6 @@
+export interface SpinnerProps {
+    size?: number;
+    color?: string;
+    thickness?: number;
+    className?: string;
+}

package/dist/components/stat-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './stat-card';
+export type * from './stat-card.types';

package/dist/components/stat-card/stat-card.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { StatCardProps } from './stat-card.types';
+export declare const StatCard: React.FC<StatCardProps>;

package/dist/components/stat-card/stat-card.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { StatCard } from './stat-card';
+declare const meta: Meta<typeof StatCard>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Negative: Story;
+export declare const WithVariant: Story;
+export declare const Grid: Story;

package/dist/components/stat-card/stat-card.types.d.ts

@@ -0,0 +1,10 @@
+import { ComponentType } from 'react';
+export interface StatCardProps {
+    label: string;
+    value: string | number;
+    icon?: ComponentType<any>;
+    trend?: number;
+    trendLabel?: string;
+    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    className?: string;
+}

package/dist/components/table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './table';
+export type * from './table.types';

package/dist/components/table/table.d.ts

@@ -0,0 +1,5 @@
+import { TableProps } from './table.types';
+export declare function Table<T extends Record<string, any>>({ columns, data, className, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Table {
+    var displayName: string;
+}

package/dist/components/table/table.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Table } from './table';
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const Clickable: Story;

package/dist/components/table/table.types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface TableColumn<T = Record<string, unknown>> {
+    header: string;
+    accessor: keyof T;
+    width?: string;
+    render?: (value: unknown, row: T) => ReactNode;
+}
+export interface TableProps<T = Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: T[];
+    onActionClick?: (row: T) => void;
+    className?: string;
+    emptyText?: string;
+}

package/dist/components/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tabs';
+export type * from './tabs.types';

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TabsProps } from './tabs.types';
+export declare const Tabs: React.FC<TabsProps>;

package/dist/components/tabs/tabs.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Tabs } from './tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const NoIcons: Story;

package/dist/components/tabs/tabs.types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode, ComponentType } from 'react';
+export interface TabItem {
+    id: string;
+    label: string;
+    icon?: ComponentType<any>;
+    content?: ReactNode;
+}
+export interface TabsProps {
+    tabs?: TabItem[];
+    defaultTab?: string;
+    onChange?: (tabId: string) => void;
+    className?: string;
+}

package/dist/components/theme-provider/index.d.ts

@@ -0,0 +1 @@
+export * from './theme-provider';

package/dist/components/theme-provider/theme-provider.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export type Theme = 'light' | 'dark';
+export interface ThemeContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+}
+export interface ThemeProviderProps {
+    defaultTheme?: Theme;
+    storageKey?: string;
+    children: React.ReactNode;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const useTheme: () => ThemeContextValue;

package/dist/components/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './time-picker';
+export type * from './time-picker.types';

package/dist/components/time-picker/time-picker.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TimePickerProps } from './time-picker.types';
+export declare const TimePicker: React.FC<TimePickerProps>;

package/dist/components/time-picker/time-picker.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { TimePicker } from './time-picker';
+declare const meta: Meta<typeof TimePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithValue: Story;

package/dist/components/time-picker/time-picker.types.d.ts

@@ -0,0 +1,6 @@
+export interface TimePickerProps {
+    value?: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}

package/dist/components/toggle/index.d.ts

@@ -0,0 +1 @@
+export * from './toggle';

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ToggleProps } from './toggle.types';
+export declare const Toggle: React.FC<ToggleProps>;

package/dist/components/toggle/toggle.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Toggle } from './toggle';
+declare const meta: Meta<typeof Toggle>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const LabelRight: Story;
+export declare const NoLabel: Story;

package/dist/components/toggle/toggle.types.d.ts

@@ -0,0 +1,8 @@
+export interface ToggleProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useToggle';
+export * from './useDebounce';

package/dist/hooks/useDebounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/dist/hooks/useToggle.d.ts

@@ -0,0 +1 @@
+export declare const useToggle: (initialState?: boolean) => [boolean, () => void];

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+export * from './components/button';
+export * from './components/badge';
+export * from './components/avatar';
+export * from './components/input';
+export * from './components/card';
+export * from './components/modal';
+export * from './components/toggle';
+export * from './components/accordion';
+export * from './components/app-bar';
+export * from './components/avatar-group';
+export * from './components/breadcrumbs';
+export * from './components/drawer';
+export * from './components/dropdown';
+export * from './components/file-dropzone';
+export * from './components/multi-select';
+export * from './components/progress-bar';
+export * from './components/rating';
+export * from './components/sidebar';
+export * from './components/skeleton';
+export * from './components/spinner';
+export * from './components/stat-card';
+export * from './components/table';
+export * from './components/tabs';
+export * from './components/time-picker';
+export * from './components/confirmation-modal';
+export * from './components/calendar-date-picker';
+export * from './components/date-range-picker';
+export * from './components/theme-provider';
+export * from './hooks';
+export * from './utils';
+export * from './theme';

package/dist/mango-ui-kit.css

@@ -0,0 +1 @@
+@tailwind base;@tailwind components;@tailwind utilities;@layer base{body{@apply antialiased text-neutral-900 bg-white;}}:root{--font-family: "General Sans", sans-serif;--accent: #fa8029;--accent-foreground: #ffffff;--transition-speed: .3s}[data-theme=light]{--background: #f2f7fa;--primaryColor: #fa8029;--lightPrimaryColor: #fa80291a;--secondaryColor: #f3f4f6;--primaryContainercolor: #ffffff;--secondaryContainercolor: #fa8029;--textColor: #383838;--textSecondaryColor: #7bff00;--labelColor: #475569;--labelSecondaryColor: #94a3b8;--borderColor: #e2e8f0}[data-theme=dark]{--background: #1f2124;--primaryColor: #fa8029;--lightPrimaryColor: #fa80294f;--secondaryColor: #2d2f33;--primaryContainercolor: #191a1b;--secondaryContainercolor: #fa8029;--textColor: #ffffff;--textSecondaryColor: #8e9196;--labelColor: #8e9196;--labelSecondaryColor: #8e9196;--borderColor: #3d3f43}:root:not([data-theme]){--background: #f2f7fa;--primaryColor: #fa8029;--lightPrimaryColor: #fa80291a;--secondaryColor: #f3f4f6;--primaryContainercolor: #ffffff;--secondaryContainercolor: #fa8029;--textColor: #383838;--textSecondaryColor: #7bff00;--labelColor: #475569;--labelSecondaryColor: #94a3b8;--borderColor: #e2e8f0}.badge-root{display:inline-flex;align-items:center;gap:6px;font-weight:700;line-height:1;white-space:nowrap;border-radius:6px;transition:all .2s}.badge-pill{border-radius:100px}.badge-sm{padding:3px 6px;font-size:.7rem}.badge-md{padding:5px 10px;font-size:.75rem}.badge-lg{padding:6px 14px;font-size:.85rem}.badge-primary{background:var(--lightPrimaryColor);color:var(--primaryColor);border:1px solid rgba(250,128,41,.2)}.badge-success{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.2)}.badge-error{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}.badge-warning{background:#f59e0b1a;color:#f59e0b;border:1px solid rgba(245,158,11,.2)}.badge-info{background:#3b82f61a;color:#3b82f6;border:1px solid rgba(59,130,246,.2)}.badge-neutral{background:#ffffff0d;color:var(--labelSecondaryColor);border:1px solid var(--borderColor)}.badge-icon{flex-shrink:0}.toggle-container{display:inline-flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-root{width:44px;height:24px;background:var(--borderColor);border-radius:99px;padding:2px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;display:flex;align-items:center}.toggle-root.checked{background:var(--primaryColor)}.toggle-thumb{width:20px;height:20px;background:#fff;border-radius:50%;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003;display:flex;align-items:center;justify-content:center}.toggle-root.checked .toggle-thumb{transform:translate(20px)}.toggle-label{font-size:.9rem;font-weight:600;color:var(--textColor)}.toggle-root.disabled{opacity:.5;cursor:not-allowed}.toggle-sm .toggle-root{width:32px;height:18px}.toggle-sm .toggle-thumb{width:14px;height:14px}.toggle-sm.checked .toggle-thumb{transform:translate(14px)}.toggle-lg .toggle-root{width:56px;height:30px}.toggle-lg .toggle-thumb{width:26px;height:26px}.toggle-lg.checked .toggle-thumb{transform:translate(26px)}.accordion-container{width:100%;display:flex;flex-direction:column;gap:12px}.accordion-item{background:var(--primaryContainercolor);border:1px solid var(--borderColor);border-radius:16px;overflow:hidden;transition:all .3s}.accordion-item:hover{border-color:var(--primaryColor)}.accordion-item.open{border-color:var(--primaryColor);box-shadow:0 4px 20px #0003}.accordion-trigger{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.accordion-trigger:hover{background:#ffffff05}.trigger-left{display:flex;align-items:center;gap:14px}.accordion-icon{color:var(--primaryColor)}.accordion-title{font-weight:700;font-size:1rem;color:var(--textColor)}.accordion-arrow{color:var(--labelSecondaryColor);transition:transform .3s cubic-bezier(.4,0,.2,1)}.accordion-item.open .accordion-arrow{transform:rotate(180deg);color:var(--primaryColor)}.accordion-content-wrapper{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)}.accordion-item.open .accordion-content-wrapper{max-height:500px}.accordion-content{padding:0 24px 20px 58px;color:var(--labelSecondaryColor);font-size:.95rem;line-height:1.6}.app-bar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background-color:var(--primaryContainercolor);border-bottom:1px solid var(--borderColor);position:sticky;border-radius:10px;top:0;z-index:100}.search-container{flex:0 1 400px}.search-input-full{width:100%;padding:10px 16px;background-color:var(--secondaryColor);border:1px solid transparent;border-radius:12px;color:var(--labelColor);font-size:.95rem;font-family:var(--font-family);transition:all .2s ease;outline:none}.search-input-full:focus{border-color:var(--accent);box-shadow:0 0 0 3px #fa80291a}.app-bar-actions{display:flex;align-items:center;gap:20px}.icon-btn{background:transparent;border:none;color:var(--labelColor);cursor:pointer;position:relative;padding:8px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.icon-btn:hover{background-color:var(--secondaryColor)}.notification-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;background-color:var(--primaryColor);border-radius:50%;border:2px solid var(--primaryContainercolor)}.user-profile{position:relative}.user-profile-trigger{display:flex;align-items:center;gap:12px;cursor:pointer;padding:4px 8px;border-radius:12px;transition:background-color .2s}.user-profile-trigger:hover{background-color:var(--secondaryColor)}.user-avatar{width:36px;height:36px;border-radius:10px;overflow:hidden;background-color:var(--accent)}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-details{display:flex;align-items:center;gap:4px}.user-name{font-size:.95rem;font-weight:600;color:var(--textColor)}.dropdown-icon{color:var(--labelSecondaryColor);transition:transform .2s}.dropdown-icon.rotated{transform:rotate(180deg)}.user-dropdown-menu{position:absolute;top:calc(100% + 12px);right:0;width:240px;background:rgba(var(--primaryContainercolor-rgb, 255, 255, 255),.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--borderColor);border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;padding:8px;z-index:1000;animation:dropdownPop .25s cubic-bezier(.4,0,.2,1);transform-origin:top right}.dropdown-header{padding:12px}.dropdown-user-info{display:flex;flex-direction:column;gap:4px}.dropdown-name{font-size:.95rem;font-weight:700;color:var(--textColor)}.dropdown-email{font-size:.8rem;color:var(--labelSecondaryColor)}.dropdown-divider{height:1px;background:var(--borderColor);margin:8px 0}.dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:10px;color:var(--labelColor);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;text-align:left}.dropdown-item:hover{background:var(--secondaryColor);color:var(--textColor)}.dropdown-item.logout{color:#ef4444}.dropdown-item.logout:hover{background:#ef44441a;color:#ef4444}.plan-badge{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;font-size:.85rem;font-weight:700;color:#fff;box-shadow:0 4px 12px #00000026}.plan-badge.free{background:linear-gradient(135deg,#6b7280,#4b5563)}.plan-badge.basic{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.plan-badge.business{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.plan-badge.enterprise{background:linear-gradient(135deg,#f59e0b,#d97706)}.upgrade-btn{display:flex;align-items:center;gap:8px;background-color:var(--primaryColor);color:#fff;border:none;padding:8px 16px;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #fa802933;filter:brightness(1.1)}.divider{width:1px;height:24px;background-color:var(--borderColor);margin:0 5px}.menu-toggle-btn{display:none;background:transparent;border:none;color:var(--labelColor);cursor:pointer;padding:8px;border-radius:10px;align-items:center;justify-content:center;transition:background-color .2s;margin-right:10px}.menu-toggle-btn:hover{background-color:var(--secondaryColor)}@media(max-width:1024px){.menu-toggle-btn{display:flex}.search-container,.upgrade-btn,.notification-btn,.plan-badge,.divider{display:none}.app-bar-actions{gap:12px}}.avatar-group{display:flex;align-items:center}.avatar-item{border:2px solid var(--background);border-radius:50%;margin-left:-10px;overflow:hidden;transition:transform .2s;cursor:pointer;background:var(--secondaryColor)}.avatar-item:first-child{margin-left:0}.avatar-item:hover{transform:translateY(-4px);z-index:10!important}.avatar-item img{width:100%;height:100%;object-fit:cover}.avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--primaryColor),#f97316);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800}.avatar-extra{border:2px solid var(--background);border-radius:50%;margin-left:-10px;background:var(--borderColor);color:var(--textColor);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}.breadcrumbs-container{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.breadcrumb-item{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--labelSecondaryColor);transition:all .2s}.breadcrumb-link{cursor:pointer;font-weight:500}.breadcrumb-link:hover{color:var(--primaryColor)}.breadcrumb-item.active{color:var(--textColor);font-weight:700}.breadcrumb-separator{display:flex;align-items:center;color:var(--labelSecondaryColor);opacity:.5}.breadcrumb-icon{display:flex;align-items:center;color:var(--primaryColor)}.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:flex;justify-content:flex-end;opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}.drawer-overlay.active{opacity:1;visibility:visible}.common-side-drawer{height:100%;width:var(--drawer-width, 420px);background:var(--primaryContainercolor);border-left:1px solid var(--borderColor);display:flex;flex-direction:column;transform:translate(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);box-shadow:-20px 0 50px #0000004d;border-radius:0;padding:0!important}.common-side-drawer.open{transform:translate(0)}.drawer-header{padding:32px;border-bottom:1px solid var(--borderColor);display:flex;justify-content:space-between;align-items:flex-start;background:var(--secondaryColor)}.header-text h2{font-size:1.5rem;font-weight:800;color:var(--textColor);letter-spacing:-.02em;margin-bottom:6px}.header-text .subtitle{color:var(--labelSecondaryColor);font-size:.9rem;font-weight:500;line-height:1.4}.close-btn{background:var(--secondaryColor);border:1px solid var(--borderColor);color:var(--labelSecondaryColor);border-radius:12px;display:flex;align-items:center;justify-content:center;transition:all .2s}.close-btn:hover{background:#ef44441a;border-color:#ef44444d;color:#ef4444;transform:rotate(90deg)}.drawer-body{flex:1;overflow-y:auto;display:flex;flex-direction:column}.drawer-footer{padding:24px 32px;border-top:1px solid var(--borderColor);background:var(--secondaryColor);display:flex;justify-content:flex-end;align-items:center;gap:16px}@media(max-width:600px){.common-side-drawer{width:100%!important}.drawer-header,.drawer-body,.drawer-footer{padding:24px}}.app-dropdown{position:relative;-webkit-user-select:none;user-select:none;z-index:10}.app-dropdown.is-open{z-index:1000}.app-dropdown-trigger{display:flex;align-items:center;gap:10px;background-color:var(--secondaryColor);padding:10px 16px;border-radius:10px;border:1px solid var(--borderColor);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-width:180px}.app-dropdown-trigger:hover{border-color:var(--primaryColor);background-color:var(--primaryContainercolor)}.app-dropdown-trigger.active{border-color:var(--primaryColor);background-color:var(--primaryContainercolor);box-shadow:0 4px 12px var(--lightPrimaryColor)}.app-dropdown-trigger.disabled{cursor:not-allowed;opacity:.6;background-color:#ffffff05}.trigger-icon{color:var(--primaryColor);flex-shrink:0}.trigger-text{font-size:.95rem;font-weight:600;color:var(--textColor);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arrow-icon{color:var(--labelColor);transition:transform .3s ease;flex-shrink:0}.arrow-icon.rotated{transform:rotate(180deg)}.app-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:100%;width:max-content;max-width:300px;background-color:var(--primaryContainercolor);border:1px solid var(--borderColor);border-radius:12px;box-shadow:0 10px 25px #0006;overflow:hidden;animation:dropdownPop .2s cubic-bezier(.4,0,.2,1)}@keyframes dropdownPop{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.menu-label{padding:12px 16px;font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--labelSecondaryColor);letter-spacing:.5px;border-bottom:1px solid var(--borderColor);background-color:var(--secondaryColor)}.menu-scroll{max-height:280px;overflow-y:auto}.menu-search-input{width:100%;padding:10px 16px;background:var(--background);border:none;border-bottom:1px solid var(--borderColor);outline:none;color:var(--textColor);font-size:.85rem}.menu-search-input:focus{background:var(--secondaryColor)}.menu-search-input::placeholder{color:var(--labelColor)}.no-options-found{padding:32px 16px;text-align:center;font-size:.85rem;color:var(--labelSecondaryColor)}.menu-option{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:all .2s}.menu-option:hover{background-color:var(--secondaryColor)}.menu-option.selected{background-color:var(--lightPrimaryColor)}.option-icon{width:32px;height:32px;border-radius:8px;background-color:var(--secondaryColor);display:flex;align-items:center;justify-content:center;color:var(--labelColor);flex-shrink:0;transition:all .2s}.menu-option:hover .option-icon{color:var(--primaryColor);background-color:var(--primaryContainercolor)}.menu-option.selected .option-icon{background-color:var(--primaryColor);color:#fff}.option-content{flex:1;display:flex;flex-direction:column}.option-details{font-size:.75rem;color:var(--labelColor)}.menu-option.selected .option-name{color:var(--primaryColor)}.check-icon{color:var(--primaryColor);flex-shrink:0}.app-dropdown-footer{padding:8px;border-top:1px solid var(--borderColor);background-color:var(--secondaryColor)}.dropzone-container{width:100%}.dropzone-area{width:100%;padding:32px;border:2px dashed var(--borderColor);border-radius:20px;background:#ffffff05;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.dropzone-area:hover,.dropzone-area.dragging{border-color:var(--primaryColor);background:#fa80290d;transform:translateY(-2px)}.dropzone-area.dragging:after{content:"Release to drop";position:absolute;inset:0;background:#191a1be6;display:flex;align-items:center;justify-content:center;color:var(--primaryColor);font-weight:800;font-size:1.2rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10}.dropzone-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.icon-circle{width:56px;height:56px;background:var(--lightPrimaryColor);color:var(--primaryColor);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.dropzone-content h3{font-size:1.1rem;font-weight:800;color:var(--textColor);margin:0}.dropzone-content p{color:var(--labelSecondaryColor);font-size:.9rem;margin:0}.file-hint{font-size:.75rem;color:var(--labelSecondaryColor);opacity:.6}.files-list{margin-top:16px;display:flex;flex-direction:column;gap:10px}.file-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--primaryContainercolor);border:1px solid var(--borderColor);border-radius:12px;transition:all .2s}.file-item:hover{border-color:var(--primaryColor)}.file-info{display:flex;align-items:center;gap:14px}.type-icon{width:40px;height:40px;background:#ffffff08;color:var(--labelSecondaryColor);border-radius:10px;display:flex;align-items:center;justify-content:center}.text-info{display:flex;flex-direction:column}.file-name{font-size:.9rem;font-weight:700;color:var(--textColor);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.75rem;color:var(--labelSecondaryColor)}.remove-btn{background:transparent;border:none;color:var(--labelSecondaryColor);cursor:pointer;padding:8px;border-radius:8px;transition:all .2s}.remove-btn:hover{color:#ef4444;background:#ef44441a}.multi-select-root{position:relative;width:100%}.multi-select-label{display:block;font-size:.85rem;font-weight:700;color:var(--labelSecondaryColor);margin-bottom:10px}.multi-select-trigger{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:8px 16px;background:#ffffff08;border:1px solid var(--borderColor);border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.multi-select-trigger:hover{border-color:var(--primaryColor);background:#fa80290d}.multi-select-trigger.active{border-color:var(--primaryColor);box-shadow:0 0 0 3px var(--lightPrimaryColor)}.selected-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}.chip{display:flex;align-items:center;gap:6px;padding:4px 10px;background:var(--lightPrimaryColor);border:1px solid rgba(250,128,41,.2);border-radius:8px;color:var(--primaryColor);font-size:.8rem;font-weight:700;transition:all .2s}.chip:hover{background:#fa802933}.chip svg{cursor:pointer;opacity:.7}.chip svg:hover{opacity:1}.placeholder{color:var(--labelSecondaryColor);font-size:.9rem}.arrow{color:var(--labelSecondaryColor);transition:transform .3s;margin-left:12px}.arrow.open{transform:rotate(180deg)}.multi-select-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--primaryContainercolor);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--borderColor);border-radius:16px;padding:12px;z-index:1001;box-shadow:0 20px 50px #0000004d;transform-origin:top center}.search-box{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--secondaryColor);border:1px solid var(--borderColor);border-radius:10px;margin-bottom:12px}.search-box input{background:transparent;border:none;outline:none;color:var(--textColor);flex:1;font-size:.9rem}.options-list{max-height:250px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.option-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .2s}.option-item:hover{background:var(--secondaryColor)}.option-item.selected{background:var(--lightPrimaryColor)}.checkbox{width:18px;height:18px;border:1px solid var(--borderColor);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s;background:var(--secondaryColor)}.option-item.selected .checkbox{background:var(--primaryColor);border-color:var(--primaryColor);color:#fff}.option-name{font-size:.9rem;font-weight:600;color:var(--textColor)}.no-options{text-align:center;padding:20px;color:var(--labelSecondaryColor);font-size:.85rem;font-style:italic}.progress-container{width:100%;margin:10px 0}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.progress-label{font-size:.9rem;font-weight:600;color:var(--textColor)}.progress-percentage{font-size:.85rem;font-weight:700;color:var(--primaryColor)}.progress-track{width:100%;background:var(--borderColor);border-radius:99px;overflow:hidden;position:relative}.progress-bar{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.progress-bar.animated:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:progress-shimmer 2s infinite}@keyframes progress-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-sm .progress-track{height:6px}.progress-md .progress-track{height:10px}.progress-lg .progress-track{height:16px}.rating-container{display:inline-flex;align-items:center;gap:12px}.rating-stars{display:flex;gap:4px}.star-btn{background:transparent;border:none;padding:0;cursor:pointer;color:var(--borderColor);transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.star-btn.active{color:#fbbf24;transform:scale(1.1)}.star-btn:not(.readonly):hover{transform:scale(1.2);filter:brightness(1.1)}.star-btn.readonly{cursor:default}.rating-label{font-size:.9rem;font-weight:700;color:var(--textColor);min-width:24px}.rating-count{font-size:.8rem;color:var(--labelSecondaryColor);margin-left:-4px}.sidebar{width:260px;height:calc(100vh - 10px);background-color:var(--primaryContainercolor);color:var(--textColor);padding:1.5rem;display:flex;flex-direction:column;border-radius:10px;margin:5px;box-sizing:border-box;transition:all .3s ease;overflow:hidden}.sidebar-scroll{flex:1;overflow-y:auto;padding-right:5px;-ms-overflow-style:none;scrollbar-width:none}.sidebar-scroll::-webkit-scrollbar{display:none}.sidebar-header{margin-bottom:2.5rem;display:flex;align-items:center;justify-content:space-between}.logo-container{display:flex;align-items:center;gap:12px}.sidebar-section{margin-bottom:2rem}.section-title{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--labelColor);font-weight:500;margin-bottom:10px}.nav-item{display:flex;align-items:center;padding:.75rem 1rem;margin-bottom:.3rem;border-radius:10px;cursor:pointer;transition:all .2s ease;position:relative;text-decoration:none}.nav-item:hover{background-color:#ffffff0d}.nav-item.active{background-color:var(--lightPrimaryColor)}.nav-icon{margin-right:12px;color:var(--labelColor);display:flex;align-items:center}.nav-item.active .nav-icon,.nav-item.active .nav-label{color:var(--primaryColor)}.nav-label{font-size:.9rem;font-weight:500;color:var(--labelColor)}.nav-badge{position:absolute;right:1rem;background-color:var(--primaryColor);color:#fff;font-size:.75rem;font-weight:600;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px}.sidebar-footer{padding-top:1.5rem;margin-top:auto;border-top:1px solid var(--borderColor)}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:998;opacity:0;visibility:hidden;transition:all .3s ease}.sidebar-overlay.show{opacity:1;visibility:visible}.sidebar-close-btn{display:none;background:none;border:none;color:var(--textColor);cursor:pointer;padding:5px}@media(max-width:1024px){.sidebar{position:fixed;left:-300px;top:0;bottom:0;z-index:999;margin:0!important;height:100vh;border-radius:0;box-shadow:10px 0 30px #0003}.sidebar.open{left:0}.sidebar-close-btn{display:block}.logo-container{flex:1}}.skeleton-root{background:var(--borderColor);position:relative;overflow:hidden;opacity:.5}.skeleton-root.animate{animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:skeleton-shimmer 2s infinite}@keyframes skeleton-pulse{0%{opacity:.3}50%{opacity:.6}to{opacity:.3}}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skeleton-text{border-radius:4px}.skeleton-circular{border-radius:50%}.skeleton-rectangular{border-radius:12px}.spinner-container{display:inline-flex;align-items:center;justify-content:center}.spinner-icon{animation:spin .8s linear infinite;color:var(--primaryColor)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stat-card{background:var(--primaryContainercolor);border:1px solid var(--borderColor);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.stat-card:hover{border-color:var(--primaryColor);transform:translateY(-4px);box-shadow:0 12px 30px #0003}.stat-header{display:flex;justify-content:space-between;align-items:flex-start}.icon-wrapper{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;transition:all .3s}.stat-label{font-size:.9rem;font-weight:600;color:var(--labelSecondaryColor)}.stat-main{display:flex;flex-direction:column;gap:4px}.stat-value{font-size:1.75rem;font-weight:800;color:var(--textColor);letter-spacing:-.02em}.stat-footer{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--borderColor)}.trend-badge{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;font-size:.75rem;font-weight:700}.trend-up{background:#22c55e1a;color:#22c55e}.trend-down{background:#ef44441a;color:#ef4444}.trend-label{font-size:.8rem;color:var(--labelSecondaryColor)}.stat-primary .icon-wrapper{background:var(--lightPrimaryColor);color:var(--primaryColor)}.stat-success .icon-wrapper{background:#22c55e1a;color:#22c55e}.stat-warning .icon-wrapper{background:#f59e0b1a;color:#f59e0b}.stat-error .icon-wrapper{background:#ef44441a;color:#ef4444}.stat-graph{position:absolute;bottom:0;left:0;right:0;height:40px;opacity:.1;pointer-events:none}.table-container{width:100%;overflow-x:auto;background-color:var(--primaryContainercolor);border-radius:16px;padding:10px}.custom-table{width:100%;border-collapse:collapse;text-align:left}.custom-table th{padding:16px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--labelColor);border-bottom:1px solid var(--borderColor)}.custom-table td{padding:16px;font-size:.9rem;color:var(--textColor);border-bottom:1px solid var(--borderColor);vertical-align:middle}.custom-table tr:last-child td{border-bottom:none}.custom-table tr:hover{background-color:#ffffff05}.status-badge{padding:4px 12px;border-radius:8px;font-size:.75rem;font-weight:600}.status-badge.paid,.status-badge.completed{background-color:#22c55e1a;color:#22c55e}.status-badge.pending,.status-badge.partially-paid{background-color:#eab3081a;color:#eab308}.status-badge.failed{background-color:#ef44441a;color:#ef4444}.user-cell{display:flex;align-items:center;gap:12px}.user-img{width:32px;height:32px;border-radius:50%;object-fit:cover}.action-btn{background:transparent;border:none;color:var(--labelColor);cursor:pointer;padding:4px;display:flex}.action-btn:hover{color:var(--primaryColor)}.tabs-container{width:100%}.tabs-list{display:flex;gap:8px;padding:6px;background:var(--secondaryColor);border-radius:14px;margin-bottom:20px}.tab-trigger{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:none;background:transparent;color:var(--labelSecondaryColor);font-size:.9rem;font-weight:700;cursor:pointer;border-radius:10px;transition:all .2s cubic-bezier(.4,0,.2,1)}.tab-trigger:hover{color:var(--textColor);background:#ffffff05}.tab-trigger.active{background:var(--primaryContainercolor);color:var(--primaryColor);box-shadow:0 4px 12px #0000001a}.tab-panel{animation:tabFadeIn .3s ease-out}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.time-picker-root{position:relative;width:100%}.time-input-trigger{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--secondaryColor);border:1px solid var(--borderColor);border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--textColor);font-size:.9rem;font-weight:500}.time-input-trigger:hover{border-color:var(--primaryColor);background:var(--primaryContainercolor)}.time-input-trigger.active{border-color:var(--primaryColor);box-shadow:0 0 0 3px var(--lightPrimaryColor);background:var(--primaryContainercolor)}.time-dropdown{position:absolute;top:calc(100% + 8px);left:0;width:200px;background:var(--primaryContainercolor);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--borderColor);border-radius:20px;padding:20px;z-index:1000;box-shadow:0 10px 40px #0000004d;transform-origin:top left}.time-selector-columns{display:flex;align-items:center;justify-content:center;gap:15px}.time-column{display:flex;flex-direction:column;align-items:center;gap:8px}.time-column button{background:transparent;border:none;color:var(--labelSecondaryColor);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:8px}.time-column button:hover{color:var(--primaryColor);background:var(--lightPrimaryColor)}.time-value{font-size:1.8rem;font-weight:800;color:var(--textColor);font-family:JetBrains Mono,monospace;background:var(--secondaryColor);width:55px;height:55px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--borderColor)}.time-separator{font-size:1.5rem;font-weight:800;color:var(--labelSecondaryColor);margin-top:-10px}.time-label{font-size:.65rem;font-weight:700;color:var(--labelSecondaryColor);letter-spacing:1px}.time-footer{margin-top:20px;display:flex;justify-content:center}.confirm-btn{width:100%;padding:10px;background:var(--primaryColor);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s}.confirm-btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 5px 15px #fa80294d}.conf-modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999}.conf-modal-content{background:var(--primaryContainercolor);border:1px solid var(--borderColor);border-radius:24px;width:400px;max-width:90%;padding:32px;box-shadow:0 25px 50px -12px #00000080;position:relative;z-index:10000}.conf-modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.icon-badge{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center}.icon-badge.danger{background:#ef44441a;color:#ef4444}.icon-badge.warning{background:#eab3081a;color:#eab308}.icon-badge.primary{background:var(--lightPrimaryColor);color:var(--primaryColor)}.conf-close-btn{background:transparent;border:none;color:var(--labelSecondaryColor);cursor:pointer;padding:4px;transition:color .2s}.conf-close-btn:hover{color:var(--textColor)}.conf-modal-body h3{font-size:1.5rem;font-weight:800;margin-bottom:12px;color:var(--textColor)}.conf-modal-body p{font-size:.95rem;line-height:1.6;color:var(--labelSecondaryColor);margin:0}.conf-modal-footer{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}.conf-btn-secondary{padding:14px;border-radius:12px;border:1px solid var(--borderColor);background:var(--secondaryColor);color:var(--textColor);font-weight:700;cursor:pointer;transition:all .2s}.conf-btn-secondary:hover{background:var(--primaryContainercolor)}.conf-btn-primary{padding:14px;border-radius:12px;border:none;color:#fff;font-weight:700;cursor:pointer;transition:all .2s}.conf-btn-primary.danger{background:#ef4444}.conf-btn-primary.danger:hover{background:#dc2626;box-shadow:0 4px 15px #ef444466}.conf-btn-primary.warning{background:#f59e0b}.conf-btn-primary.primary{background:var(--primaryColor)}.animate-pop-in{animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes popIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.calendar-date-picker{position:relative;width:100%}.date-input-trigger{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--secondaryColor);border:1px solid var(--borderColor);border-radius:12px;color:var(--textColor);cursor:pointer;transition:all .2s;font-size:.95rem}.date-input-trigger:hover{background:var(--primaryContainercolor);border-color:var(--primaryColor)}.date-input-trigger.active{background:var(--primaryContainercolor);border-color:var(--primaryColor);box-shadow:0 0 0 1px var(--primaryColor)}.date-input-trigger svg{color:var(--labelSecondaryColor);transition:color .3s ease}.date-input-trigger:hover svg{color:var(--primaryColor)}.calendar-dropdown{position:absolute;top:calc(100% + 8px);left:0;width:280px;background-color:var(--primaryContainercolor)!important;color:var(--textColor)!important;border:1px solid var(--borderColor);border-radius:16px;padding:16px;box-shadow:0 10px 25px -5px #0003;z-index:10000}.calendar-header button{background:var(--secondaryColor);border:none;color:var(--textColor);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:all .2s ease}.calendar-header button:hover{background:var(--borderColor);color:var(--primaryColor)}.weekday{text-align:center;font-size:.75rem;font-weight:700;color:var(--labelSecondaryColor);padding-bottom:4px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.85rem;border-radius:8px;cursor:pointer;transition:all .2s ease;color:var(--textColor);font-weight:500}.calendar-day:hover:not(.empty){background:#fa80291a;color:var(--primaryColor)}.calendar-day.selected{background:var(--primaryColor);color:#fff;font-weight:700;box-shadow:0 4px 12px #fa80294d}.calendar-day.today{color:var(--primaryColor);font-weight:800;background:#fa80290d;border:1px solid rgba(250,128,41,.2)}@keyframes scaleIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.animate-scale-in{animation:scaleIn .2s cubic-bezier(0,0,.2,1) forwards}.date-range-picker{position:relative;width:100%}.range-input-trigger{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--secondaryColor);border:1px solid var(--borderColor);border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.range-input-trigger:hover{border-color:var(--primaryColor);background:var(--primaryContainercolor)}.range-input-trigger.active{border-color:var(--primaryColor);box-shadow:0 0 0 3px var(--lightPrimaryColor);background:var(--primaryContainercolor)}.date-display{display:flex;align-items:center;gap:8px;color:var(--textColor);font-size:.9rem;font-weight:500}.date-display span{min-width:85px}.range-input-trigger .separator{color:var(--labelSecondaryColor);opacity:.5}.calendar-dropdown{position:absolute;top:calc(100% + 8px);left:0;width:320px;background-color:var(--primaryContainercolor)!important;color:var(--textColor)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--borderColor);border-radius:16px;padding:16px;z-index:10000;box-shadow:0 10px 40px #0003;transform-origin:top left}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-header button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--secondaryColor);border:1px solid var(--borderColor);border-radius:8px;color:var(--textColor);cursor:pointer;transition:all .2s}.calendar-header button:hover{background:var(--primaryColor);border-color:var(--primaryColor);color:#fff}.current-month{font-weight:700;font-size:.95rem;color:var(--textColor)}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.weekday{text-align:center;font-size:.75rem;font-weight:700;color:var(--labelSecondaryColor);text-transform:uppercase}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-day{height:38px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:500;color:var(--textColor);cursor:pointer;border-radius:8px;transition:all .2s}.calendar-day:hover:not(.empty){background:var(--lightPrimaryColor);color:var(--primaryColor)}.calendar-day.start,.calendar-day.end{background:var(--primaryColor)!important;color:#fff!important;border-radius:8px}.calendar-day.in-range{background:var(--lightPrimaryColor);color:var(--primaryColor);border-radius:0}.calendar-day.today:not(.start):not(.end){color:var(--primaryColor);font-weight:800;text-decoration:underline}.calendar-day.empty{cursor:default}.calendar-footer{margin-top:16px;padding-top:12px;border-top:1px solid var(--borderColor);display:flex;justify-content:flex-end}.clear-btn{background:transparent;border:none;color:var(--labelSecondaryColor);font-size:.8rem;font-weight:600;cursor:pointer}.clear-btn:hover{color:var(--primaryColor)}