@import 'tailwindcss';

@import 'tw-animate-css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@custom-variant dark (&:is(.dark *));

.font-vazirmatn {
    font-family:
        'Vazirmatn', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

@theme {
    --font-sans:
        'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
}

:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.87 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.995 0.004 250);
    --sidebar-foreground: oklch(0.28 0.04 260);
    --sidebar-primary: oklch(0.32 0.06 260);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.94 0.02 250);
    --sidebar-accent-foreground: oklch(0.28 0.04 260);
    --sidebar-border: oklch(0.9 0.015 250);
    --sidebar-ring: oklch(0.72 0.12 85);
    --shell-bg: oklch(0.965 0.012 250);
    --navbar-bg: oklch(1 0 0 / 0.82);
    --scrollbar-size: 5px;
    --scrollbar-thumb: oklch(0.72 0 0 / 0.45);
    --scrollbar-thumb-hover: oklch(0.55 0 0 / 0.65);
    --scrollbar-track: transparent;
}

.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.22 0.03 260);
    --sidebar-foreground: oklch(0.96 0.01 250);
    --sidebar-primary: oklch(0.78 0.12 85);
    --sidebar-primary-foreground: oklch(0.22 0.03 260);
    --sidebar-accent: oklch(0.28 0.04 260);
    --sidebar-accent-foreground: oklch(0.96 0.01 250);
    --sidebar-border: oklch(0.32 0.04 260);
    --sidebar-ring: oklch(0.78 0.12 85);
    --shell-bg: oklch(0.17 0.02 260);
    --navbar-bg: oklch(0.18 0.02 260 / 0.88);
    --scrollbar-thumb: oklch(0.52 0 0 / 0.55);
    --scrollbar-thumb-hover: oklch(0.65 0 0 / 0.75);
}

@layer base {
    * {
        @apply border-border;
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }

    *::-webkit-scrollbar {
        width: var(--scrollbar-size);
        height: var(--scrollbar-size);
    }

    *::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb);
        border-radius: 9999px;
        border: 1px solid transparent;
        background-clip: padding-box;
        transition: background-color 150ms ease;
    }

    *::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-hover);
    }

    *::-webkit-scrollbar-corner {
        background: transparent;
    }

    body {
        @apply bg-background text-foreground;
    }
}

@layer components {
    [data-slot='sidebar-wrapper'] {
        background: var(--shell-bg);
    }

    [data-variant='floating'] [data-sidebar='sidebar'] {
        border-color: color-mix(in oklch, var(--sidebar-border) 85%, transparent);
        box-shadow:
            0 1px 2px oklch(0.28 0.04 260 / 0.06),
            0 12px 32px oklch(0.28 0.04 260 / 0.1);
    }

    [data-sidebar='menu-button'][data-active='true'] {
        background: color-mix(in oklch, var(--sidebar-primary) 14%, var(--sidebar));
        color: var(--sidebar-primary);
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--sidebar-ring);
    }

    [dir='rtl'] [data-sidebar='menu-button'][data-active='true'] {
        box-shadow: inset -3px 0 0 var(--sidebar-ring);
    }

    [data-sidebar='group-label'] {
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 0.68rem;
        font-weight: 700;
        color: color-mix(in oklch, var(--sidebar-foreground) 55%, transparent);
    }

    [data-collapsible='icon'] [data-sidebar='menu-button'][data-active='true'] {
        box-shadow: none;
    }

    [data-collapsible='icon'] [data-sidebar='group'] {
        padding-inline: 0.25rem;
    }
}

/* Jalali date picker (react-multi-date-picker) — match app theme */
.rmdp-container {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.rmdp-ams .rmdp-wrapper {
    @apply border-border bg-popover text-popover-foreground rounded-md border shadow-md;
    z-index: 200;
}

/* Manual punch modal: dropdown above other fields inside the dialog */
.rmdp-ams-modal .rmdp-wrapper {
    z-index: 60;
}

/* Calendar RTL: week starts Saturday (ش) on the right; date input stays LTR */
.rmdp-ams-dari .rmdp-calendar,
.rmdp-ams-dari .rmdp-day-picker,
.rmdp-ams-dari .rmdp-week-days,
.rmdp-ams-dari .rmdp-header {
    direction: rtl;
}

.rmdp-ams-dari .rmdp-week-days {
    @apply flex w-full justify-between;
}

.rmdp-ams-dari .rmdp-week-day {
    @apply flex-1 text-center;
}

.rmdp-ams-dari .rmdp-days {
    direction: rtl;
}

.rmdp-ams-dari .rmdp-arrow-container {
    direction: rtl;
}

.rmdp-ams .rmdp-calendar {
    @apply bg-popover;
}

.rmdp-ams .rmdp-day span {
    @apply rounded-md;
}

.rmdp-ams .rmdp-day.rmdp-selected span:not(.highlight) {
    @apply bg-primary text-primary-foreground;
}

.rmdp-ams .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
    @apply bg-accent text-accent-foreground;
}

.rmdp-ams .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
    @apply cursor-pointer;
}

.rmdp-ams .rmdp-arrow-container {
    @apply cursor-pointer;
}

.rmdp-ams .rmdp-arrow {
    @apply border-primary;
}

.rmdp-ams .rmdp-header-values {
    @apply text-foreground font-medium;
}

.rmdp-ams .rmdp-week-day {
    @apply text-muted-foreground;
}

.rmdp-ams .rmdp-day.rmdp-today span {
    @apply bg-muted text-foreground;
}