/* =============================================================================
   ui-baseline.css — Onshore global UI baseline + control standardisation
   (load LAST on every page)
   -----------------------------------------------------------------------------
   v2 — ASSERTIVE. One control language for the whole system. The *appearance*
   of every input/select/textarea/checkbox is forced (!important) so 50+ legacy
   per-page stylesheets can no longer fragment it; sizing (min-height/padding)
   is left overridable so dense tables aren't blown up, and validation borders
   are explicitly preserved. Also reconciles the brand/status tokens that were
   defined with conflicting values across the codebase.
   Apple-meets-Onshore: calm, precise, high-contrast, 8px rhythm.
   ========================================================================== */

:root {
  /* Brand — canonical single values */
  --oc-navy: #011638;
  --oc-navy-700: #0A2A57;
  --oc-gold: #C6904D;
  --oc-gold-hover: #B07D3C;

  /* Surfaces & text (light) */
  --oc-bg: #F6F8FB;
  --oc-surface: #FFFFFF;
  --oc-border: #E2E8F0;
  --oc-border-strong: #CBD5E1;
  --oc-fg: #0B1220;
  --oc-fg-muted: #5B6676;
  --oc-fg-faint: #8A94A6;
  --oc-field-bg: #FFFFFF;
  --oc-field-bg-disabled: #F1F5F9;

  /* Canonical neutral ramp (the Tailwind greys the app already uses) — so the
     1300+ hardcoded greys across the stylesheets share one source. */
  --oc-gray-50:  #F9FAFB;
  --oc-gray-100: #F3F4F6;
  --oc-gray-200: #E5E7EB;
  --oc-gray-300: #D1D5DB;
  --oc-gray-400: #9CA3AF;
  --oc-gray-500: #6B7280;
  --oc-gray-600: #4B5563;
  --oc-gray-700: #374151;
  --oc-gray-800: #1F2937;
  --oc-gray-900: #111827;

  /* Status — one value each, AA on white */
  --oc-success: #15803D;
  --oc-warning: #B45309;
  --oc-danger:  #C0392B;
  --oc-info:    #0369A1;

  /* Scale */
  --oc-radius-sm: 8px;
  --oc-radius: 10px;
  --oc-radius-lg: 14px;
  --oc-focus: 0 0 0 3px rgba(198, 144, 77, .35);
  --oc-shadow-1: 0 1px 2px rgba(2, 12, 27, .06);
  --oc-shadow-2: 0 8px 24px -8px rgba(2, 12, 27, .18);
  --oc-dur: 180ms;

  /* Reconcile legacy token names to the canonical values. */
  --brand-navy: var(--oc-navy, #011638);
  --brand-gold: var(--oc-gold, #C6904D);
  --brand-gold-hover: var(--oc-gold-hover);
  --accent-green: var(--oc-success);
  --accent-red: var(--oc-danger);
  --accent-orange: var(--oc-warning);
}

/* ── Text-like inputs, selects, textareas — STANDARDISED everywhere ──────────
   Appearance forced; sizing overridable. Excludes button-ish and toggle
   inputs (handled separately below). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
select,
textarea {
  font-family: inherit !important;
  font-size: 14px;
  line-height: 1.4;
  color: var(--oc-fg) !important;
  background-color: var(--oc-field-bg) !important;
  border: 1px solid var(--oc-border-strong) !important;
  border-radius: var(--oc-radius-sm) !important;
  padding: 8px 11px;
  min-height: 38px;
  box-sizing: border-box;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color var(--oc-dur) ease, box-shadow var(--oc-dur) ease;
}
textarea { min-height: 76px; line-height: 1.5; resize: vertical; }

/* Never white-on-white: placeholders, options, disabled all legible */
::placeholder { color: var(--oc-fg-faint) !important; opacity: 1 !important; }
select option,
select optgroup { color: var(--oc-fg) !important; background-color: var(--oc-surface) !important; }

/* Single-select: custom gold-grey chevron */
select:not([multiple]) {
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  cursor: pointer;
}
/* Multi-select: readable rows, gold selection */
select[multiple] {
  padding: 4px !important;
  background-image: none !important;
  min-height: 92px;
}
select[multiple] option { padding: 6px 8px; border-radius: 4px; }
select[multiple] option:checked { background: var(--oc-gold, #C6904D) !important; color: #fff !important; }

/* Date / time pickers */
input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="month"], input[type="week"] { color: var(--oc-fg) !important; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .6; filter: saturate(0);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* Hover / focus — one consistent gold ring across the system */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):hover,
select:hover, textarea:hover { border-color: var(--oc-fg-faint) !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--oc-gold, #C6904D) !important;
  box-shadow: var(--oc-focus) !important;
}

/* Disabled / readonly */
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
  background-color: var(--oc-field-bg-disabled) !important;
  color: var(--oc-fg-muted) !important;
  cursor: not-allowed;
}

/* Preserve validation: error borders win over the standard border */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"],
input.is-invalid, select.is-invalid, textarea.is-invalid,
input.error, select.error, textarea.error,
input.invalid, select.invalid, textarea.invalid,
.has-error input, .has-error select, .has-error textarea {
  border-color: var(--oc-danger) !important;
}

/* Checkboxes & radios — gold accent, native control kept */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--oc-gold, #C6904D) !important;
  width: 16px; height: 16px;
  min-height: 0;
  cursor: pointer;
}

/* ── Accessible focus ring for non-field interactive elements ────────────── */
a:focus-visible, button:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--oc-gold, #C6904D);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Tidy, low-contrast scrollbars ───────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--oc-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--oc-border-strong); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--oc-fg-faint); background-clip: content-box; }

/* ── Tabular figures for data cells, prices, quantities ──────────────────── */
:where(td, .num, .price, .qty, [data-num]) { font-variant-numeric: tabular-nums; }

/* ── v3/v5: global typography — brand pairing system-wide ───────────────────
   Open Sans for body/UI text, Montserrat for headings & titles — the brand
   convention, applied uniformly so every page (CRM, Orders, …) shares one
   type system instead of some pages running Open Sans and others Montserrat.
   Buttons get consistent cursor / transition / press feel (colours/shape stay
   owned by each module). */
body {
  font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--oc-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
[class*="-title"], [class*="-name"], [class*="-heading"] {
  font-family: 'Montserrat', 'Open Sans', system-ui, sans-serif;
}
button, [role="button"], .btn,
[class$="-btn"], [class*="-btn-"], [class*="-btn "] {
  cursor: pointer;
  transition: background-color var(--oc-dur) ease, border-color var(--oc-dur) ease,
              box-shadow var(--oc-dur) ease;
}
button:disabled, .btn:disabled, [class$="-btn"]:disabled,
[role="button"][aria-disabled="true"] { cursor: not-allowed; }
/* NOTE: no global :active transform press — it clobbered the centring
   transform on absolutely-positioned buttons (e.g. the sidebar toggle),
   making them jump up/down on click. Press feedback is handled per-component. */

/* ── v4: component cohesion (buttons + cards) ───────────────────────────────
   The system has dozens of bespoke component classes per module. Rather than
   override them blindly, this unifies the SAFE shared traits: every button
   inherits the one font + shows the gold focus ring; the real light-card
   classes share one corner radius, hairline border and soft elevation.
   Dark/coloured cards are deliberately excluded. Colours/layout stay owned by
   each module. */
button, [class*="-btn"], [class*="-button"], .btn {
  font-family: inherit;
}
[class*="-btn"]:focus-visible, [class*="-button"]:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--oc-gold, #C6904D);
  outline-offset: 2px;
}
.product-card, .item-card, .crm-card, .vd-card,
.ord-info-card, .pur-info-card, .storage-card, .rd-card, .sis-panel {
  border-radius: var(--oc-radius);
  border: 1px solid var(--oc-border);
  box-shadow: var(--oc-shadow-1);
}

/* ── v6: interaction cohesion (safe, additive — no colour/contrast force) ────
   Every list/table behaves the same: smooth row hover + keyboard focus. We
   deliberately do NOT force header/cell colours globally — the app has many
   navy/dark table & header surfaces where that would break contrast. */
[class*="-table"] tbody tr { transition: background-color 120ms ease; }
[class*="-table"] tbody tr:focus-visible,
[class*="-row"]:focus-visible {
  outline: 2px solid var(--oc-gold, #C6904D);
  outline-offset: -2px;
}

/* ── Respect reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}