@import "tailwindcss";
@import "tw-animate-css";
@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-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);
    --color-scrollbar: var(--scrollbar);
    --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);
}

/* LIGHT THEME */
:root {
    --background: oklch(0.985 0.006 250);
    --foreground: oklch(0.19 0.025 250);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.19 0.025 250);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.19 0.025 250);
    --primary: oklch(0.69 0.16 164);
    --primary-foreground: oklch(0.99 0.005 165);
    --secondary: oklch(0.955 0.012 250);
    --secondary-foreground: oklch(0.25 0.025 250);
    --muted: oklch(0.955 0.012 250);
    --muted-foreground: oklch(0.49 0.025 250);
    --accent: oklch(0.95 0.025 164);
    --accent-foreground: oklch(0.25 0.04 164);
    --destructive: oklch(0.62 0.21 25);
    --destructive-foreground: oklch(0.99 0.005 25);
    --success: oklch(0.64 0.17 164);
    --success-foreground: oklch(0.99 0.005 165);
    --warning: oklch(0.72 0.16 80);
    --warning-foreground: oklch(0.24 0.05 80);
    --info: oklch(0.68 0.14 230);
    --info-foreground: oklch(0.99 0.005 230);
    --scrollbar: oklch(0.56 0.03 250);
    --border: oklch(0.89 0.018 250);
    --input: oklch(0.89 0.018 250);
    --ring: oklch(0.69 0.16 164);
    --chart-1: oklch(0.69 0.16 164);
    --chart-2: oklch(0.68 0.14 190);
    --chart-3: oklch(0.72 0.16 80);
    --chart-4: oklch(0.63 0.18 300);
    --chart-5: oklch(0.64 0.2 25);
    --radius: 0.75rem;
    --sidebar: oklch(0.98 0.008 250);
    --sidebar-foreground: oklch(0.28 0.025 250);
    --sidebar-primary: oklch(0.69 0.16 164);
    --sidebar-primary-foreground: oklch(0.99 0.005 165);
    --sidebar-accent: oklch(0.945 0.025 164);
    --sidebar-accent-foreground: oklch(0.25 0.04 164);
    --sidebar-border: oklch(0.89 0.018 250);
    --sidebar-ring: oklch(0.69 0.16 164);
}

/* DARK THEME */
.dark {
    --background: oklch(0.125 0.018 250);
    --foreground: oklch(0.965 0.012 245);
    --card: oklch(0.155 0.022 250);
    --card-foreground: oklch(0.965 0.012 245);
    --popover: oklch(0.145 0.02 250);
    --popover-foreground: oklch(0.965 0.012 245);
    --primary: oklch(0.78 0.17 164);
    --primary-foreground: oklch(0.13 0.025 165);
    --secondary: oklch(0.19 0.025 250);
    --secondary-foreground: oklch(0.92 0.015 245);
    --muted: oklch(0.19 0.025 250);
    --muted-foreground: oklch(0.62 0.025 245);
    --accent: oklch(0.21 0.035 250);
    --accent-foreground: oklch(0.97 0.01 245);
    --destructive: oklch(0.64 0.22 25);
    --destructive-foreground: oklch(0.98 0.01 25);
    --success: oklch(0.78 0.17 164);
    --success-foreground: oklch(0.12 0.02 165);
    --warning: oklch(0.76 0.17 80);
    --warning-foreground: oklch(0.18 0.04 80);
    --info: oklch(0.74 0.15 230);
    --info-foreground: oklch(0.12 0.02 230);
    --scrollbar: oklch(0.56 0.03 250);
    --border: oklch(0.27 0.025 250);
    --input: oklch(0.27 0.025 250);
    --ring: oklch(0.78 0.17 164);
    --chart-1: oklch(0.78 0.17 164);
    --chart-2: oklch(0.72 0.15 190);
    --chart-3: oklch(0.72 0.18 80);
    --chart-4: oklch(0.67 0.2 300);
    --chart-5: oklch(0.7 0.2 25);
    --sidebar: oklch(0.105 0.02 250);
    --sidebar-foreground: oklch(0.9 0.015 245);
    --sidebar-primary: oklch(0.78 0.17 164);
    --sidebar-primary-foreground: oklch(0.12 0.02 165);
    --sidebar-accent: oklch(0.18 0.03 250);
    --sidebar-accent-foreground: oklch(0.97 0.01 245);
    --sidebar-border: oklch(0.22 0.025 250);
    --sidebar-ring: oklch(0.78 0.17 164);
}

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

    /*
     * Product-wide keyboard focus treatment.
     * Keep focus visible without changing the visual hierarchy for pointer users.
     */
    :where(
        a,
        button,
        input,
        textarea,
        select,
        [role="button"],
        [role="checkbox"],
        [role="menuitem"],
        [tabindex]:not([tabindex="-1"])
    ):focus-visible {
        outline: 2px solid color-mix(
            in oklch,
            var(--ring) 88%,
            transparent
        );
        outline-offset: 2px;
    }

    :where(button, [role="button"]):disabled {
        cursor: not-allowed;
    }

    html,
    body,
    #app {
        min-height: 100%;
    }

    html {
        min-height: 100vh;
        background: var(--background);
        /* Keep the layout width stable when popovers/dropdowns change scrollbar state. */
        scrollbar-gutter: stable;
    }

    body {
        @apply bg-background text-foreground;
        min-height: 100vh;
        margin: 0;
        background-color: var(--background);
        background-image: radial-gradient(
            circle at 50% -20%,
            color-mix(in oklch, var(--primary) 10%, transparent),
            transparent 38%
        );
        font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }

    #app {
        min-height: 100vh;
        background: transparent;
    }

    [data-slot="sidebar-wrapper"],
    [data-slot="sidebar-inset"],
    [data-slot="sidebar"] {
        min-height: 100vh !important;
    }

    @media (min-width: 768px) {
        [data-slot="sidebar"] {
            height: 100vh !important;
        }
    }
}

* {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar) transparent !important;
}
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}
::-webkit-scrollbar-track {
    background: transparent !important;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar) !important;
    border-radius: 9999px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--success) !important;
}


/* Semantic product status tokens.
 * Use these instead of hard-coding green/amber/blue status colors so
 * customer-facing surfaces stay consistent across light and dark themes.
 */
@layer components {
    .ui-status-success {
        color: var(--success);
    }

    .ui-status-warning {
        color: var(--warning);
    }

    .ui-status-info {
        color: var(--info);
    }

    .ui-status-danger {
        color: var(--destructive);
    }

    .ui-status-success-surface {
        background: color-mix(in oklch, var(--success) 12%, transparent);
        border-color: color-mix(in oklch, var(--success) 28%, var(--border));
    }

    .ui-status-warning-surface {
        background: color-mix(in oklch, var(--warning) 12%, transparent);
        border-color: color-mix(in oklch, var(--warning) 28%, var(--border));
    }

    .ui-status-info-surface {
        background: color-mix(in oklch, var(--info) 12%, transparent);
        border-color: color-mix(in oklch, var(--info) 28%, var(--border));
    }

    .ui-status-danger-surface {
        background: color-mix(in oklch, var(--destructive) 12%, transparent);
        border-color: color-mix(in oklch, var(--destructive) 28%, var(--border));
    }
}

/* Theme-aware product chrome */
[data-slot="card"] {
    background: color-mix(in oklch, var(--card) 92%, transparent);
    border-color: color-mix(in oklch, var(--border) 75%, transparent);
    box-shadow: 0 12px 36px color-mix(in srgb, #000 7%, transparent);
    backdrop-filter: blur(14px);
}

[data-slot="input"],
input,
textarea,
select {
    background: var(--input) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}
[data-slot="input"]::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--muted-foreground) !important;
}
[data-slot="input"]:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: color-mix(
        in oklch,
        var(--primary) 65%,
        var(--border)
    ) !important;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 12%, transparent) !important;
    outline: none !important;
}

[data-sidebar="sidebar"] {
    background: linear-gradient(
        180deg,
        color-mix(in oklch, var(--sidebar) 100%, transparent) 0%,
        var(--background) 100%
    ) !important;
    border-right: 1px solid var(--sidebar-border) !important;
    box-shadow: 10px 0 40px color-mix(in srgb, #000 8%, transparent) !important;
}
[data-sidebar="sidebar"] [data-sidebar="header"],
[data-sidebar="sidebar"] [data-sidebar="footer"] {
    border-color: var(--sidebar-border) !important;
    background: color-mix(in oklch, var(--sidebar) 92%, transparent) !important;
}
[data-sidebar="sidebar"] [data-sidebar="group-label"] {
    color: var(--muted-foreground) !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.65rem;
}
[data-sidebar="sidebar"] [data-sidebar="menu-button"] {
    color: var(--sidebar-foreground) !important;
    border-radius: 10px;
    transition: 0.2s ease;
}
[data-sidebar="sidebar"] [data-sidebar="menu-button"] svg {
    color: var(--muted-foreground) !important;
}
[data-sidebar="sidebar"] [data-sidebar="menu-button"]:hover {
    background: var(--sidebar-accent) !important;
    color: var(--foreground) !important;
}
[data-sidebar="sidebar"] [data-sidebar="menu-button"]:hover svg {
    color: var(--primary) !important;
}
[data-sidebar="sidebar"] [data-sidebar="menu-button"][data-active="true"] {
    background: color-mix(in oklch, var(--primary) 13%, transparent) !important;
    color: var(--primary) !important;
    box-shadow: inset 2px 0 0 var(--primary);
}
[data-sidebar="sidebar"] [data-sidebar="menu-button"][data-active="true"] svg {
    color: var(--primary) !important;
}

[data-radix-popper-content-wrapper] [role="menu"],
[data-slot="dialog-content"],
[data-slot="sheet-content"] {
    background: var(--popover) !important;
    border-color: var(--border) !important;
    color: var(--popover-foreground) !important;
    box-shadow: 0 30px 80px color-mix(in srgb, #000 25%, transparent) !important;
}

.trading-terminal {
    background: var(--background);
}

/* Compatibility layer for the existing premium dark templates in LIGHT mode. */
html:not(.dark) .bg-\[\#050b13\],
html:not(.dark) .bg-\[\#050b13\]\/75,
html:not(.dark) .bg-\[\#050b13\]\/95,
html:not(.dark) .bg-\[\#050b13\]\/90,
html:not(.dark) .bg-\[\#0a111c\],
html:not(.dark) .bg-\[\#0a111c\]\/70,
html:not(.dark) .bg-\[\#0a111c\]\/85,
html:not(.dark) .bg-\[\#0a111c\]\/95,
html:not(.dark) .bg-\[\#0d1622\]\/95 {
    background: var(--card) !important;
}

html:not(.dark) [class*="bg-white/[0.0"],
html:not(.dark) [class*="bg-white/[0.025"],
html:not(.dark) [class*="bg-white/[0.03"],
html:not(.dark) [class*="bg-white/[0.04"],
html:not(.dark) [class*="bg-white/[0.05"],
html:not(.dark) [class*="bg-white/[0.018"] {
    background: color-mix(
        in oklch,
        var(--foreground) 4%,
        transparent
    ) !important;
}

html:not(.dark) [class*="border-white/"] {
    border-color: var(--border) !important;
}
html:not(.dark) [class*="text-white"] {
    color: var(--foreground) !important;
}
html:not(.dark) [class*="text-slate-200"],
html:not(.dark) [class*="text-slate-300"] {
    color: var(--foreground) !important;
}
html:not(.dark) [class*="text-slate-400"] {
    color: var(--muted-foreground) !important;
}
html:not(.dark) [class*="text-slate-500"],
html:not(.dark) [class*="text-slate-600"] {
    color: color-mix(
        in oklch,
        var(--muted-foreground) 88%,
        transparent
    ) !important;
}
html:not(.dark) [class*="text-[#04120d]"] {
    color: white !important;
}

html:not(.dark) [class*="shadow-[0_30px"],
html:not(.dark) [class*="shadow-[0_20px"],
html:not(.dark) [class*="shadow-2xl"] {
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.1) !important;
}

/*
 * Cross-page responsive safeguards for customer, admin, auth, and trading views.
 * These rules complement each page's Tailwind breakpoints without imposing a
 * fixed desktop canvas on small screens.
 */
@layer base {
    html,
    body,
    #app {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body {
        overflow-x: clip;
    }

    #app,
    [data-slot="sidebar-wrapper"],
    [data-slot="sidebar-inset"],
    [data-slot="card"],
    main,
    section,
    article,
    form {
        min-width: 0;
    }

    [data-slot="sidebar-inset"] {
        width: 100%;
        max-width: 100%;
    }

    img,
    video,
    canvas {
        max-width: 100%;
    }

    input,
    textarea,
    select,
    button,
    [role="button"] {
        min-width: 0;
        max-width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    label,
    th,
    td,
    [data-slot="card-title"],
    [data-slot="card-description"] {
        overflow-wrap: anywhere;
    }

    [data-slot="table-container"] {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    [data-slot="dialog-content"],
    [data-slot="sheet-content"] {
        min-width: 0;
        max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .trading-terminal {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    @media (max-width: 639px) {
        [data-slot="sidebar-inset"] > main,
        [data-slot="sidebar-inset"] > header,
        main,
        section,
        article,
        form {
            min-width: 0;
            max-width: 100%;
        }

        [data-slot="table-container"] table {
            width: max-content;
            min-width: 100%;
        }

        [data-slot="dialog-content"] {
            width: calc(100vw - 1rem);
        }

        .trading-terminal [data-slot="card"] {
            max-width: 100%;
        }
    }
}


/*
 * Respect users who prefer reduced motion. This is especially important in
 * the analysis workspace where charts, signal states, and panels can update
 * frequently.
 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Keep text selection legible across the light/dark product chrome. */
::selection {
    background: color-mix(in oklch, var(--primary) 24%, transparent);
    color: var(--foreground);
}