@import 'tailwindcss';

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

@theme {
    --font-sans: 'Inter', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

@layer base {
    :root {
        --construct-bg: #f8f9fa;
        --construct-surface: #ffffff;
        --construct-surface-low: #f3f4f5;
        --construct-surface-container: #edeeef;
        --construct-border: #bfc9bd;
        --construct-border-soft: #e1e3e4;
        --construct-text: #191c1d;
        --construct-muted: #404940;
        --construct-primary: #166534;
        --construct-primary-dark: #004c22;
        --construct-secondary: #006399;
        --construct-danger: #ba1a1a;
        --construct-warning: #b45309;
    }

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

    body {
        background: var(--construct-bg);
        color: var(--construct-text);
        font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    }

    input,
    select,
    textarea {
        border-color: #d1d5db;
        border-radius: 0.25rem;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--construct-primary);
        box-shadow: 0 0 0 2px rgb(22 101 52 / 0.14);
        outline: none;
    }
}

@layer components {
    .app-shell {
        min-height: 100vh;
        background: var(--construct-bg);
    }

    .app-sidebar {
        background: #f3f4f5;
        border-color: var(--construct-border);
    }

    .app-brand-mark {
        align-items: center;
        background: var(--construct-primary);
        border-radius: 0.25rem;
        color: #fff;
        display: inline-flex;
        font-size: 1.25rem;
        font-weight: 800;
        height: 2.5rem;
        justify-content: center;
        width: 2.5rem;
    }

    .app-nav-link {
        align-items: center;
        border-radius: 0.375rem;
        color: var(--construct-muted);
        display: flex;
        font-size: 0.925rem;
        font-weight: 500;
        gap: 0.75rem;
        padding: 0.625rem 0.75rem;
        transition: background-color 150ms ease, color 150ms ease;
    }

    .app-nav-link:hover {
        background: #e7e8e9;
        color: var(--construct-text);
    }

    .app-nav-link-active {
        background: #cfe6ff;
        color: #0d1c2f;
        font-weight: 700;
    }

    .app-topbar {
        background: var(--construct-surface);
        border-color: var(--construct-border);
    }

    .app-content {
        padding: 1rem 1rem 5.5rem;
    }

    @media (min-width: 768px) {
        .app-content {
            padding: 2rem;
        }
    }

    .material-symbols-outlined {
        font-size: 1.25rem;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        line-height: 1;
        vertical-align: middle;
    }

    .ops-page h1 {
        color: var(--construct-text);
        font-size: 1.625rem;
        font-weight: 800;
        letter-spacing: 0;
        line-height: 2rem;
    }

    .ops-page h2 {
        color: var(--construct-text);
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.5rem;
    }

    .ops-page > div:has(> h1),
    .ops-page > div:has(> div > h1) {
        border-bottom: 1px solid var(--construct-border-soft);
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .ops-page h1 + p,
    .ops-page h2 + p,
    .ops-page .mt-1.text-sm,
    .ops-page .mt-2.text-sm {
        color: var(--construct-muted);
    }

    .ops-page > form.mb-4,
    .ops-page > form.mb-6,
    .ops-page #document-bulk-form + div,
    .ops-page form[action*="bulk"] + div,
    .ops-page .mb-3.rounded.border.bg-white {
        background: var(--construct-surface);
        border-color: var(--construct-border);
        border-radius: 0.375rem;
        box-shadow: none;
        padding: 0.75rem;
    }

    .ops-page form.rounded,
    .ops-page section.rounded,
    .ops-page div.rounded.border.bg-white,
    .ops-page a.rounded.border.bg-white {
        border-color: var(--construct-border);
        border-radius: 0.375rem;
        box-shadow: none;
    }

    .ops-page .overflow-hidden.rounded.border.bg-white {
        border-color: var(--construct-border);
        border-radius: 0.375rem;
    }

    .ops-page section.rounded,
    .ops-page form.rounded {
        background: var(--construct-surface);
    }

    .ops-page section.rounded > h2:first-child,
    .ops-page .overflow-hidden.rounded.border.bg-white > .border-b:first-child {
        background: var(--construct-surface-low);
        border-color: var(--construct-border-soft);
        margin: -1.25rem -1.25rem 1rem;
        padding: 0.75rem 1rem;
    }

    .ops-page .overflow-hidden.rounded.border.bg-white > .border-b:first-child {
        margin: 0;
    }

    .ops-page .shadow-sm {
        box-shadow: none;
    }

    .ops-page button,
    .ops-page a {
        text-underline-offset: 3px;
    }

    .ops-page button.rounded,
    .ops-page a.rounded {
        border-radius: 0.25rem;
    }

    .ops-page button,
    .ops-page [type='button'],
    .ops-page [type='submit'],
    .ops-page a.inline-flex,
    .ops-page form + a.rounded,
    .ops-page div.flex > a.rounded {
        min-height: 2.375rem;
        align-items: center;
        display: inline-flex;
        justify-content: center;
    }

    .ops-page .bg-emerald-900,
    .ops-page .bg-zinc-900 {
        background-color: var(--construct-primary);
    }

    .ops-page .hover\:bg-emerald-800:hover,
    .ops-page .hover\:bg-zinc-800:hover {
        background-color: var(--construct-primary-dark);
    }

    .ops-page .text-emerald-800,
    .ops-page .text-emerald-900 {
        color: var(--construct-primary-dark);
    }

    .ops-page .border-zinc-200,
    .ops-page .border-zinc-300 {
        border-color: var(--construct-border);
    }

    .ops-page .divide-zinc-100 > :not([hidden]) ~ :not([hidden]) {
        border-color: var(--construct-border-soft);
    }

    .ops-page .hover\:bg-zinc-50:hover {
        background-color: var(--construct-surface-low);
    }

    .ops-page .text-zinc-600,
    .ops-page .text-zinc-700,
    .ops-page .text-zinc-500 {
        color: var(--construct-muted);
    }

    .ops-page label,
    .ops-page dt,
    .ops-page summary {
        color: var(--construct-muted);
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .ops-page label span,
    .ops-page label input,
    .ops-page label select {
        text-transform: none;
    }

    .ops-page input,
    .ops-page select,
    .ops-page textarea {
        background-color: #fff;
        min-height: 2.375rem;
    }

    .ops-page input[type='checkbox'] {
        min-height: auto;
    }

    .ops-page .divide-y > a,
    .ops-page .divide-y > div {
        transition: background-color 150ms ease;
    }

    .ops-page .divide-y > a:hover,
    .ops-page .divide-y > div:hover {
        background: var(--construct-surface-low);
    }

    .ops-page .grid > .rounded.border.bg-white.p-5,
    .ops-page section.grid > .rounded.border.bg-white.p-5,
    .ops-page a.rounded.border.bg-white.p-5 {
        padding: 1rem;
    }

    .ops-page .grid > .rounded.border.bg-white.p-5 .text-3xl,
    .ops-page section.grid > .rounded.border.bg-white.p-5 .text-3xl {
        color: var(--construct-primary-dark);
        font-size: 1.75rem;
        line-height: 2rem;
    }

    .ops-page .h-2.overflow-hidden.rounded.bg-zinc-100,
    .ops-page .h-2.overflow-hidden.rounded.bg-emerald-100 {
        border-radius: 9999px;
        height: 0.375rem;
    }

    .ops-page pre {
        border-radius: 0.25rem;
        font-size: 0.75rem;
    }

    @media (max-width: 767px) {
        .ops-page h1 {
            font-size: 1.375rem;
            line-height: 1.75rem;
        }

        .ops-page > div:has(> h1),
        .ops-page > div:has(> div > h1) {
            margin-bottom: 0.875rem;
            padding-bottom: 0.875rem;
        }

        .ops-page section.rounded,
        .ops-page form.rounded,
        .ops-page div.rounded.border.bg-white {
            padding: 1rem;
        }
    }
}

body {
    background: var(--construct-bg);
}

.tracking-tight,
.tracking-tighter,
.tracking-wide,
.tracking-wider,
.tracking-widest {
    letter-spacing: 0;
}