@import 'tailwindcss';

/* The NewUI proto stylesheets and the old Sidebar/AppLayout legacy component CSS
   (resources/css/{proto,components}/*.css) were all removed 2026-06-05 — every page
   now uses shadcn + Tailwind utilities. Form controls (Pengelolaan/Auth) live in
   Components/Form/FormControls; nothing relies on a global semantic stylesheet.
   This file = Tailwind + @theme tokens + a small base reset + the .toast rule. */

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.{js,jsx}';

/* Dark-mode variant — matches the original [data-theme="dark"] selector
   used by the legacy tokens.css. Lets us write `dark:*` utilities that
   hit the same root attribute the inherited CSS expects. */
@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));

/* Design tokens — migrated verbatim from public/.../assets/css/tokens.css.
   Tokens with the --color-* / --shadow-* / --radius-* / --font-* prefixes
   also auto-generate Tailwind utilities (bg-primary, text-text-heading...).

   Brand primary adopts the source design's deep-violet (#57008b) — chosen
   2026-06-04 over the prior indigo (#6d5ef6) to match the new visual
   foundation. These are the LIGHT-MODE values; [data-theme='dark'] below
   overrides the same --color-* tokens so every utility flips. */
@theme {
    --color-primary: #57008b;
    --color-primary-hover: #3d005f;
    --color-primary-light: #f4e9ff;
    --color-primary-soft: #fcf7ff;

    --color-wood-dark: #1a1a1a;
    --color-wood-medium: #4b5563;
    --color-wood-light: #f5f5f7;
    --color-wood-light-border: #e5e7eb;

    --color-surface: #ffffff;
    --color-surface-soft: #fafafa;
    /* Neutral grey (R=G=B). Was #f3f4f6 (Tailwind gray-100) whose blue channel runs
       higher than red — that cool cast reads as a faint lilac next to the violet brand,
       most visibly on the /25 zebra stripes. Feeds --secondary and --muted. */
    --color-surface-tint: #f5f5f5;
    --color-surface-hover: #fafafa;
    --color-surface-alt: #f6f7f9;
    --color-input-bg: #fafafa;
    --color-app-bg: #ffffff;

    --color-text-heading: #111111;
    --color-text-body: #4b5563;
    --color-text-muted: #6b7280;
    --color-text-placeholder: #9ca3af;
    --color-text-inverse: #ffffff;

    --color-border: #f1f1f1;
    --color-border-strong: #e5e7eb;
    --color-border-soft: #efeaff;
    --color-border-soft-strong: #ddd6fe;

    --color-sidebar-bg: #ffffff;
    --color-sidebar-hover: #f3f4f6;
    --color-sidebar-active-bg: #f4e9ff;
    --color-sidebar-icon-bg: #f3f4f6;
    --color-sidebar-icon-active-bg: #f4e9ff;
    --color-sidebar-icon-active-fg: #57008b;
    --color-sidebar-border: #f1f1f1;

    --color-success: #10b981;
    --color-success-bg: #d1fae5;
    --color-success-text: #065f46;
    --color-success-border: #a7f3d0;
    --color-warning: #f59e0b;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #92400e;
    --color-warning-border: #fde68a;
    --color-danger: #ef4444;
    --color-danger-bg: #fee2e2;
    --color-danger-text: #991b1b;
    --color-info: #3b82f6;
    --color-info-bg: #dbeafe;
    --color-info-text: #1e40af;

    --color-status-request-bg: #f0e1ff;
    --color-status-request-text: #57008b;
    --color-status-request-border: #ddd6fe;

    --color-stat-orange-bg: #ffedd5;
    --color-stat-orange-text: #9a3412;

    --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.04), 0 4px 12px rgb(17 24 39 / 0.04);
    --shadow-card: 0 1px 3px rgb(17 24 39 / 0.04), 0 8px 24px rgb(17 24 39 / 0.04);
    --shadow-modal: 0 40px 80px rgb(17 24 39 / 0.18);

    --radius-section: 14px;
    --radius-panel: 10px;
    --radius-field: 8px;

    --font-sans: Inter, Roboto, Arial, sans-serif;
}

/* shadcn/ui token bridge (Tailwind v4 `@theme inline`).
   ------------------------------------------------------------
   Exposes shadcn's semantic component vars (--background, --card,
   --primary-foreground, --muted, --accent, --destructive, --input,
   --ring, --radius-*, --chart-*) as Tailwind utilities (bg-background,
   text-card-foreground, bg-muted, border-input, rounded-lg ...).

   `inline` is REQUIRED: it makes the generated utilities reference the
   var() at use-site rather than baking the light value at build time —
   that is what lets them flip when [data-theme='dark'] reassigns the
   underlying --color-* tokens. (--color-primary and --color-border are
   intentionally NOT remapped here: they already exist in @theme above,
   so bg-primary / border-border already resolve and flip.) */
@theme inline {
    --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-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-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);

    /* (Removed 2026-06-05: the "NewUI compat" --color-heading/body/muted/placeholder/
       inverse aliases, unused after the proto conversion. Dropping --color-muted here
       lets the shadcn `bg-muted` utility resolve back to the light surface-tint
       (--muted) instead of the gray text color, fixing the long-standing bug.) */

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

/* Legacy alias layer — exposes the original short variable names
   (--primary, --surface, --text-heading, ...) so we can paste the
   inherited components.css / layout.css rules unchanged below. The
   shadcn semantic bridge vars are defined here too; both point at the
   single source of truth (the @theme --color-* tokens). */
@layer base {
    :root {
        color-scheme: light;

        --primary: var(--color-primary);
        --primary-hover: var(--color-primary-hover);
        --primary-light: var(--color-primary-light);
        --primary-soft: var(--color-primary-soft);

        --wood-dark: var(--color-wood-dark);
        --wood-medium: var(--color-wood-medium);
        --wood-light: var(--color-wood-light);
        --wood-light-border: var(--color-wood-light-border);

        --surface: var(--color-surface);
        --surface-soft: var(--color-surface-soft);
        --surface-tint: var(--color-surface-tint);
        --surface-hover: var(--color-surface-hover);
        --surface-alt: var(--color-surface-alt);
        --input-bg: var(--color-input-bg);
        --app-bg: var(--color-app-bg);

        --text-heading: var(--color-text-heading);
        --text-body: var(--color-text-body);
        --text-muted: var(--color-text-muted);
        --text-placeholder: var(--color-text-placeholder);
        --text-inverse: var(--color-text-inverse);

        --border: var(--color-border);
        --border-strong: var(--color-border-strong);
        --border-soft: var(--color-border-soft);
        --border-soft-strong: var(--color-border-soft-strong);

        --sidebar-bg: var(--color-sidebar-bg);
        --sidebar-fg: var(--color-text-body);
        --sidebar-fg-active: var(--color-primary-hover);
        --sidebar-hover: var(--color-sidebar-hover);
        --sidebar-active-bg: var(--color-sidebar-active-bg);
        --sidebar-icon-bg: var(--color-sidebar-icon-bg);
        --sidebar-icon-active-bg: var(--color-sidebar-icon-active-bg);
        --sidebar-icon-active-fg: var(--color-sidebar-icon-active-fg);
        --sidebar-border: var(--color-sidebar-border);
        --sidebar-brand-strong: var(--color-text-heading);
        --sidebar-brand-muted: var(--color-text-muted);

        --success: var(--color-success);
        --success-bg: var(--color-success-bg);
        --success-text: var(--color-success-text);
        --success-border: var(--color-success-border);
        --warning: var(--color-warning);
        --warning-bg: var(--color-warning-bg);
        --warning-text: var(--color-warning-text);
        --warning-border: var(--color-warning-border);
        --danger: var(--color-danger);
        --danger-bg: var(--color-danger-bg);
        --danger-text: var(--color-danger-text);
        --info: var(--color-info);
        --info-bg: var(--color-info-bg);
        --info-text: var(--color-info-text);

        --status-request-bg: var(--color-status-request-bg);
        --status-request-text: var(--color-status-request-text);
        --status-request-border: var(--color-status-request-border);

        --stat-orange-bg: var(--color-stat-orange-bg);
        --stat-orange-text: var(--color-stat-orange-text);

        --overlay: rgb(17 24 39 / 0.48);
        --label-mask-bg: var(--surface);

        /* shadcn/ui semantic vars → project --color-* tokens. They inherit
           the dark values automatically because [data-theme='dark'] below
           overrides the underlying --color-* tokens. (--primary and --border
           are already defined above and double as shadcn's --primary/--border.) */
        --background: var(--color-app-bg);
        --foreground: var(--color-text-body);
        --card: var(--color-surface);
        --card-foreground: var(--color-text-heading);
        --popover: var(--color-surface);
        --popover-foreground: var(--color-text-heading);
        --primary-foreground: var(--color-text-inverse);
        --secondary: var(--color-surface-tint);
        --secondary-foreground: var(--color-text-heading);
        --muted: var(--color-surface-tint);
        --muted-foreground: var(--color-text-muted);
        --accent: var(--color-primary-light);
        --accent-foreground: var(--color-primary-hover);
        --destructive: var(--color-danger);
        --destructive-foreground: var(--color-text-inverse);
        --input: var(--color-border-strong);
        --ring: var(--color-primary);
        --radius: 0.5rem;
        --chart-1: var(--color-primary);
        --chart-2: var(--color-info);
        --chart-3: var(--color-success);
        --chart-4: var(--color-warning);
        --chart-5: var(--color-danger);

        font-family: var(--font-sans);
    }

    /* Dark palette — overrides the @theme --color-* tokens (NOT just the
       short aliases) so EVERY generated utility flips: bg-surface,
       text-text-heading, border-border AND the shadcn-bridged bg-card,
       bg-muted, text-primary-foreground, border-input ... Toggled by
       useTheme via the [data-theme] attribute on <html>. */
    [data-theme='dark'] {
        color-scheme: dark;

        --color-primary: #c89cff;
        --color-primary-hover: #dab6ff;
        --color-primary-light: rgb(200 156 255 / 0.16);
        --color-primary-soft: rgb(200 156 255 / 0.08);

        --color-wood-dark: #0b1120;
        --color-wood-medium: #334155;
        --color-wood-light: #243043;
        --color-wood-light-border: #334155;

        --color-surface: #1e293b;
        --color-surface-soft: #243043;
        --color-surface-tint: #2a3447;
        --color-surface-hover: #2d384c;
        --color-surface-alt: #243043;
        --color-input-bg: #243043;
        --color-app-bg: #0f172a;

        --color-text-heading: #f1f5f9;
        --color-text-body: #cbd5e1;
        --color-text-muted: #94a3b8;
        --color-text-placeholder: #64748b;
        --color-text-inverse: #0f172a;

        --color-border: #334155;
        --color-border-strong: #475569;
        --color-border-soft: #3b2f63;
        --color-border-soft-strong: #4c1d95;

        --color-sidebar-bg: #1e293b;
        --color-sidebar-hover: #2a3447;
        --color-sidebar-active-bg: rgb(200 156 255 / 0.16);
        --color-sidebar-icon-bg: #2a3447;
        --color-sidebar-icon-active-bg: rgb(200 156 255 / 0.16);
        --color-sidebar-icon-active-fg: #c89cff;
        --color-sidebar-border: #334155;

        --color-success: #34d399;
        --color-success-bg: rgb(16 185 129 / 0.16);
        --color-success-text: #6ee7b7;
        --color-success-border: rgb(16 185 129 / 0.32);
        --color-warning: #fbbf24;
        --color-warning-bg: rgb(245 158 11 / 0.16);
        --color-warning-text: #fcd34d;
        --color-warning-border: rgb(245 158 11 / 0.32);
        --color-danger: #f87171;
        --color-danger-bg: rgb(239 68 68 / 0.16);
        --color-danger-text: #fca5a5;
        --color-info: #60a5fa;
        --color-info-bg: rgb(59 130 246 / 0.16);
        --color-info-text: #93c5fd;

        --color-status-request-bg: rgb(200 156 255 / 0.18);
        --color-status-request-text: #c89cff;
        --color-status-request-border: rgb(200 156 255 / 0.32);

        --color-stat-orange-bg: rgb(251 146 60 / 0.16);
        --color-stat-orange-text: #fdba74;

        --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
        --shadow-card: none;
        --shadow-modal: 0 24px 60px rgb(0 0 0 / 0.5);

        --overlay: rgb(0 0 0 / 0.6);
    }

    /* Default border color (Tailwind v4 ships `currentColor`). Restores a
       themed hairline so bare `border` utilities — used by shadcn Card and
       the `outline` Button variant — render with the token border, not text
       color. Explicit border-{color} utilities still override this. */
    *,
    ::after,
    ::before {
        box-sizing: border-box;
        border-color: var(--color-border);
    }

    html {
        min-width: 320px;
        background: var(--app-bg);
        color: var(--text-body);
        transition:
            background-color 180ms ease,
            color 180ms ease;
    }

    body {
        margin: 0;
        min-height: 100vh;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    button {
        cursor: pointer;
    }

    /* (The global input/select/textarea base rule that used to live here — relocated
       2026-06-05 from the deleted proto CSS — was REMOVED 2026-06-05 once every form
       in the app became self-styled: the Pengelolaan + Auth pages now use the
       Components/Form/FormControls (FormInput/FormSelect/FormTextarea) components, and
       all other inputs (shadcn ui, Proto pages, QuotationMenus) carry their own
       border/background utilities. No live bare input depends on a global rule now.) */
}

/* (Toast styling was inlined into Components/Toast.jsx as Tailwind utilities
   2026-06-08; the .toast/.toast.show rules that used to live here were removed.
   app.css is now Tailwind + @theme tokens + base reset only — no bespoke rules.) */