/*
 * Hand-authored, not Tailwind-generated. Filament v3 cannot build a
 * custom Tailwind theme against this project's Tailwind v4 (Filament's
 * own docs: "Filament v3 can't support Tailwind CSS v4 ... Filament v4
 * will support Tailwind CSS v4") — so the admin panel serves only
 * Filament's own pre-built, pre-purged CSS bundle, which contains
 * exactly the utility classes Filament's own packaged views use and
 * nothing else. Any Tailwind class this project's own Blade files use
 * that Filament doesn't happen to also use itself (bg-indigo-600,
 * text-red-600, bg-amber-50, disabled:opacity-40, ...) compiles to
 * nothing and silently renders invisible — confirmed via a real browser
 * (decision 061): a button with the right text color but no background
 * is indistinguishable from "the button is missing".
 *
 * These are real, plain CSS rules — the small button/badge/panel
 * vocabulary the hand-built Livewire screens need (purchase entry,
 * opening stock entry, <x-scan-input>) — using design-system.md §2's
 * actual tokens, loaded as an extra stylesheet layered on top of
 * Filament's bundle via Css::make(), the same mechanism decision 053
 * already used for the Bengali font patch.
 */

/*
 * Focus style for the plain <input>/<select> elements on hand-built
 * panel screens (purchase entry, opening stock entry) — these predate
 * this file and were shipped with `focus:border-indigo-500
 * focus:ring-indigo-500`, which is both absent from Filament's bundle
 * (decision 090: silently no focus styling at all beyond the browser's
 * own default) and, independently, indigo is a banned accent colour
 * (design-system.md §8: "Purple or blue-violet as the brand accent").
 * Replaces both problems with the real accent token.
 */
.jw-focus-accent:focus {
    outline: none;
    border-color: #A67C3D;
    box-shadow: 0 0 0 1px #A67C3D;
}

/*
 * `mt-4` (decision 091, correcting decision 090): not cosmetic once a
 * whole page's composition is considered rather than each occurrence in
 * isolation. On opening-stock-entry.blade.php it is the *only* spacing
 * mechanism between six consecutive form sections (no space-y wrapper,
 * no borders between them) — missing it collapses the entire form to a
 * gap-less stack, borders touching borders. On purchase-entry.blade.php
 * several standalone uses (outside its one space-y-4 block) do the same
 * to individual heading-to-content and panel-to-trigger gaps. This is
 * the design-system.md §4 scale's own "16" value (Tailwind's real
 * mt-4), added directly rather than rewritten as mt-3/mt-6 approximations
 * throughout every affected file.
 */
.mt-4 {
    margin-top: 1rem;
}

.jw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    min-height: 48px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
}

.jw-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.jw-btn-primary {
    background-color: #A67C3D;
    color: #FFFFFF;
}

.jw-btn-primary:hover:not(:disabled) {
    background-color: #7D5B2A;
}

.jw-btn-secondary {
    background-color: #FFFFFF;
    color: #1F1D1A;
    border-color: #E8E3DA;
}

.jw-btn-secondary:hover:not(:disabled) {
    background-color: #FAF8F4;
}

.jw-btn-danger {
    background-color: #FFFFFF;
    color: #A83232;
    border-color: #A83232;
}

.jw-btn-danger:hover:not(:disabled) {
    background-color: #FBEAEA;
}

.jw-btn-link {
    background: transparent;
    border: none;
    padding: 0;
    color: #A67C3D;
    text-decoration: underline;
    font-size: 0.75rem;
    cursor: pointer;
}

.jw-btn-link:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    text-decoration: none;
}

.jw-text-danger {
    color: #A83232;
}

.jw-text-success {
    color: #2F7A54;
}

.jw-text-warning {
    color: #B4761A;
}

.jw-text-muted {
    color: #8A837A;
}

/*
 * Static, uneditable currency prefix inside a plain <input> (purchase
 * entry's unit price field) — hand-rolled rather than Tailwind's
 * absolute/pl-* utilities, which Filament's purged bundle does not ship
 * (decision 061: an unshipped utility class compiles to nothing and
 * silently renders invisible).
 */
.jw-input-prefix-wrap {
    position: relative;
}

.jw-input-prefix-wrap input {
    padding-left: 2.75rem;
}

.jw-margin-calc p {
    margin: 0 0 0.375rem;
}

.jw-margin-calc p:last-child {
    margin-bottom: 0;
}

.jw-input-prefix {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6875rem;
    font-weight: 500;
    color: #8A837A;
    pointer-events: none;
}

.jw-badge {
    display: inline-block;
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.jw-badge-draft {
    background-color: #F4F4F5;
    color: #3F3F46;
}

.jw-badge-ordered {
    background-color: #E7F1F6;
    color: #2F6C8F;
}

.jw-badge-in-transit {
    background-color: #FCF1E3;
    color: #B4761A;
}

.jw-badge-received {
    background-color: #E6F2EC;
    color: #2F7A54;
}

.jw-badge-cancelled {
    background-color: #F6E7E7;
    color: #A83232;
}

/* Zakat year hawl-type badge (worksheet header, browser feedback) — the
   hand-rolled equivalent of the list table's Filament badge column
   colour, needed here because this page is plain Blade, not a
   Tables\Columns\TextColumn. */
.jw-badge-hijri {
    background-color: #E7F1F6;
    color: #2F6C8F;
}

.jw-badge-gregorian {
    background-color: #F4F4F5;
    color: #3F3F46;
}

.jw-panel-warning {
    border: 1px solid #B4761A;
    background-color: #FCF1E3;
    border-radius: 8px;
    padding: 1rem;
}

.jw-panel-success {
    border: 1px solid #2F7A54;
    background-color: #E6F2EC;
    border-radius: 8px;
    padding: 1rem;
}

.jw-panel-highlight {
    background-color: #F5EEE1;
}

.jw-panel-danger {
    border: 1px solid #A83232;
    background-color: #FBEAEA;
    border-radius: 8px;
    padding: 1rem;
}

/*
 * supplier-invoice-import.blade.php's review table: a real input-width
 * value (FilamentCssClassAuditTest caught it as absent from Filament's
 * shipped bundle — decision 090's "a layout class doing nothing is a
 * visible bug" rule, not cosmetic debt). Exact Tailwind value, not an
 * approximation, same as `.mt-4`/`.jw-logo-preview` above.
 */
.w-24 {
    width: 6rem;
}

/*
 * The same review table's variant column holds the picked variant's
 * label (or the "select variant" button); without a floor the PDF's own
 * reference columns squeeze it to an unusable sliver on a long
 * description.
 */
.jw-invoice-variant-cell {
    min-width: 18rem;
}

/*
 * The same page's variant picker modal: each result is a full-width row
 * with the label on the left and its retail price (or the "no price set"
 * warning) on the right. An unpriced variant stays listed but disabled —
 * no hover tint, not-allowed cursor — so it reads as unselectable rather
 * than as missing.
 */
.jw-picker-variant {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.jw-picker-variant-unpriced {
    background-color: #FAF8F4;
    cursor: not-allowed;
}

/*
 * step-22 §10 (automated-processing-setup.blade.php): the cron/
 * supervisor snippet display. No `bg-gray-900` (or any solid dark gray
 * background) exists in Filament's own bundle — FilamentCssClassAuditor
 * confirmed it, not a guess — so this is a real definition, not cosmetic
 * debt, the same reasoning as .jw-panel-highlight above.
 */
.jw-code-block {
    background-color: #1F1D1A;
    color: #F5F5F4;
}

/*
 * Purchase entry's step indicator (usability pass, decision 066): purely
 * informational, never gates anything, so plain flex + text is enough —
 * no interaction states needed.
 */
.jw-stepper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.jw-step {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: #8A837A;
    background-color: #F4F4F5;
}

.jw-step-current {
    color: #FFFFFF;
    background-color: #A67C3D;
    font-weight: 500;
}

.jw-step-done {
    color: #2F7A54;
    background-color: #E6F2EC;
}

.jw-step-connector {
    color: #D4CFC5;
}

/* Running summary — always visible in the status bar, never behind a scroll or a disclosure. */
.jw-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.jw-summary-item dt {
    font-size: 0.75rem;
    color: #8A837A;
}

.jw-summary-item dd {
    font-size: 1rem;
    font-weight: 600;
    color: #1F1D1A;
}

/* Landing-costs disclosure (<details>/<summary>) — native, keyboard-accessible by default. */
.jw-disclosure-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    min-height: 48px;
    padding: 0.25rem 0;
}

.jw-disclosure-summary::-webkit-details-marker {
    display: none;
}

.jw-disclosure-summary::after {
    content: '+';
    font-size: 1.25rem;
    color: #8A837A;
    transition: transform 120ms ease;
}

details[open] > .jw-disclosure-summary::after {
    content: '−';
}

/*
 * Wide-content page container (browser feedback): widens resource lists
 * and dense tables to the available width at Tailwind's own xl
 * breakpoint (1280px) and above, unchanged below it. This is Filament's
 * per-page getMaxContentWidth() escape hatch — it accepts a raw class
 * string and falls through to `default => $maxContentWidth` in
 * vendor/filament/filament/resources/views/components/layout/index.blade.php
 * when the string doesn't match one of its own MaxWidth cases — so a
 * page opts in with `return 'jw-content-wide';`.
 *
 * Reimplemented by hand rather than an `xl:max-w-full` Tailwind class
 * directly in a page's getMaxContentWidth() string: Filament's pre-built
 * bundle ships max-w-7xl and max-w-full as bare utilities (confirmed in
 * vendor/filament/filament/dist/theme.css) but never the responsive
 * `xl:` variant of either, since nothing in Filament's own packaged
 * views uses that combination — decision 061 again, an unshipped
 * utility class compiles to nothing and silently renders invisible.
 * 80rem below the breakpoint is exactly max-w-7xl's own value, so
 * anything using this class matches the framework default until xl.
 *
 * Small single-purpose forms (a lone amount field, a PIN entry) must
 * NOT use this class — do not let those stretch to full width just
 * because the screen is wide.
 */
.jw-content-wide {
    max-width: 80rem;
}

@media (min-width: 1280px) {
    .jw-content-wide {
        max-width: 100%;
    }
}

/*
 * Sidebar density + tint (sidebar redesign, visual-polish pass). Plain
 * overrides of Filament's own structural classes (fi-sidebar,
 * fi-sidebar-nav-groups, fi-sidebar-group-items, fi-sidebar-item-button,
 * fi-sidebar-group-button) — these are real DOM classes Filament's own
 * Blade views always render, not Tailwind utilities that might be absent
 * from the purged bundle, so this carries none of decision 090's risk.
 * Loaded after Filament's core bundle (Css::make() in
 * AdminPanelProvider, same load-order this file's .jw-focus-accent and
 * .mt-4 overrides already rely on), so equal-specificity class selectors
 * here win the cascade.
 *
 * Density: default Filament spacing (28px between groups, 4px between
 * items, 8px vertical padding per item) reads sparse next to the
 * multi-section grouping this app just introduced — 14 items in one
 * রিপোর্ট group at the old spacing runs the sidebar noticeably long.
 * Tightened to a modern-admin density. The POS's 48px tap-target rule
 * (design-system.md) does not apply here — this is desktop admin nav,
 * mouse-driven, not the counter screen.
 *
 * Tint: sidebar gets --jw-sidebar-bg — an owner-configurable colour (Store
 * Settings/branding, alongside the primary colour) defaulting to
 * --accent-soft (#F5EEE1, design-system.md §2's own "tinted backgrounds"
 * token) instead of Filament's default transparent (which lets the
 * gray-50 body show through, making sidebar and content area read as one
 * continuous surface). --jw-sidebar-bg is registered via
 * FilamentAsset::registerCssVariables() in AdminPanelProvider — the same
 * :root {} CSS-variable pipeline Filament's own --primary-* shades go
 * through — so the fallback after the comma below only ever applies
 * before that registration runs (there isn't a case where it doesn't).
 * The header logo bar keeps its own explicit white background from
 * Filament's markup, so only the nav list itself picks up the tint.
 *
 * !important throughout: verified in a real browser that Filament's own
 * app.css bundle (the utility classes actually setting these values —
 * gap-y-7, py-2, lg:bg-transparent — co-exist on the same elements as
 * the fi-sidebar-* structural classes above) is injected into <head>
 * AFTER this stylesheet, not before, so equal-specificity class
 * selectors here otherwise lose the cascade regardless of source
 * order in this file (confirmed: without !important, computed styles
 * stayed at Filament's defaults). Registration order in
 * AdminPanelProvider's ->assets() does not change where Filament places
 * its own core bundle.
 */
.fi-sidebar {
    background-color: var(--jw-sidebar-bg, #F5EEE1) !important;
}

.fi-sidebar-nav-groups {
    gap: 1.25rem !important; /* 20px, was gap-y-7 (28px) */
}

.fi-sidebar-group-items {
    gap: 0.125rem !important; /* 2px, was gap-y-1 (4px) */
}

.fi-sidebar-item-button,
.fi-sidebar-group-button {
    padding-top: 0.375rem !important; /* 6px, was py-2 (8px) */
    padding-bottom: 0.375rem !important;
}

/*
 * step-20 §4: the 2FA recovery-codes grid (two-factor-settings.blade.php)
 * — real Tailwind grid-template-columns values, not cosmetic. Filament's
 * shipped bundle has no grid-cols-N of its own (FilamentCssClassAuditTest
 * caught this: without a real definition the list silently collapses to
 * one column instead of the intended 2-up/4-up layout — decision 090's
 * "a layout class doing nothing is a visible bug" rule, not something to
 * add to ACCEPTED_COSMETIC_DEBT).
 *
 * Compound selectors (`.grid.grid-cols-2`, not `.grid-cols-2`) rather than
 * !important: this stylesheet loads *before* Filament's own
 * filament/filament/app.css in the panel's <head> (asset registration
 * order, App\Providers\Filament\AdminPanelProvider), and that bundle
 * separately ships its own unconditional `.grid-cols-1` — one class each,
 * equal specificity, so without this the later-loaded vendor rule was
 * silently winning the cascade regardless of viewport width (found on
 * migration-progress.blade.php's five-tile row, which rendered as one
 * column at every breakpoint despite the sm:/lg: rules below "existing").
 * Two classes beats one at equal source order, so this wins deterministically
 * without touching load order or reaching for !important.
 */
.grid.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .grid.sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/*
 * step-21 (migration-progress.blade.php): the five-tile progress
 * dashboard, same "real definition, not cosmetic debt" reasoning as the
 * 2FA grid above — without these the tiles would silently stack into one
 * column at every breakpoint.
 */
@media (min-width: 640px) {
    .grid.sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid.lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/*
 * store-settings.blade.php's current-logo thumbnail: a fixed-height
 * preview (matches Tailwind's own h-12 = 3rem/48px, kept as a named
 * class instead of the raw utility since Filament's shipped bundle has
 * no h-12 of its own — FilamentCssClassAuditTest caught the raw class
 * silently rendering unconstrained-height instead of a small thumbnail).
 */
.jw-logo-preview {
    height: 3rem;
}

/*
 * Create Product page's "does this already exist?" scan field
 * (scan-code-field.blade.php) — a narrower, muted rendering of the same
 * real <x-scan-input> every other scan point uses (autofocus,
 * click-anywhere-refocus, BarcodeResolver lookup all unchanged), since a
 * brand-new product has no barcode yet and this check is secondary here,
 * not the primary flow. Real class definitions rather than arbitrary
 * Tailwind descendant selectors ([&_label]:text-xs etc.) directly in the
 * Blade file — those never existed in Filament's shipped bundle either,
 * so decision 061's trap applies to them exactly as much as a plain
 * unbundled utility class (caught immediately by FilamentCssClassAuditTest).
 */
/*
 * !important throughout: livewire/scan-input.blade.php's own <label>
 * (block text-sm font-medium text-gray-700, 4 classes) and <input> (mt-1
 * block w-full rounded-md border-gray-300 shadow-sm, 6 classes) both
 * carry more classes than this rule's single .jw-scan-secondary
 * ancestor + one type selector — CSS specificity is compared class-count
 * first, so a plain `.jw-scan-secondary label` rule loses the cascade
 * outright regardless of source order, same trap this file's .fi-sidebar
 * rules above already hit and solve the same way.
 */
.jw-scan-secondary label {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #8A837A !important;
}

.jw-scan-secondary input {
    font-size: 0.875rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

/*
 * Two-column counting workspace (StockTakeCounter): scan field + a
 * growing, self-scrolling item list on the left, a fixed-width summary
 * panel with its actions pinned at the foot on the right — the same
 * structure as POS's .jp-main / .jp-pane / .jp-cart (resources/css/
 * pos.css). Those jp-* classes ship only in the standalone POS bundle,
 * never in the admin panel's (a separate Vite entry, by design), so the
 * layout is re-declared here; layout only — every border, background and
 * text colour stays on the existing Filament utility classes the markup
 * already carries.
 *
 * Below xl the two columns simply stack and the list caps at 60vh so it
 * still scrolls inside its own box. xl (1280px), not lg: at lg Filament's
 * 16rem sidebar leaves the left column barely 300px, too narrow for a row
 * plus its quantity field — the same breakpoint .jw-content-wide widens
 * the page at. From xl up the workspace takes a viewport-relative height
 * (viewport minus the panel topbar, page header and padding — measured
 * at 13rem from the top of the viewport, plus the page's own 2rem bottom
 * padding, plus 1rem slack for a notice line above it) so the list
 * scrolls internally and the summary's foot never leaves the screen.
 * The 20rem floor only matters on viewports shorter than ~570px.
 */
.jw-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.jw-workspace__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.jw-workspace__scan {
    position: relative;
    flex: none;
}

.jw-workspace__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 0.5rem;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.jw-workspace__list {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.jw-workspace__list-head {
    flex: none;
    padding: 0.5rem 0.75rem;
}

.jw-workspace__scroll {
    overflow-y: auto;
    max-height: 60vh;
}

.jw-workspace__side {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.jw-workspace__side-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.jw-workspace__side-foot {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
}

.jw-workspace__stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

@media (min-width: 1280px) {
    .jw-workspace {
        flex-direction: row;
        align-items: stretch;
        height: calc(100vh - 16rem);
        min-height: 20rem;
    }

    .jw-workspace__main {
        flex: 1;
    }

    .jw-workspace__list {
        flex: 1;
    }

    .jw-workspace__scroll {
        flex: 1;
        min-height: 0;
        max-height: none;
    }

    .jw-workspace__side {
        flex: none;
        width: 22rem;
    }

    .jw-workspace__side-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
}

/*
 * Sidebar footer (AdminPanelProvider's panels::sidebar.footer hook): the
 * version and the developer's copyright line, pinned to the bottom of the
 * sidebar. No position: fixed — the <aside> is already h-screen flex-col
 * with the nav as its flex-grow overflow-y-auto child, so a non-shrinking
 * last child stays put while the nav scrolls above it, and moves with the
 * sidebar when it slides in/out on mobile (a fixed child would not).
 * Transparent, so it shows the same --jw-sidebar-bg tint as the nav.
 */
.jw-sidebar-footer {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid rgba(3, 7, 18, 0.05);
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: rgb(107, 114, 128);
}

/*
 * Invoice Design card of Print Settings: settings on the left, a live
 * preview of the sample invoice on the right. Stacked below xl (the same
 * breakpoint as .jw-content-wide), side by side from xl, where the preview
 * stays in view while the long form scrolls. The stage is as tall as the
 * scaled page, set by the page's own script from its measured width.
 */
.jw-design-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.jw-design-settings {
    min-width: 0;
}

.jw-design-preview {
    min-width: 0;
}

.jw-design-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: rgb(243, 244, 246);
    border: 1px solid rgb(209, 213, 219);
    border-radius: 0.375rem;
}

.jw-design-frame {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    background: #fff;
    transform-origin: top left;
}

.jw-design-status {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.9);
}

@media (min-width: 1280px) {
    .jw-design-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .jw-design-settings {
        flex: 1 1 0;
    }

    .jw-design-preview {
        flex: none;
        width: 26rem;
        position: sticky;
        top: 5rem;
    }
}