@import 'tailwindcss';
@source '../js/**/*.vue';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";

@layer base {
    :where(
        button:not(:disabled),
        a[href],
        [role='button']:not([aria-disabled='true']),
        summary,
        label[for]
    ) {
        cursor: pointer;
    }

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

:root {
    --z-content: 0;
    --z-sticky: 10;
    --z-local-control: 20;
    --z-page-overlay: 30;
    --z-drawer: 40;
    --z-global-shell: 50;
    --z-global-dropdown: 60;
    --z-modal: 80;
    --z-toast: 100;
}

@utility z-content {
    z-index: var(--z-content);
}
@utility z-sticky {
    z-index: var(--z-sticky);
}
@utility z-local-control {
    z-index: var(--z-local-control);
}
@utility z-page-overlay {
    z-index: var(--z-page-overlay);
}
@utility z-drawer-backdrop {
    z-index: calc(var(--z-drawer) - 1);
}
@utility z-drawer {
    z-index: var(--z-drawer);
}
@utility z-global-shell {
    z-index: var(--z-global-shell);
}
@utility z-global-dropdown {
    z-index: var(--z-global-dropdown);
}
@utility z-modal {
    z-index: var(--z-modal);
}
@utility z-toast {
    z-index: var(--z-toast);
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('@fontsource/roboto/files/roboto-latin-400-normal.woff2?inline') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url('@fontsource/roboto/files/roboto-latin-500-normal.woff2?inline') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('@fontsource/roboto/files/roboto-latin-600-normal.woff2?inline') format('woff2');
}

@theme {
    --color-neutral-50: #f8f9fb;
    --color-neutral-100: #e9e9eb;
    --color-neutral-200: #d8d8da;
    --color-neutral-300: #c3c3c5;
    --color-neutral-400: #a8a8aa;
    --color-neutral-500: #89898a;
    --color-neutral-600: #686869;
    --color-neutral-700: #49494a;
    --color-neutral-800: #313131;
    --color-neutral-900: #202020;
    --color-primary-50: #f5f8ff;
    --color-primary-100: #d9e5fd;
    --color-primary-200: #bbd1fc;
    --color-primary-300: #95b7fa;
    --color-primary-400: #6496f8;
    --color-primary-500: #2c71f6;
    --color-primary-600: #2763d8;
    --color-primary-700: #2257be;
    --color-primary-800: #1c489e;
    --color-primary-900: #16387b;
    --color-success-50: #f1f9f4;
    --color-success-100: #d5f0dc;
    --color-success-200: #b5e6bf;
    --color-success-300: #8bd999;
    --color-success-400: #55c868;
    --color-success-500: #17b530;
    --color-success-600: #149f2a;
    --color-success-700: #128c25;
    --color-success-800: #0f741f;
    --color-success-900: #0c5b18;
    --color-warning-50: #fdfaf3;
    --color-warning-100: #fdf2d7;
    --color-warning-200: #fde9b7;
    --color-warning-300: #fddd8d;
    --color-warning-400: #fecf57;
    --color-warning-500: #ffbe18;
    --color-warning-600: #e0a715;
    --color-warning-700: #c59312;
    --color-warning-800: #a47a0f;
    --color-warning-900: #805f0c;
    --color-danger-50: #fcf6f8;
    --color-danger-100: #fbdbde;
    --color-danger-200: #fabfc2;
    --color-danger-300: #f99c9e;
    --color-danger-400: #f86f70;
    --color-danger-500: #f73b3b;
    --color-danger-600: #d93434;
    --color-danger-700: #bf2e2e;
    --color-danger-800: #9f2626;
    --color-danger-900: #7c1e1e;
    --font-sans:
        'Roboto', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --text-heading: 2rem;
    --text-heading--line-height: 1.4;
    --text-heading--letter-spacing: 0;
    --text-heading-1: 1.75rem;
    --text-heading-1--line-height: 1.4;
    --text-heading-1--letter-spacing: 0;
    --text-heading-2: 1.5rem;
    --text-heading-2--line-height: 1.4;
    --text-heading-2--letter-spacing: 0;
    --text-heading-3: 1.25rem;
    --text-heading-3--line-height: 1.4;
    --text-heading-3--letter-spacing: 0;
    --text-heading-4: 1.125rem;
    --text-heading-4--line-height: 1.4;
    --text-heading-4--letter-spacing: 0;
    --text-heading-5: 1rem;
    --text-heading-5--line-height: 1.4;
    --text-heading-5--letter-spacing: 0;
    --text-body-1: 1rem;
    --text-body-1--line-height: 1.4;
    --text-body-1--letter-spacing: 0;
    --text-body-2: 0.875rem;
    --text-body-2--line-height: 1.4;
    --text-body-2--letter-spacing: 0;
    --text-body-3: 0.75rem;
    --text-body-3--line-height: 1.4;
    --text-body-3--letter-spacing: 0;
    --text-label: 0.625rem;
    --text-label--line-height: 1;
    --text-label--letter-spacing: 0;
}

@theme inline {
    --color-page: var(--juris-page);
    --color-surface: var(--juris-surface);
    --color-surface-elevated: var(--juris-surface-elevated);
    --color-surface-subtle: var(--juris-surface-subtle);
    --color-surface-disabled: var(--juris-surface-disabled);
    --color-content: var(--juris-text);
    --color-content-secondary: var(--juris-text-secondary);
    --color-content-muted: var(--juris-text-muted);
    --color-content-disabled: var(--juris-text-disabled);
    --color-border: var(--juris-border);
    --color-border-strong: var(--juris-border-strong);
    --color-border-disabled: var(--juris-border-disabled);
    --color-focus: var(--juris-focus);
    --color-action: var(--juris-action);
    --color-action-hover: var(--juris-action-hover);
    --color-action-active: var(--juris-action-active);
    --color-action-subtle: var(--juris-action-subtle);
    --color-action-subtle-hover: var(--juris-action-subtle-hover);
    --color-on-action: var(--juris-on-action);
    --color-success-surface: var(--juris-success-surface);
    --color-success-content: var(--juris-success-content);
    --color-success-border: var(--juris-success-border);
    --color-success-action: var(--juris-success-action);
    --color-success-action-hover: var(--juris-success-action-hover);
    --color-success-action-active: var(--juris-success-action-active);
    --color-on-success-action: var(--juris-on-success-action);
    --color-warning-surface: var(--juris-warning-surface);
    --color-warning-content: var(--juris-warning-content);
    --color-warning-border: var(--juris-warning-border);
    --color-warning-action: var(--juris-warning-action);
    --color-warning-action-hover: var(--juris-warning-action-hover);
    --color-warning-action-active: var(--juris-warning-action-active);
    --color-on-warning-action: var(--juris-on-warning-action);
    --color-danger-surface: var(--juris-danger-surface);
    --color-danger-content: var(--juris-danger-content);
    --color-danger-border: var(--juris-danger-border);
    --color-danger-action: var(--juris-danger-action);
    --color-danger-action-hover: var(--juris-danger-action-hover);
    --color-danger-action-active: var(--juris-danger-action-active);
    --color-on-danger-action: var(--juris-on-danger-action);
}

:root,
html[data-theme='light'] {
    color-scheme: light;
    --juris-page: var(--color-neutral-50);
    --juris-surface: #ffffff;
    --juris-surface-elevated: #ffffff;
    --juris-surface-subtle: var(--color-neutral-100);
    --juris-surface-disabled: var(--color-neutral-100);
    --juris-text: var(--color-neutral-900);
    --juris-text-secondary: var(--color-neutral-700);
    --juris-text-muted: var(--color-neutral-600);
    --juris-text-disabled: var(--color-neutral-500);
    --juris-border: var(--color-neutral-200);
    --juris-border-strong: var(--color-neutral-400);
    --juris-border-disabled: var(--color-neutral-200);
    --juris-focus: var(--color-primary-400);
    --juris-action: var(--color-primary-600);
    --juris-action-hover: var(--color-primary-700);
    --juris-action-active: var(--color-primary-800);
    --juris-action-subtle: var(--color-primary-50);
    --juris-action-subtle-hover: var(--color-primary-100);
    --juris-on-action: #ffffff;
    --juris-success-surface: var(--color-success-50);
    --juris-success-content: var(--color-success-900);
    --juris-success-border: var(--color-success-500);
    --juris-success-action: var(--color-success-700);
    --juris-success-action-hover: var(--color-success-800);
    --juris-success-action-active: var(--color-success-900);
    --juris-on-success-action: #ffffff;
    --juris-warning-surface: var(--color-warning-100);
    --juris-warning-content: var(--color-warning-900);
    --juris-warning-border: var(--color-warning-500);
    --juris-warning-action: var(--color-warning-400);
    --juris-warning-action-hover: var(--color-warning-500);
    --juris-warning-action-active: var(--color-warning-600);
    --juris-on-warning-action: var(--color-neutral-900);
    --juris-danger-surface: var(--color-danger-50);
    --juris-danger-content: var(--color-danger-900);
    --juris-danger-border: var(--color-danger-500);
    --juris-danger-action: var(--color-danger-600);
    --juris-danger-action-hover: var(--color-danger-700);
    --juris-danger-action-active: var(--color-danger-800);
    --juris-on-danger-action: #ffffff;
    --juris-dashboard-welcome-start: #123d68;
    --juris-dashboard-welcome-end: #168da0;
    --juris-dashboard-welcome-text: #ffffff;
    --juris-dashboard-welcome-muted: #d7e8f1;
    --juris-dashboard-welcome-border: rgb(255 255 255 / 0.28);
    --juris-dashboard-gold: #d9aa62;
    --juris-dashboard-blue: #2763d8;
    --juris-dashboard-cyan: #1597aa;
    --juris-dashboard-amber: #d99116;
}

html[data-theme='dark'] {
    color-scheme: dark;
    --juris-page: #162b34;
    --juris-surface: #203a45;
    --juris-surface-elevated: #2f4f5c;
    --juris-surface-subtle: #294752;
    --juris-surface-disabled: #385762;
    --juris-text: var(--color-neutral-50);
    --juris-text-secondary: var(--color-neutral-200);
    --juris-text-muted: var(--color-neutral-400);
    --juris-text-disabled: var(--color-neutral-500);
    --juris-border: #45616b;
    --juris-border-strong: #6f8790;
    --juris-border-disabled: #3b5660;
    --juris-focus: var(--color-primary-300);
    --juris-action: var(--color-primary-400);
    --juris-action-hover: var(--color-primary-300);
    --juris-action-active: var(--color-primary-200);
    --juris-action-subtle: var(--color-primary-900);
    --juris-action-subtle-hover: var(--color-primary-800);
    --juris-on-action: var(--color-neutral-900);
    --juris-success-surface: var(--color-success-900);
    --juris-success-content: var(--color-success-100);
    --juris-success-border: var(--color-success-500);
    --juris-success-action: var(--color-success-400);
    --juris-success-action-hover: var(--color-success-300);
    --juris-success-action-active: var(--color-success-200);
    --juris-on-success-action: var(--color-neutral-900);
    --juris-warning-surface: var(--color-warning-900);
    --juris-warning-content: var(--color-warning-100);
    --juris-warning-border: var(--color-warning-500);
    --juris-warning-action: var(--color-warning-400);
    --juris-warning-action-hover: var(--color-warning-300);
    --juris-warning-action-active: var(--color-warning-200);
    --juris-on-warning-action: var(--color-neutral-900);
    --juris-danger-surface: var(--color-danger-900);
    --juris-danger-content: var(--color-danger-100);
    --juris-danger-border: var(--color-danger-500);
    --juris-danger-action: var(--color-danger-400);
    --juris-danger-action-hover: var(--color-danger-300);
    --juris-danger-action-active: var(--color-danger-200);
    --juris-on-danger-action: var(--color-neutral-900);
    --juris-dashboard-welcome-start: #102f45;
    --juris-dashboard-welcome-end: #245d68;
    --juris-dashboard-welcome-text: #f8f9fb;
    --juris-dashboard-welcome-muted: #c8d8de;
    --juris-dashboard-welcome-border: rgb(216 232 237 / 0.22);
    --juris-dashboard-gold: #d9aa62;
    --juris-dashboard-blue: #74a4ff;
    --juris-dashboard-cyan: #58c6d4;
    --juris-dashboard-amber: #f2b84b;
}

body {
    @apply bg-page text-content;
}

.auth-backdrop {
    background:
        radial-gradient(
            circle at 18% 18%,
            color-mix(in srgb, var(--juris-action) 12%, transparent) 0,
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 76%,
            color-mix(in srgb, var(--juris-surface-elevated) 58%, transparent) 0,
            transparent 34%
        ),
        linear-gradient(
            145deg,
            transparent 35%,
            color-mix(in srgb, var(--juris-border) 22%, transparent) 50%,
            transparent 65%
        );
}

.auth-backdrop::before {
    position: absolute;
    inset: 0;
    content: '';
    opacity: 0.28;
    background-image: radial-gradient(
        circle,
        var(--juris-border-strong) 0.75px,
        transparent 0.85px
    );
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse at center, black, transparent 72%);
}

.dashboard-welcome {
    color: var(--juris-dashboard-welcome-text);
    background: linear-gradient(
        118deg,
        var(--juris-dashboard-welcome-start),
        var(--juris-dashboard-welcome-end)
    );
}

.dashboard-welcome-muted {
    color: var(--juris-dashboard-welcome-muted);
}
.dashboard-welcome-border {
    border-color: var(--juris-dashboard-welcome-border);
}
.dashboard-gold {
    color: var(--juris-dashboard-gold);
}
.dashboard-metric-blue {
    --dashboard-metric-accent: var(--juris-dashboard-blue);
}
.dashboard-metric-cyan {
    --dashboard-metric-accent: var(--juris-dashboard-cyan);
}
.dashboard-metric-amber {
    --dashboard-metric-accent: var(--juris-dashboard-amber);
}
.dashboard-metric-card {
    border-bottom: 3px solid var(--dashboard-metric-accent);
}
.dashboard-metric-icon {
    color: var(--dashboard-metric-accent);
    background: color-mix(in srgb, var(--dashboard-metric-accent) 12%, var(--juris-surface));
}

*,
::before,
::after {
    border-color: var(--juris-border);
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@utility type-helper {
    @apply text-body-3 text-content-secondary;
}

@utility type-muted {
    @apply text-body-2 text-content-muted;
}

@utility type-link-1 {
    @apply text-body-2 font-medium text-action underline hover:text-action-hover;
    line-height: 1;
    letter-spacing: 0;
    text-underline-offset: 0.125em;
}

@utility type-link-2 {
    @apply text-body-3 font-medium text-action underline hover:text-action-hover;
    line-height: 1;
    letter-spacing: 0;
    text-underline-offset: 0.125em;
}