/* Loads Bootstrap + the legacy site.css into a low-priority cascade layer so the new
   Tailwind design (utilities layer) always wins style conflicts. Legacy pages still
   receive both stylesheets unchanged; only their priority relative to Tailwind
   utilities changes. Remove this (and the stylesheets) in the final cleanup slice.

   The `shim` layer is declared BEFORE `legacy` so it lands earlier in CSS layer order
   (layer position is set by first appearance in document order; legacy.css loads
   before app.css). For !important author declarations, the earliest-declared layer
   wins — which lets the shim block in tailwind.css beat Bootstrap's !important
   utility-class collisions (.p-3..5, .px-3..5, .py-3..5, .m-3..5, etc.). */
@layer shim, legacy;
@import url("/lib/bootstrap/dist/css/bootstrap.min.css") layer(legacy);
@import url("/css/site.css") layer(legacy);

/* ============================================================
   Global loaders (v2 redesign) — replaces NProgress.
   These live HERE (not in the @import'ed site.css) on purpose:
   legacy.css is cache-busted by asp-append-version, but the
   `@import url("/css/site.css")` above has no version string, so
   edits to site.css can be served stale. Keeping the loader rules
   in legacy.css guarantees the browser refetches them.

   Rules are intentionally UNLAYERED (declared after the @imports),
   so they sit above the `legacy` layer — fine here because every
   selector is unique and collides with nothing.

   Top progress bar shows for EVERY async request; the blocking
   overlay shows only for writes. Wired once in grevity-ui.js to
   HTMX, jQuery $.ajax and fetch. ============================== */

/* Top progress bar (YouTube / GitHub style) */
#top-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    z-index: 9999; opacity: 0; pointer-events: none;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
    transition: width 0.2s ease, opacity 0.3s ease;
}
#top-progress.active { opacity: 1; }

/* Spinner (rotating ring) — own keyframe name so it can't clash with
   Tailwind's `spin` (used by .animate-spin) in app.css. */
@keyframes gv-spin { to { transform: rotate(360deg); } }
.spinner {
    display: inline-block; border-radius: 9999px;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: gv-spin 0.6s linear infinite; vertical-align: -2px;
    color: #4f46e5;
}
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-md { width: 20px; height: 20px; border-width: 2px; }
.spinner-lg { width: 34px; height: 34px; border-width: 3px; }

/* Global blocking overlay (writes: save / delete / export) */
#load-overlay {
    position: fixed; inset: 0; z-index: 9990;
    background: rgba(248, 250, 252, 0.72);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center;
}
#load-overlay.show { display: flex; }
.load-overlay-card {
    display: flex; align-items: center; gap: 16px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 10px 32px -8px rgb(15 23 42 / 0.18), 0 4px 12px -2px rgb(15 23 42 / 0.06);
}
.load-overlay-card .lo-title { font-size: 14px; font-weight: 600; color: #0f172a; }
.load-overlay-card .lo-sub { font-size: 12px; color: #64748b; margin-top: 2px; }

/* Dark-mode variants (inert until dark mode is re-enabled app-wide) */
html.dark #load-overlay { background: rgba(11, 16, 32, 0.72); }
html.dark .load-overlay-card { background: #0f1628; border-color: #1f2a44; }
html.dark .load-overlay-card .lo-title { color: #e2e8f0; }
html.dark .load-overlay-card .lo-sub { color: #94a3b8; }

/* ── searchable-select ─────────────────────────────────────────────── */
.ss-wrap { position: relative; display: block; width: 100%; }
/* Native select kept for posting + validation; transparent, non-interactive,
   but a real non-zero box so jQuery-validate :hidden / HTML5 required still fire. */
.ss-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; margin: 0; }
.ss-control { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; cursor: pointer; position: relative; z-index: 1; }
.ss-control.ss-disabled { opacity: .55; cursor: not-allowed; }
.ss-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-label.ss-placeholder { color: rgb(148 163 184); } /* slate-400 */
.ss-chevron { width: 16px; height: 16px; flex: 0 0 auto; color: rgb(148 163 184); }
/* Portaled to <body> and fixed-positioned by JS (left/top/width set inline) so it is
   never clipped by an overflow:hidden ancestor like the BOM card. */
.ss-pop { position: fixed; z-index: 9999; background: #fff; border: 1px solid rgb(226 232 240); border-radius: .5rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); overflow: hidden; }
.ss-pop.ss-hidden { display: none; }
.ss-search-wrap { padding: .5rem; border-bottom: 1px solid rgb(241 245 249); }
.ss-search { width: 100%; border: 1px solid rgb(226 232 240); border-radius: .375rem; padding: .375rem .5rem; font-size: .8125rem; outline: none; }
.ss-search:focus { border-color: rgb(99 102 241); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.ss-list { max-height: 260px; overflow-y: auto; margin: 0; padding: .25rem; list-style: none; }
.ss-opt { padding: .375rem .5rem; border-radius: .375rem; font-size: .8125rem; cursor: pointer; color: rgb(15 23 42); }
.ss-opt.ss-active { background: rgb(238 242 255); color: rgb(67 56 202); }
.ss-opt.ss-selected { font-weight: 600; }
.ss-empty { padding: .5rem; font-size: .8125rem; color: rgb(148 163 184); text-align: center; }

/* Invoice/Purchase line-item rows: the ITEM cell grows a 2nd line (HSN/stock meta)
   once a product is picked, so top-align every cell to keep the picker level with
   the qty/rate/discount/tax/amount columns. Covers #itemsBody in Invoice Create/Edit
   and Purchase _BillForm (all share this id). */
#itemsBody > tr > td,
#poItems > tbody > tr > td { vertical-align: top; }