@import 'tailwindcss';

@import 'tw-animate-css';

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

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

@theme inline {
    --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-success: var(--success);
    --color-success-foreground: var(--success-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-background);
    --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);

    --animate-accordion-down: accordion-down 0.2s ease-out;
    --animate-accordion-up: accordion-up 0.2s ease-out;

    @keyframes accordion-down {
        from { height: 0; }
        to { height: var(--reka-accordion-content-height); }
    }
    @keyframes accordion-up {
        from { height: var(--reka-accordion-content-height); }
        to { height: 0; }
    }
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

@layer utilities {
    body,
    html {
        --font-sans:
            'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    }
}

/* =============================================================================
   Tradixor ERP — LIGHT MODE
   ─────────────────────────────────────────────────────────────────────────────
   Brand Palette:
     Navy Depth      #0F1E45   hsl(218 62% 16%)   sidebar, logo, dark anchor
     Trade Blue      #136396   hsl(205 78% 33%)   primary actions, links
     Ocean Blue      #2799D0   hsl(204 65% 48%)   highlights, info, hover tints
     Trade Amber     #F49A0E   hsl(37 93% 51%)    accent, warnings, active nav
     Clearance Green #28A645   hsl(141 58% 40%)   success states
     Danger Red      #DC2626   hsl(0 72% 51%)     destructive, errors, overdue
   ============================================================================= */
:root {
    /* Surfaces */
    --background:                hsl(210 20% 98%);       /* off-white, cool blue tint */
    --foreground:                hsl(218 47% 12%);       /* near-navy dark text */

    --card:                      hsl(0 0% 100%);
    --card-foreground:           hsl(218 47% 12%);

    --popover:                   hsl(0 0% 100%);
    --popover-foreground:        hsl(218 47% 12%);

    /* Primary — Trade Blue #136396 */
    --primary:                   hsl(205 78% 33%);
    --primary-foreground:        hsl(0 0% 100%);

    /* Secondary — light blue-slate surface */
    --secondary:                 hsl(210 20% 93%);
    --secondary-foreground:      hsl(205 78% 22%);

    /* Muted */
    --muted:                     hsl(210 20% 93%);
    --muted-foreground:          hsl(210 15% 45%);

    /* Accent — Trade Amber #F49A0E tint; active nav, warnings, hover highlights */
    --accent:                    hsl(37 93% 93%);        /* amber wash surface */
    --accent-foreground:         hsl(37 93% 25%);        /* deep amber text on tint */

    /* Destructive — Danger Red #DC2626 */
    --destructive:               hsl(0 72% 51%);
    --destructive-foreground:    hsl(0 0% 100%);

    /* Success — Clearance Green #28A645 */
    --success:                   hsl(141 58% 40%);
    --success-foreground:        hsl(0 0% 100%);

    /* Borders & Inputs */
    --border:                    hsl(210 20% 87%);
    --input:                     hsl(210 20% 87%);
    --ring:                      hsl(205 78% 33%);       /* matches --primary */

    /* Border Radius */
    --radius:                    0.5rem;

    /* Scrollbar */
    --scrollbar-thumb:           rgba(19, 99, 150, 0.50);
    --scrollbar-thumb-hover:     rgba(19, 99, 150, 0.85);

    /* Chart Colors — brand-harmonious */
    --chart-1:                   hsl(205 78% 40%);       /* Trade Blue mid */
    --chart-2:                   hsl(37 93% 51%);        /* Trade Amber */
    --chart-3:                   hsl(204 65% 60%);       /* Ocean Blue light */
    --chart-4:                   hsl(141 58% 40%);       /* Clearance Green */
    --chart-5:                   hsl(218 62% 35%);       /* Navy mid */

    /* Sidebar — bright/clean light mode */
    --sidebar:                   hsl(0 0% 98%);
    --sidebar-background:        hsl(0 0% 98%);
    --sidebar-foreground:        hsl(218 47% 22%);
    --sidebar-primary:           hsl(205 78% 33%);       /* Trade Blue */
    --sidebar-primary-foreground:hsl(0 0% 100%);
    --sidebar-accent:            hsl(204 55% 90%);
    --sidebar-accent-foreground: hsl(205 78% 22%);
    --sidebar-border:            hsl(210 20% 87%);
    --sidebar-ring:              hsl(205 78% 33%);
}

/* =============================================================================
   Tradixor ERP — DARK MODE
   ─────────────────────────────────────────────────────────────────────────────
   Background:  Deep navy-slate  (not pure black — preserves brand warmth)
   Primary:     Ocean Blue       hsl(204 65% 52%)  — readable on dark
   Sidebar:     Navy Depth       hsl(218 62% 10%)  — #0F1E45 the brand anchor
   ============================================================================= */
.dark {
    /* Surfaces */
    --background:                hsl(218 47% 9%);        /* deep navy-black */
    --foreground:                hsl(210 30% 94%);       /* near-white, blue tint */

    --card:                      hsl(218 42% 13%);       /* slightly lighter than bg */
    --card-foreground:           hsl(210 30% 94%);

    --popover:                   hsl(218 44% 11%);
    --popover-foreground:        hsl(210 30% 94%);

    /* Primary — Ocean Blue for dark bg contrast */
    --primary:                   hsl(204 65% 52%);       /* #2799D0 — accessible on dark */
    --primary-foreground:        hsl(0 0% 100%);

    /* Secondary */
    --secondary:                 hsl(218 35% 18%);
    --secondary-foreground:      hsl(210 30% 90%);

    /* Muted */
    --muted:                     hsl(218 35% 18%);
    --muted-foreground:          hsl(210 20% 60%);

    /* Accent — Trade Amber #F49A0E tint for dark bg */
    --accent:                    hsl(37 80% 22%);        /* deep amber hover surface on dark */
    --accent-foreground:         hsl(37 93% 80%);        /* warm amber text on dark surface */

    /* Destructive — slightly brighter red for dark mode */
    --destructive:               hsl(0 72% 57%);
    --destructive-foreground:    hsl(0 0% 100%);

    /* Success — Clearance Green, brightened for dark bg legibility */
    --success:                   hsl(141 55% 48%);
    --success-foreground:        hsl(0 0% 100%);

    /* Borders & Inputs */
    --border:                    hsl(218 28% 22%);
    --input:                     hsl(218 28% 22%);
    --ring:                      hsl(204 65% 52%);

    /* Border Radius — same as light */
    --radius:                    0.5rem;

    /* Scrollbar */
    --scrollbar-thumb:           rgba(39, 153, 208, 0.50);
    --scrollbar-thumb-hover:     rgba(39, 153, 208, 0.80);

    /* Chart Colors — vibrant for dark bg */
    --chart-1:                   hsl(204 65% 55%);       /* Ocean Blue */
    --chart-2:                   hsl(37 93% 56%);        /* Trade Amber */
    --chart-3:                   hsl(204 55% 72%);       /* light Ocean Blue */
    --chart-4:                   hsl(141 55% 50%);       /* Clearance Green */
    --chart-5:                   hsl(218 55% 65%);       /* muted navy-blue */

    /* Sidebar — Navy Depth #0F1E45 dark sidebar */
    --sidebar:                   hsl(218 42% 13%);
    --sidebar-background:        hsl(218 62% 10%);       /* darkest, #0F1E45 anchor */
    --sidebar-foreground:        hsl(210 25% 82%);
    --sidebar-primary:           hsl(204 65% 52%);       /* Ocean Blue — active text */
    --sidebar-primary-foreground:hsl(0 0% 100%);
    --sidebar-accent:            hsl(205 45% 20%);
    --sidebar-accent-foreground: hsl(210 30% 94%);
    --sidebar-border:            hsl(218 28% 18%);
    --sidebar-ring:              hsl(204 65% 52%);
}

/* =============================================================================
   BASE LAYER
   ============================================================================= */
@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    body {
        @apply bg-background text-foreground;
    }
}

/* =============================================================================
   CUSTOM SCROLLBARS — Tradixor brand blue
   Tokens are defined in :root and .dark above.
   ============================================================================= */
@layer components {

    /* ── Shared rules across ALL three variants ─────────────────────────── */
    .custom-scrollbar,
    .custom-scrollbar-horizontal,
    .custom-scrollbar-vertical {
        scrollbar-color: var(--scrollbar-thumb) transparent;  /* Firefox */
        -ms-overflow-style: -ms-autohiding-scrollbar;         /* IE fallback */
    }

    .custom-scrollbar::-webkit-scrollbar-track,
    .custom-scrollbar-horizontal::-webkit-scrollbar-track,
    .custom-scrollbar-vertical::-webkit-scrollbar-track,
    .custom-scrollbar::-webkit-scrollbar-corner,
    .custom-scrollbar-horizontal::-webkit-scrollbar-corner,
    .custom-scrollbar-vertical::-webkit-scrollbar-corner {
        background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-track,
    .custom-scrollbar-horizontal::-webkit-scrollbar-track,
    .custom-scrollbar-vertical::-webkit-scrollbar-track {
        border-radius: 2px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb,
    .custom-scrollbar-horizontal::-webkit-scrollbar-thumb,
    .custom-scrollbar-vertical::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 2px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover,
    .custom-scrollbar-horizontal::-webkit-scrollbar-thumb:hover,
    .custom-scrollbar-vertical::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover);
    }

    @media (prefers-reduced-motion: no-preference) {
        .custom-scrollbar::-webkit-scrollbar-thumb,
        .custom-scrollbar-horizontal::-webkit-scrollbar-thumb,
        .custom-scrollbar-vertical::-webkit-scrollbar-thumb {
            transition: background 0.3s ease;
        }
    }

    @media (prefers-contrast: high) {
        .custom-scrollbar,
        .custom-scrollbar-horizontal,
        .custom-scrollbar-vertical {
            --scrollbar-thumb: rgba(19, 99, 150, 0.95);       /* Trade Blue full opacity */
        }
    }

    /* ── Variant-specific rules (only what differs per variant) ─────────── */

    /* Both axes — ultra-thin 1px */
    .custom-scrollbar {
        scrollbar-width: thin;
        &::-webkit-scrollbar { width: 1px; height: 1px; }
    }

    /* Horizontal only — for wide tables */
    .custom-scrollbar-horizontal {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        &::-webkit-scrollbar { width: 0; height: 4px; }
    }

    /* Vertical only — for navigation/sidebars */
    .custom-scrollbar-vertical {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        &::-webkit-scrollbar { width: 4px; height: 0; }
    }

    /* ── Custom checkbox — appearance-none removes the native mark;
       we restore it via SVG background-images on :checked / :indeterminate.
       Used globally as class="checkbox-native ..." ─────────────────────── */
    .checkbox-native:checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .checkbox-native:indeterminate {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3crect x='3' y='7' width='10' height='2' rx='1'/%3e%3c/svg%3e");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
}