@import 'tailwindcss';
@import './notification.css';
@import 'react-date-range/dist/styles.css';
@import 'react-date-range/dist/theme/default.css';

@plugin 'tailwindcss-animate';

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

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

@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);

    /* Additional semantic colors */
    --color-success: var(--success);
    --color-success-foreground: var(--success-foreground);
    --color-warning: var(--warning);
    --color-warning-foreground: var(--warning-foreground);
    --color-info: var(--info);
    --color-info-foreground: var(--info-foreground);

    /* Brand color scale */
    --color-brand-50: var(--brand-50);
    --color-brand-100: var(--brand-100);
    --color-brand-200: var(--brand-200);
    --color-brand-300: var(--brand-300);
    --color-brand-400: var(--brand-400);
    --color-brand-500: var(--brand-500);
    --color-brand-600: var(--brand-600);
    --color-brand-700: var(--brand-700);
    --color-brand-800: var(--brand-800);
    --color-brand-900: var(--brand-900);
    --color-brand-950: var(--brand-950);
    --color-brand: var(--brand);
    --color-brand-secondary: var(--brand-secondary);
    --color-sidebar-dark: var(--sidebar-dark);
    /* Text color variables */
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-disabled: var(--text-disabled);
    --color-text-inverse: var(--text-inverse);
    --color-text-brand: var(--text-brand);
    --color-text-success: var(--text-success);
    --color-text-warning: var(--text-warning);
    --color-text-error: var(--text-error);
    --color-text-info: var(--text-info);
    --color-text-link: var(--text-link);
    --color-text-link-hover: var(--text-link-hover);
    --color-primary-text: var(--text-primary);
    --color-secondary-text: var(--text-secondary);
    --color-text-gray: #6a7282;
    --color-menu-active: var(--menu-active);
}

/* Updated brand color variables based on primary color #045049 */

:root {
    /* Existing variables... */
    --background: #f9fbfc;
    --foreground: #020617;
    --card: #ffffff;
    --card-foreground: #020617;
    --popover: oklch(1 0 0);
    --popover-foreground: #020617;
    --primary: #045049;
    --primary-foreground: oklch(0.985 0 0);
    --secondary: #f5791f;
    --secondary-foreground: oklch(0.205 0 0);
    --muted: #f1f5f9;
    --muted-foreground: oklch(17.764% 0.00002 271.152);
    --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.985 0 0);
    --sidebar-foreground: #020617;
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(94.309% 0.00011 271.152);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.87 0 0);

    /* Additional semantic colors - Light mode */
    --success: var(--primary);
    --success-foreground: oklch(0.98 0.02 160);
    --warning: var(--secondary);
    --warning-foreground: oklch(0.2 0.05 80);
    --info: oklch(0.6 0.15 240);
    --info-foreground: oklch(0.98 0.02 240);

    /* Updated Brand colors based on primary #045049 - Light mode */
    --brand-50: #faffff; /* Very light teal - almost white with hint of teal */
    --brand-100: #e6eeed; /* Light teal background */
    --brand-200: #b4cbc8; /* Soft teal */
    --brand-300: #9bb9b6; /* Light teal accent */
    --brand-400: #82a8a4; /* Medium-light teal */
    --brand-500: #689692; /* Medium teal */
    --brand-600: #4f8580; /* Medium-dark teal */
    --brand-700: #36736d; /* Primary color - dark teal */
    --brand-800: #1d625b; /* Darker teal */
    --brand-900: #134e4a; /* Very dark teal */
    --brand-950: #045049; /* Almost black teal */
    --brand: var(--brand-700);
    --brand-secondary: var(--secondary);
    /* Sidebar  */
    --sidebar-dark: #12162d;
    /* Text color variables - Light mode */
    --text-primary: #020617;
    --text-secondary: #475569;
    --text-gray: #6a7282;
    --text-disabled: #cbd5e1;
    --text-inverse: #ffffff;
    --text-brand: var(--brand-700);
    --text-success: #065f46;
    --text-warning: #92400e;
    --text-error: #dc2626;
    --text-info: #1e40af;
    --text-link: var(--brand-600);
    --text-link-hover: var(--brand-800);
    --menu-active: var(--brand-100);
}

.dark {
    /* Backgrounds */
    --background: #020617;
    --foreground: #f9fbfc;

    --card: #12162d;
    --card-foreground: #f8fafc;
    --popover: #1d2134;
    --popover-foreground: #f8fafc;

    --primary: var(--brand-950); /* Softer teal for better contrast */
    --success: #045049;
    --primary-foreground: #020617;

    --secondary: #e07a27;
    --secondary-foreground: #020617;

    --muted: #1d2134;
    --muted-foreground: #94a3b8;

    --accent: #2d3748;
    --accent-foreground: #f8fafc;

    --destructive: #b91c1c;
    --destructive-foreground: #fef2f2;

    --border: #334155;
    --input: #334155;
    --ring: #475569;

    /* Brand Palette (Inverted scale for dark mode) */
    --brand-50: var(--brand-950);
    --brand-100: var(--brand-900);
    --brand-200: var(--brand-800);
    --brand-300: var(--brand-700);
    --brand-400: var(--brand-600);
    --brand-500: var(--brand-500);
    --brand-600: var(--brand-400);
    --brand-700: var(--brand-300);
    --brand-800: var(--brand-200);
    --brand-900: var(--brand-100);
    --brand-950: var(--brand-50);
    --brand: var(--brand-300);

    /* Sidebar Dark */
    --sidebar: #020617;
    --sidebar-foreground: #f8fafc;
    --sidebar-border: #334155;

    /* Text Dark */
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-disabled: #64748b;
    --text-inverse: #020617;
    --text-brand: var(--brand-300);
    --menu-active: #020617;
}

/* Brand color utility classes */
.bg-brand-50 {
    background-color: var(--brand-50);
}
.bg-brand-100 {
    background-color: var(--brand-100);
}
.bg-brand-200 {
    background-color: var(--brand-200);
}
.bg-brand-300 {
    background-color: var(--brand-300);
}
.bg-brand-400 {
    background-color: var(--brand-400);
}
.bg-brand-500 {
    background-color: var(--brand-500);
}
.bg-brand-600 {
    background-color: var(--brand-600);
}
.bg-brand-700 {
    background-color: var(--brand-700);
}
.bg-brand-800 {
    background-color: var(--brand-800);
}
.bg-brand-900 {
    background-color: var(--brand-900);
}
.bg-brand-950 {
    background-color: var(--brand-950);
}

.text-brand-50 {
    color: var(--brand-50);
}
.text-brand-100 {
    color: var(--brand-100);
}
.text-brand-200 {
    color: var(--brand-200);
}
.text-brand-300 {
    color: var(--brand-300);
}
.text-brand-400 {
    color: var(--brand-400);
}
.text-brand-500 {
    color: var(--brand-500);
}
.text-brand-600 {
    color: var(--brand-600);
}
.text-brand-700 {
    color: var(--brand-700);
}
.text-brand-800 {
    color: var(--brand-800);
}
.text-brand-900 {
    color: var(--brand-900);
}
.text-brand-950 {
    color: var(--brand-950);
}

.border-brand-50 {
    border-color: var(--brand-50);
}
.border-brand-100 {
    border-color: var(--brand-100);
}
.border-brand-200 {
    border-color: var(--brand-200);
}
.border-brand-300 {
    border-color: var(--brand-300);
}
.border-brand-400 {
    border-color: var(--brand-400);
}
.border-brand-500 {
    border-color: var(--brand-500);
}
.border-brand-600 {
    border-color: var(--brand-600);
}
.border-brand-700 {
    border-color: var(--brand-700);
}
.border-brand-800 {
    border-color: var(--brand-800);
}
.border-brand-900 {
    border-color: var(--brand-900);
}
.border-brand-950 {
    border-color: var(--brand-950);
}

/* Semantic text color utility classes */
.text-primary {
    color: var(--text-primary);
}
.text-secondary {
    color: var(--text-secondary);
}

.text-disabled {
    color: var(--text-disabled);
}
.text-inverse {
    color: var(--text-inverse);
}
.text-brand {
    color: var(--text-brand);
}
.text-success {
    color: var(--text-success);
}
.text-warning {
    color: var(--text-warning);
}
.text-error {
    color: var(--text-error);
}
.text-info {
    color: var(--text-info);
}
.text-link {
    color: var(--text-link);
}
.text-link-hover {
    color: var(--text-link-hover);
}

/* Interactive text utilities */
.text-link-interactive {
    color: var(--text-link);
    transition: color 0.2s ease;
}

.text-link-interactive:hover {
    color: var(--text-link-hover);
}

/* ============================================================================
   React Phone Number Input - Flag Display Styles
   ============================================================================ */
.PhoneInput {
    display: flex;
    align-items: center;
}

.PhoneInputCountry {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin-right: 0.35em;
    padding-left: 0.75rem;
}

.PhoneInputCountryIcon {
    width: calc(1em * 1.5);
    height: 1em;
}

.PhoneInputCountryIcon--border {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.PhoneInputCountryIconImg {
    display: block;
    width: 100%;
    height: 100%;
}

.PhoneInputCountrySelect {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.PhoneInputCountrySelectArrow {
    display: block;
    width: 0.3em;
    height: 0.3em;
    margin-left: 0.35em;
    border-style: solid;
    border-color: currentColor;
    border-top-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-right-width: 1px;
    transform: rotate(45deg);
    opacity: 0.45;
}

.PhoneInputInput {
    flex: 1;
    min-width: 0;
}

@layer base {
    * {
        @apply border-border;
    }

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

@layer utilities {
    /* Mobile-first responsive utilities for sidebar */
    .sidebar-mobile-overlay {
        @apply fixed inset-0 z-40 bg-black/20 backdrop-blur-sm md:hidden;
    }

    /* Mobile header adjustments */
    .mobile-header {
        @apply block md:hidden;
    }

    .desktop-header {
        @apply hidden md:block;
    }

    /* Mobile search bar positioning */
    .mobile-search-expanded {
        @apply pt-[120px];
    }

    /* Responsive button sizing */
    .btn-mobile {
        @apply h-8 w-8 md:h-10 md:w-10;
    }

    /* Responsive spacing for header items */
    .header-spacing {
        @apply gap-1 sm:gap-2 lg:gap-3;
    }

    /* Custom animations */
    .animate-spin-slow {
        animation: spin 8s linear infinite;
    }

    /* Shimmer animation for skeleton loaders */
    @keyframes shimmer {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }

    .animate-shimmer {
        animation: shimmer 2s ease-in-out infinite;
    }

    /* Wave animation for skeleton loaders */
    @keyframes wave {
        0%,
        60%,
        100% {
            transform: initial;
        }
        30% {
            transform: translateY(-15px);
        }
    }

    .animate-wave {
        animation: wave 2s ease-in-out infinite;
    }

    /* Text hierarchy utilities */
    .text-hierarchy-1 {
        @apply text-2xl font-bold text-primary;
    }

    .text-hierarchy-2 {
        @apply text-xl font-semibold text-primary;
    }

    .text-hierarchy-3 {
        @apply text-lg font-medium text-secondary;
    }

    .text-hierarchy-4 {
        @apply text-base font-normal text-secondary;
    }
    /* Hide scrollbar but allow scrolling (cross-browser) */
    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    }

    /* WebKit (Chrome, Safari, Edge Chromium) */
    .no-scrollbar::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }

    .no-scrollbar::-webkit-scrollbar-thumb,
    .no-scrollbar::-webkit-scrollbar-track,
    .no-scrollbar::-webkit-scrollbar-corner {
        background: transparent;
        display: none;
    }

    /* Responsive width utilities for datatable */
    .datatable-responsive {
        /* Mobile first - base styles */
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Extra Small devices (phones, 0px to 575px) */
    @media (max-width: 575.98px) {
        .datatable-responsive {
            width: 100%;
            min-width: 320px;
            font-size: 0.875rem;
        }
    }

    /* Small devices (landscape phones, tablets, 576px to 767px) */
    @media (min-width: 576px) and (max-width: 767.98px) {
        .datatable-responsive {
            width: 100%;
            min-width: 576px;
        }
    }

    /* Medium devices (tablets, 768px to 991px) */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .datatable-responsive {
            width: 100%;
            min-width: 768px;
        }
    }

    /* Large devices (desktops, 992px to 1199px) */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .datatable-responsive {
            width: 100%;
            min-width: 992px;
        }
    }

    /* Extra Large devices (large desktops, 1200px to 1399px) */
    @media (max-width: 1399.98px) {
        .datatable-responsive {
            /* width: 100%; */
            max-width: 590px;
        }
    }

    /* Extra Extra Large devices (larger desktops, 1400px and up) */
    @media (min-width: 1400px) {
        .datatable-responsive {
            width: 100%;
            min-width: 1400px;
        }
    }
}