/*
 * Hand-authored static stylesheet for the small set of reusable component
 * classes (buttons, cards, inputs, tables, nav links) used throughout the
 * Blade views. Utility classes (flex, grid, text-*, p-*, etc.) are handled
 * at runtime by the Tailwind Play CDN script — this file only covers the
 * custom classes that would normally need a Tailwind build step (`@apply`).
 * No Node.js / build step is required to use or edit this file.
 */

@font-face {
    font-family: "InterLocal";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "InterLocal";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "InterLocal";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "InterLocal";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "InterLocal";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-800-normal.woff2") format("woff2");
}

html {
    scroll-behavior: smooth;
    font-size: 14px;
}

body {
    background: linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
    color: #172033;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: InterLocal, Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9375rem;
}
html.dark body {
    background-color: #020617;
    color: #f1f5f9;
}

/* Buttons — modern Tailwind style: 10px radius, normal height, interactive states */
:where(.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-pill) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.425rem;
    border-radius: 0.625rem;
    height: 2.25rem;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease, color 150ms ease, filter 150ms ease;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.425rem;
    border-radius: 0.625rem;
    height: 2.25rem;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease, color 150ms ease, filter 150ms ease;
    cursor: pointer;
    border: none;
}
:where(.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-pill):active { transform: scale(0.98); }
:where(.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-pill):focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-500, #3b82f6); }
html.dark :where(.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-pill):focus-visible { box-shadow: 0 0 0 2px #020617, 0 0 0 4px var(--brand-500, #3b82f6); }
:where(.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-pill):disabled,
:where(.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-pill).disabled { cursor: not-allowed; opacity: .5; transform: none; }

.btn-sm { height: 1.95rem; padding: 0 0.65rem; font-size: 0.75rem; border-radius: 0.55rem; }
.btn-lg { height: 2.625rem; padding: 0 1.25rem; font-size: 0.875rem; }

.btn-primary {
    background-color: var(--brand-600, #2563eb);
    background-image: linear-gradient(135deg, var(--brand-600, #2563eb), var(--brand-500, #3b82f6));
    color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.06), 0 8px 18px -10px var(--brand-600, rgba(37,99,235,.55)), inset 0 1px 0 0 rgba(255,255,255,.16);
}
.btn-primary:hover { filter: brightness(1.04); box-shadow: 0 10px 24px -14px var(--brand-600, rgba(37,99,235,.65)), inset 0 1px 0 0 rgba(255,255,255,.18); }

.btn-secondary {
    background-color: #fff;
    color: #0f172a;
    box-shadow: inset 0 0 0 1px #d8dee8, 0 1px 2px 0 rgba(0,0,0,.04);
}
.btn-secondary:hover { background-color: #f8fafc; box-shadow: inset 0 0 0 1px #c7d0dc, 0 1px 3px 0 rgba(0,0,0,.06); }
html.dark .btn-secondary { background-color: #1e293b; color: #e2e8f0; box-shadow: inset 0 0 0 1px #334155; }
html.dark .btn-secondary:hover { background-color: #263449; box-shadow: inset 0 0 0 1px #3f4f68; }

.btn-danger { background-color: #dc2626; color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.btn-danger:hover { background-color: #b91c1c; box-shadow: 0 4px 10px -2px rgba(220,38,38,.35); }

.btn-ghost {
    background-color: transparent;
    color: #64748b;
    box-shadow: none;
}
.btn-ghost:hover { background-color: #f1f5f9; color: #0f172a; }
html.dark .btn-ghost { color: #94a3b8; }
html.dark .btn-ghost:hover { background-color: #1e293b; color: #f8fafc; }

.btn-icon,
.btn-icon-sm {
    padding: 0;
    width: 2.05rem;
    height: 2.05rem;
}
.btn-icon-sm {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
}

.btn-pill {
    height: 1.85rem;
    border-radius: 9999px;
    padding: 0 0.75rem;
    background-color: #fff;
    color: #475569;
    box-shadow: inset 0 0 0 1px #e2e8f0, 0 1px 2px 0 rgba(15,23,42,.05);
}
.btn-pill:hover { background-color: #f8fafc; color: #0f172a; }
.btn-pill.is-active {
    background-color: var(--brand-600, #2563eb);
    color: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-600, #2563eb) 88%, #000 12%), 0 6px 16px -10px var(--brand-600, rgba(37,99,235,.65));
}
html.dark .btn-pill {
    background-color: #1e293b;
    color: #cbd5e1;
    box-shadow: inset 0 0 0 1px #334155, 0 1px 2px 0 rgba(0,0,0,.2);
}
html.dark .btn-pill:hover { background-color: #263449; color: #fff; }
html.dark .btn-pill.is-active { background-color: var(--brand-600, #2563eb); color: #fff; }

/* Cards */
.card {
    border-radius: 0.875rem;
    border: 1px solid rgba(213,222,235,.8);
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(15,23,42,.05), 0 12px 28px -24px rgba(15,23,42,.28);
}
html.dark .card { border-color: #1e293b; background-color: #0f172a; }

/* Form inputs — modern Tailwind style: 10px radius, normal height, smooth focus ring */
:where(
    .input,
    input[type="text"]:not([class*="rounded-"]),
    input[type="email"]:not([class*="rounded-"]),
    input[type="password"]:not([class*="rounded-"]),
    input[type="number"]:not([class*="rounded-"]),
    input[type="date"]:not([class*="rounded-"]),
    input[type="search"]:not([class*="rounded-"]),
    input[type="tel"]:not([class*="rounded-"]),
    input[type="url"]:not([class*="rounded-"]),
    input[type="file"]:not([class*="rounded-"]),
    select:not([class*="rounded-"]),
    textarea:not([class*="rounded-"])
) {
    display: block;
    width: 100%;
    height: 2.25rem;
    border-radius: 0.625rem;
    border: 1px solid #d8dee8;
    background-color: #fff;
    color: #0f172a;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    padding: 0 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.03);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
:where(textarea.input, textarea:not([class*="rounded-"])) { height: auto; min-height: 5.5rem; padding: 0.55rem 0.75rem; line-height: 1.4; }
:where(select.input, select:not([class*="rounded-"])) {
    padding: 0.45rem 2.25rem 0.45rem 0.75rem;
    line-height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1.15rem;
    appearance: none;
}
select.input {
    height: 2.25rem;
    min-height: 2.25rem;
    line-height: 1.25rem !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    padding-right: 2.25rem !important;
}
select.input.h-7 {
    height: 1.9rem !important;
    min-height: 1.9rem;
    line-height: 1.05rem !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}
select.input.h-8 {
    height: 2.1rem !important;
    min-height: 2.1rem;
    line-height: 1.1rem !important;
    padding-top: 0.38rem !important;
    padding-bottom: 0.38rem !important;
}
:where(.input, input, select, textarea):hover { border-color: #b9c3d1; }
:where(.input, input, select, textarea)::placeholder { color: #9ca3af; }
:where(.input, input, select, textarea):focus {
    outline: none;
    border-color: var(--brand-500, #3b82f6);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand-500, #3b82f6) 22%, transparent);
}
:where(.input, input, select, textarea):disabled { background-color: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
html.dark :where(.input, input:not([class*="rounded-"]), select:not([class*="rounded-"]), textarea:not([class*="rounded-"])) { background-color: #0f172a; color: #f1f5f9; border-color: #334155; }
html.dark :where(select.input, select:not([class*="rounded-"])) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
html.dark :where(.input, input, select, textarea):hover { border-color: #475569; }
html.dark :where(.input, input, select, textarea):focus { border-color: var(--brand-500, #3b82f6); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand-500, #3b82f6) 28%, transparent); }
html.dark :where(.input, input, select, textarea):disabled { background-color: #1e293b; color: #64748b; }

/* Keep shared inputs rounded even when Tailwind Forms injects stronger type selectors. */
.input {
    border-radius: 0.625rem;
    border-color: #d8dee8;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.03);
}
input.input,
select.input,
textarea.input {
    border-radius: 0.625rem;
    border-color: #d8dee8;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.03);
}
.input:hover { border-color: #b9c3d1; }
.input:focus {
    border-color: var(--brand-500, #3b82f6);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand-500, #3b82f6) 22%, transparent);
}
input.input:focus,
select.input:focus,
textarea.input:focus {
    border-color: var(--brand-500, #3b82f6);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand-500, #3b82f6) 22%, transparent);
}
html.dark .input { background-color: #0f172a; border-color: #334155; }
html.dark input.input,
html.dark select.input,
html.dark textarea.input {
    background-color: #0f172a;
    border-color: #334155;
}
html.dark .input:hover { border-color: #475569; }
html.dark .input:focus {
    border-color: var(--brand-500, #3b82f6);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand-500, #3b82f6) 28%, transparent);
}
html.dark input.input:focus,
html.dark select.input:focus,
html.dark textarea.input:focus {
    border-color: var(--brand-500, #3b82f6);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand-500, #3b82f6) 28%, transparent);
}

/* Input group — leading icon inside the field, à la Tailwind UI "Input Groups" */
.input-group { position: relative; }
.input-group .input { padding-left: 2.5rem; }
.input-group .input-icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    display: flex;
}
.input-group .input-icon svg { height: 1.1rem; width: 1.1rem; }

.label { margin-bottom: 0.3rem; display: block; font-size: 0.8125rem; font-weight: 500; color: #475569; }
html.dark .label { color: #cbd5e1; }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
}

/* Tables */
.table-wrap { overflow-x: auto; border-radius: 0.625rem; border: 1px solid #e2e8f0; }
html.dark .table-wrap { border-color: #1e293b; }

.table-base { min-width: 100%; font-size: 0.8125rem; border-collapse: collapse; }
.table-base thead { background-color: #f8fafc; }
html.dark .table-base thead { background-color: rgba(30,41,59,.6); }
.table-base th {
    padding: 0.6rem 0.8rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}
html.dark .table-base th { color: #94a3b8; border-color: #1e293b; }
.table-base td { white-space: nowrap; padding: 0.6rem 0.8rem; color: #334155; border-bottom: 1px solid #f1f5f9; }
html.dark .table-base td { color: #e2e8f0; border-color: #1e293b; }
.table-base tbody tr { background-color: #fff; transition: background-color 150ms ease; }
.table-base tbody tr:hover { background-color: #f8fafc; }
html.dark .table-base tbody tr { background-color: #0f172a; }
html.dark .table-base tbody tr:hover { background-color: rgba(30,41,59,.6); }

/* Sidebar navigation links — Tailwind UI dark sidebar convention */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.375rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: #cbd5e1;
    transition: color 150ms ease, background-color 150ms ease;
    text-decoration: none;
}
.nav-link:hover { background-color: rgba(255,255,255,.08); color: #fff; }
.nav-link.active { background-color: rgba(255,255,255,.1); color: #fff; }
.nav-link svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.sidebar-nav { font-size: 0.78rem; }
@media (min-width: 1024px) {
    .sidebar-shell.is-collapsed {
        overflow: visible !important;
    }
    .sidebar-shell.is-collapsed .sidebar-nav {
        overflow: visible !important;
    }
    .sidebar-shell.is-collapsed .nav-link {
        position: relative;
    }
    .sidebar-shell.is-collapsed .nav-link[data-tooltip]::before,
    .sidebar-shell.is-collapsed .nav-link[data-tooltip]::after {
        position: absolute;
        top: 50%;
        left: calc(100% + 0.55rem);
        z-index: 80;
        opacity: 0;
        pointer-events: none;
        transform: translate(0, -50%) scale(0.96);
        transition: opacity 120ms ease, transform 120ms ease;
    }
    .sidebar-shell.is-collapsed .nav-link[data-tooltip]::before {
        content: "";
        left: calc(100% + 0.25rem);
        border: 6px solid transparent;
        border-right-color: #0f172a;
    }
    .sidebar-shell.is-collapsed .nav-link[data-tooltip]::after {
        content: attr(data-tooltip);
        min-width: max-content;
        max-width: 14rem;
        border: 1px solid rgba(148,163,184,.22);
        border-radius: 0.65rem;
        background: #0f172a;
        color: #fff;
        box-shadow: 0 18px 40px -24px rgba(2,6,23,.7);
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1rem;
        padding: 0.45rem 0.65rem;
        white-space: nowrap;
    }
    .sidebar-shell.is-collapsed .nav-link[data-tooltip]:hover::before,
    .sidebar-shell.is-collapsed .nav-link[data-tooltip]:hover::after,
    .sidebar-shell.is-collapsed .nav-link[data-tooltip]:focus-visible::before,
    .sidebar-shell.is-collapsed .nav-link[data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translate(0.25rem, -50%) scale(1);
    }
}

/* Compact polish for common page surfaces. Keeps legacy p-6 cards readable but less bulky. */
main.thin-scroll { background: linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%); }
html.dark main.thin-scroll { background: #020617; }
.card.p-6 { padding: 1rem; }
.card.p-5 { padding: 0.9rem; }
.card.p-4 { padding: 0.85rem; }
.card.mb-6 { margin-bottom: 1rem; }
.card.mt-6 { margin-top: 1rem; }
h1, h2, h3 { letter-spacing: -0.01em; }

/* Select2 skin for barcode labels and future multi-select pages. */
.select2-container { width: 100% !important; font-size: 0.8125rem; }
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    min-height: 2.25rem;
    border: 1px solid #d8dee8;
    border-radius: 0.625rem;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(15,23,42,.03);
}
.select2-container--default .select2-selection--single {
    height: 2.25rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.15rem;
    padding-left: 0.75rem;
    padding-right: 2rem;
    color: #0f172a;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.15rem;
    right: 0.45rem;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--brand-500, #3b82f6);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand-500, #3b82f6) 22%, transparent);
}
.select2-container--default .select2-selection--multiple { padding: 0.2rem 0.35rem; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0.12rem 0.2rem 0.12rem 0;
    border: 0;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--brand-500, #3b82f6) 12%, #fff);
    color: #1e3a8a;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem 0.1rem 1.15rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 0;
    color: #64748b;
    padding-left: 0.25rem;
}
.select2-container--default .select2-search--inline .select2-search__field {
    height: 1.5rem;
    margin-top: 0;
    font-family: inherit;
    font-size: 0.8125rem;
}
.select2-dropdown {
    border-color: #d8dee8;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 18px 40px -28px rgba(15,23,42,.45);
}
.select2-results__option { font-size: 0.8125rem; padding: 0.45rem 0.65rem; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--brand-600, #2563eb);
}
html.dark .select2-container--default .select2-selection--multiple,
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-dropdown {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #1e293b;
    color: #dbeafe;
}
html.dark .select2-container--default .select2-search--inline .select2-search__field,
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark .select2-results__option { color: #e2e8f0; }

/* Sidebar nav scroll area — invisible scrollbar until hovered */
.sidebar-nav { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sidebar-nav:hover { scrollbar-color: rgba(255,255,255,.25) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 9999px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.25); }
.sidebar-nav:hover::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.4); }

/* Utility animations (referenced via class="animate-fade-in" etc. through the Tailwind config) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Generic thin, hover-only scrollbar for light-background scroll areas (e.g. main content) */
.thin-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.thin-scroll:hover { scrollbar-color: #cbd5e1 transparent; }
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 9999px; }
.thin-scroll:hover::-webkit-scrollbar-thumb { background-color: #cbd5e1; }
html.dark .thin-scroll:hover { scrollbar-color: #475569 transparent; }
html.dark .thin-scroll:hover::-webkit-scrollbar-thumb { background-color: #475569; }

[x-cloak] { display: none !important; }

@media print {
    .print-hidden,
    .app-flash { display: none !important; }
    .card { box-shadow: none !important; }
}