/* Global app styles — extracted verbatim from base.html (ERP migration, Phase 4).
 * Loaded once via base.html. Design tokens (palette, fonts) live in the Tailwind
 * config in base.html; this file holds component classes + dark-mode overrides.
 * NOTE: a follow-up splits this into tokens/base/components/ per the plan. */

/* ── Global resets ── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Manrope', system-ui, sans-serif; }

/* ── Font weights ───────────────────────────────────────────────────
   The templates use numeric weight classes (~1350 usages). These are NOT
   standard Tailwind and were lost in the CDN → build migration, so every
   heading/label/button was rendering at weight 400. Defined here so they
   work without a rebuild; fold into tailwind.config.js `fontWeight` on the
   next `npm run build:css` and delete this block. */
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }

/* ── Text colour legibility (light) ─────────────────────────────────
   WCAG AA fixes. warm-500 was 3.63:1 and warm-400 was 2.26:1 on white —
   both below the 4.5:1 minimum for body-size text. Only `color` is
   overridden, so borders/backgrounds using the same tokens are untouched.
   Dark mode keeps its own values (`.dark .text-*` below wins on specificity).
   Fold into the `warm` palette in tailwind.config.js on the next rebuild. */
.text-warm-500 { color: #6f6b62; }   /* was #8a867c — 3.63:1 → 5.31:1 */
.text-warm-400 { color: #767268; }   /* was #b0aca3 — 2.26:1 → 4.80:1 */

/* ── HTMX indicator ── */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ── Entrance animations ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.anim-fade-up { animation: fadeUp 0.35s ease-out forwards; }
.anim-fade-in { animation: fadeIn 0.25s ease-out forwards; }

/* ── Staggered children ── */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > * { opacity: 0; }

/* ── Agent sidebar legibility ───────────────────────────────────────
   The sidebar is a dark panel in BOTH themes. Section labels were
   white/25 (2.20:1) and chevrons white/20 — effectively invisible.
   Defined as classes rather than Tailwind opacity utilities because the
   brighter group-hover steps aren't in the committed build. */
.nav-section-label               { color: rgba(255,255,255,0.55); }  /* 6.2:1 */
.group:hover .nav-section-label  { color: rgba(255,255,255,0.85); }
.nav-section-chevron             { color: rgba(255,255,255,0.40); }  /* 3.8:1 (icon) */
.group:hover .nav-section-chevron { color: rgba(255,255,255,0.65); }

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1cec7; border-radius: 2px; }

/* ── Hide scrollbar utility (tab pill containers) ── */
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ── Input base ── */
.field {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #e8e6e1;
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    color: #1a1917;
    background: #ffffff;
    transition: border-color 150ms, box-shadow 150ms;
    outline: none;
}
.field:focus {
    border-color: #c24e08;
    box-shadow: 0 0 0 3px rgba(194, 78, 8, 0.12);
}
.field::placeholder { color: #8a867c; }  /* was #b0aca3 (2.26:1) — 3.63:1 */

/* ── Select ── */
select.field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a867c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

/* ── Dot-grid pattern (auth panels) ── */
.dot-grid {
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* ── Mono numbers ── */
.num { font-family: 'DM Mono', monospace; }

/* ── Shimmer skeleton ── */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.skeleton {
    display: inline-block;
    border-radius: 4px;
    background: linear-gradient(90deg, #e8e6e1 25%, #f3f2ef 50%, #e8e6e1 75%);
    background-size: 400px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

/* ── Status badges ── */
.badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 99px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
    border: 1px solid currentColor;
}
.badge-draft    { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.badge-sale     { color: #065f46; background: #d1fae5; border-color: #6ee7b7; }
.badge-done     { color: #1e40af; background: #dbeafe; border-color: #93c5fd; }
.badge-cancel   { color: #6b6760; background: #f3f2ef; border-color: #d1cec7; }
.badge-sent     { color: #1e3a5f; background: #e0f2fe; border-color: #7dd3fc; }
.badge-default  { color: #6b6760; background: #f3f2ef; border-color: #d1cec7; }
/* Invoice-specific badges */
.badge-paid        { color: #065f46; background: #d1fae5; border-color: #6ee7b7; }
.badge-unpaid      { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.badge-partial     { color: #1e3a5f; background: #e0f2fe; border-color: #7dd3fc; }
.badge-in-payment  { color: #1e40af; background: #dbeafe; border-color: #93c5fd; }
.badge-overdue     { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
.badge-reversed    { color: #6b6760; background: #f3f2ef; border-color: #d1cec7; }
.badge-credit-note { color: #5b21b6; background: #ede9fe; border-color: #c4b5fd; }
/* Sale-order invoice_status badges (moved from page <style> blocks; dark variants below) */
.badge-invoiced    { color: #065f46; background: #d1fae5; border-color: #a7f3d0; }
.badge-to-invoice  { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.badge-upselling   { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
.badge-nothing     { color: #767268; font-size: .75rem; }  /* was #c7c3bc (1.76:1) — 4.80:1 */

/* ── Filter pills (moved from page <style> blocks; dark overrides below) ── */
.pill-active   { background: #c24e08; color: #fff; border-color: #c24e08; }
.pill-inactive { background: transparent; color: #6f6b62; border-color: #e8e6e1; }  /* was #8a867c (3.42:1) — 5.00:1 */
.pill-inactive:hover { background: #f3f2ef; color: #4d4a45; border-color: #d1cec7; }

/* ── Terra text on a terra tint ──────────────────────────────────────
   Active nav items (`bg-terra/10 text-terra`) and avatar initials
   (`bg-terra/15`) put brand orange on a brand-orange wash: only 4.17:1
   with the default ramp. Step down to terra-600 (5.24:1). Dark mode keeps
   the lighter terra-400 because the tint sits on a dark surface. */
.bg-terra\/10.text-terra,  .bg-terra\/10 .text-terra,
.bg-terra\/15.text-terra,  .bg-terra\/15 .text-terra { color: #aa4208; }
.dark .bg-terra\/10.text-terra, .dark .bg-terra\/10 .text-terra,
.dark .bg-terra\/15.text-terra, .dark .bg-terra\/15 .text-terra { color: #f07030 !important; }

/* ── Dark mode ─────────────────────────────────────────────── */
/* Backgrounds */
.dark body,
.dark .bg-canvas    { background-color: #0d1117 !important; }
.dark .bg-white     { background-color: #161b22 !important; }
.dark .bg-warm-50   { background-color: #1a2030 !important; }  /* slightly elevated vs card */
.dark .bg-warm-100  { background-color: #1c2333 !important; }
.dark .bg-warm-200  { background-color: #21293a !important; }

/* Hover backgrounds */
.dark .hover\:bg-warm-50:hover  { background-color: rgba(255,255,255,0.04) !important; }
.dark .hover\:bg-warm-100:hover { background-color: #1c2333 !important; }

/* Borders */
.dark .border-warm-50  { border-color: rgba(255,255,255,0.04) !important; }
.dark .border-warm-100 { border-color: rgba(255,255,255,0.09) !important; }
.dark .border-warm-200 { border-color: rgba(255,255,255,0.13) !important; }

/* Text — legible hierarchy on dark bg.
   Now a single monotonic scale (900 brightest → 300 dimmest); previously
   warm-500 was brighter than warm-600 and warm-600/400/300 all failed AA,
   which is why several modals hand-patched their own brighter grays.
   Contrast on the card bg (#161b22): 12.4 / 9.6 / 7.6 / 6.6 / 5.8 / 5.2 / 4.0.
   warm-300 is decorative-only; warm-200/100 are icon fills + pipe dividers. */
.dark .text-warm-900 { color: #dedad5 !important; }
.dark .text-warm-800 { color: #c5c0b8 !important; }
.dark .text-warm-700 { color: #b0aca3 !important; }
.dark .text-warm-600 { color: #a49f96 !important; }
.dark .text-warm-500 { color: #9a958c !important; }
.dark .text-warm-400 { color: #928d84 !important; }
.dark .text-warm-300 { color: #7d7970 !important; }
.dark .text-warm-200 { color: rgba(255,255,255,0.14) !important; }
.dark .text-warm-100 { color: rgba(255,255,255,0.07) !important; }

/* Terra reads at only 4.23:1 on dark cards — use the lighter terra-400 ramp
   (5.8:1) for text/icons in dark mode. Backgrounds keep full-strength terra. */
.dark .text-terra { color: #f07030 !important; }

.dark .hover\:text-warm-900:hover { color: #dedad5 !important; }
.dark .hover\:text-warm-700:hover { color: #8a867c !important; }

/* Inputs */
.dark .field {
    background-color: #1c2333 !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #dedad5 !important;
}
.dark .field::placeholder { color: #7d7970 !important; }  /* was #4d4a45 (1.78:1) — 3.6:1 */
.dark .field:focus {
    border-color: #c24e08 !important;
    box-shadow: 0 0 0 3px rgba(194,78,8,0.2) !important;
}
.dark select.field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6760' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Filter pills */
.dark .pill-inactive {
    color: #6b6760 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.dark .pill-inactive:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #8a867c !important;
    border-color: rgba(255,255,255,0.13) !important;
}

/* Skeleton shimmer (dark) */
.dark .skeleton {
    background: linear-gradient(90deg, #1c2333 25%, #21293a 50%, #1c2333 75%) !important;
    background-size: 400px 100% !important;
}

/* Badges — dark mode: desaturate backgrounds, brighten text */
.dark .badge-draft   { background: rgba(146,64,14,0.18)   !important; color: #fbbf24 !important; border-color: rgba(251,191,36,0.22)  !important; }
.dark .badge-sale    { background: rgba(6,95,70,0.2)       !important; color: #34d399 !important; border-color: rgba(52,211,153,0.22)  !important; }
.dark .badge-done    { background: rgba(30,64,175,0.2)     !important; color: #93c5fd !important; border-color: rgba(147,197,253,0.22) !important; }
.dark .badge-cancel  { background: rgba(255,255,255,0.05)  !important; color: #9e9890 !important; border-color: rgba(255,255,255,0.08) !important; }
.dark .badge-sent    { background: rgba(14,116,144,0.2)    !important; color: #7dd3fc !important; border-color: rgba(125,211,252,0.22) !important; }
.dark .badge-default { background: rgba(255,255,255,0.05)  !important; color: #9e9890 !important; border-color: rgba(255,255,255,0.08) !important; }
/* Per-template badge variants (orders/quotations list pages) */
.dark .badge-invoiced    { background: rgba(6,78,59,0.2)    !important; color: #34d399 !important; border-color: rgba(52,211,153,0.22)  !important; }
.dark .badge-to-invoice  { background: rgba(120,53,15,0.2)  !important; color: #fbbf24 !important; border-color: rgba(251,191,36,0.22)  !important; }
.dark .badge-upselling   { background: rgba(30,58,138,0.2)  !important; color: #93c5fd !important; border-color: rgba(147,197,253,0.22) !important; }
.dark .badge-nothing     { color: #7d7970 !important; }
/* Invoice payment-state badge dark variants */
.dark .badge-paid        { background: rgba(6,78,59,0.2)    !important; color: #34d399 !important; border-color: rgba(52,211,153,0.22)  !important; }
.dark .badge-unpaid      { background: rgba(146,64,14,0.18)  !important; color: #fbbf24 !important; border-color: rgba(251,191,36,0.22)  !important; }
.dark .badge-partial     { background: rgba(14,116,144,0.2)  !important; color: #7dd3fc !important; border-color: rgba(125,211,252,0.22) !important; }
.dark .badge-in-payment  { background: rgba(30,64,175,0.2)   !important; color: #93c5fd !important; border-color: rgba(147,197,253,0.22) !important; }
.dark .badge-overdue     { background: rgba(153,27,27,0.2)   !important; color: #fca5a5 !important; border-color: rgba(252,165,165,0.25) !important; }
.dark .badge-reversed    { background: rgba(255,255,255,0.05) !important; color: #9e9890 !important; border-color: rgba(255,255,255,0.08) !important; }
.dark .badge-credit-note { background: rgba(91,33,182,0.2)   !important; color: #c4b5fd !important; border-color: rgba(196,181,253,0.25) !important; }
/* Commission plan badge */
.badge-plan-active { background: #d1fae5; color: #065f46; border-radius: 9999px; padding: 2px 8px; }
.dark .badge-plan-active { background: rgba(6,78,59,0.2) !important; color: #34d399 !important; }

/* Card elevation — light mode depth, dark mode shadow */
.bg-white.rounded-lg {
    box-shadow: 0 1px 3px rgba(26,25,23,0.07), 0 1px 2px rgba(26,25,23,0.05);
}
.dark .bg-white.rounded-lg {
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}

/* Topbar — light gets bottom shadow, dark gets a distinct bg */
header.bg-white {
    box-shadow: 0 1px 0 #e8e6e1, 0 2px 4px rgba(26,25,23,0.04);
}
.dark header.bg-white {
    background-color: #0d1117 !important;   /* page-level bg, not card-level */
    box-shadow: 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* Scrollbar */
.dark ::-webkit-scrollbar-thumb { background: #21293a; }

/* Dark mode toggle icons — ID selectors for the original single toggle,
   class selectors for additional toggles (e.g. distributor mobile topbar) */
#dm-sun, .dm-sun   { display: none; }
.dark #dm-moon, .dark .dm-moon { display: none; }
.dark #dm-sun, .dark .dm-sun   { display: block; }

/* ── Table row hover (opacity-variant utilities not caught by warm-50 override) ── */
.dark .hover\:bg-warm-50\/50:hover { background-color: rgba(255,255,255,0.04) !important; }
.dark .hover\:bg-warm-50\/30:hover { background-color: rgba(255,255,255,0.03) !important; }

/* ── Stock/transfer inline cell inputs ── */
.dark .done-qty-input,
.dark .qty-input,
.dark .lot-input,
.dark .serial-add-input {
    background-color: #1c2333 !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #dedad5 !important;
}
.dark .done-qty-input::placeholder,
.dark .qty-input::placeholder,
.dark .lot-input::placeholder,
.dark .serial-add-input::placeholder { color: #7d7970 !important; }
.dark .done-qty-input:focus,
.dark .qty-input:focus,
.dark .lot-input:focus,
.dark .serial-add-input:focus {
    border-color: #c24e08 !important;
    box-shadow: 0 0 0 3px rgba(194,78,8,0.2) !important;
    outline: none;
}

/* ── Backorder decision modal ── */
.dark #backorder-modal > div:last-child { background-color: #1c2333 !important; }
.dark #backorder-modal .bg-warm-50 { background-color: #161b22 !important; }
.dark #backorder-modal .border-warm-100 { border-color: rgba(255,255,255,0.08) !important; }
.dark #backorder-modal .border-warm-200 { border-color: rgba(255,255,255,0.10) !important; }
.dark #backorder-modal .bg-warm-50.rounded-b-xl { background-color: #161b22 !important; }
.dark #backorder-modal table { background-color: #1c2333 !important; }
/* Text colours intentionally NOT scoped here — the global `.dark .text-warm-*`
   scale above is now brighter than these local patches used to be. */

/* ── Inventory adjustment page ── */
.dark .inventory-row:hover { background-color: rgba(255,255,255,0.02) !important; }
.dark input.counted-input {
    background-color: #21293a !important;
    border-color: rgba(255,255,255,0.13) !important;
    color: #dedad5 !important;
}
.dark input.counted-input:focus {
    border-color: #c24e08 !important;   /* was blue #3b82f6 — every other input focuses terra */
}

/* ── Return transfer modal ── */
.dark #return-modal > div:last-child { background-color: #1c2333 !important; }
.dark #return-modal .border-warm-200 { border-color: rgba(255,255,255,0.10) !important; }
.dark #return-modal .border-warm-100 { border-color: rgba(255,255,255,0.07) !important; }
/* Text colours use the global `.dark .text-warm-*` scale (see above). */
.dark #return-modal input.return-qty-input {
    background-color: #21293a !important;
    border-color: rgba(255,255,255,0.13) !important;
    color: #dedad5 !important;
}
.dark #return-modal input.return-qty-input:disabled {
    background-color: #161b22 !important;
    color: #4a4845 !important;
}
.dark #return-modal input.return-qty-input:focus {
    border-color: #c24e08 !important;
}

/* ── Detail-ops modal inputs ── */
.dark #detail-ops-modal > div:last-child {
    background-color: #161c27 !important;
    border-color: rgba(255,255,255,0.07) !important;
}
.dark .lot-ac-input,
.dark .modal-qty-input {
    background-color: #1c2333 !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #dedad5 !important;
}
.dark .lot-ac-input::placeholder,
.dark .modal-qty-input::placeholder { color: #7d7970 !important; }
.dark .lot-ac-input:focus,
.dark .modal-qty-input:focus {
    border-color: #c24e08 !important;
    box-shadow: 0 0 0 2px rgba(194,78,8,0.20) !important;
    outline: none;
}
.dark .lot-ac-dropdown {
    background-color: #1c2333 !important;
    border-color: rgba(255,255,255,0.10) !important;
}
.dark .lot-ac-dropdown [data-lot-name]:hover { background-color: rgba(255,255,255,0.05) !important; }
.dark .lot-ac-dropdown [data-lot-name] .lot-name-text { color: #dedad5 !important; }
.dark .lot-ac-dropdown [data-lot-name] .lot-qty-text  { color: #928d84 !important; }

/* ── Serial chips in dark mode ── */
.dark .serial-chip {
    background-color: rgba(59,130,246,0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(147,197,253,0.20) !important;
}
.dark .serial-chip button { color: #6b9fd4 !important; }
.dark .serial-chip button:hover { color: #f87171 !important; }

/* ── Stock/transfer header partner "selected" box ── */
.dark #partner-selected > div {
    background-color: rgba(194,78,8,0.12) !important;
    border-color: rgba(194,78,8,0.25) !important;
}

/* ── bg-blue-50 chips (lot badges) in dark mode ── */
.dark .bg-blue-50 {
    background-color: rgba(59,130,246,0.15) !important;
}
.dark .text-blue-600,
.dark .text-blue-700 {
    color: #93c5fd !important;
}
.dark .border-blue-100 {
    border-color: rgba(147,197,253,0.20) !important;
}

/* ── Serial add button blue tones ── */
.dark .bg-blue-50.rounded,
.dark .bg-blue-50.rounded-md { background-color: rgba(59,130,246,0.15) !important; }
.dark .hover\:bg-blue-100:hover { background-color: rgba(59,130,246,0.25) !important; }

/* ── State badge dark overrides (transfers / lots pages) ── */
.dark .bg-emerald-100 { background-color: rgba(6,95,70,0.20) !important; }
.dark .text-emerald-700 { color: #34d399 !important; }
.dark .bg-blue-100 { background-color: rgba(30,64,175,0.20) !important; }
.dark .text-blue-700 { color: #93c5fd !important; }
.dark .bg-amber-100 { background-color: rgba(120,53,15,0.20) !important; }
.dark .text-amber-700 { color: #fbbf24 !important; }
.dark .bg-red-50 { background-color: rgba(127,29,29,0.15) !important; }
.dark .border-red-200 { border-color: rgba(252,165,165,0.20) !important; }
.dark .text-red-700 { color: #fca5a5 !important; }
.dark .bg-emerald-50 { background-color: rgba(6,78,59,0.15) !important; }
.dark .border-emerald-200 { border-color: rgba(110,231,183,0.20) !important; }

/* ── Global confirm modal ── */
@keyframes confirmIn {
    from { opacity: 0; transform: scale(0.95) translateY(6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);   }
}
.dark #ov-confirm-modal .bg-white {
    background-color: #1c2333 !important;
}
.dark #ov-confirm-modal h3,
.dark #ov-confirm-modal p  { color: #dedad5 !important; }
.dark #ov-confirm-modal .border-warm-300 { border-color: rgba(255,255,255,0.12) !important; }
.dark #ov-confirm-modal .hover\:bg-warm-50:hover { background-color: rgba(255,255,255,0.06) !important; }

/* ── Global WhatsApp modal ── */
.dark #ov-wa-modal .bg-white { background-color: #1c2333 !important; }
.dark #ov-wa-modal .bg-warm-50 { background-color: #161b22 !important; }
.dark #ov-wa-modal .border-warm-100 { border-color: rgba(255,255,255,0.08) !important; }
.dark #ov-wa-modal #ov-wa-title { color: #dedad5 !important; }
.dark #ov-wa-modal input, .dark #ov-wa-modal textarea {
    background-color: #1c2333 !important; border-color: rgba(255,255,255,0.10) !important; color: #dedad5 !important;
}
.dark #ov-wa-modal .bg-warm-50.rounded-md { background-color: #21293a !important; border-color: rgba(255,255,255,0.08) !important; }