@import 'tailwindcss';
@import 'tw-animate-css';
@import '@fortawesome/fontawesome-free/css/all.min.css';
@import './brand.css';
@import './shell.css';
@import './dialog.css';
@import './console.css';
@import './billing.css';
@import './billing-id.css';

@source '../../storage/framework/views/*.php';

/* The theme is <html data-theme="light|dark"> (app.blade.php; useAppearance), so shadcn-vue's dark: variant reads it. */
@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));

@theme inline {
    --font-sans:
        Figtree, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono:
        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

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

    /* The family's own roles, beside shadcn-vue's. */
    --color-quiet: var(--quiet);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-info: var(--info);
    --color-slate: var(--slate);
    --color-hero: var(--hero);
    --color-hero-2: var(--hero-2);
    --color-hero-accent: var(--hero-accent);
}

:root {
    --radius: 0.625rem;
}

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

/*
 * A panel slides in from the start of the line (S9): the build writes tw-animate's :dir(rtl) as a list of known
 * right-to-left language codes, but a language's direction is its folder's own (shell.direction, the page's dir), so
 * the side follows dir. Unlayered, so it wins over the utility.
 */
[dir='rtl'] [data-sheet-side='left'] {
    --tw-enter-translate-x: 100%;
    --tw-exit-translate-x: 100%;
}
[dir='rtl'] [data-sheet-side='right'] {
    --tw-enter-translate-x: -100%;
    --tw-exit-translate-x: -100%;
}

/*
 * Icons that point along the line turn round with it (S9): an arrow "forward" points to the end. Wherever one is drawn,
 * a page's own or a button's `icon`, it is on this list (LanguageGuardTest); a two-way icon (fa-arrows-left-right) isn't.
 */
[dir='rtl']
    :is(
        .fa-chevron-left,
        .fa-chevron-right,
        .fa-right-left,
        .fa-arrow-left,
        .fa-arrow-right,
        .fa-right-from-bracket,
        .fa-right-to-bracket,
        .lucide-chevron-right,
        .lucide-panel-left-open,
        .lucide-panel-left-close
    ,
    .fa-arrow-up-right-from-square) {
    transform: scaleX(-1);
}