/*
  Laxmi Jewel Craft — shared mechanical + responsive/a11y layer.
  Loaded on every page after the Tailwind CDN script + per-page tailwind.config,
  so Tailwind utility classes still win where both apply.
  Only contains rules that are identical (or safely additive) across every page —
  per-page brand color tokens stay inline in each file's own tailwind.config.
*/

/* ---------- Mechanical base (shared verbatim across pages) ---------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}
.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ---------- Display-only capitalization for user-entered names ----------
   Purely visual — the underlying data (shop/product/category/customer name)
   is stored and sent to the backend exactly as typed; this only affects how
   it's rendered. .ljc-shop-name already exists everywhere the shop's own
   name is shown; .ljc-cap is the general-purpose one for product/category/
   customer names. Deliberately NOT applied to anything already using
   Tailwind's `uppercase` (pills/badges/labels) — capitalize would fight with
   that, so those two are never combined on the same element. */
.ljc-shop-name,
.ljc-cap {
  text-transform: capitalize;
}

/* ---------- Prices hidden site-wide (temporary business decision) ----------
   Applied to item prices, valuations, costs, and quote figures. Does NOT apply
   to the live metal spot-rate ticker (₹/g) or the Metal Rates Setup page,
   which are internal reference rates, not per-item prices. Kept as a CSS hide
   (not a markup deletion) so it's a one-line revert in common.css: remove the
   "display: none" here and every price reappears with no per-page changes. */
.price-hidden {
  display: none !important;
}

/* ---------- Themed scrollbars: auto-hide "overlay" style (global) ----------
   Invisible at rest so it never sits on top of the design — a soft, thin
   thumb fades in only while hovering (or dragging) the scrollable region,
   the same behavior as macOS / Notion / Linear "overlay" scrollbars. Warm
   gold/neutral palette shared by every page's design tokens (verified: the
   brand.* family's `brand-gold` and the Material-3 family's `primary-container`
   both resolve to the same #C5A059 accent). Firefox via scrollbar-width/-color,
   WebKit/Chromium/Edge via the pseudo-elements below. */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*:hover {
  scrollbar-color: rgba(119, 90, 25, 0.4) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 9999px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}
*:hover::-webkit-scrollbar-thumb {
  background-color: rgba(119, 90, 25, 0.4);
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(197, 160, 89, 0.8);
}
::-webkit-scrollbar-thumb:active {
  background-color: #C5A059;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Lighter reveal-color for scroll regions sitting on a dark/near-black surface
   (the gold-rate ticker strips) — the neutral brown thumb above would be
   invisible against #1C1A17 even on hover, so those reveal a pale gold instead. */
.scrollbar-on-dark:hover {
  scrollbar-color: rgba(197, 160, 89, 0.55) transparent;
}
.scrollbar-on-dark:hover::-webkit-scrollbar-thumb {
  background-color: rgba(197, 160, 89, 0.55);
}
.scrollbar-on-dark::-webkit-scrollbar-thumb:hover {
  background-color: rgba(233, 193, 118, 0.85);
}
.scrollbar-on-dark::-webkit-scrollbar-thumb:active {
  background-color: #E9C176;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ---------- Smooth scrolling ---------- */
html {
  scroll-behavior: smooth;
}

/* ---------- Horizontal scroll containers: chip/tab/pill rows & table overflow ----------
   Gentle proximity snap (only elements carrying .scroll-snap-item, or one of the
   component classes below, actually act as snap stops — everything else in the row,
   e.g. a trailing view-toggle button, scrolls normally), edge fade so it reads as
   "more content this way" rather than a hard clip, and touch momentum scrolling.
   Not used on the dark gold-rate ticker strips — a mask-image there would reveal
   the page background behind instead of blending, so those use the
   .scroll-fade-dark + .scrollbar-on-dark pair further down instead. */
.scroll-snap-row {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 8px;
  mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.scroll-snap-item,
.cat-tab,
.cat-pill,
.sub-cat-tab,
.sub-cat-pill,
.inquiry-tab {
  scroll-snap-align: start;
}

/* Lighter variant for the dark ticker strips: touch momentum only,
   no mask (their solid background would fade to a hard edge, not a blend)
   and no snap (continuous rate text, not discrete chips). Edge cues instead
   come from .scroll-fade-dark below, and the thumb itself from
   .scrollbar-on-dark, so the ticker gets the same "this is scrollable" signal
   as everywhere else, just via a technique that matches its dark background. */
.scroll-touch {
  -webkit-overflow-scrolling: touch;
}

/* Edge fade for scroll containers with a solid (non-transparent) background —
   a mask-image would reveal whatever sits behind the element, which only looks
   right when that backdrop matches. Here we instead lay a small gradient
   overlay in the container's own background color at each edge, so it reads
   as a soft vignette rather than a color mismatch. Pointer-events disabled so
   it never blocks a control (e.g. "Edit Rates") sitting near the edge. */
.scroll-fade-dark {
  position: relative;
}
.scroll-fade-dark::before,
.scroll-fade-dark::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 1;
}
.scroll-fade-dark::before {
  left: 0;
  background: linear-gradient(to right, #1C1A17, rgba(28, 26, 23, 0));
}
.scroll-fade-dark::after {
  right: 0;
  background: linear-gradient(to left, #1C1A17, rgba(28, 26, 23, 0));
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.animate-pulse-subtle {
  animation: pulse-subtle 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ---------- Layout safeguards ---------- */
/* clip, not hidden: overflow-x:hidden on both html and body forces the UA to
   also compute their overflow-y as auto (the visible/non-visible pairing quirk),
   which splits scrolling across two containers and breaks position:sticky
   headers. overflow-x:clip prevents horizontal scroll without establishing a
   scrollport, so it doesn't trigger that quirk. */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}
img, svg, video {
  max-width: 100%;
  height: auto;
}

/* Password show/hide toggles apply this to a plain type="text" input instead
   of switching type="password" <-> "text". Chrome/Edge's own credential
   manager can recognize a field as a password target (via autocomplete,
   prior autofill, or its own heuristics) and keep rendering it masked even
   after JS sets type="text" — a deliberate anti-phishing safeguard, not a
   bug, but it defeats a real "reveal password" control. Masking via CSS
   instead keeps the input as type="text" at all times, so the browser never
   applies that special-cased masking, and we control visibility ourselves.
   Firefox has no equivalent property and simply shows the input unmasked. */
.password-mask {
  -webkit-text-security: disc;
}
/* Ultra-wide (1440px+): keep primary content from stretching edge to edge */
.page-shell {
  max-width: 1600px;
  margin-inline: auto;
}

/* ---------- Fluid typography (clamp-based, replaces rigid fixed px jumps) ---------- */
.text-fluid-display {
  font-size: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
  line-height: 1.15;
}
.text-fluid-h1 {
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
  line-height: 1.25;
}
.text-fluid-h2 {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.3;
}
.text-fluid-body {
  font-size: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
}

/* Typography polish: avoid orphan words / awkward wraps on headings & body copy */
h1, h2, h3, .font-serif-title, .font-serif {
  text-wrap: balance;
}
p, li {
  text-wrap: pretty;
}

/* ---------- Accessibility: focus-visible ring (brand gold, consistent everywhere) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #C5A059;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Accessibility: minimum touch target (WCAG 2.5.5 / mobile guidelines) ---------- */
.tap-target {
  position: relative;
}
.tap-target::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

/* ---------- Custom select chevron (replaces the plain native dropdown arrow) ----------
   A bare <select> renders its own OS/browser dropdown arrow, which looks
   inconsistent across browsers and out of place against this app's rounded,
   warm-toned inputs — reported as several filter/form dropdowns looking
   "plain and default" next to the rest of the UI. This swaps in one
   consistent chevron via appearance:none + a background-image SVG, while
   every other native <select> behavior (keyboard nav, screen readers, the
   native option list itself) is untouched — this is purely the closed-state
   visual chrome. Applied selectively via .ljc-select, not to every <select>
   site-wide, since a few (e.g. inline metal-rate table selects) intentionally
   keep the native compact look. */
select.ljc-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A6A42' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 15px 15px;
  padding-right: 2.25rem !important;
}

/* Respect reduced-motion preference for all custom animations/transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}