@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

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

/*
 * RAMS design tokens: the "Emilia" palette, taken from the official logo. Single source of truth.
 * Nila = the logo navy (#001032 = nila-900), Langit = the logo wave (#4ABBFA = langit-400),
 * Kunyit = attention fill. Neutrals are tinted toward the navy so Flux greys sit in the same family.
 * Light values here; dark values under `.dark` in @layer theme below ("navy by day, sky by night").
 * Contrast (WCAG 2.2): accent button 14.6:1, links 8.3:1, muted 6.4:1 on ground, control border 3.96:1;
 * dark: accent button 8.7:1, links 10.4:1, muted 7.8:1, control border 4.3:1.
 */
@theme {
    --font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;

    /* Nila (navy): hue of the logo lettering; 900 is the exact logo colour. */
    --color-nila-50: #F0F5FC;
    --color-nila-100: #DCE7F7;
    --color-nila-200: #B9CDEE;
    --color-nila-300: #93B0E2;
    --color-nila-400: #6489CC;
    --color-nila-500: #3D66B0;
    --color-nila-600: #244C94;
    --color-nila-700: #153877;
    --color-nila-800: #0A2659;
    --color-nila-900: #001032;

    /* Langit (sky): the logo wave; 400 is the exact logo colour. Fills and decoration; text only from 700 up (6:1). */
    --color-langit-50: #EEF8FF;
    --color-langit-100: #D9F0FE;
    --color-langit-200: #B3E2FD;
    --color-langit-300: #80CFFB;
    --color-langit-400: #4ABBFA;
    --color-langit-500: #1EA2EA;
    --color-langit-600: #0B84C6;
    --color-langit-700: #0A689D;
    --color-langit-800: #0C5480;
    --color-langit-900: #0E4468;

    /* Kunyit (turmeric): attention fill only, always with ink text, never as text. */
    --color-kunyit: #E3A21A;

    --color-ground: #F3F6FA;
    --color-surface: #FFFFFF;
    --color-ink: #0B1530;
    --color-muted: #4E5A70;
    --color-line: #DAE1EA;
    --color-control-border: #74809A;

    --color-success: #17663F;
    --color-danger: #B42318;
    --color-warning-ink: #8A5300;

    --radius-control: 0.75rem;
    --radius-object: 1.25rem;

    /* Zinc remapped to navy-tinted neutrals: Flux uses zinc for its greys, so every Flux component joins the palette. */
    --color-zinc-50: #F7F9FC;
    --color-zinc-100: #EEF2F7;
    --color-zinc-200: #E0E6EE;
    --color-zinc-300: #C8D0DC;
    --color-zinc-400: #99A4B7;
    --color-zinc-500: #606C83;
    --color-zinc-600: #4B566B;
    --color-zinc-700: #343E51;
    --color-zinc-800: #1E2738;
    --color-zinc-900: #121A2A;
    --color-zinc-950: #080D19;

    /* Flux reads these three. Buttons wear the navy; links a brighter navy so they stand apart from ink. */
    --color-accent: var(--color-nila-800);
    --color-accent-content: var(--color-nila-600);
    --color-accent-foreground: #FFFFFF;
}

@layer theme {
    .dark {
        --color-ground: #060C1A;
        --color-surface: #0E1729;
        --color-ink: #E7ECF5;
        --color-muted: #A0ACC2;
        --color-line: #213049;
        --color-control-border: #6F7D98;

        --color-success: #4ADE80;
        --color-danger: #F97066;
        --color-warning-ink: #FBBF24;

        --color-accent: var(--color-langit-400);
        --color-accent-content: var(--color-langit-300);
        --color-accent-foreground: var(--color-nila-900);
    }
}

@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-line, currentColor);
    }
}

/* content-start: in a grid row stretched by a taller neighbour, keep label and control at the top so fields line up. */
[data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid content-start gap-2;
}

[data-flux-label] {
    @apply  !mb-0 !leading-tight;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}

/*
 * Flux contrast overrides (audit F9, F10, F18). CSS hooks only; vendor views stay untouched.
 * Unlayered rules beat Flux's utility classes (which live in @layer utilities).
 */

/* F9: error text meets 4.5:1 in both modes. */
[data-flux-error] {
    color: var(--color-danger);
}

/*
 * Required fields: a red asterisk after the label of any field whose own control carries `required`.
 * Decorative only (empty alt text): screen readers already announce "required" from the control.
 */
[data-flux-field]:not(:has([data-flux-field])):has([data-flux-control][required], [required] [data-flux-control], [data-flux-control] [required]) > [data-flux-label]::after {
    content: "*" / "";
    margin-inline-start: 0.25rem;
    color: var(--color-danger);
    font-weight: 600;
}

/* F10: control boundaries meet 3:1 against the surface. */
input[data-flux-control]:not([data-invalid]),
textarea[data-flux-control]:not([data-invalid]),
select[data-flux-control]:not(.border-red-500),
ui-checkbox:not([data-checked], [data-indeterminate]) [data-flux-checkbox-indicator],
ui-radio:not([data-checked]) [data-flux-radio-indicator] {
    border-color: var(--color-control-border);
}

input[data-flux-control][data-invalid],
textarea[data-flux-control][data-invalid],
select[data-flux-control].border-red-500 {
    border-color: var(--color-danger);
}

/* F18: amber badge text one step darker in light mode (amber-700 -> amber-800). */
[data-flux-badge].text-amber-700:not(:where(.dark, .dark *)) {
    color: var(--color-amber-800);
}

/*
 * Sidebar (S3): Flux hooks `data-flux-sidebar-item`, `data-content`, `data-flux-navlist-badge`, `data-flux-sidebar-brand`
 * (guarded by NavigationTest). Long BM labels wrap instead of truncating; the item grows from its fixed h-8/h-10.
 */
[data-flux-sidebar-item] {
    height: auto;
    min-height: 2rem;
    padding-block: 0.375rem;
}

[data-flux-sidebar-on-mobile] [data-flux-sidebar-item] {
    min-height: 2.5rem;
}

[data-flux-sidebar-item] [data-content],
[data-flux-sidebar-brand] > div:last-child {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

[data-flux-sidebar-brand] {
    height: auto;
    min-height: 2.5rem;
}

[data-flux-sidebar-item]:focus-visible,
[data-flux-sidebar-brand]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Portal navigation: navy surface, nested disclosures and a compact desktop rail. */
.portal-sidebar {
    height: 100dvh;
    overflow: hidden;
    color-scheme: dark;
}

.portal-sidebar > :not([data-flux-sidebar-nav]) {
    flex-shrink: 0;
}

.portal-sidebar:not([data-flux-sidebar-collapsed-desktop]) {
    width: calc(var(--spacing) * 72);
}

.portal-sidebar [data-flux-sidebar-header] {
    padding-bottom: calc(var(--spacing) * 3);
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.portal-nav-identity {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 2);
}

.portal-nav-eyebrow {
    color: var(--color-langit-300);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-nav-association {
    color: var(--color-zinc-300);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.portal-sidebar [data-flux-sidebar-nav] {
    flex: 1;
    min-height: 0;
    gap: calc(var(--spacing) * 1.5);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--color-nila-500) transparent;
    padding: var(--spacing);
    scroll-padding-block: var(--spacing);
}

.portal-sidebar [data-flux-sidebar-nav] > * {
    flex-shrink: 0;
}

.portal-sidebar[data-flux-sidebar-collapsed-desktop] [data-flux-sidebar-nav] {
    width: calc(var(--spacing) * 10);
    scrollbar-gutter: auto;
    scrollbar-width: none;
    padding-inline: 0;
}

.portal-sidebar[data-flux-sidebar-collapsed-desktop] [data-flux-sidebar-item]:focus-visible,
.portal-sidebar[data-flux-sidebar-collapsed-desktop] .portal-nav-trigger:focus-visible {
    outline-offset: -2px;
}

.portal-nav-trigger {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    width: 100%;
    min-height: calc(var(--spacing) * 11);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    border-radius: var(--radius-control);
    color: var(--color-zinc-200);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.portal-nav-trigger:hover,
.portal-sidebar [data-flux-sidebar-item]:hover {
    background: rgb(255 255 255 / 0.08);
    color: white;
}

.portal-nav-trigger:focus-visible {
    outline: 2px solid var(--color-langit-300);
    outline-offset: 2px;
}

.portal-nav-group--active > .portal-nav-trigger {
    color: var(--color-langit-200);
    background: rgb(255 255 255 / 0.06);
}

.portal-nav-label {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.portal-nav-chevron {
    margin-inline-start: auto;
    color: var(--color-zinc-400);
}

.portal-nav-group {
    min-width: 0;
}

.portal-nav-children {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: var(--spacing);
    margin: var(--spacing) 0 calc(var(--spacing) * 2) calc(var(--spacing) * 5);
    padding-inline-start: calc(var(--spacing) * 3);
    border-inline-start: 1px solid rgb(255 255 255 / 0.18);
}

.portal-nav-children > * {
    min-width: 0;
}

.portal-nav-count {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--spacing) * 5);
    padding-inline: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-control);
    background: var(--color-kunyit);
    color: var(--color-nila-900);
    font-size: var(--text-xs);
    font-weight: 700;
}

.portal-sidebar [data-flux-sidebar-item] {
    min-height: calc(var(--spacing) * 11);
    border-radius: var(--radius-control);
    color: var(--color-zinc-300);
}

.portal-sidebar [data-flux-sidebar-item][data-current] {
    background: var(--color-nila-700);
    color: white;
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--color-langit-400);
}

.portal-sidebar[data-flux-sidebar-collapsed-desktop] .portal-nav-trigger {
    width: calc(var(--spacing) * 10);
    justify-content: center;
    padding-inline: 0;
}

.portal-sidebar[data-flux-sidebar-collapsed-desktop] .portal-nav-label,
.portal-sidebar[data-flux-sidebar-collapsed-desktop] .portal-nav-chevron,
.portal-sidebar[data-flux-sidebar-collapsed-desktop] .portal-nav-count,
.portal-sidebar[data-flux-sidebar-collapsed-desktop] .portal-nav-children,
.portal-sidebar[data-flux-sidebar-collapsed-desktop] .portal-nav-identity {
    display: none !important;
}

/* Pending-work badges: Kunyit fill with dark text. */
[data-flux-sidebar-item] [data-flux-navlist-badge] {
    background-color: var(--color-kunyit);
    color: var(--color-ink);
    font-weight: 700;
}

.dark [data-flux-sidebar-item] [data-flux-navlist-badge] {
    color: var(--color-ground);
}

/* Skip link (F19): hidden until focused. */
.skip-link {
    @apply sr-only;
}

.skip-link:focus {
    @apply not-sr-only fixed start-4 top-4 z-50 rounded-control bg-surface px-4 py-2 font-semibold text-ink shadow-lg;
}

.skip-link:focus-visible {
    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-ground;
}

/*
 * Glass control layer, inspired by Apple's Liquid Glass (a CSS approximation, not the native material).
 * Use on floating controls only (step progress, action bar); content surfaces stay solid for legibility.
 * Tint is 78% surface so text keeps >= 4.5:1 over anything that scrolls behind it.
 */
.glass-bar {
    background-color: color-mix(in srgb, var(--color-surface) 78%, transparent);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.6),
        0 1px 2px rgb(3 12 68 / 0.06),
        0 10px 32px -10px rgb(3 12 68 / 0.22);
}

.dark .glass-bar {
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.08),
        0 10px 32px -10px rgb(0 0 0 / 0.6);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-bar {
        background-color: var(--color-surface);
    }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .glass-bar {
        background-color: var(--color-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: var(--color-control-border);
    }
}

/*
 * App design system (from the /register/membership redesign). Applies everywhere:
 * solid content surfaces, glass only on floating controls (.glass-bar above), hints under their field.
 */

/* Soft brand light behind every layout, so the glass layer has something to pick up. Static (no motion). */
.app-ambient {
    background:
        radial-gradient(48rem 32rem at 12% -8%, color-mix(in srgb, var(--color-langit-200) 50%, transparent), transparent 70%),
        radial-gradient(40rem 28rem at 100% 30%, color-mix(in srgb, var(--color-nila-200) 35%, transparent), transparent 70%),
        radial-gradient(44rem 30rem at 30% 110%, color-mix(in srgb, var(--color-langit-100) 60%, transparent), transparent 70%);
}

.dark .app-ambient {
    background:
        radial-gradient(48rem 32rem at 12% -8%, color-mix(in srgb, var(--color-langit-500) 14%, transparent), transparent 70%),
        radial-gradient(44rem 30rem at 30% 110%, color-mix(in srgb, var(--color-nila-600) 22%, transparent), transparent 70%);
}

/* Current nav item: navy tint + a sky edge bar (the logo wave colour). The bar is a shape cue, not colour alone; aria-current carries the state. */
[data-flux-sidebar-item][data-current] {
    background-color: var(--color-nila-50);
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--color-langit-400);
}

.dark [data-flux-sidebar-item][data-current] {
    background-color: color-mix(in srgb, var(--color-langit-400) 12%, transparent);
}

/* Type: tracking is size-specific. Large headings tighten; body stays at 0. */
[data-flux-heading].text-2xl,
[data-flux-heading].text-xl {
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Content surfaces: every flux:card plus .surface-card (hero/form cards). Solid, generous radius, soft depth. */
[data-flux-card],
.surface-card {
    background-color: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
    border-radius: var(--radius-object);
    box-shadow:
        0 1px 2px rgb(3 12 68 / 0.04),
        0 12px 40px -12px rgb(3 12 68 / 0.12);
}

.surface-card {
    border-radius: 1.75rem;
}

/* A card inside a card is a tinted panel, not another floating layer. */
:is([data-flux-card], .surface-card) [data-flux-card] {
    background-color: color-mix(in srgb, var(--color-ground) 70%, transparent);
    box-shadow: none;
}

.dark [data-flux-card],
.dark .surface-card {
    box-shadow: 0 12px 40px -12px rgb(0 0 0 / 0.5);
}

/* Controls: rounder corners (not inside input groups, whose joined edges Flux squares off). */
:is(input, select, textarea)[data-flux-control]:not([data-flux-input-group] *) {
    border-radius: var(--radius-control);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

/*
 * Hints sit under their control everywhere, so fields sharing a row always line up.
 * Visual order only: the DOM (and screen readers) still give the hint before the control.
 * Inline fields (checkbox, switch, radio) keep Flux's own layout.
 */
[data-flux-field]:has(> [data-flux-control], > [data-flux-input], > [data-flux-input-file], > [data-flux-input-group], > [data-flux-select]) > [data-flux-description]:not(:first-child) {
    order: 1;
    margin-block: 0;
}

/*
 * M2 (F29): minimise motion, including Flux modal and toast transitions.
 * Spinners (`animate-spin`: flux:icon.loading, Flux button loading indicator) are exempt:
 * they are essential progress feedback, not decorative motion.
 */
@media (prefers-reduced-motion: reduce) {
    *:not(.animate-spin),
    ::before,
    ::after,
    ::backdrop {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}