/* =============================================================
   tailwind.input.css — DIMS Tailwind CSS source
   =============================================================
   Build command (run from project root after downloading CLI):
     tools\tailwindcss.exe -i tailwind.input.css -o tailwind.generated.css

   Watch mode (auto-rebuild on save):
     tools\tailwindcss.exe -i tailwind.input.css -o tailwind.generated.css --watch

   See tools/TAILWIND_SETUP.md for first-time setup instructions.

   Migration status — ALL 7 MODULES MIGRATED (Phase 9 complete):
   ✅ analytics.css           — fully migrated (dashboard module, @apply converted)
   ✅ admin.css              — migrated (raw CSS in @layer components)
   ✅ inventory.css          — migrated (raw CSS in @layer components)
   ✅ delivery_management.css — migrated (raw CSS in @layer components)
   ✅ workflow.css           — migrated (raw CSS in @layer components)
   ✅ light.css              — migrated (global shell, raw CSS in @layer components)
   ✅ dark.css               — migrated (global dark overrides + .ad-* for access_denied)

   The old .css files in public/ are now redundant — once visual parity
   is confirmed, remove the <link> tags from src/App/Views/layouts/main.php
   and delete public/*.css (keep only tailwind.generated.css).

   Approach: @apply-based migration — semantic class names preserved so
   no PHP template changes are needed during the migration period.
   New components added after Phase 9 may use Tailwind utilities directly.
   ============================================================= */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* CRITICAL: preflight is disabled, so two universal resets it normally
       provides are missing. Re-add them here (lowest priority — any utility
       or @layer-components rule still wins).

       1. box-sizing: border-box — without this, `w-full` on an <input> renders
          at column_width + horizontal-padding (content-box adds padding ON TOP
          of the width), so every text input is wider than its grid column,
          eating the gap and overflowing the card. Selects use border-box
          natively, which is why inputs and selects looked different heights
          even with the same h-10 class.

       2. border reset — border utilities set only border-WIDTH; border-STYLE
          stays the UA default `none`, so no border renders without this. */

*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border);
}

input, select, textarea, button {
  font-family: inherit;
}

button {
  background-color: transparent;
  background-image: none;
}

/* Dark mode: render native date/time picker widgets (the calendar/clock
       indicator icons) in a light colour so they stay visible on the dark
       field background instead of appearing near-black. Applies app-wide. */

html.dark-mode input[type="date"],
    html.dark-mode input[type="time"],
    html.dark-mode input[type="datetime-local"],
    html.dark-mode input[type="month"],
    html.dark-mode input[type="week"] {
  color-scheme: dark;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

/* Hide native number-input increment/decrement spinners.
   Apply .no-spinner to any <input type="number"> that should look like a
   plain field (e.g. the quantity inputs on /inventory/production). */

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinner {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

/* ============================================================
   light.css — Global Shell — Delivery Management System
   Phase 4: Dashboard CSS extracted to analytics.css.
   This file contains only truly global styles:
     header, sidebar, footer, layout, base forms/tables/buttons,
     modals (support, general), access denied, success message.
   Module-specific styles live in their respective module files:
     analytics.css         — Dashboard
     delivery_management.css — Active Transactions, Tracking,
                               Edit Requests, Delivery Chooser
     workflow.css          — QC, Storekeeper, Security, Returns
     inventory.css         — Inventory, Costing
     admin.css             — Admin, Resource Master
   ============================================================ */

/* Google Font is loaded in the PHP file via <link> tag */

/* ===== ROOT VARIABLES ===== */

:root {
  --header-height: 70px;
  --sidebar-width: 250px;
  --brand-1: #007BFF;
  --brand-2: #00BFFF;
  --brand-1-dark: #0056b3;
  --brand-2-dark: #00aaff;
  /* Design palette */
  --page-bg: #f4f6f9;
  --header-bg: #fafbfc;
  --header-border: #e2e5ea;
  /* ── MD3 Surface tokens (Phase 5 #22) ── */
  --md-surface:                #ffffff;
  --md-surface-variant:        #f4f6f9;
  --md-surface-container-low:  #f8fafc;
  --md-surface-container:      #f1f5f9;
  --md-surface-container-high: #e2e8f0;
  /* ── MD3 Elevation shadows ── */
  --md-elevation-1: 0 1px 2px rgba(0,0,0,0.05);
  --md-elevation-2: 0 2px 8px rgba(0,0,0,0.08);
  --md-elevation-3: 0 4px 16px rgba(0,0,0,0.10);
  --md-elevation-4: 0 8px 32px rgba(0,0,0,0.12);
  /* ── MD3 Border radii ── */
  --md-radius-sm:  8px;
  --md-radius-md:  12px;
  --md-radius-lg:  16px;
  --md-radius-xl:  24px;
  /* ============================================================
       SEMANTIC THEME TOKENS (Visual Identity Alignment v2 — Phase A)
       shadcn-style design tokens. Components consume these via the
       Tailwind colour mappings in tailwind.config.js:
         bg-background / bg-card / bg-card-2 / text-foreground /
         text-muted / border-border / border-input / ring-ring /
         text-accent / bg-accent
       They flip to the warm charcoal + orange palette in
       html.dark-mode (block below) — one source of truth, no
       per-element dark: overrides needed for surfaces.
       LIGHT values evoke the old neutral palette.
       ============================================================ */
  --background:  #f4f6f9;
  /* page background        */
  --foreground:  #111827;
  /* primary text           */
  --card:        #ffffff;
  /* card / panel surface    */
  --card-2:      #f8fafc;
  /* raised / hover surface  */
  --muted:       #6b7280;
  /* secondary / muted text  */
  --border:      #e5e9ee;
  /* hairline borders        */
  --input:       #d1d5db;
  /* form control borders    */
  --ring:        #007BFF;
  /* focus ring (brand blue) */
  --accent:      #007BFF;
  /* accent — blue in light  */
}

/* ============================================================
   SEMANTIC THEME TOKENS — DARK (warm charcoal + orange).
   Recreates the old dark.css identity: #141414/#1e1e1e surfaces,
   the brand→orange (#f97316) accent flip, warm hairlines.
   html.dark-mode (0,1,1) outranks :root (0,1,0), so these win.
   ============================================================ */

html.dark-mode {
  --background:  #141414;
  --foreground:  #ffffff;
  --card:        #1e1e1e;
  --card-2:      #242424;
  --muted:       #a0a0a0;
  --border:      #2a2a2a;
  --input:       #3a3328;
  /* visible warm control border in dark */
  --ring:        #f97316;
  --accent:      #f97316;
  /* the brand→orange flip */
}

/* ===== BASE ===== */

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--page-bg);
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--page-bg);
  overflow-x: hidden;
}

/* ===== PAGE CONTAINER ===== */

/* Container — flush top-left, border + shadow on right/bottom only */

.page-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: #ffffff;
  box-sizing: border-box;
}

/* ===== HEADER ===== */

header {
  height: var(--header-height);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px 0 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 2px 10px rgba(0,0,0,0.04);
  flex-wrap: nowrap;
  margin-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 200;
  border-radius: 0;
}

header .left {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Dark logo panel — exact same width as sidebar */

.header-logo-panel {
  background: #0f1f3d;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 20px;
  width: var(--sidebar-width);
  height: var(--header-height);
  flex-shrink: 0;
  box-sizing: border-box;
}

header img.logo {
  height: 54px;
  border-radius: 6px;
  flex-shrink: 0;
}

header .subtitle {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  line-height: 1.35;
}

header .center {
  flex: 1;
  text-align: center;
}

header .center .title {
  font-size: 18px;
  color: #111827;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* Right cluster */

header .right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Icon buttons (bell, mail) */

.header-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f2937;
  font-size: 18px;
  transition: background 0.15s ease, color 0.15s ease;
}

.header-icon-btn:hover {
  background: #eef0f3;
  color: #111827;
}

.header-icon-btn svg {
  stroke: #1f2937;
  stroke-width: 2.2;
  transition: stroke 0.15s ease;
}

.header-icon-btn:hover svg {
  stroke: #111827;
}

/* Notification badge */

.header-icon-btn .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--header-bg);
  line-height: 1;
}

/* Divider between icons and profile */

.header-divider {
  width: 1px;
  height: 28px;
  background: #dde1e7;
  margin: 0 10px;
}

/* ===== USER MENU ===== */

.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.user-info:hover {
  background: #f3f4f6;
}

/* Avatar initials circle */

.user-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,123,255,0.35);
}

.user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.user-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.user-role-label {
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
}

/* Arrow */

.user-info .arrow {
  font-size: 10px;
  color: #9ca3af;
  margin-left: 2px;
}

/* Dropdown panel */

.user-menu .dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: #ffffff;
  border-radius: 14px;
  padding: 6px 0;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(15,23,42,0.14);
  display: none;
  z-index: 1000;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 13px;
  color: #374151;
  transition: background 0.12s ease;
  font-weight: 500;
}

.dropdown-item:hover {
  background: #f3f4f6;
  color: #111827;
}

.dropdown-item .di-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  opacity: 0.7;
}

.dropdown-divider {
  height: 1px;
  margin: 4px 12px;
  background: #e5e7eb;
}

.dropdown-item.logout {
  color: #dc2626;
}

.dropdown-item.logout:hover {
  background: #fef2f2;
}

/* ===== LAYOUT ===== */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: 1fr auto;
  align-items: stretch;
}

/* Sidebar spans only the content row */

nav.\!sidebar {
  grid-row: 1 !important;
  grid-column: 1 !important;
}

nav.sidebar {
  grid-row: 1;
  grid-column: 1;
}

/* Main spans only the content row */

main {
  grid-row: 1;
  grid-column: 2;
  flex: unset;
  padding: 24px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Footer spans full width — both columns */

footer {
  grid-row: 2;
  grid-column: 1 / -1;
}

/* ===== FOOTER ===== */

footer {
  margin-top: 0;
  background: #ffffff;
  border-top: 1px solid #e8ecf0;
  padding: 14px 28px;
  font-size: 12.5px;
  color: #9ca3af;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
}

footer .left {
  font-weight: 500;
  color: #9ca3af;
}

footer .right {
  display: flex;
  gap: 18px;
}

footer .right a {
  text-decoration: none;
  color: #9ca3af;
  transition: color .15s ease;
  font-weight: 500;
}

footer .right a:hover {
  color: var(--brand-1);
}

/* ===== SIDEBAR ===== */

nav.\!sidebar {
  width: var(--sidebar-width) !important;
  flex-shrink: 0 !important;
  background: #0f1f3d !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: 2px 0 16px rgba(0,0,0,0.28) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
}

nav.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: #0f1f3d;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: 2px 0 16px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Scrollbar */

nav.\!sidebar::-webkit-scrollbar {
  width: 4px !important;
}

nav.sidebar::-webkit-scrollbar {
  width: 4px;
}

nav.\!sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}

nav.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

nav.\!sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
}

nav.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

/* Section heading */

nav.\!sidebar h4 {
  margin: 0 !important;
  padding: 20px 20px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
}

nav.sidebar h4 {
  margin: 0;
  padding: 20px 20px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

nav.\!sidebar ul {
  list-style: none !important;
  padding: 0 10px !important;
  margin: 0 !important;
}

nav.sidebar ul {
  list-style: none;
  padding: 0 10px;
  margin: 0;
}

/* Parent items */

nav.\!sidebar > ul > li {
  padding: 0 !important;
  margin: 2px 0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background 0.15s ease !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

nav.sidebar > ul > li {
  padding: 0;
  margin: 2px 0;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
  color: rgba(255,255,255,0.72);
  font-size: 13.5px;
  font-weight: 500;
}

/* Inner row */

nav.\!sidebar > ul > li > .nav-row {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

nav.sidebar > ul > li > .nav-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

nav.\!sidebar > ul > li > .nav-row:hover {
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
}

nav.sidebar > ul > li > .nav-row:hover {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
}

/* Nav icon */

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nav label — used on both <span> and <a> parent-row labels */

.nav-label {
  flex: 1;
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
}

.nav-label:hover,
.nav-label:visited,
.nav-label:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* Sub-item anchors — reset all browser default link styles */

nav.\!sidebar ul ul li a {
  color: inherit !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
}

nav.sidebar ul ul li a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
}

nav.\!sidebar ul ul li a:hover,
nav.\!sidebar ul ul li a:visited,
nav.\!sidebar ul ul li a:focus {
  color: inherit !important;
  text-decoration: none !important;
  outline: none !important;
}

nav.sidebar ul ul li a:hover,
nav.sidebar ul ul li a:visited,
nav.sidebar ul ul li a:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

nav.\!sidebar ul ul li a:hover,
nav.\!sidebar ul ul li a:visited,
nav.\!sidebar ul ul li a:focus {
  color: inherit !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Chevron arrow */

nav.\!sidebar li.has-submenu > .nav-row::after {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid rgba(255,255,255,0.4) !important;
  border-bottom: 2px solid rgba(255,255,255,0.4) !important;
  transform: rotate(-45deg) translateY(-2px) !important;
  transition: transform 0.22s ease, border-color 0.15s ease !important;
  flex-shrink: 0 !important;
  margin-right: 2px !important;
}

nav.sidebar li.has-submenu > .nav-row::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255,255,255,0.4);
  border-bottom: 2px solid rgba(255,255,255,0.4);
  transform: rotate(-45deg) translateY(-2px);
  transition: transform 0.22s ease, border-color 0.15s ease;
  flex-shrink: 0;
  margin-right: 2px;
}

nav.\!sidebar li.has-submenu.open > .nav-row::after {
  transform: rotate(45deg) translateY(-2px) !important;
  border-color: rgba(255,255,255,0.7) !important;
}

nav.sidebar li.has-submenu.open > .nav-row::after {
  transform: rotate(45deg) translateY(-2px);
  border-color: rgba(255,255,255,0.7);
}

nav.sidebar li.has-submenu.\!open > .nav-row::after {
  transform: rotate(45deg) translateY(-2px) !important;
  border-color: rgba(255,255,255,0.7) !important;
}

/* Active parent */

nav.\!sidebar > ul > li.active > .nav-row {
  background: var(--brand-1) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0,123,255,0.35) !important;
}

nav.sidebar > ul > li.active > .nav-row {
  background: var(--brand-1);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,123,255,0.35);
}

nav.sidebar > ul > li.\!active > .nav-row {
  background: var(--brand-1) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0,123,255,0.35) !important;
}

nav.\!sidebar > ul > li.active > .nav-row .nav-icon {
  opacity: 1 !important;
}

nav.sidebar > ul > li.active > .nav-row .nav-icon {
  opacity: 1;
}

nav.sidebar > ul > li.\!active > .nav-row .nav-icon {
  opacity: 1 !important;
}

/* Submenu */

nav.\!sidebar ul ul {
  list-style: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  padding: 0 0 0 14px !important;
  margin: 0 0 4px 30px !important;
  border-left: 2px solid rgba(255,255,255,0.12) !important;
  transition: max-height 0.3s ease, opacity 0.25s ease !important;
}

nav.sidebar ul ul {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 0 0 14px;
  margin: 0 0 4px 30px;
  border-left: 2px solid rgba(255,255,255,0.12);
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

nav.\!sidebar li.open > ul {
  max-height: 500px !important;
  opacity: 1 !important;
  margin-top: 2px !important;
}

nav.sidebar li.open > ul {
  max-height: 500px;
  opacity: 1;
  margin-top: 2px;
}

nav.sidebar li.\!open > ul {
  max-height: 500px !important;
  opacity: 1 !important;
  margin-top: 2px !important;
}

/* Sub-items */

nav.\!sidebar ul ul li {
  padding: 8px 10px !important;
  margin: 1px 0 !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.58) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

nav.sidebar ul ul li {
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.58);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

nav.\!sidebar ul ul li::before {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.3) !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease !important;
}

nav.sidebar ul ul li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
  transition: background 0.15s ease;
}

nav.\!sidebar ul ul li:hover {
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
  padding-left: 14px !important;
}

nav.sidebar ul ul li:hover {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
  padding-left: 14px;
}

nav.\!sidebar ul ul li:hover::before {
  background: var(--brand-2) !important;
}

nav.sidebar ul ul li:hover::before {
  background: var(--brand-2);
}

/* Active sub-item */

nav.\!sidebar ul ul li.active {
  background: rgba(0,123,255,0.18) !important;
  color: #60b3ff !important;
  font-weight: 600 !important;
}

nav.sidebar ul ul li.active {
  background: rgba(0,123,255,0.18);
  color: #60b3ff;
  font-weight: 600;
}

nav.sidebar ul ul li.\!active {
  background: rgba(0,123,255,0.18) !important;
  color: #60b3ff !important;
  font-weight: 600 !important;
}

nav.\!sidebar ul ul li.active::before {
  background: #60b3ff !important;
}

nav.sidebar ul ul li.active::before {
  background: #60b3ff;
}

nav.sidebar ul ul li.\!active::before {
  background: #60b3ff !important;
}

/* Sidebar bottom padding */

nav.\!sidebar::after {
  content: '' !important;
  display: block !important;
  height: 24px !important;
}

nav.sidebar::after {
  content: '';
  display: block;
  height: 24px;
}

/* ===== SECTION CARDS ===== */

.section-card {
  background: #ffffff;
  border: 1px solid #e5e9ee;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06);
}

.card {
  background: #ffffff;
  border: 1px solid #e5e9ee;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06);
}

.card h3 {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.2px;
}

/* Filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 15px;
}

.filters input, .filters select, .filters button {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* ===== TABLE — legacy defaults =====
   Scoped to :not([data-component]) so migrated Tailwind tables (which carry
   data-component="table" or any other data-component value) are immune.
   Without this scoping the global `min-width: 600px` breaks responsive grids
   and `thead th { position: sticky }` makes every migrated table header
   pin-to-top inside its container. Strip these rules entirely once every
   legacy table has been migrated (T7 cleanup). */

.table-wrapper {
  overflow-x: auto;
}

table:not([data-component]) {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

table:not([data-component]) th,
table:not([data-component]) td {
  padding: 13px 16px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  font-size: 13.5px;
}

table:not([data-component]) thead th {
  background: #f8fafc;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1.5px solid #e5e9ee;
  padding-top: 12px;
  padding-bottom: 12px;
}

table:not([data-component]) tbody tr:hover {
  background: #f8fafc;
}

/* Panels */

.panel {
  background: #ffffff;
  border: 1px solid #e5e9ee;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06);
}

.panel h4 {
  margin-bottom: 14px;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
}

.panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.panel li {
  margin: 8px 0;
  font-size: 14px;
}

/* ===== QUICK ACTIONS / DELIVERY DROPDOWN ===== */

.quick-action-btn .arrow {
  margin-left: 8px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.delivery-dropdown.active .arrow {
  transform: rotate(180deg);
}

.delivery-dropdown.\!active .arrow {
  transform: rotate(180deg) !important;
}

.delivery-options.active {
  max-height: 300px;
  opacity: 1;
}

.delivery-options.\!active {
  max-height: 300px !important;
  opacity: 1 !important;
}

.delivery-options .quick-action-btn {
  min-width: 200px;
  flex: none;
}

/* ===== MODALS ===== */

.\!modal {
  position: fixed !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  background: rgba(0,0,0,0.6) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:1000 !important;
}

.modal {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
}

/* ── Mobile hamburger toggle button (hidden on desktop) ── */

.sidebar-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 7px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.15s;
}

.sidebar-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
  transform-origin: center;
}

.sidebar-toggle:hover {
  background: rgba(255,255,255,0.14);
}

.sidebar-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sidebar-toggle.\!open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}

.sidebar-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.sidebar-toggle.\!open span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

.sidebar-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.sidebar-toggle.\!open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

/* ── Mobile sidebar backdrop overlay ── */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);
  z-index: 198;
}

.sidebar-overlay.active {
  display: block;
}

.sidebar-overlay.\!active {
  display: block !important;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1024px) {
  /* Sidebar becomes a fixed flyout — removed from grid flow */

  .sidebar-toggle {
    display: flex;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  nav.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    height: calc(100vh - var(--header-height));
    width: var(--sidebar-width) !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 199;
    grid-column: unset;
    grid-row: unset;
  }

  nav.sidebar.open {
    transform: translateX(0);
  }

  main {
    grid-column: 1;
    margin-left: 0;
  }

  /* Sidebar becomes a fixed flyout — removed from grid flow */

   {
    display: flex !important;
    grid-template-columns: 1fr !important;
  }

  nav.\!sidebar {
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0 !important;
    height: calc(100vh - var(--header-height)) !important;
    width: var(--sidebar-width) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 199 !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  nav.\!sidebar.open {
    transform: translateX(0) !important;
  }

   {
    grid-column: 1 !important;
    margin-left: 0 !important;
  }

  /* Sidebar becomes a fixed flyout — removed from grid flow */

   {
    display: flex !important;
    grid-template-columns: 1fr !important;
  }

  nav.\!sidebar {
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0 !important;
    height: calc(100vh - var(--header-height)) !important;
    width: var(--sidebar-width) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 199 !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  nav.\!sidebar.open {
    transform: translateX(0) !important;
  }

   {
    grid-column: 1 !important;
    margin-left: 0 !important;
  }

  /* Sidebar becomes a fixed flyout — removed from grid flow */

   {
    display: flex !important;
    grid-template-columns: 1fr !important;
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0 !important;
    height: calc(100vh - var(--header-height)) !important;
    width: var(--sidebar-width) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 199 !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  nav.sidebar.\!open {
    transform: translateX(0) !important;
  }

   {
    grid-column: 1 !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .quick-actions {
    flex-direction: column;
  }

  .quick-action-btn {
    width: 100%;
  }

  /* Compact header on small screens */

  .header-logo-panel {
    width: auto;
  }

  header .subtitle {
    display: none;
  }

  header .center .title {
    font-size: 16px;
  }
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.form-row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-row label {
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.required {
  color: red;
  font-weight: bold;
}

/* Scoped to :not([data-component]) so migrated input/select atoms keep their
   own Tailwind utility chrome (especially focus:ring-brand). Legacy form
   inputs without a component anchor still inherit these defaults. */

input[type="text"]:not([data-component]),
input[type="number"]:not([data-component]),
input[type="date"]:not([data-component]),
input[type="time"]:not([data-component]),
select:not([data-component]) {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

input:not([data-component]):focus, select:not([data-component]):focus {
  border-color: #007BFF;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
}

.error {
  color: #dc3545;
  font-size: 13px;
  margin-top: 4px;
}

.section-card {
  background: #fff;
  border: 2px solid #007BFF;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.section-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #007BFF;
}

.custom-file-btn input {
  display: none;
}

/* Scoped to :not([data-component]) so migrated component buttons (button atom
   emits data-component="button") are immune to these legacy form-button
   defaults. Legacy bare <button> elements still get the styling. */

button:not([data-component]), input[type="submit"] {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

button:not([data-component]):hover, input[type="submit"]:hover {
  opacity: 0.9;
}

/* ===== HELP / SUPPORT MODAL ===== */

.support-modal-content h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  color: #0f172a;
}

.support-modal-content p,
.support-modal-content ul {
  font-size: 14px;
  color: #334155;
}

.support-modal-content ul {
  padding-left: 18px;
}

@keyframes modalPop {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to   {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== FOOTER THEME TOGGLE BUTTON ===== */

.footer-theme-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

/* Theme toggle in header — override square icon-btn to pill shape */

#themeToggleBtn.header-icon-btn {
  width: auto;
  height: 32px;
  border-radius: 20px;
  border: 1.5px solid #d1d5db;
  padding: 0 12px;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

#themeToggleBtn.header-icon-btn svg {
  stroke: currentColor;
  stroke-width: 2.2;
  width: 15px;
  height: 15px;
}

#themeToggleBtn.header-icon-btn:hover {
  background: transparent;
  border-color: #f97316;
  color: #f97316;
}

#themeToggleBtn.header-icon-btn:hover svg {
  stroke: #f97316;
}

/* ============================================================
   SECTION HEADER BANNER — Global utility
   Used by section wrappers on dashboard.php (e.g. Weighbridge)
   and standalone delivery form pages.
   ============================================================ */

.section-h2-header {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px 0;
  letter-spacing: -0.2px;
}

/* ============================================================
   SECTION: ACCESS DENIED PAGE (access_denied.php)
   ============================================================ */

.ad-body {
  font-family: 'Inter', sans-serif;
  background: #f1f5f9;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin: 0;
}

.ad-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 0;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.ad-top-bar {
  height: 5px;
  background: linear-gradient(90deg, #dc2626, #f97316, #fbbf24);
  width: 100%;
}

.ad-body-inner {
  padding: 52px 48px 44px;
  text-align: center;
}

.ad-icon-wrap {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 2px solid #fecaca;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  box-shadow: 0 8px 24px rgba(220,38,38,0.15);
}

.ad-icon-wrap svg {
  width: 42px;
  height: 42px;
  stroke: #dc2626;
}

.ad-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #dc2626;
  margin-bottom: 20px;
}

.ad-code::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dc2626;
  flex-shrink: 0;
}

.ad-title {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.ad-subtitle {
  font-size: 14px;
  color: #64748b;
  line-height: 1.75;
  margin: 0 0 28px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.ad-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 20px;
  font-size: 13px;
  color: #475569;
  margin-bottom: 36px;
}

.ad-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007BFF, #00BFFF);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ad-user-details {
  text-align: left;
}

.ad-user-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
  display: block;
}

.ad-user-role {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-top: 2px;
}

.ad-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 0 0 28px;
}

.ad-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.ad-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #007BFF, #00BFFF);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,123,255,0.30);
  transition: 0.2s ease;
  white-space: nowrap;
}

.ad-btn-primary:hover {
  box-shadow: 0 10px 28px rgba(0,123,255,0.42);
  transform: translateY(-2px);
}

.ad-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  color: #475569;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  transition: 0.2s ease;
  white-space: nowrap;
}

.ad-btn-secondary:hover {
  background: #e2e8f0;
  color: #1e293b;
  transform: translateY(-2px);
}

.ad-footer {
  padding: 16px 48px 24px;
  text-align: center;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.6;
}

.ad-footer a {
  color: #007BFF;
  text-decoration: none;
  font-weight: 600;
}

.ad-footer a:hover {
  text-decoration: underline;
}

/* ============================================================
   SECTION: SEARCHABLE LOCATION DROPDOWN — shared widget chrome
   ============================================================
   T7.E status: INTENTIONAL HOLDOUT.
   This .loc-search-* class set is consumed by 12 views (dashboard
   filter modal, external/internal delivery forms, active-requests,
   inventory, storekeeper/grn, storekeeper/review, qc/pending,
   security/pending, delivery/tracking, returns/tracking, edit-
   requests/queue) and each view's own JS initializer reaches in via
   class selectors. A proper render_searchable_select() molecule
   migration would require updating all 12 markup blocks AND each
   initializer in lockstep; deferred as a separate effort.
   The CSS below stays as a shared widget definition.
   ============================================================ */

/* ── Outer wrapper — positions the floating dropdown ── */

.loc-search-wrap {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* ── The visible "select-like" trigger button ── */

.loc-search-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 40px;
  font-family: inherit;
}

.loc-search-display:hover {
  border-color: #007BFF;
}

.loc-search-display:focus,
.loc-search-open .loc-search-display {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
  outline: none;
}

/* Disabled state — matches the existing select[disabled] style */

.loc-search-disabled .loc-search-display {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== MONOSPACE TECHNICAL IDENTIFIERS ===== */

/* Applied to DN numbers, resource codes, vehicle plates, LPO refs, OTP numbers */

.code-value,
.serial-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em;
  letter-spacing: 0.03em;
}

.loc-search-placeholder {
  color: #9ca3af;
}

.loc-search-selected    {
  color: #1f2937;
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loc-search-arrow {
  font-size: 11px;
  color: #6b7280;
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.loc-search-open .loc-search-arrow {
  transform: rotate(180deg);
}

/* ── Floating dropdown panel ── */

.loc-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
}

/* ── Search input inside the dropdown ── */

.loc-search-input-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.loc-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #1f2937;
  background: #f9fafb;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.loc-search-input:focus {
  border-color: #007BFF;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.10);
}

/* ── Results list ── */

.loc-search-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
}

/* ── Individual result item ── */

.loc-search-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13.5px;
  transition: background 0.1s;
  line-height: 1.3;
}

.loc-search-item:hover {
  background: #eff6ff;
}

.loc-search-item:active {
  background: #dbeafe;
}

/* Code badge (e.g. "PMA00493") */

.loc-search-code {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #007BFF;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Location name */

.loc-search-name {
  color: #374151;
  flex: 1;
}

/* ── Status items (loading, empty, error) ── */

.loc-search-loading,
.loc-search-empty,
.loc-search-error {
  cursor: default;
  font-size: 13px;
  padding: 12px 14px;
  color: #9ca3af;
  font-style: italic;
}

.loc-search-loading::before {
  content: '⏳ ';
  font-style: normal;
}

.loc-search-empty::before   {
  content: '🔍 ';
  font-style: normal;
}

.loc-search-error {
  color: #dc2626;
}

.loc-search-error::before   {
  content: '⚠ ';
  font-style: normal;
}

/* ============================================================
   dark.css — Dark Theme for Delivery Management System
   COLOR OVERRIDES ONLY — layout/structure stays in light.css

   MECHANISM: html.dark-mode class toggled by JS (layout_footer.php).
   All rules (except the Access Denied section) are scoped to
   html.dark-mode so they have no effect in light mode.

   ACCESS DENIED EXCEPTION: .ad-* rules are intentionally FLAT
   (no html.dark-mode prefix) because access_denied.php loads
   dark.css via the legacy disabled-stylesheet mechanism and does
   not use layout_header.php.

   Module-specific dark overrides live in their module CSS files.
   ============================================================ */

/* ============================================================
   dark.css — Dark Theme for Delivery Management System
   COLOR OVERRIDES ONLY — layout/structure stays in light.css

   Strategy: The warm radial glow lives on .page-container
   (not body) because overflow:hidden clips body backgrounds.
   Everything else is neutral near-black with orange accent.

   Palette:
   Container bg:  warm radial glow over #111111
   Card:          #1c1c1c
   Sidebar:       #0d0d0d
   Header:        #111111
   Border:        #2a2a2a
   Accent:        #f97316 (orange)
   Text 1:        #ffffff
   Text 2:        #a0a0a0
   Text 3:        #555555
   ============================================================ */

/* ===== ROOT ===== */

html.dark-mode {
  --page-bg:       #111111;
  --header-bg:     #111111;
  --header-border: #2a2a2a;
  --brand-1:       #f97316;
  --brand-2:       #fb923c;
  --brand-1-dark:  #ea6c0a;
  --brand-2-dark:  #f97316;
  /* ── MD3 Surface tokens — dark overrides (Phase 5 #22) ── */
  --md-surface:                #1c1c1c;
  --md-surface-variant:        #1a1a1a;
  --md-surface-container-low:  #161616;
  --md-surface-container:      #222222;
  --md-surface-container-high: #2a2a2a;
  /* ── MD3 Elevation shadows — dark-adjusted opacity ── */
  --md-elevation-1: 0 1px 2px rgba(0,0,0,0.25);
  --md-elevation-2: 0 2px 8px rgba(0,0,0,0.35);
  --md-elevation-3: 0 4px 16px rgba(0,0,0,0.45);
  --md-elevation-4: 0 8px 32px rgba(0,0,0,0.55);
}

/* ===== BODY ===== */

html:has(html.dark-mode) {
  background: #141414;
}

html.dark-mode {
  background:
        radial-gradient(ellipse at 0% 100%, rgba(160,50,5,0.35) 0%, rgba(100,30,5,0.18) 22%, transparent 45%),
        #141414;
  color: #ffffff;
}

/* ===== PAGE CONTAINER
   Charcoal dominant — warm glow only subtle at bottom-left corner ===== */

html.dark-mode .page-container {
  background:
        radial-gradient(ellipse at -5% 108%, rgba(170,55,5,0.45) 0%, rgba(120,35,5,0.28) 18%, rgba(70,20,3,0.14) 35%, transparent 52%),
        #141414;
}

/* ===== HEADER ===== */

html.dark-mode header {
  background: rgba(16,16,16,0.97);
  border-bottom-color: #252520;
  box-shadow: 0 1px 0 #252520;
}

html.dark-mode .header-logo-panel {
  background: #0c0c0c;
}

html.dark-mode header .center .title {
  color: #f97316;
}

html.dark-mode .header-icon-btn {
  color: #d0d0d0;
}

html.dark-mode .header-icon-btn:hover {
  background: rgba(249,115,22,0.15);
  color: #f97316;
}

html.dark-mode .header-icon-btn svg {
  stroke: #d0d0d0;
  stroke-width: 2.2;
}

html.dark-mode .header-icon-btn:hover svg {
  stroke: #f97316;
}

html.dark-mode .header-icon-btn .badge {
  background: #f97316;
  border-color: #0e0e0e;
  font-weight: 800;
}

html.dark-mode .header-divider {
  background: #333333;
}

/* ===== USER MENU ===== */

html.dark-mode .user-info:hover {
  background: rgba(249,115,22,0.08);
}

html.dark-mode .user-avatar-circle {
  background: linear-gradient(135deg, #f97316, #fb923c);
  box-shadow: 0 2px 6px rgba(249,115,22,0.40);
}

html.dark-mode .user-name {
  color: #ffffff;
}

html.dark-mode .user-role-label {
  color: #aaaaaa;
}

html.dark-mode .user-info .arrow {
  color: #888888;
}

html.dark-mode .user-menu .dropdown {
  background: #1c1208;
  border-color: #2e2015;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

html.dark-mode .dropdown-item {
  color: #c0c0c0;
}

html.dark-mode .dropdown-item:hover {
  background: rgba(249,115,22,0.10);
  color: #ffffff;
}

html.dark-mode .dropdown-divider {
  background: #2e2015;
}

html.dark-mode .dropdown-item.logout {
  color: #f87171;
}

html.dark-mode .dropdown-item.logout:hover {
  background: rgba(248,113,113,0.08);
}

/* ===== SIDEBAR ===== */

html.dark-mode nav.sidebar {
  /* Charcoal dominates top 60% — warm brown only from 60% down to bottom */
  background:
        radial-gradient(ellipse at 50% 110%, rgba(160,55,5,0.40) 0%, rgba(100,30,5,0.20) 35%, transparent 60%),
        linear-gradient(to bottom,
            #1c1c1c 0%,
            #1d1c1b 25%,
            #1e1a16 45%,
            #221710 60%,
            #2e1c0c 72%,
            #3e2008 84%,
            #502405 100%);
  box-shadow: 2px 0 20px rgba(0,0,0,0.7);
}

html.dark-mode nav.\!sidebar {
  /* Charcoal dominates top 60% — warm brown only from 60% down to bottom */
  background:
        radial-gradient(ellipse at 50% 110%, rgba(160,55,5,0.40) 0%, rgba(100,30,5,0.20) 35%, transparent 60%),
        linear-gradient(to bottom,
            #1c1c1c 0%,
            #1d1c1b 25%,
            #1e1a16 45%,
            #221710 60%,
            #2e1c0c 72%,
            #3e2008 84%,
            #502405 100%) !important;
  box-shadow: 2px 0 20px rgba(0,0,0,0.7) !important;
}

html.dark-mode nav.sidebar::-webkit-scrollbar-thumb {
  background: rgba(249,115,22,0.25);
}

html.dark-mode nav.\!sidebar::-webkit-scrollbar-thumb {
  background: rgba(249,115,22,0.25) !important;
}

html.dark-mode nav.sidebar h4 {
  color: rgba(249,115,22,0.60);
  letter-spacing: 0.14em;
}

html.dark-mode nav.\!sidebar h4 {
  color: rgba(249,115,22,0.60) !important;
  letter-spacing: 0.14em !important;
}

/* Parent nav items — bright white, clearly readable */

html.dark-mode nav.sidebar > ul > li {
  color: rgba(255,255,255,0.88);
}

html.dark-mode nav.\!sidebar > ul > li {
  color: rgba(255,255,255,0.88) !important;
}

html.dark-mode nav.sidebar > ul > li > .nav-row:hover {
  background: rgba(249,115,22,0.14);
  color: #ffffff;
}

html.dark-mode nav.\!sidebar > ul > li > .nav-row:hover {
  background: rgba(249,115,22,0.14) !important;
  color: #ffffff !important;
}

html.dark-mode nav.sidebar li.has-submenu > .nav-row::after {
  border-right-color: rgba(255,255,255,0.50);
  border-bottom-color: rgba(255,255,255,0.50);
}

html.dark-mode nav.\!sidebar li.has-submenu > .nav-row::after {
  border-right-color: rgba(255,255,255,0.50) !important;
  border-bottom-color: rgba(255,255,255,0.50) !important;
}

html.dark-mode nav.sidebar li.has-submenu.open > .nav-row::after {
  border-right-color: #f97316;
  border-bottom-color: #f97316;
}

html.dark-mode nav.\!sidebar li.has-submenu.open > .nav-row::after {
  border-right-color: #f97316 !important;
  border-bottom-color: #f97316 !important;
}

html.dark-mode nav.sidebar li.has-submenu.\!open > .nav-row::after {
  border-right-color: #f97316 !important;
  border-bottom-color: #f97316 !important;
}

html.dark-mode nav.sidebar > ul > li.active > .nav-row {
  background: linear-gradient(90deg, #f97316, #ea6c0a);
  color: #ffffff;
  box-shadow: 0 3px 16px rgba(249,115,22,0.50);
}

html.dark-mode nav.\!sidebar > ul > li.active > .nav-row {
  background: linear-gradient(90deg, #f97316, #ea6c0a) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 16px rgba(249,115,22,0.50) !important;
}

html.dark-mode nav.sidebar > ul > li.\!active > .nav-row {
  background: linear-gradient(90deg, #f97316, #ea6c0a) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 16px rgba(249,115,22,0.50) !important;
}

html.dark-mode nav.sidebar > ul > li.active > .nav-row .nav-icon {
  opacity: 1;
}

html.dark-mode nav.\!sidebar > ul > li.active > .nav-row .nav-icon {
  opacity: 1 !important;
}

html.dark-mode nav.sidebar > ul > li.\!active > .nav-row .nav-icon {
  opacity: 1 !important;
}

/* Submenu items — clearly readable */

html.dark-mode nav.sidebar ul ul {
  border-left-color: rgba(249,115,22,0.30);
}

html.dark-mode nav.\!sidebar ul ul {
  border-left-color: rgba(249,115,22,0.30) !important;
}

html.dark-mode nav.sidebar ul ul li {
  color: rgba(255,255,255,0.70);
}

html.dark-mode nav.\!sidebar ul ul li {
  color: rgba(255,255,255,0.70) !important;
}

html.dark-mode nav.sidebar ul ul li::before {
  background: rgba(249,115,22,0.30);
}

html.dark-mode nav.\!sidebar ul ul li::before {
  background: rgba(249,115,22,0.30) !important;
}

html.dark-mode nav.sidebar ul ul li:hover {
  background: rgba(249,115,22,0.12);
  color: #ffffff;
}

html.dark-mode nav.\!sidebar ul ul li:hover {
  background: rgba(249,115,22,0.12) !important;
  color: #ffffff !important;
}

html.dark-mode nav.sidebar ul ul li:hover::before {
  background: #f97316;
}

html.dark-mode nav.\!sidebar ul ul li:hover::before {
  background: #f97316 !important;
}

html.dark-mode nav.sidebar ul ul li.active {
  background: rgba(249,115,22,0.20);
  color: #fb923c;
}

html.dark-mode nav.\!sidebar ul ul li.active {
  background: rgba(249,115,22,0.20) !important;
  color: #fb923c !important;
}

html.dark-mode nav.sidebar ul ul li.\!active {
  background: rgba(249,115,22,0.20) !important;
  color: #fb923c !important;
}

html.dark-mode nav.sidebar ul ul li.active::before {
  background: #fb923c;
}

html.dark-mode nav.\!sidebar ul ul li.active::before {
  background: #fb923c !important;
}

html.dark-mode nav.sidebar ul ul li.\!active::before {
  background: #fb923c !important;
}

/* ===== FOOTER ===== */

html.dark-mode footer {
  background: rgba(10,10,10,0.95);
  border-top-color: #1e1e1e;
  color: #444444;
}

html.dark-mode footer .left {
  color: #444444;
}

html.dark-mode footer .right a {
  color: #444444;
}

html.dark-mode footer .right a:hover {
  color: #f97316;
}

/* ===== MAIN ===== */

html.dark-mode main {
  background: transparent;
}

/* ===== SECTION CARDS + .card ===== */

html.dark-mode .section-card {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 6px 20px rgba(0,0,0,0.3);
}

html.dark-mode .card {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 6px 20px rgba(0,0,0,0.3);
}

html.dark-mode .card h3 {
  color: #ffffff;
}

html.dark-mode .panel {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

html.dark-mode .panel h4 {
  color: #ffffff;
}

html.dark-mode .panel li {
  color: #d8d8d8;
}

/* ===== TABLE ===== */

html.dark-mode th,
html.dark-mode td {
  border-bottom-color: #241810;
  color: #d8d8d8;
}

/* Scoped to :not([data-component]) to mirror the light-mode rule above
   (table:not([data-component]) thead th). Without this scope, migrated
   Tailwind tables (data-component="table") had their gradient <thead>
   header covered by this solid #1a1008 in dark mode only — light mode
   showed the gradient, dark mode showed solid brown. Now both modes let
   the migrated tables' own bg-gradient utilities through. */

html.dark-mode table:not([data-component]) thead th {
  background: #1a1008;
  color: #999999;
  border-bottom-color: #2e2015;
  font-weight: 700;
  letter-spacing: 0.04em;
}

html.dark-mode tbody tr:hover {
  background: rgba(249,115,22,0.07);
}

html.dark-mode .view-btn {
  background: #f97316;
}

html.dark-mode .view-btn:hover {
  background: #ea6c0a;
}

/* ===== FORMS =====
   Scoped :not([data-component]) so the migrated input/select ATOMS keep their
   own Tailwind utility chrome (bg-card-2, border-input, ring-ring). Without
   this scope these dark-mode rules override the atoms' background/border and
   the component fields look unchanged. Mirrors the light-mode rule above. */

html.dark-mode input[type="text"]:not([data-component]),
html.dark-mode input[type="number"]:not([data-component]),
html.dark-mode input[type="date"]:not([data-component]),
html.dark-mode input[type="time"]:not([data-component]),
html.dark-mode select:not([data-component]) {
  background: #0f0a05;
  border-color: #2e2015;
  color: #ffffff;
}

html.dark-mode input:not([data-component]):focus,
html.dark-mode select:not([data-component]):focus {
  border-color: #f97316;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.12);
}

html.dark-mode .form-row label {
  color: #a0a0a0;
}

html.dark-mode .required {
  color: #fb923c;
}

html.dark-mode .error {
  color: #f87171;
}

html.dark-mode .btn-secondary {
  background: #242424;
  color: #a0a0a0;
  border-color: #2a2a2a;
}

html.dark-mode .btn-secondary:hover {
  background: #2e2e2e;
}

html.dark-mode .section-card h3 {
  color: #f97316;
}

html.dark-mode .custom-file-btn {
  background: #f97316;
  border-color: #f97316;
}

html.dark-mode .add-btn {
  background: #f97316;
}

/* ===== GENERAL MODALS ===== */

html.dark-mode .modal-content {
  background: #1c1208;
  color: #c0c0c0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.75);
}

/* ===== SUPPORT MODAL ===== */

html.dark-mode .support-modal-backdrop {
  background: rgba(0,0,0,0.75);
}

html.dark-mode .support-modal-content {
  background: #1c1208;
  box-shadow: 0 18px 45px rgba(0,0,0,0.80);
}

html.dark-mode .support-modal-content h2 {
  color: #ffffff;
}

html.dark-mode .support-modal-content p,
html.dark-mode .support-modal-content ul {
  color: #c0c0c0;
}

html.dark-mode .support-close {
  color: #888888;
}

html.dark-mode .support-close:hover {
  color: #ffffff;
}

/* ===== FILTER ITEMS ===== */

html.dark-mode .filter-item label {
  color: #999999;
}

html.dark-mode .filter-item select {
  background: #0f0a05;
  border-color: #2e2015;
  color: #ffffff;
}

html.dark-mode .filter-item select:hover {
  border-color: #f97316;
}

html.dark-mode .btn-refresh {
  background: #f97316;
}

html.dark-mode .btn-refresh:hover {
  background: #ea6c0a;
}

/* ===== DELIVERY DROPDOWN ===== */

html.dark-mode .delivery-options {
  background: #1c1208;
  border-color: #f97316;
  box-shadow: 0 6px 12px rgba(0,0,0,0.65);
}

/* ===== SCROLLBARS ===== */

html.dark-mode ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html.dark-mode ::-webkit-scrollbar-track {
  background: #0a0703;
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: #2e2015;
  border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #f97316;
}

/* ===== FOOTER THEME TOGGLE BUTTON ===== */

html.dark-mode .footer-theme-btn {
  border-color: #333333;
  color: #888888;
}

html.dark-mode .footer-theme-btn:hover {
  border-color: #f97316;
  color: #f97316;
}

/* Theme toggle pill shape in header — dark mode */

html.dark-mode #themeToggleBtn.header-icon-btn {
  border-color: #333333;
  color: #888888;
  background: transparent;
}

html.dark-mode #themeToggleBtn.header-icon-btn svg {
  stroke: #cccccc;
}

html.dark-mode #themeToggleBtn.header-icon-btn:hover {
  border-color: #f97316;
  color: #f97316;
  background: transparent;
}

html.dark-mode #themeToggleBtn.header-icon-btn:hover svg {
  stroke: #f97316;
}

/* ============================================================


/* ============================================================
   SECTION: ACCESS DENIED PAGE — dark.css
   FLAT rules (no html.dark-mode prefix).
   access_denied.php uses the disabled-stylesheet mechanism.
   ============================================================ */

/* ============================================================
   SECTION: ACCESS DENIED PAGE — dark.css
   ============================================================ */

html.dark-mode .ad-body {
  background: #141414;
}

html.dark-mode .ad-card {
  background: #1c1c1c;
  border-color: #2a2a2a;
  box-shadow: 0 20px 60px rgba(0,0,0,0.50), 0 4px 16px rgba(0,0,0,0.30);
}

html.dark-mode .ad-top-bar {
  background: linear-gradient(90deg, #dc2626, #f97316, #fbbf24);
}

html.dark-mode .ad-icon-wrap {
  background: linear-gradient(135deg, #2d0a0a, #3d1010);
  border-color: #7f1d1d;
  box-shadow: 0 8px 24px rgba(220,38,38,0.25);
}

html.dark-mode .ad-code {
  background: #2d0a0a;
  border-color: #7f1d1d;
  color: #f87171;
}

html.dark-mode .ad-code::before {
  background: #f87171;
}

html.dark-mode .ad-title {
  color: #ffffff;
}

html.dark-mode .ad-subtitle {
  color: #a0a0a0;
}

html.dark-mode .ad-user-badge {
  background: #252525;
  border-color: #333333;
  color: #a0a0a0;
}

html.dark-mode .ad-user-avatar {
  background: linear-gradient(135deg, #f97316, #ea6c0a);
}

html.dark-mode .ad-user-name {
  color: #ffffff;
}

html.dark-mode .ad-user-role {
  color: #666666;
}

html.dark-mode .ad-divider {
  background: #2a2a2a;
}

html.dark-mode .ad-btn-primary {
  background: linear-gradient(135deg, #f97316, #ea6c0a);
  box-shadow: 0 6px 20px rgba(249,115,22,0.30);
}

html.dark-mode .ad-btn-primary:hover {
  box-shadow: 0 10px 28px rgba(249,115,22,0.45);
}

html.dark-mode .ad-btn-secondary {
  background: #2a2a2a;
  color: #f97316;
  border-color: #444444;
}

html.dark-mode .ad-btn-secondary:hover {
  background: #f97316;
  color: #ffffff;
  border-color: #f97316;
}

html.dark-mode .ad-footer {
  border-top-color: #2a2a2a;
  color: #555555;
}

html.dark-mode .ad-footer a {
  color: #f97316;
}

/* ============================================================
   SECTION: SEARCHABLE PROJECT DROPDOWN — dark.css
   COLOR OVERRIDES ONLY — layout/structure stays in light.css
   ============================================================ */

html.dark-mode .loc-search-display {
  background: #2e2e2e;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

html.dark-mode .loc-search-display:hover {
  border-color: #f97316;
}

html.dark-mode .loc-search-display:focus,
html.dark-mode .loc-search-open .loc-search-display {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.18);
}

html.dark-mode .loc-search-disabled .loc-search-display {
  background: #252525;
  color: #555555;
  border-color: #333333;
}

html.dark-mode .loc-search-placeholder {
  color: #6b6b6b;
}

html.dark-mode .loc-search-selected {
  color: #e0e0e0;
}

html.dark-mode .loc-search-arrow {
  color: #888888;
}

html.dark-mode .loc-search-dropdown {
  background: #252525;
  border-color: #3a3a3a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.50);
}

html.dark-mode .loc-search-input-wrap {
  border-bottom-color: #333333;
}

html.dark-mode .loc-search-input {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

html.dark-mode .loc-search-input:focus {
  border-color: #f97316;
  background: #252525;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

html.dark-mode .loc-search-item {
  color: #d0d0d0;
}

html.dark-mode .loc-search-item:hover {
  background: #2a2a2a;
}

html.dark-mode .loc-search-item:active {
  background: #333333;
}

html.dark-mode .loc-search-code {
  color: #fb923c;
  background: #1e1400;
  border-color: #7c3c00;
}

html.dark-mode .loc-search-name {
  color: #c0c0c0;
}

html.dark-mode .loc-search-loading,
html.dark-mode .loc-search-empty {
  color: #666666;
}

html.dark-mode .loc-search-error {
  color: #f87171;
}

#activityFeedSection .card {
  background: #ffffff;
  border: 1px solid #e5e9ee;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease;
}

#activityFeedSection .card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.06), 0 10px 28px rgba(0,0,0,0.09);
}

/* T7.C — .activity-header / .legend / .feed-* migrated to pure
     utilities on the dashboard view. JS hooks now target
     [data-component="dashboard-feed-*"] instead of class names. */

/* Scrollbar styling preserved (rule cannot be expressed as a utility class). */

#activityFeed::-webkit-scrollbar       {
  width: 6px;
}

#activityFeed::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}

#activityFeed::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,123,255,0.35);
}

.filter-item label {
  font-weight: 600;
  color: #333;
  margin-bottom: 3px;
}

.filter-item select {
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  transition: 0.2s;
}

.filter-item select:hover {
  border-color: #007BFF;
}

.tab-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.tab-btn {
  cursor: pointer;
  border-style: none;
  font-weight: 600;
  padding: 10px 20px;
  background: transparent;
  color: #7f8c8d;
  border-radius: 8px;
  transition: all 0.2s;
}

.tab-btn:hover {
  background: #f1f5f9;
  color: #333;
}

.tab-btn.active {
  background: #e0f2fe;
  color: #0284c7;
}

.tab-btn.\!active {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

.tab-content {
  display: none;
  height: 100%;
  width: 100%;
}

.tab-content.active {
  display: block;
}

.tab-content.\!active {
  display: block;
}

#highlightsSection   {
  margin-top: 16px;
}

#activityFeedSection {
  margin-top: 16px;
}

#barChartCard,
  #pieChartCard {
  position: relative;
}

#barChart,
  #pieChart {
  display:    block;
  width:      100% !important;
  height:     250px !important;
}

#lineChartCard {
  position: relative;
}

#lineChart {
  display:    block;
  width:      100% !important;
  height:     200px !important;
}

/* Coloured top borders on dashboard cards */

#barChartCard           {
  border-top: 3px solid #007BFF;
}

#pieChartCard           {
  border-top: 3px solid #f97316;
}

#lineChartCard          {
  border-top: 3px solid #16a34a;
}

#highlightsSection .card   {
  border-top: 3px solid #00b4a6;
}

#activityFeedSection .card {
  border-top: 3px solid #8b5cf6;
}

.filter-modal .loc-search-wrap {
  position: relative;
  width: 100%;
}

.filter-modal .loc-search-display {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1.5px solid #d8dde6;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-modal .loc-search-display:hover {
  border-color: #9bafd4;
}

.filter-modal .loc-search-open .loc-search-display {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.filter-modal .loc-search-placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.filter-modal .loc-search-selected {
  flex: 1 1 0%;
  overflow: hidden;
  white-space: nowrap;
  color: #1e293b;
  font-weight: 600;
  text-overflow: ellipsis;
}

.filter-modal .loc-search-arrow {
  font-size: 11px;
  color: #6b7280;
}

.filter-modal .loc-search-dropdown {
  position: absolute;
  overflow: hidden;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.filter-modal .loc-search-input-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.filter-modal .loc-search-input {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #1f2937;
  outline: none;
}

.filter-modal .loc-search-input:focus {
  border-color: #007BFF;
}

.filter-modal .loc-search-list {
  list-style-type: none;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  max-height: 180px;
}

.filter-modal .loc-search-item {
  display: flex;
  cursor: pointer;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
}

.filter-modal .loc-search-item:hover {
  background: #eff6ff;
}

.filter-modal .loc-search-code {
  white-space: nowrap;
  font-weight: 600;
  font-size: 11px;
  color: #007BFF;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 1px 5px;
}

.filter-modal .loc-search-name {
  flex: 1 1 0%;
  color: #374151;
}

.filter-modal .loc-search-loading,
  .filter-modal .loc-search-empty {
  cursor: default;
  font-size: 13px;
  padding: 10px 12px;
  color: #9ca3af;
  font-style: italic;
}

/* T7.D — action-bar + filter-modal dark-mode overrides removed.
     Variants now expressed via `dark:` utilities in the dashboard view.
     Per-element dark backgrounds, borders, focus rings: see the
     $flLabel / $flSelect / $flDate strings in dashboard/index.php. */

/* Activity Feed */

html.dark-mode #activityFeedSection .card {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 6px 20px rgba(0,0,0,0.3);
}

html.dark-mode #activityFeedSection .card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 10px 28px rgba(0,0,0,0.35);
}

/* T7.C — dark-mode legend/feed-item overrides removed.
     Colors now expressed via `dark:` utilities in the dashboard view
     and the JS-built feed item class list. Scrollbar thumb kept since
     ::-webkit-scrollbar cannot be expressed as a utility class. */

html.dark-mode #activityFeed::-webkit-scrollbar-thumb       {
  background-color: rgba(249,115,22,0.20);
}

html.dark-mode #activityFeed::-webkit-scrollbar-thumb:hover {
  background-color: rgba(249,115,22,0.40);
}

/* Tabs */

html.dark-mode .tab-container           {
  border-bottom-color: #272727;
}

html.dark-mode .tab-btn                 {
  color: #888888;
}

html.dark-mode .tab-btn:hover           {
  background: rgba(249,115,22,0.07);
  color: #d0d0d0;
}

html.dark-mode .tab-btn.active          {
  background: rgba(249,115,22,0.12);
  color: #f97316;
}

html.dark-mode .tab-btn.\!active          {
  background: rgba(249,115,22,0.12) !important;
  color: #f97316 !important;
}

/* Section spacing */

html.dark-mode #highlightsSection   {
  margin-top: 16px;
}

html.dark-mode #activityFeedSection {
  margin-top: 16px;
}

/* Coloured top borders — dark mode palette */

html.dark-mode #barChartCard              {
  border-top: 3px solid #3b9eff;
}

html.dark-mode #pieChartCard              {
  border-top: 3px solid #f97316;
}

html.dark-mode #lineChartCard             {
  border-top: 3px solid #34d399;
}

html.dark-mode #highlightsSection .card   {
  border-top: 3px solid #14d9c9;
}

html.dark-mode #activityFeedSection .card {
  border-top: 3px solid #a78bfa;
}

/* Location search widget — dark mode */

html.dark-mode .filter-modal .loc-search-display {
  background: #0f0a05;
  border-color: #2e2015;
  color: #cccccc;
}

html.dark-mode .filter-modal .loc-search-display:hover {
  border-color: #f97316;
}

html.dark-mode .filter-modal .loc-search-open .loc-search-display {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.10);
}

html.dark-mode .filter-modal .loc-search-dropdown {
  background: #1c1208;
  border-color: #2e2015;
  box-shadow: 0 8px 24px rgba(0,0,0,0.50);
}

html.dark-mode .filter-modal .loc-search-input-wrap {
  border-bottom-color: #2e2015;
}

html.dark-mode .filter-modal .loc-search-input {
  background: #0f0a05;
  border-color: #2e2015;
  color: #ffffff;
}

html.dark-mode .filter-modal .loc-search-input:focus {
  border-color: #f97316;
}

html.dark-mode .filter-modal .loc-search-item:hover  {
  background: rgba(249,115,22,0.08);
}

html.dark-mode .filter-modal .loc-search-code {
  color: #f97316;
  background: rgba(249,115,22,0.10);
  border-color: rgba(249,115,22,0.25);
}

html.dark-mode .filter-modal .loc-search-name        {
  color: #cccccc;
}

html.dark-mode .filter-modal .loc-search-empty,
  html.dark-mode .filter-modal .loc-search-loading     {
  color: #666666;
}

/* ================================================================
   admin.css — Administration Module
   Covers: admin_user_status.php, admin_manage_users.php,
           admin_role_permissions.php, resource_master_add.php

   Light theme structure is in light.css (global shell).
   Module-specific selectors here.
   Dark-mode overrides at the bottom use html.dark-mode scoping.
   ================================================================ */

/* ============================================================
   SECTION: ADMIN PAGES
   Covers: admin_user_status.php, admin_manage_users.php,
           admin_role_permissions.php
   ============================================================ */

/* ── Shared admin page base ── */

body.admin-page {
  font-family: 'Inter', sans-serif;
  background: #f8fafc;
  color: #1e293b;
  margin: 0;
  padding: 24px;
}

/* ── Page header ── */

.admin-page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-page-header p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

/* ── Card ── */

.admin-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  margin-bottom: 20px;
}

/* ── Filter bar ── */

.admin-search-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 13px;
}

/* ── Table ── */

.admin-table th {
  background: #f1f5f9;
  padding: 13px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tr:hover td {
  background: #f8faff;
}

/* ── User cell ── */

.admin-user-cell .name  {
  font-weight: 600;
  color: #1e293b;
  font-size: 13px;
}

.admin-user-cell .\!name  {
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: 13px !important;
}

.admin-user-cell .email {
  font-size: 11px;
  color: #94a3b8;
}

/* ── Role pill ── */

/* ── Status badge ── */

.admin-status-badge.online  {
  background: rgba(16,185,129,0.10);
  color: #10b981;
}

.admin-status-badge.idle    {
  background: rgba(245,158,11,0.10);
  color: #f59e0b;
}

.admin-status-badge.offline {
  background: rgba(100,116,139,0.10);
  color: #64748b;
}

.admin-status-dot.online  {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.admin-status-dot.idle    {
  background: #f59e0b;
}

.admin-status-dot.offline {
  background: #94a3b8;
}

/* ── Active/Inactive badge ── */

.admin-active-badge.active   {
  background: rgba(16,185,129,0.10);
  color: #10b981;
}

.admin-active-badge.\!active   {
  background: rgba(16,185,129,0.10) !important;
  color: #10b981 !important;
}

.admin-active-badge.inactive {
  background: rgba(239,68,68,0.10);
  color: #ef4444;
}

/* ── Buttons ── */

.admin-btn.primary {
  background: #007bff;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,123,255,0.25);
}

.admin-btn.primary:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,123,255,0.35);
}

.admin-btn.secondary {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.admin-btn.secondary:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.admin-btn.icon-only {
  padding: 6px 10px;
  background: transparent;
  color: #007bff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
}

.admin-btn.icon-only:hover {
  background: #eff6ff;
  border-color: #007bff;
}

/* ── Side panel ── */

.admin-panel {
  position: fixed;
  top: 0;
  right: -500px;
  width: 480px;
  height: 100%;
  background: #ffffff;
  z-index: 101;
  box-shadow: -10px 0 40px rgba(0,0,0,0.12);
  transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}

.admin-panel.open {
  right: 0;
}

.admin-panel.\!open {
  right: 0 !important;
}

.admin-panel-header h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: #1e293b;
}

/* ── Form controls in panel ── */

.admin-form-group {
  margin-bottom: 18px;
}

.admin-form-group label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-form-group input,
.admin-form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  background: #f8fafc;
  color: #1e293b;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-form-group input:focus,
.admin-form-group select:focus {
  outline: none;
  border-color: #007bff;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.10);
}

.admin-checkbox-item input {
  width: auto;
  accent-color: #007bff;
}

/* ── Time cell ── */

/* Disabled + checked toggle — SYSTEM_ADMIN column */

.perm-checkbox:checked[disabled] {
  background: #bfdbfe;
  border-color: #93c5fd;
  opacity: 0.5;
  cursor: not-allowed;
}

.perm-checkbox:checked[disabled]::after {
  background: #ffffff;
}

/* ============================================================
   SECTION: ROLE PERMISSION MATRIX — light.css
   (admin_role_permissions.php)
   ============================================================ */

.matrix-table th {
  background: #f1f5f9;
  padding: 11px 14px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  min-width: 100px;
}

.matrix-table th.perm-col {
  text-align: left;
  min-width: 260px;
  padding-left: 22px;
}

.matrix-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f8fafc;
  vertical-align: middle;
}

.matrix-table tr:last-child td {
  border-bottom: none;
}

.matrix-table tr:hover td {
  background: #f8faff;
}

.matrix-card-header h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
  color: #1e293b;
}

.matrix-card-header p {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}

.perm-checkbox {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  border: 2px solid #cbd5e1;
  cursor: pointer;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
  outline: none;
  vertical-align: middle;
}

.perm-checkbox::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #94a3b8;
  transition: transform 0.2s, background 0.2s;
}

.perm-checkbox:checked {
  background: #007bff;
  border-color: #007bff;
}

.perm-checkbox:checked::after {
  transform: translateX(18px);
  background: #ffffff;
}

.perm-checkbox:checked[disabled] {
  background: #bfdbfe;
  border-color: #93c5fd;
  opacity: 0.5;
  cursor: not-allowed;
}

.perm-checkbox:checked[disabled]::after {
  background: #ffffff;
}

.perm-checkbox.saving {
  background: #fef3c7;
  border-color: #f59e0b;
  pointer-events: none;
}

.perm-checkbox.save-error {
  background: #fee2e2;
  border-color: #ef4444;
}

.perm-checkbox[disabled] {
  opacity: 0.30;
  cursor: not-allowed;
}

.legend-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #64748b;
}

.legend-dot.granted {
  background: #007bff;
}

.legend-dot.\!granted {
  background: #007bff !important;
}

.legend-dot.denied  {
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
}

.legend-dot.saving  {
  background: #f59e0b;
}

.legend-dot.error   {
  background: #ef4444;
}

#rpToast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  max-width: 320px;
  font-family: 'Inter', sans-serif;
}

#rpToast.show          {
  opacity: 1;
  transform: translateY(0);
}

#rpToast.toast-success {
  background: #10b981;
}

#rpToast.toast-error   {
  background: #ef4444;
}

/* ============================================================
   SECTION: USER PERMISSION OVERRIDE EDITOR
   (Permissions tab inside admin_manage_users.php panel)
   ============================================================ */

/* ── Tab strip ── */

.perm-tab-btn.active {
  color: #007bff;
  border-bottom-color: #007bff;
  background: #eff6ff;
}

.perm-tab-btn.\!active {
  color: #007bff !important;
  border-bottom-color: #007bff !important;
  background: #eff6ff !important;
}

.perm-tab-content.active {
  display: block;
}

.perm-tab-content.\!active {
  display: block !important;
}

/* ── Effective permissions list ── */

.eff-perm-item .perm-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eff-perm-item .perm-label strong {
  color: #1e293b;
  font-size: 12px;
}

.eff-perm-item .perm-label span {
  color: #94a3b8;
  font-size: 10px;
  font-family: 'Courier New', monospace;
}

/* ── Active overrides list ── */

.override-item-info .ov-name {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  display: block;
  margin-bottom: 3px;
}

.override-item-info .ov-key {
  font-size: 10px;
  color: #94a3b8;
  font-family: 'Courier New', monospace;
  display: block;
  margin-bottom: 4px;
}

.override-item-info .ov-meta {
  font-size: 11px;
  color: #64748b;
}

.override-type-badge.grant {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* ── Add override form ── */

.add-override-form .admin-section-title {
  margin-top: 0;
  margin-bottom: 12px;
}

.override-type-toggle label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
  background: #ffffff;
}

.override-type-toggle input[type="radio"] {
  display: none;
}

.override-type-toggle label.grant-label:has(input:checked) {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #16a34a;
}

.override-type-toggle label.deny-label:has(input:checked) {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESOURCE MASTER PAGE — light.css additions
   Append to end of light.css
   Follows the admin-* design system (Inter, #007bff, border-radius:14px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page grid ── */

@media (max-width: 960px) {
  .rma-page-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card header strip — matches admin gradient ── */

/* ── Card body & recent list ── */

/* ── Form footer ── */

/* ── Inline field status ── */

.rma-field-wrap input {
  padding-right: 130px !important;
}

/* ── Error message below field ── */

/* ── Hint text ── */

/* ── Required asterisk ── */

/* ── Toast ── */

/* ── Recently added rows ── */

.rma-empty-state i {
  font-size: 24px;
  margin-bottom: 6px;
  display: block;
}

.rma-recent-row:not(.rma-row-new) {
  opacity: 1;
}

/* ── Unit pill ── */

/* ── Status badges ── */

/* ── Search bar ── */

/* ── Search field toggles ── */

.rma-toggle-opt input {
  cursor: pointer;
  accent-color: #007bff;
}

/* ── Search state messages ── */

.rma-srch-state i {
  margin-right: 6px;
}

/* ── Search results table ── */

.rma-tbl thead th {
  background: #f1f5f9;
  color: #64748b;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
}

.rma-tbl-row td {
  padding: 10px 14px;
  font-size: 13px;
  color: #374151;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.rma-tbl-row:hover td {
  background: #f8faff;
}

.rma-tbl-row:last-child td {
  border-bottom: none;
}

.rma-tbl-inactive td {
  opacity: 0.55;
}

/* ── Edit panel ── */

.rma-status-opt input {
  cursor: pointer;
  accent-color: #007bff;
}

.rma-inactive-warning i {
  margin-top: 1px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESOURCE MASTER POPUP (delivery forms) — light.css additions
   ═══════════════════════════════════════════════════════════════════════════
   T7.F status: CHROME MIGRATED (2026-06-22).
   The Resource-Master popup CHROME (overlay / modal / header / search / toggle /
   thead / selected-panel / not-found / footer) is now pure Tailwind utilities in
   organisms/resource-master-popup.php — its legacy .rm-* chrome CSS was removed.
   RETAINED below (still CSS-backed) because each view's results JS builds them
   dynamically and targets them directly:
     .rm-result-row / .rm-row-selected / .rm-res-code / .rm-res-unit /
     .rm-state-msg / .rm-state-idle|loading|empty|error  (JS-built result rows)
   Plus the SEPARATE material-row widget classes (.rm-locked-value / .rm-placeholder /
   .rm-code-val / .rm-desc-val / .rm-unit-val / .rm-qty-input) — not part of the popup.
   Migrating the JS-built result rows is the deferred follow-up (touches 3 views' JS).
   ═══════════════════════════════════════════════════════════════════════════ */

.rm-result-row td {
  padding:9px 14px;
  font-size:13px;
  border-bottom:1px solid #eef2f8;
  border-right:1px solid #eef2f8;
  color:#374151;
  cursor:pointer;
  transition:background 0.08s;
  font-family:'Inter',sans-serif;
  vertical-align:middle;
}

.rm-result-row td:last-child {
  border-right:none;
}

.rm-result-row:hover td {
  background:#eff6ff;
}

.rm-result-row.rm-row-selected td {
  background:#dbeafe;
  color:#1e40af;
  font-weight:600;
}

.rm-res-code {
  font-size:11px;
  font-weight:700;
  color:#007BFF;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-radius:5px;
  padding:3px 7px;
  white-space:nowrap;
  display:inline-block;
  font-family:'Inter',sans-serif;
}

.rm-res-unit {
  font-size:11px;
  font-weight:700;
  color:#475569;
  background:#f1f5f9;
  border:1px solid #cbd5e1;
  border-radius:5px;
  padding:3px 7px;
  display:inline-block;
  font-family:'Inter',sans-serif;
}

.rm-state-msg {
  padding:28px 20px;
  text-align:center;
  font-size:13px;
  font-style:italic;
  font-family:'Inter',sans-serif;
}

.rm-state-idle    {
  color:#94a3b8;
}

.rm-state-loading {
  color:#007BFF;
  font-style:normal;
  font-weight:600;
}

.rm-state-empty   {
  color:#94a3b8;
}

.rm-state-error   {
  color:#dc2626;
  font-style:normal;
  font-weight:600;
}

.rm-locked-value {
  display:block;
  padding:4px 7px;
  font-size:12.5px;
  border-radius:5px;
  line-height:1.35;
  font-family:'Inter',sans-serif;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.rm-placeholder {
  color:#94a3b8;
  font-style:italic;
  background:#f8fafc;
  border:1.5px dashed #c5d0dc;
  white-space:nowrap;
}

.rm-code-val  {
  color:#007BFF;
  font-weight:700;
  font-size:11.5px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  white-space:nowrap;
}

.rm-desc-val  {
  color:#1f2937;
  font-weight:500;
  background:#f8faff;
  border:1px solid #d1d9e6;
  white-space:normal;
}

.rm-unit-val  {
  color:#475569;
  font-weight:700;
  text-align:center;
  background:#f1f5f9;
  border:1px solid #cbd5e1;
}

.rm-qty-input::-webkit-outer-spin-button,.rm-qty-input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}

.sk-num-input {
  -moz-appearance:textfield;
  text-align:right;
}

.sk-num-input::-webkit-outer-spin-button,.sk-num-input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}

/* ================================================================
   DARK MODE — admin.css
   All rules below apply only when body has the .dark-mode class.
   ================================================================ */

/* ============================================================
   SECTION: ADMIN PAGES — dark.css
Covers: admin_user_status.php, admin_manage_users.php,
           admin_role_permissions.php
   ============================================================ */

html.dark-mode.admin-page {
  background: #141414;
  color: #e0e0e0;
}

/* ── Page header ── */

html.dark-mode .admin-page-header h1 {
  color: #ffffff;
}

html.dark-mode .admin-page-header p {
  color: #888888;
}

/* ── Card ── */

html.dark-mode .admin-card {
  background: #1c1c1c;
  border-color: #2a2a2a;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

/* ── Filter bar ── */

html.dark-mode .admin-filter-bar {
  background: #161616;
  border-bottom-color: #2a2a2a;
}

html.dark-mode .admin-search-input {
  background: #252525;
  border-color: #333333;
  color: #e0e0e0;
}

html.dark-mode .admin-search-input::-moz-placeholder {
  color: #555555;
}

html.dark-mode .admin-search-input::placeholder {
  color: #555555;
}

html.dark-mode .admin-search-input:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}

html.dark-mode .admin-search-wrap i {
  color: #555555;
}

html.dark-mode .admin-select {
  background: #252525;
  border-color: #333333;
  color: #e0e0e0;
}

html.dark-mode .admin-select option {
  background: #252525;
  color: #e0e0e0;
}

/* ── Table ── */

html.dark-mode .admin-table th {
  background: #161616;
  color: #666666;
  border-bottom-color: #2a2a2a;
}

html.dark-mode .admin-table td {
  border-bottom-color: #1e1e1e;
}

html.dark-mode .admin-table tr:hover td {
  background: #212121;
}

/* ── User cell ── */

html.dark-mode .admin-user-cell .name {
  color: #e0e0e0;
}

html.dark-mode .admin-user-cell .\!name {
  color: #e0e0e0 !important;
}

html.dark-mode .admin-user-cell .email {
  color: #555555;
}

/* ── Role pill ── */

html.dark-mode .admin-role-pill {
  background: #252525;
  color: #a0a0a0;
}

/* ── Status badge ── */

html.dark-mode .admin-status-badge.online {
  background: rgba(16,185,129,0.12);
  color: #34d399;
}

html.dark-mode .admin-status-badge.idle {
  background: rgba(245,158,11,0.12);
  color: #fbbf24;
}

html.dark-mode .admin-status-badge.offline {
  background: rgba(100,116,139,0.12);
  color: #64748b;
}

/* ── Active/Inactive badge ── */

html.dark-mode .admin-active-badge.active {
  background: rgba(16,185,129,0.12);
  color: #34d399;
}

html.dark-mode .admin-active-badge.\!active {
  background: rgba(16,185,129,0.12) !important;
  color: #34d399 !important;
}

html.dark-mode .admin-active-badge.inactive {
  background: rgba(239,68,68,0.12);
  color: #f87171;
}

/* ── Buttons ── */

html.dark-mode .admin-btn.primary {
  background: linear-gradient(135deg, #f97316, #ea6c0a);
  box-shadow: 0 4px 12px rgba(249,115,22,0.25);
}

html.dark-mode .admin-btn.primary:hover {
  background: linear-gradient(135deg, #fb923c, #f97316);
  box-shadow: 0 6px 16px rgba(249,115,22,0.35);
}

html.dark-mode .admin-btn.secondary {
  background: #252525;
  color: #a0a0a0;
  border-color: #333333;
}

html.dark-mode .admin-btn.secondary:hover {
  background: #2a2a2a;
  color: #ffffff;
}

html.dark-mode .admin-btn.icon-only {
  background: transparent;
  color: #f97316;
  border-color: #333333;
}

html.dark-mode .admin-btn.icon-only:hover {
  background: rgba(249,115,22,0.10);
  border-color: #f97316;
}

/* ── Side panel ── */

html.dark-mode .admin-overlay {
  background: rgba(0,0,0,0.65);
}

html.dark-mode .admin-panel {
  background: #1c1c1c;
  box-shadow: -10px 0 40px rgba(0,0,0,0.50);
}

html.dark-mode .admin-panel-header {
  border-bottom-color: #2a2a2a;
}

html.dark-mode .admin-panel-header h2 {
  color: #ffffff;
}

html.dark-mode .admin-panel-close {
  color: #555555;
}

html.dark-mode .admin-panel-close:hover {
  color: #ffffff;
}

html.dark-mode .admin-panel-footer {
  border-top-color: #2a2a2a;
}

/* ── Form controls in panel ── */

html.dark-mode .admin-form-group label {
  color: #666666;
}

html.dark-mode .admin-form-group input,
html.dark-mode .admin-form-group select {
  background: #252525;
  border-color: #333333;
  color: #e0e0e0;
}

html.dark-mode .admin-form-group input::-moz-placeholder {
  color: #555555;
}

html.dark-mode .admin-form-group input::placeholder {
  color: #555555;
}

html.dark-mode .admin-form-group input:focus,
html.dark-mode .admin-form-group select:focus {
  border-color: #f97316;
  background: #2a2a2a;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}

html.dark-mode .admin-form-group select option {
  background: #252525;
  color: #e0e0e0;
}

html.dark-mode .admin-section-title {
  color: #f97316;
  border-bottom-color: #2a2a2a;
}

html.dark-mode .admin-checkbox-item {
  background: #252525;
  color: #e0e0e0;
}

html.dark-mode .admin-checkbox-item:hover {
  background: #2a2a2a;
}

html.dark-mode .admin-checkbox-item input {
  accent-color: #f97316;
}

html.dark-mode .admin-location-box {
  background: #1e1e1e;
  border-color: #2a2a2a;
}

html.dark-mode .admin-domain-badge {
  color: #34d399;
}

/* ── Time cell ── */

html.dark-mode .admin-time-cell {
  color: #555555;
}

/* ── Role Permission Matrix specific ── */

html.dark-mode .matrix-card {
  background: #1c1c1c;
  border-color: #2a2a2a;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

html.dark-mode .matrix-card-header {
  background: #161616;
  border-bottom-color: #2a2a2a;
}

html.dark-mode .matrix-card-header h3 {
  color: #ffffff;
}

html.dark-mode .matrix-card-header p {
  color: #666666;
}

html.dark-mode .perm-count-badge {
  background: #1a2535;
  color: #60a5fa;
  border-color: #1e3a5f;
}

html.dark-mode .matrix-table th {
  background: #161616;
  color: #666666;
  border-bottom-color: #2a2a2a;
}

html.dark-mode .matrix-table td {
  border-bottom-color: #1e1e1e;
}

html.dark-mode .matrix-table tr:hover td {
  background: #212121;
}

html.dark-mode .perm-name {
  color: #e0e0e0;
}

html.dark-mode .perm-key {
  color: #444444;
}

html.dark-mode .legend-bar {
  background: #1c1c1c;
  border-color: #2a2a2a;
  color: #666666;
}

html.dark-mode .perm-checkbox {
  background: #333333;
  border-color: #444444;
}

html.dark-mode .perm-checkbox::after {
  background: #666666;
}

html.dark-mode .perm-checkbox:checked {
  background: #f97316;
  border-color: #f97316;
}

html.dark-mode .perm-checkbox:checked::after {
  background: #ffffff;
}

html.dark-mode .perm-checkbox[disabled] {
  opacity: 0.30;
  cursor: not-allowed;
}

html.dark-mode .admin-btn.back-btn {
  background: #1c1c1c;
  color: #a0a0a0;
  border-color: #333333;
}

html.dark-mode .admin-btn.back-btn:hover {
  background: #252525;
  color: #ffffff;
}

/* Disabled + checked toggle — SYSTEM_ADMIN column dark mode */

html.dark-mode .perm-checkbox:checked[disabled] {
  background: #1e3a5f;
  border-color: #1e4080;
  opacity: 0.4;
  cursor: not-allowed;
}

html.dark-mode .perm-checkbox:checked[disabled]::after {
  background: #60a5fa;
}

/* ============================================================
   SECTION: USER PERMISSION OVERRIDE EDITOR — dark.css
   ============================================================ */

html.dark-mode .perm-tab-btn {
  color: #666666;
}

html.dark-mode .perm-tab-btn:hover {
  color: #f97316;
}

html.dark-mode .perm-tab-btn.active {
  color: #f97316;
  border-bottom-color: #f97316;
  background: rgba(249,115,22,0.08);
}

html.dark-mode .perm-tab-btn.\!active {
  color: #f97316 !important;
  border-bottom-color: #f97316 !important;
  background: rgba(249,115,22,0.08) !important;
}

html.dark-mode .perm-tabs {
  border-bottom-color: #2a2a2a;
}

html.dark-mode .eff-perm-item {
  background: #252525;
  border-color: #333333;
}

html.dark-mode .eff-perm-item .perm-label strong {
  color: #e0e0e0;
}

html.dark-mode .eff-perm-source.via-role {
  background: #1a2535;
  color: #60a5fa;
  border-color: #1e3a5f;
}

html.dark-mode .eff-perm-source.via-grant {
  background: #052e16;
  color: #4ade80;
  border-color: #166534;
}

html.dark-mode .override-item {
  background: #252525;
  border-color: #333333;
}

html.dark-mode .override-item-info .ov-name {
  color: #e0e0e0;
}

html.dark-mode .override-item-info .ov-meta {
  color: #666666;
}

html.dark-mode .override-type-badge.grant {
  background: #052e16;
  color: #4ade80;
  border-color: #166534;
}

html.dark-mode .override-type-badge.deny {
  background: #2d0a0a;
  color: #f87171;
  border-color: #7f1d1d;
}

html.dark-mode .override-remove-btn {
  border-color: #7f1d1d;
  color: #f87171;
}

html.dark-mode .override-remove-btn:hover {
  background: #2d0a0a;
}

html.dark-mode .no-overrides-msg {
  color: #555555;
}

html.dark-mode .add-override-form {
  background: #1e1e1e;
  border-color: #2a2a2a;
}

html.dark-mode .override-type-toggle label {
  background: #252525;
  border-color: #333333;
  color: #a0a0a0;
}

html.dark-mode .override-type-toggle label.grant-label:has(input:checked) {
  border-color: #166534;
  background: #052e16;
  color: #4ade80;
}

html.dark-mode .override-type-toggle label.deny-label:has(input:checked) {
  border-color: #7f1d1d;
  background: #2d0a0a;
  color: #f87171;
}

html.dark-mode .perm-loading {
  color: #555555;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESOURCE MASTER PAGE — dark.css additions
   Append to end of dark.css
   Palette: #1c1c1c cards, #f97316 orange accent, #2a2a2a borders
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card header ── */

html.dark-mode .rma-card-hdr {
  background: linear-gradient(90deg, #1a1008, #2a1800);
  border-bottom: 2px solid #f97316;
  color: #f97316;
}

html.dark-mode .rma-hdr-close {
  background: rgba(249,115,22,0.12);
  border-color: rgba(249,115,22,0.30);
  color: #f97316;
}

html.dark-mode .rma-hdr-close:hover {
  background: rgba(249,115,22,0.25);
}

/* ── Form footer border ── */

html.dark-mode .rma-form-footer {
  border-top-color: #2a2a2a;
}

/* ── Inline status ── */

html.dark-mode .rma-st-ok {
  color: #4ade80;
}

html.dark-mode .rma-st-taken {
  color: #f87171;
}

html.dark-mode .rma-st-error {
  color: #fbbf24;
}

/* ── Error & hint ── */

html.dark-mode .rma-err-msg {
  color: #f87171;
}

html.dark-mode .rma-hint {
  color: #555555;
}

/* ── Toast ── */

html.dark-mode .rma-toast-success {
  background: #0d1f12;
  color: #4ade80;
  border-color: #166534;
}

html.dark-mode .rma-toast-error {
  background: #1f0d0d;
  color: #f87171;
  border-color: #991b1b;
}

/* ── Recently added rows ── */

html.dark-mode .rma-recent-wrap {
  scrollbar-color: #3a3a3a #1c1c1c;
}

html.dark-mode .rma-recent-row {
  border-bottom-color: #2a2a2a;
}

html.dark-mode .rma-recent-row:hover {
  background: rgba(249,115,22,0.05);
}

html.dark-mode .rma-row-new {
  background: #0d1f12 !important;
  border-left-color: #4ade80;
}

html.dark-mode .rma-row-code {
  color: #fb923c;
}

html.dark-mode .rma-row-name {
  color: #d0d0d0;
}

html.dark-mode .rma-row-by {
  color: #555555;
}

/* ── Unit pill ── */

html.dark-mode .rma-unit-pill {
  background: #252525;
  border-color: #3a3a3a;
  color: #a0a0a0;
}

/* ── Status badges ── */

html.dark-mode .rma-badge-active {
  background: rgba(74,222,128,0.10);
  color: #4ade80;
  border-color: #166534;
}

html.dark-mode .rma-badge-inactive {
  background: rgba(248,113,113,0.10);
  color: #f87171;
  border-color: #991b1b;
}

/* ── Empty state ── */

html.dark-mode .rma-empty-state {
  color: #555555;
}

/* ── Search input ── */

html.dark-mode .rma-srch-input {
  background: #252525 !important;
  border-color: #333333 !important;
  color: #e0e0e0 !important;
}

html.dark-mode .rma-srch-input::-moz-placeholder {
  color: #555555 !important;
}

html.dark-mode .rma-srch-input::placeholder {
  color: #555555 !important;
}

html.dark-mode .rma-srch-input:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12) !important;
}

html.dark-mode .rma-search-ico {
  color: #555555;
}

html.dark-mode .rma-srch-clear-btn {
  color: #555555;
}

html.dark-mode .rma-srch-clear-btn:hover {
  color: #e0e0e0;
}

/* ── Toggle options ── */

html.dark-mode .rma-toggle-opt {
  color: #888888;
}

html.dark-mode .rma-toggle-opt input {
  accent-color: #f97316;
}

html.dark-mode .rma-toggle-all {
  color: #555555;
}

/* ── Search state messages ── */

html.dark-mode .rma-srch-state {
  color: #555555;
}

/* ── Results table ── */

html.dark-mode .rma-tbl thead th {
  background: #161616;
  color: #666666;
  border-bottom-color: #2a2a2a;
}

html.dark-mode .rma-tbl-row td {
  border-bottom-color: #2a2a2a;
  color: #c0c0c0;
}

html.dark-mode .rma-tbl-row:hover td {
  background: rgba(249,115,22,0.05);
}

html.dark-mode .rma-tbl-code {
  color: #fb923c;
  background: #1e1400;
  border-color: #7c3c00;
}

/* ── Locked field in edit panel ── */

html.dark-mode .rma-locked-field {
  background: #252525;
  border-color: #3a3a3a;
  color: #fb923c;
}

/* ── Status radio options ── */

html.dark-mode .rma-status-opt {
  color: #a0a0a0;
}

html.dark-mode .rma-status-opt input {
  accent-color: #f97316;
}

/* ── Inactive warning ── */

html.dark-mode .rma-inactive-warning {
  background: #1a1000;
  border-color: #7c3c00;
  color: #fbbf24;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESOURCE MASTER POPUP (delivery forms) — dark.css additions
   ═══════════════════════════════════════════════════════════════════════════ */

html.dark-mode .rm-result-row td {
  border-bottom-color: #2a2a2a;
  border-right-color: #2a2a2a;
  color: #c0c0c0;
}

html.dark-mode .rm-result-row:hover td {
  background: rgba(249,115,22,0.07);
}

html.dark-mode .rm-result-row.rm-row-selected td {
  background: rgba(249,115,22,0.15);
  color: #fb923c;
}

html.dark-mode .rm-res-code {
  color: #fb923c;
  background: #1e1400;
  border-color: #7c3c00;
}

html.dark-mode .rm-res-unit {
  color: #888888;
  background: #252525;
  border-color: #3a3a3a;
}

html.dark-mode .rm-state-idle {
  color: #555555;
}

html.dark-mode .rm-state-loading {
  color: #f97316;
}

html.dark-mode .rm-state-empty {
  color: #555555;
}

html.dark-mode .rm-state-error {
  color: #f87171;
}

html.dark-mode .rm-placeholder {
  color: #555555;
  background: #252525;
  border-color: #3a3a3a;
}

html.dark-mode .rm-code-val {
  color: #fb923c;
  background: #1e1400;
  border-color: #7c3c00;
}

html.dark-mode .rm-desc-val {
  color: #d0d0d0;
  background: #252525;
  border-color: #3a3a3a;
}

html.dark-mode .rm-unit-val {
  color: #a0a0a0;
  background: #252525;
  border-color: #3a3a3a;
}

html.dark-mode .rm-qty-input {
  background: #2e2e2e !important;
  border-color: #484848 !important;
  color: #f0f0f0 !important;
}

html.dark-mode .rm-qty-input:focus {
  border-color: #f97316 !important;
  background: #353535 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important;
}

/* ================================================================
   inventory.css — Inventory & Costing Module
   Covers: inventory.php, material_cost_list.php, material_costing.php
   All inline <style> blocks from those pages live here instead.
   Body-level overrides are intentionally excluded — the MPA layout
   from layout_header.php handles the page shell.
   ================================================================ */

/* ── INVENTORY PAGE (inventory.php) ───────────────────────────── */

.page-header {
  background: linear-gradient(90deg, #0f172a, #334155);
  color: #fff;
  padding: 20px 24px;
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.page-title p  {
  margin: 4px 0 0;
  opacity: 0.8;
  font-size: 13px;
}

.filter-group label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-group select,
.filter-group input {
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
}

.table-container thead tr {
  background: linear-gradient(90deg, #f1f5f9, #e2e8f0);
  text-align: left;
}

.table-container th {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
}

.table-container td {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  vertical-align: middle;
}

.table-container tr:last-child td {
  border-bottom: none;
}

.table-container tbody tr:hover {
  background: #f8fafc;
}

.text-main     {
  font-weight: 600;
  color: #1e293b;
  display: block;
}

.text-sub      {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  display: block;
}

.stock-value.zero {
  color: #ef4444;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

.page-link.active {
  background: #007BFF;
  color: #fff;
  border-color: #007BFF;
}

.page-link.\!active {
  background: #007BFF !important;
  color: #fff !important;
  border-color: #007BFF !important;
}

/* ════════════════════════════════════════════════════════════════════════
   .qc-filter-* — shared queue filter modal chrome
   ════════════════════════════════════════════════════════════════════════
   T7.G status: INTENTIONAL HOLDOUT.
   The .qc-filter-* class set is consumed by 9 queue views (delivery/
   active-requests, inventory, storekeeper/grn, storekeeper/review,
   qc/pending, security/pending, delivery/tracking, returns/tracking,
   edit-requests/queue). Each one builds an identical "filter modal +
   open/close + apply" structure; each one's JS reaches in via class
   selectors. Migrating cleanly requires a render_queue_filter_modal()
   organism + 9 view rewrites + 9 JS init adjustments; deferred as
   follow-up. The CSS below stays as a shared widget definition.
   ════════════════════════════════════════════════════════════════════════ */

.qc-filter-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qc-filter-row  {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.qc-filter-row label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.qc-filter-row select, .qc-filter-row input[type="text"], .qc-filter-row input[type="date"] {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.qc-filter-row input[type="text"] {
  cursor: text;
}

.qc-filter-row select:hover, .qc-filter-row input[type="text"]:hover, .qc-filter-row input[type="date"]:hover {
  border-color: #a5b4fc;
}

.qc-filter-row select:focus, .qc-filter-row input[type="text"]:focus, .qc-filter-row input[type="date"]:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
  background: #fff;
}

.qc-filter-row .loc-search-wrap    {
  position: relative;
  width: 100%;
}

.qc-filter-row .loc-search-display {
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.qc-filter-row .loc-search-display:hover {
  border-color: #a5b4fc;
}

.qc-filter-row .loc-search-open .loc-search-display {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
  background: #fff;
}

.qc-filter-row .loc-search-placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.qc-filter-row .loc-search-selected    {
  color: #1e293b;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qc-filter-row .loc-search-arrow       {
  font-size: 11px;
  color: #6b7280;
}

.qc-filter-row .loc-search-dropdown    {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
}

.qc-filter-row .loc-search-input-wrap  {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.qc-filter-row .loc-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #1f2937;
  background: #f9fafb;
  outline: none;
}

.qc-filter-row .loc-search-input:focus {
  border-color: #007BFF;
  background: #fff;
}

.qc-filter-row .loc-search-list  {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 200px;
  overflow-y: auto;
}

.qc-filter-row .loc-search-item  {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
}

.qc-filter-row .loc-search-item:hover {
  background: #eff6ff;
}

.qc-filter-row .loc-search-code  {
  font-size: 11px;
  font-weight: 600;
  color: #007BFF;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

.qc-filter-row .loc-search-name  {
  color: #374151;
  flex: 1;
}

.qc-filter-row .loc-search-loading, .qc-filter-row .loc-search-empty, .qc-filter-row .loc-search-error {
  cursor: default;
  font-size: 13px;
  padding: 10px 14px;
  color: #9ca3af;
  font-style: italic;
}

/* ── MATERIAL COSTING (material_costing.php) ──────────────────── */

.card        {
  background: #fff;
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border: 1px solid #e0e7ff;
}

.label       {
  font-weight: 600;
  color: #1d4ed8;
}

.pill        {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  font-size: 11px;
  color: #1d4ed8;
}

.pill.EXTERNAL {
  background: #fef3c7;
  color: #92400e;
  border-color: #fbbf24;
}

.pill.INTERNAL {
  background: #dcfce7;
  color: #166534;
  border-color: #22c55e;
}

.totals      {
  margin-top: 10px;
  font-size: 13px;
  text-align: right;
}

.totals span {
  font-weight: 600;
}

.note        {
  font-size: 11px;
  color: #6b7280;
}

/* ── MATERIAL COST LIST (material_cost_list.php) ──────────────── */

.toggle-btn span.icon {
  font-size: 14px;
  line-height: 1;
}

.toggle-btn:hover:not(.active) {
  color: #007BFF;
}

.toggle-btn.active {
  color: #007BFF;
  font-weight: 700;
  border-bottom-color: #007BFF;
  background: transparent;
  box-shadow: none;
}

.toggle-btn.\!active {
  color: #007BFF !important;
  font-weight: 700 !important;
  border-bottom-color: #007BFF !important;
  background: transparent !important;
  box-shadow: none !important;
}

.toggle-btn.active .tab-count-chip {
  background: #007BFF;
  color: #ffffff;
}

.toggle-btn.\!active .tab-count-chip {
  background: #007BFF !important;
  color: #ffffff !important;
}

/* sub-tabs / sub-tab kept for backward compatibility */

.sub-tab.active {
  color: #007BFF;
  border-bottom-color: #007BFF;
}

.sub-tab.\!active {
  color: #007BFF !important;
  border-bottom-color: #007BFF !important;
}

.sub-tab:hover:not(.active) {
  color: #2563eb;
}

.panel, .sub-panel             {
  display: none;
}

.panel.active, .sub-panel.active {
  display: block;
}

.panel.\!active, .sub-panel.\!active {
  display: block !important;
}

.status-chip.PENDING, .status-chip.DRAFT {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  color: #92400e;
}

.status-chip.FINAL       {
  background: #dcfce7;
  border: 1px solid #22c55e;
  color: #166534;
}

.empty-state {
  background: #f9fbff;
  border-radius: 12px;
  border: 1px dashed #d4d4ff;
  padding: 22px;
  text-align: center;
  font-size: 14px;
  color: #6366f1;
  margin-top: 8px;
}

.empty-state .icon {
  font-size: 26px;
  display: block;
  margin-bottom: 6px;
}

.from-to span {
  font-weight: 600;
  color: #1f2937;
  font-size: 12px;
}

.muted  {
  color: #6b7280;
  font-size: 12px;
}

/* ── DARK MODE — Inventory & Costing ─────────────────────────── */

html.dark-mode .page-header      {
  background: linear-gradient(90deg, #1e293b, #0f172a);
}

html.dark-mode .filter-card      {
  background: #1e2436;
  border-color: #2d3748;
}

html.dark-mode .table-container  {
  background: #1e2436;
  border-color: #2d3748;
}

html.dark-mode .filter-group select, html.dark-mode .filter-group input {
  background: #252e3f;
  border-color: #3d4a5c;
  color: #e2e8f0;
}

html.dark-mode .table-container thead tr {
  background: linear-gradient(90deg, #1a2236, #1e2a40);
}

html.dark-mode .table-container th {
  color: #94a3b8;
}

html.dark-mode .table-container td {
  border-bottom-color: #2d3748;
  color: #cbd5e1;
}

html.dark-mode .table-container tbody tr:hover {
  background: #1a2236;
}

html.dark-mode .qc-filter-body   {
  background: #242424;
}

html.dark-mode .qc-filter-row label {
  color: #a0a0a0;
}

html.dark-mode .qc-filter-row select, html.dark-mode .qc-filter-row input {
  background: #1a1a1a;
  border-color: #33302c;
  color: #e8e8e8;
}

html.dark-mode .qc-filter-row select:hover, html.dark-mode .qc-filter-row input:hover {
  border-color: rgba(249,115,22,0.45);
}

html.dark-mode .qc-filter-row select:focus, html.dark-mode .qc-filter-row input:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
  background: #1a1a1a;
}

html.dark-mode .qc-filter-row .loc-search-display {
  background: #1a1a1a;
  border-color: #33302c;
  color: #e8e8e8;
}

html.dark-mode .qc-filter-row .loc-search-open .loc-search-display {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

html.dark-mode .card        {
  background: #1e2436;
  border-color: #2d3748;
}

html.dark-mode .info-grid   {
  background: #252e3f;
}

html.dark-mode .page-card   {
  background: #1e2436;
  border-color: #2d3748;
}

html.dark-mode .sub-tabs    {
  border-bottom-color: #2d3748;
}

html.dark-mode .sub-tab     {
  color: #64748b;
}

html.dark-mode .sub-tab.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}

html.dark-mode .sub-tab.\!active {
  color: #60a5fa !important;
  border-bottom-color: #60a5fa !important;
}

html.dark-mode .toggle-bar  {
  border-bottom-color: #2a2a2a;
}

html.dark-mode .toggle-btn  {
  color: #555555;
}

html.dark-mode .toggle-btn:hover:not(.active) {
  color: #f97316;
}

html.dark-mode .toggle-btn.active {
  color: #f97316;
  border-bottom-color: #f97316;
}

html.dark-mode .toggle-btn.\!active {
  color: #f97316 !important;
  border-bottom-color: #f97316 !important;
}

html.dark-mode .tab-count-chip {
  background: #2a2a2a;
  color: #888888;
}

html.dark-mode .toggle-btn.active .tab-count-chip {
  background: #f97316;
  color: #ffffff;
}

html.dark-mode .toggle-btn.\!active .tab-count-chip {
  background: #f97316 !important;
  color: #ffffff !important;
}

html.dark-mode .table-wrapper  {
  background: #1a2236;
  border-color: #2d3748;
}

/* ================================================================
   MATERIAL COSTING PAGES — Application-style component overrides
   Imports the shared DM/WF component system so material_cost_list.php
   and material_costing.php match the rest of the application
   without needing to load workflow.css as the module CSS.
   ================================================================ */

.wf-stage-tab:not(.active) + .wf-stage-tab:not(.active)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: #e2e8f0;
}

.wf-stage-tab:hover:not(.active) {
  color: #007BFF;
  background: #f0f7ff;
}

.wf-stage-tab.active {
  background: linear-gradient(135deg, #007BFF, #00BFFF);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,123,255,0.30);
}

.wf-stage-tab.\!active {
  background: linear-gradient(135deg, #007BFF, #00BFFF) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0,123,255,0.30) !important;
}

.wf-stage-tab:not(.active) .wf-stage-count {
  background: #e2e8f0;
  color: #64748b;
}

/* Dark mode */

html.dark-mode .wf-stage-tabs {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

html.dark-mode .wf-stage-tab {
  color: #555555;
}

html.dark-mode .wf-stage-tab:not(.active) + .wf-stage-tab:not(.active)::before {
  background: #2a2a2a;
}

html.dark-mode .wf-stage-tab:hover:not(.active) {
  color: #f97316;
  background: rgba(249,115,22,0.08);
}

html.dark-mode .wf-stage-tab.active {
  background: linear-gradient(135deg, #c85a00, #f97316);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35);
}

html.dark-mode .wf-stage-tab.\!active {
  background: linear-gradient(135deg, #c85a00, #f97316) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35) !important;
}

html.dark-mode .wf-stage-count {
  background: #2a2a2a;
  color: #888888;
}

html.dark-mode .wf-stage-tab.active .wf-stage-count {
  background: rgba(255,255,255,0.20);
  color: #ffffff;
}

html.dark-mode .wf-stage-tab.\!active .wf-stage-count {
  background: rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
}

/* ================================================================
   WORKFLOW — DM COMPONENT SYSTEM
   Mirrors the dm-page-header / dm-card / dm-table / dm-btn / dm-empty-state
   components from delivery_management.css so workflow pages match
   the same visual standard as Active Transactions, Edit Approvals, etc.
   ================================================================ */

/* ── Page Header ────────────────────────────────────────────── */

.dm-page-header__sub strong {
  color: #007BFF;
  font-weight: 700;
}

/* ── Card wrapper ───────────────────────────────────────────── */

/* ── Card section divider (title bar inside dm-card) ─────────── */

/* ── Table wrapper ──────────────────────────────────────────── */

/* ── Main data table ────────────────────────────────────────── */

.dm-table thead th {
  background: #0f172a;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 16px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255,255,255,0.06);
  border-right: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

.dm-table thead th:last-child {
  border-right: none;
}

.dm-table thead th.dm-th-actions {
  text-align: center;
  min-width: 120px;
}

.dm-table tbody tr {
}

.dm-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #f1f5f9;
}

.dm-table tbody tr:hover td {
  background: #f0f7ff;
}

.dm-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

.dm-table td {
  padding: 13px 16px;
  vertical-align: middle;
  color: #334155;
  transition: background 0.12s ease;
}

/* ── Actions column ─────────────────────────────────────────── */

/* ── Universal button base ──────────────────────────────────── */

.dm-btn svg {
  flex-shrink: 0;
}

/* View — solid blue */

/* Cancel — red outline */

/* Neutral/ghost */

/* ── Status / note cells ────────────────────────────────────── */

/* ── Empty state ────────────────────────────────────────────── */

/* ── Edit history badge button ──────────────────────────────── */

.edit-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #c2410c;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.edit-badge-btn:hover {
  background: #fed7aa;
  border-color: #fb923c;
}

/* ── Locked-pending-edit info banner ────────────────────────── */

/* ── Locked badge inside DN cell ─────────────────────────────── */

/* ================================================================
   DARK MODE — DM Component System
   ================================================================ */

/* Page header dark */

html.dark-mode .dm-page-header {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

html.dark-mode .dm-page-header__icon {
  background: linear-gradient(135deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(249,115,22,0.30);
}

html.dark-mode .dm-page-header__title {
  color: #e0e0e0;
}

html.dark-mode .dm-page-header__sub   {
  color: #888888;
}

html.dark-mode .dm-page-header__sub strong {
  color: #f97316;
}

/* Card dark */

html.dark-mode .dm-card {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

html.dark-mode .dm-card__section-title {
  color: #555555;
  border-bottom-color: #2a2a2a;
}

/* Table dark */

html.dark-mode .dm-table-wrapper {
  background: #1e1e1e;
  border: 1.5px solid #f97316;
  border-radius: 10px;
  overflow-x: auto;
}

html.dark-mode .dm-table thead tr {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode .dm-table thead th {
  background: transparent;
  color: #ffffff;
  border-right: 1px solid rgba(0,0,0,0.30);
  border-bottom: none;
}

html.dark-mode .dm-table thead th:last-child {
  border-right: none;
}

html.dark-mode .dm-table tbody tr td {
  background: #1e1e1e;
  transition: background 0.12s ease;
}

html.dark-mode .dm-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #252525;
}

html.dark-mode .dm-table tbody tr:nth-child(even) td {
  background: #1a1a1a;
}

html.dark-mode .dm-table tbody tr:hover td,
html.dark-mode .dm-table tbody tr:nth-child(even):hover td {
  background: rgba(249,115,22,0.07);
}

html.dark-mode .dm-table td {
  color: #d0d0d0;
}

/* Buttons dark */

html.dark-mode .dm-btn--view {
  background: #f97316;
  box-shadow: 0 2px 8px rgba(249,115,22,0.30) !important;
  color: #ffffff;
}

html.dark-mode .dm-btn--view:hover {
  background: #ea6c0a;
  box-shadow: 0 4px 12px rgba(249,115,22,0.50) !important;
  color: #ffffff;
}

html.dark-mode .dm-btn--cancel {
  background: #2d0a0a;
  color: #f87171;
  border-color: #7f1d1d;
}

html.dark-mode .dm-btn--cancel:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 4px 10px rgba(220,38,38,0.40);
}

html.dark-mode .dm-btn--neutral {
  background: #252525;
  color: #a0a0a0;
  border-color: #3a3a3a;
}

html.dark-mode .dm-btn--neutral:hover {
  background: #2e2e2e;
  border-color: #555555;
  color: #d0d0d0;
}

/* Status notes dark */

html.dark-mode .dm-status-note {
  color: #555555;
}

html.dark-mode .dm-status-note--locked {
  background: #2a1e00;
  border-color: #b45309;
  color: #fcd34d;
}

/* Empty state dark */

html.dark-mode .dm-empty-state__title {
  color: #888888;
}

html.dark-mode .dm-empty-state__sub   {
  color: #555555;
}

/* Edit badge dark */

html.dark-mode .edit-badge-btn {
  background: #2a1400;
  border-color: #7c3100;
  color: #fb923c;
}

html.dark-mode .edit-badge-btn:hover {
  background: #3a1d00;
  border-color: #f97316;
  color: #ffffff;
}

/* Locked banner dark */

html.dark-mode .dm-locked-banner {
  background: #2a1e00;
  border-color: #b45309;
  color: #fcd34d;
}

/* Locked badge dark */

html.dark-mode .qc-locked-badge {
  background: #2a1e00;
  border-color: #b45309;
  color: #fcd34d;
}

/* ================================================================
   DECISION PAGES — Unified styling
   dm-back-btn: modern back link used on all decision detail pages
   sec-section / sec-header: aliased to match qc-section / qc-header
   so security detail pages share the same visual card as SK/QC pages
   ================================================================ */

/* ── Back button (modern, used on detail/decision pages) ──────── */

/* ── Security detail pages — alias sec-section → qc-section ──── */

/* ── Decision page header ────────────────────────────────────── */

/* Uses the existing qc-section + qc-header for the info card,
   but we add a mini "breadcrumb" bar above each decision page    */

/* ── Dark mode ───────────────────────────────────────────────── */

html.dark-mode .dm-back-btn {
  background: #1e2a3a;
  border-color: #2e4a6e;
  color: #60a5fa;
}

html.dark-mode .dm-back-btn:hover {
  background: linear-gradient(90deg, #c85a00, #f97316);
  border-color: #f97316;
  color: #fff;
  box-shadow: 0 3px 10px rgba(249,115,22,0.25);
}

html.dark-mode .sec-section {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

html.dark-mode .sec-header {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

html.dark-mode .decision-page-header__badge {
  background: linear-gradient(135deg, #c85a00, #f97316);
  box-shadow: 0 3px 10px rgba(249,115,22,0.25);
}

html.dark-mode .decision-page-header__title {
  color: #e0e0e0;
}

html.dark-mode .decision-page-header__sub   {
  color: #888888;
}

html.dark-mode .decision-page-header__dn    {
  color: #f97316;
}

/* ================================================================
   QC INSPECTION DECISION PAGE — Input field styles
   ================================================================ */

/* qc-readonly-input / qc-qty-input / fail-reason / review-comment now styled
   via Tailwind tokens on qc/inspection.php (bg-background / bg-card-2 /
   border-input). Legacy rules removed so the token utilities win cleanly. */

/* Attach box file list */

.attach-box .file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

/* Dark mode */

/* dark-mode qc-input rules removed — Tailwind tokens handle dark mode now. */

html.dark-mode .attach-box .file-row {
  border-bottom-color: #2a2a2a;
}

#materialsTable th:last-child,
#materialsTable td:last-child {
  border-right: none;
}

#materialsTable th:last-child {
  border-right: none;
}

#materialsTable tbody tr:nth-child(even) {
  background: #f8faff;
}

/* ── attach-scroll: the file list box ───────────────────────── */

/* ── sec-section used for material entry boxes ──────────────── */

/* Light mode: matches sec-section (blue border) + sec-header */

/* (Already defined above from security pages — no change needed) */

/* ================================================================
   STOREKEEPER MATERIAL ENTRY — Dark mode
   ================================================================ */

/* Materials scroll wrapper dark */

html.dark-mode .materials-scroll-wrapper {
  background: #1c1c1c;
  border-color: #f97316;
}

html.dark-mode #materialsTable th:last-child {
  border-right: none;
}

html.dark-mode #materialsTable td:last-child {
  border-right: none;
}

html.dark-mode #materialsTable tbody tr:nth-child(even) {
  background: #1a1a1a;
}

/* ================================================================
   QC INSPECTION TABLES — #qcMaterialsTable + #qcRejectedTable
   ----------------------------------------------------------------
   LEGACY ID-BASED CSS REMOVED (2026-06-04).
   The migrated qc/inspection.php view styles these tables entirely
   with Tailwind utility classes. The old ID rules had specificity
   (1,0,x) which silently overrode every utility (blue header, white
   inputs) in BOTH themes — and their dark-mode counterparts used an
   impossible `html html.dark-mode` selector (an <html> nested in an
   <html>) so they never matched, leaving the light styling stuck in
   dark mode. The #ids remain in the markup as JS hooks only.
   ================================================================ */

/* ================================================================
   SECURITY OUT / IN MATERIAL TABLES
   #secOutMaterialsTable, #secOutFailedTable,
   #secInMaterialsTable,  #secInInfoTable
   ----------------------------------------------------------------
   LEGACY ID-BASED CSS REMOVED (2026-06-04) — same reason as the QC
   tables above. security/check_in.php + check_out.php style these
   tables with Tailwind utilities; the #ids remain only as JS hooks.
   ================================================================ */

/* ================================================================
   COLUMN WIDTHS — QC + Security material tables (7-column layout)
   Col 1: Resource Code | Col 2: Description | Col 3: DN Qty
   Col 4: Accepted Qty  | Col 5: Rejected Qty | Col 6: Unit
   Col 7: Reason / Remarks
   ================================================================ */

#qcMaterialsTable  th:nth-child(1), #qcMaterialsTable  td:nth-child(1),
#secOutMaterialsTable th:nth-child(1), #secOutMaterialsTable td:nth-child(1),
#secInMaterialsTable  th:nth-child(1), #secInMaterialsTable  td:nth-child(1) {
  width: 12%;
  min-width: 90px;
}

#qcMaterialsTable  th:nth-child(2), #qcMaterialsTable  td:nth-child(2),
#secOutMaterialsTable th:nth-child(2), #secOutMaterialsTable td:nth-child(2),
#secInMaterialsTable  th:nth-child(2), #secInMaterialsTable  td:nth-child(2) {
  width: 26%;
}

#qcMaterialsTable  th:nth-child(3), #qcMaterialsTable  td:nth-child(3),
#secOutMaterialsTable th:nth-child(3), #secOutMaterialsTable td:nth-child(3),
#secInMaterialsTable  th:nth-child(3), #secInMaterialsTable  td:nth-child(3) {
  width: 11%;
  min-width: 80px;
}

#qcMaterialsTable  th:nth-child(4), #qcMaterialsTable  td:nth-child(4),
#secOutMaterialsTable th:nth-child(4), #secOutMaterialsTable td:nth-child(4),
#secInMaterialsTable  th:nth-child(4), #secInMaterialsTable  td:nth-child(4) {
  width: 13%;
  min-width: 90px;
}

#qcMaterialsTable  th:nth-child(5), #qcMaterialsTable  td:nth-child(5),
#secOutMaterialsTable th:nth-child(5), #secOutMaterialsTable td:nth-child(5),
#secInMaterialsTable  th:nth-child(5), #secInMaterialsTable  td:nth-child(5) {
  width: 13%;
  min-width: 90px;
}

#qcMaterialsTable  th:nth-child(6), #qcMaterialsTable  td:nth-child(6),
#secOutMaterialsTable th:nth-child(6), #secOutMaterialsTable td:nth-child(6),
#secInMaterialsTable  th:nth-child(6), #secInMaterialsTable  td:nth-child(6) {
  width: 6%;
  min-width: 50px;
}

#qcMaterialsTable  th:nth-child(7), #qcMaterialsTable  td:nth-child(7),
#secOutMaterialsTable th:nth-child(7), #secOutMaterialsTable td:nth-child(7),
#secInMaterialsTable  th:nth-child(7), #secInMaterialsTable  td:nth-child(7) {
  width: 19%;
}

/* ================================================================
   STOREKEEPER MATERIAL ENTRY — btn-primary / btn-secondary / btn-danger
   These are defined in delivery_management.css but not loaded on
   workflow pages. Duplicated here so the Material Entry page renders
   correctly without loading an extra stylesheet.
   ================================================================ */

/* Standalone .btn-danger (the !important version above only applies
   as a modifier; this handles the base case for action buttons) */

/* Dark mode */

html.dark-mode .btn-primary {
  background: #f97316;
  box-shadow: 0 3px 10px rgba(249,115,22,0.30);
}

html.dark-mode .btn-primary:hover {
  background: #ea6500;
  box-shadow: 0 4px 14px rgba(249,115,22,0.40);
}

html.dark-mode .btn-primary:disabled {
  background: #5a3010;
  opacity: 0.6;
}

html.dark-mode .btn-secondary {
  background: #252525;
  border-color: #3a3a3a;
  color: #a0a0a0;
}

html.dark-mode .btn-secondary:hover {
  background: #2e2e2e;
  border-color: #555555;
  color: #e0e0e0;
}

html.dark-mode .btn-danger {
  background: #c0392b;
  box-shadow: 0 2px 6px rgba(220,38,38,0.30);
}

html.dark-mode .btn-danger:hover {
  background: #a93226;
}

/* ================================================================
   STOREKEEPER MATERIAL ENTRY — Layout & Style Fixes
   Fixes: info/lpo bordered containers, materials-container wrapper,
   attachment widget (sec-empty-text + hidden buttons),
   footer action buttons (me-form-actions).
   Light + Dark mode covered.
   ================================================================ */

/* ── Fix: remove the border from materials-scroll-wrapper itself ──
   The border is now on .materials-container (outer), not the inner
   scroll wrapper. This mirrors the internal delivery form exactly. */

/* ── materials-container — outer blue-bordered wrapper ─────────── */

/* Matches delivery_management.css .materials-container */

/* ── Info block — bordered card under sec-section ──────────────── */

/* Matches the dv-grid border style used in security_out.php */

.me-info-block .info {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 24px;
  border: none;
  overflow: visible;
}

/* ── LPO block — bordered card under sec-section ───────────────── */

/* Header row — icon + title */

.me-lpo-header svg {
  stroke: #d97706;
  flex-shrink: 0;
}

/* Input field row */

.me-lpo-input::-moz-placeholder {
  color: #d4a05a;
}

.me-lpo-input::placeholder {
  color: #d4a05a;
}

/* NA checkbox row */

/* LPO inline row: input + checkbox side by side */

.me-lpo-na-check-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.me-lpo-na-check-wrap input[type="checkbox"]:checked + .me-lpo-na-box {
  background: #d97706;
  border-color: #b45309;
}

.me-lpo-na-check-wrap input[type="checkbox"]:checked + .me-lpo-na-box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(2px, 0px);
  margin: 1px auto 0;
}

/* ── Attachment inner box — bordered like the outer attach-card ── */

/* ── rm-qty-input / rm-qty-cell — mirrors admin.css / delivery_management.css ── */

/* Added here so workflow.css pages (SK material entry) get the same styling    */

/* as the internal delivery form without loading delivery_management.css         */

.rm-qty-input[readonly],
.rm-qty-input.reject-reason-readonly {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  cursor: default;
}

/* Remove spinner arrows */

.rm-qty-input::-webkit-outer-spin-button,
.rm-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Footer actions bar ─────────────────────────────────────────── */

/* Cancel & Back — styled exactly like dm-back-btn but inside the actions bar */

/* Save & Submit — larger, prominent primary action */

/* ── Dark mode overrides ────────────────────────────────────────── */

/* materials-container dark */

html.dark-mode .materials-container {
  border-color: #f97316;
  box-shadow: 0 2px 8px rgba(249,115,22,0.12);
}

/* info block dark */

html.dark-mode .me-info-block {
  background: #1c1c1c;
  border-color: #f97316;
}

html.dark-mode .me-info-block .info {
  background: transparent;
  border: none;
}

/* LPO block dark */

html.dark-mode .me-lpo-block {
  background: #1a1400;
  border-color: #b45309;
}

html.dark-mode .me-lpo-header {
  color: #f97316;
}

html.dark-mode .me-lpo-header svg {
  stroke: #f97316;
}

html.dark-mode .me-lpo-field-label {
  color: #fbbf24;
}

html.dark-mode .me-lpo-input {
  background: #1e1800 !important;
  border-color: #7c4a00 !important;
  color: #f0e0c0 !important;
}

html.dark-mode .me-lpo-input:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.18) !important;
}

html.dark-mode .me-lpo-input.lpo-na {
  background: #150f00 !important;
  border-color: #5a3400 !important;
  color: #a37000 !important;
}

html.dark-mode .me-lpo-input::-moz-placeholder {
  color: #5a3d1a;
}

html.dark-mode .me-lpo-input::placeholder {
  color: #5a3d1a;
}

html.dark-mode .me-lpo-na-box {
  background: #1e1800;
  border-color: #b45309;
}

html.dark-mode .me-lpo-na-check-wrap input[type="checkbox"]:checked + .me-lpo-na-box {
  background: #d97706;
  border-color: #f97316;
}

html.dark-mode .me-lpo-na-text {
  color: #fbbf24;
}

html.dark-mode .me-lpo-hint {
  color: #92400e;
}

/* Attachment inner box dark */

html.dark-mode .me-attach-box {
  background: #1c1c1c !important;
  border-color: #f97316 !important;
}

/* rm-qty-input dark */

html.dark-mode .rm-qty-input {
  background: #2e2e2e !important;
  border-color: #484848 !important;
  color: #f0f0f0 !important;
}

html.dark-mode .rm-qty-input:focus {
  border-color: #f97316 !important;
  background: #353535 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important;
}

html.dark-mode .rm-qty-input[readonly],
html.dark-mode .rm-qty-input.reject-reason-readonly {
  background: #252525 !important;
  color: #666666 !important;
}

html.dark-mode .rm-qty-input.input-error {
  border-color: #f87171 !important;
  background: #2d0a0a !important;
}

/* footer actions dark */

html.dark-mode .me-form-actions {
  background: #1a1a1a;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

html.dark-mode .me-submit-btn {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 4px 14px rgba(249,115,22,0.30);
}

html.dark-mode .me-submit-btn:hover {
  background: linear-gradient(90deg, #a34800, #ea6c0a);
  box-shadow: 0 6px 18px rgba(249,115,22,0.45);
  transform: translateY(-1px);
}

/* ================================================================
   CROSS-PAGE HARMONIZATION
   Makes storekeeper_decision, storekeeper_decision_internal,
   storekeeper_grn, return_qc_detail, return_security_detail
   visually consistent with storekeeper_material_entry.
   ================================================================ */

/* ── Light mode: info & details grids — blue border like me-info-block ── */

.info {
  border: 1.5px solid #9cc1ff;
}

.details {
  border: 1.5px solid #9cc1ff;
  background: #f9fbff;
}

/* ── Light mode: attach-card border — consistent with me-attach-box ─── */

/* ── Dark mode: number inputs inside decision tables (acc-qty, rej-qty) ── */

html.dark-mode .qc-section input[type="number"],
html.dark-mode .tbl-wrap input[type="number"],
html.dark-mode table.qc-table input[type="number"] {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

html.dark-mode .qc-section input[type="number"]:focus,
html.dark-mode .tbl-wrap input[type="number"]:focus,
html.dark-mode table.qc-table input[type="number"]:focus {
  border-color: #f97316;
  background: #353535;
  outline: none;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

/* ── Dark mode: text-input inside decision tables ── */

html.dark-mode .qc-section input[type="text"].text-input,
html.dark-mode .tbl-wrap input[type="text"].text-input,
html.dark-mode table.qc-table input[type="text"].text-input {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

/* ── Dark mode: inline-styled resource code cells (return pages) ── */

html.dark-mode table.qc-table tbody td[style*="#64748b"],
html.dark-mode .qc-section tbody td[style*="#64748b"] {
  color: #a0a0a0 !important;
}

/* ── Dark mode: inline-styled material description cells (return pages) ── */

html.dark-mode table.qc-table tbody td[style*="#007BFF"],
html.dark-mode .qc-section tbody td[style*="#007BFF"] {
  color: #fb923c !important;
}

/* ── Dark mode: qc-section scoped table overrides reset (neutralize old scoped rules) ── */

html.dark-mode .qc-section table.qc-table th,
html.dark-mode .qc-section table.qc-table td {
  text-align: left;
}

html.dark-mode .qc-section table.qc-table td:first-child {
  color: #e0e0e0;
  font-weight: normal;
  padding-left: 14px;
}

/* ── Dark mode: attach-card and attach-box consistent orange borders ── */

html.dark-mode .attach-card {
  background: #1c1c1c;
  border-color: #f97316;
}

html.dark-mode .attach-box {
  background: #2e2e2e;
  border-color: #f97316;
}

/* ── Dark mode: qc-section card border reinforced ── */

html.dark-mode .qc-section {
  border-color: #2a2a2a;
}

/* ── Dark mode: .alert-box in return_security_detail ── */

html.dark-mode .alert-box {
  background: #1e1400;
  border-color: #7c4a00;
  color: #fbbf24;
}

/* ================================================================
   INLINE-STYLE DARK MODE OVERRIDES
   Targets inline-styled elements in storekeeper_decision.php,
   storekeeper_decision_internal.php, and storekeeper_grn.php
   ================================================================ */

/* ── storekeeper_decision.php ── */

/* QC Requirement notice box (light blue inline bg) */

html.dark-mode .qc-section > div[style*="#f0f9ff"],
html.dark-mode .qc-section > div[style*="background:#f0f9ff"] {
  background: #0f1e2e !important;
  border-color: #1e4a6e !important;
  color: #60a5fa !important;
}

html.dark-mode .qc-section > div[style*="#f0f9ff"] span[style*="#64748b"] {
  color: #555555 !important;
}

/* QC Review comment cell — amber background */

html.dark-mode td.col-remark[style*="#fff7ed"] {
  background: #1e1400 !important;
  border-left-color: #7c4a00 !important;
}

html.dark-mode td.col-remark[style*="#fff7ed"] .small-note,
html.dark-mode td.col-remark[style*="#fff7ed"] div[style*="#d97706"] {
  color: #fb923c !important;
}

html.dark-mode td.col-remark[style*="#fff7ed"] div[style*="#92400e"] {
  color: #d4a05a !important;
}

/* Material description inline colors inside table cells */

html.dark-mode .col-desc div[style*="#1e293b"],
html.dark-mode td.col-desc[style*="#1e293b"],
html.dark-mode .col-desc div[style*="#475569"] {
  color: #e0e0e0 !important;
}

/* Accepted qty (green) and Rejected qty (red) — lighten for dark rows */

html.dark-mode td.col-qty[style*="#15803d"] {
  color: #4ade80 !important;
}

html.dark-mode td.col-qty[style*="#b91c1c"] {
  color: #f87171 !important;
}

/* ── storekeeper_decision_internal.php ── */

/* Inline-overridden pill (QC Review Requested badge) */

html.dark-mode .pill[style*="#fef2f2"],
html.dark-mode .pill[style*="background:#fef2f2"] {
  background: #2d0a0a !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}

/* ── storekeeper_grn.php ── */

/* Delivery type badge (light blue inline pill in list view) */

html.dark-mode span[style*="background:#e0f2fe"],
html.dark-mode span[style*="background: #e0f2fe"] {
  background: #0f1e2e !important;
  color: #60a5fa !important;
  border-color: #1e4a6e !important;
}

/* Sub-text #64748b inside list-view and form-view rows */

html.dark-mode .list-view div[style*="color:#64748b"],
html.dark-mode .list-view span[style*="color:#64748b"],
html.dark-mode .form-view div[style*="color:#64748b"],
html.dark-mode .form-view span[style*="color:#64748b"] {
  color: #888888 !important;
}

/* GRN Details inputs block — override inline white background */

html.dark-mode .form-view .details[style*="background:#fff"],
html.dark-mode .form-view .details[style*="background: #fff"] {
  background: #1c1c1c !important;
  border-color: #f97316 !important;
}

/* Form labels inside GRN Details block */

html.dark-mode .form-view .details label[style*="#333"],
html.dark-mode .form-view .details label[style*="color:#333"] {
  color: #d0d0d0 !important;
}

/* Remarks label (outside .details but same form-view) */

html.dark-mode .form-view > div label[style*="#333"],
html.dark-mode .form-view > div label[style*="color:#333"] {
  color: #d0d0d0 !important;
}

/* Attach card label */

html.dark-mode .attach-card label[style*="#1f3b7b"],
html.dark-mode .attach-card > label {
  color: #d0d0d0 !important;
}

/* ================================================================
   PENDING LIST PAGES — DARK MODE OVERRIDES
   Covers: storekeeper_review.php, storekeeper_review_internal.php,
   return_qc_check.php, return_security_check.php,
   return_pending_external.php, return_pending_internal.php
   ================================================================ */

/* ── dm-table: strong DN/Return numbers — white for prominence ── */

html.dark-mode .dm-table td strong {
  color: #ffffff;
}

/* ── Inline text colors in table cells ── */

/* Initiator/person names (#334155) */

html.dark-mode .dm-table td div[style*="color:#334155"],
html.dark-mode .dm-table td[style*="color:#334155"] {
  color: #e0e0e0 !important;
}

/* Muted secondary text (#64748b) — dates, sub-labels, driver names */

html.dark-mode .dm-table td[style*="color:#64748b"],
html.dark-mode .dm-table td div[style*="color:#64748b"],
html.dark-mode .dm-table td span[style*="color:#64748b"] {
  color: #888888 !important;
}

/* Reason / sub-text (#475569) */

html.dark-mode .dm-table td[style*="color:#475569"],
html.dark-mode .dm-table td div[style*="color:#475569"] {
  color: #a0a0a0 !important;
}

/* Very muted sub-text (#94a3b8) — DN ref under return number */

html.dark-mode .dm-table td span[style*="color:#94a3b8"] {
  color: #666666 !important;
}

/* ── Inline status / badge spans inside dm-table ── */

/* PENDING status — amber */

html.dark-mode .dm-table span[style*="background:#fff7ed"] {
  background: #2a1400 !important;
  color: #fb923c !important;
}

/* Items count badge — light blue */

html.dark-mode .dm-table span[style*="background:#e0f2fe"] {
  background: #0f1e2e !important;
  color: #60a5fa !important;
}

/* COMPLETE / CLOSED — green */

html.dark-mode .dm-table span[style*="background:#dcfce7"] {
  background: #052e16 !important;
  color: #4ade80 !important;
}

/* Default / neutral status — gray */

html.dark-mode .dm-table span[style*="background:#f1f5f9"] {
  background: #252525 !important;
  color: #a0a0a0 !important;
}

/* ================================================================
   QC INSPECTION DECISION PAGE (qc_inspection.php)
   1. Edit lock/amber banners (missing from workflow.css — ported from delivery_management.css)
   2. Delivery info card inline style dark overrides
   3. Table inline style dark overrides
   4. SK rejected section dark overrides
   5. Edit History Modal dark mode
   Light mode + dark mode both covered.
   ================================================================ */

/* ── 1. Edit banners — light mode ── */

.edit-block-banner .ebb-title {
  font-size: 15px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-block-banner .ebb-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 6px;
  color: #92400e;
}

.edit-block-banner .ebb-label {
  font-weight: 700;
  min-width: 160px;
  flex-shrink: 0;
}

.edit-block-banner .ebb-val   {
  color: #1e293b;
}

.edit-block-banner .ebb-note  {
  margin-top: 14px;
  font-size: 12px;
  color: #92400e;
  font-style: italic;
}

.edit-amber-banner .eab-title {
  font-size: 14px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 10px;
}

.edit-amber-banner .eab-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 5px;
  color: #92400e;
}

.edit-amber-banner .eab-label {
  font-weight: 700;
  min-width: 140px;
  flex-shrink: 0;
}

.edit-amber-banner .eab-val   {
  color: #1e293b;
}

.edit-amber-banner .eab-note  {
  margin-top: 12px;
}

/* ── 1. Edit banners — dark mode ── */

html.dark-mode .edit-block-banner {
  background: #2a1e00;
  border-color: #b45309;
}

html.dark-mode .edit-block-banner .ebb-title {
  color: #fcd34d;
}

html.dark-mode .edit-block-banner .ebb-row   {
  color: #fcd34d;
}

html.dark-mode .edit-block-banner .ebb-val   {
  color: #e0e0e0;
}

html.dark-mode .edit-block-banner .ebb-note  {
  color: #f59e0b;
}

html.dark-mode .edit-amber-banner {
  background: #2a1e00;
  border-color: #b45309;
  border-left-color: #f59e0b;
}

html.dark-mode .edit-amber-banner .eab-title {
  color: #fcd34d;
}

html.dark-mode .edit-amber-banner .eab-row   {
  color: #fcd34d;
}

html.dark-mode .edit-amber-banner .eab-val   {
  color: #e0e0e0;
}

/* ── 2. Delivery info card — dark mode inline overrides ── */

/* Label row: color:#64748b → muted */

html.dark-mode .dm-card__body div[style*="color:#64748b"] {
  color: #888888 !important;
}

/* DN Number: color:#007BFF → orange */

html.dark-mode .dm-card__body div[style*="color:#007BFF"] {
  color: #f97316 !important;
}

/* Driver / Vehicle values: color:#1e293b → light */

html.dark-mode .dm-card__body div[style*="color:#1e293b"] {
  color: #e0e0e0 !important;
}

/* From / To values: color:#475569 → muted */

html.dark-mode .dm-card__body div[style*="color:#475569"] {
  color: #a0a0a0 !important;
}

/* ── 3. Table cell inline style overrides — dark mode ── */

/* Resource Code cells: color:#007BFF → orange */

html.dark-mode .dm-table td[style*="color:#007BFF"] {
  color: #fb923c !important;
}

/* SK Remark cells: color:#64748b → muted */

html.dark-mode .dm-table td[style*="color:#64748b"] {
  color: #888888 !important;
}

/* N/A and "review not applicable" spans: color:#9ca3af → darker muted */

html.dark-mode .dm-table td span[style*="color:#9ca3af"],
html.dark-mode .dm-table td[style*="color:#9ca3af"]  {
  color: #666666 !important;
}

/* Checkbox accent color: blue → orange */

html.dark-mode .dm-table input[type="checkbox"] {
  accent-color: #f97316 !important;
}

/* ── 4. SK rejected section — dark mode ── */

/* Section title: amber color + light border-bottom */

html.dark-mode .dm-card__section-title[style*="color:#c2410c"] {
  color: #fb923c !important;
  border-bottom-color: #2a1400 !important;
}

/* Info note box below section title: light bg + gray text */

html.dark-mode .dm-card div[style*="background:#f8fafc"] {
  background: #1a1a1a !important;
  color: #888888 !important;
  border-bottom-color: #2a2a2a !important;
}

/* code tag inside the info box */

html.dark-mode .dm-card div[style*="background:#f8fafc"] code {
  background: #252525 !important;
  color: #fb923c !important;
}

/* ── 5. Edit History Modal — dark mode ── */

/* Define card-bg and text CSS variables in dark mode */

html.dark-mode {
  --card-bg: #1e1e1e;
  --text-primary: #e0e0e0;
  --text-muted: #888888;
}

/* Modal overlay backdrop */

html.dark-mode #editHistoryModal {
  background: rgba(0,0,0,0.75) !important;
}

/* Modal card shell */

html.dark-mode #editHistoryModal > div {
  background: #1e1e1e !important;
  border: 1px solid #2a2a2a;
}

/* Modal title */

html.dark-mode #editHistoryModal h3 {
  color: #e0e0e0 !important;
}

/* Close button */

html.dark-mode #editHistoryModal button {
  color: #888888 !important;
}

/* Each edit entry card */

html.dark-mode #editHistoryContent > div {
  border-color: #2a2a2a !important;
}

/* Edit number heading */

html.dark-mode #editHistoryContent div[style*="color:#1e293b"] {
  color: #e0e0e0 !important;
}

/* Meta labels (Requested by, etc.) */

html.dark-mode #editHistoryContent span[style*="color:#64748b"] {
  color: #888888 !important;
}

/* Table header row */

html.dark-mode #editHistoryContent tr[style*="background:#f1f5f9"] {
  background: #1a0a00 !important;
}

html.dark-mode #editHistoryContent tr[style*="background:#f1f5f9"] th {
  color: #f97316 !important;
}

/* Table rows */

html.dark-mode #editHistoryContent tr[style*="border-bottom:1px solid #e2e8f0"] {
  border-bottom-color: #2a2a2a !important;
}

/* Old value (red) → lighter red */

html.dark-mode #editHistoryContent td[style*="color:#991b1b"] {
  color: #f87171 !important;
}

/* New value (green) → lighter green */

html.dark-mode #editHistoryContent td[style*="color:#166534"] {
  color: #4ade80 !important;
}

/* ================================================================
   RETURN REQUEST FORM — #returnRequestSection
   Mirrors internal delivery form styling (section-content-wrapper
   pattern) but scoped to workflow.css since $moduleCSS = workflow.css
   ================================================================ */

/* ── Wrapper + form-row ── */

#returnRequestSection .section-content-wrapper {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-top: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

#returnRequestSection .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#returnRequestSection .form-row > div {
  flex: 1;
  min-width: 220px;
}

/* ── Labels ── */

#returnRequestSection label {
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
  color: #374151;
  font-size: 13.5px;
}

#returnRequestSection .required {
  color: #e53e3e;
}

/* ── All inputs, selects, textareas ── */

#returnRequestSection input:not([type="file"]):not([type="submit"]):not([type="button"]),
#returnRequestSection select,
#returnRequestSection textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #d1d9e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background: #f8fafc;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

#returnRequestSection input:not([type="file"]):not([type="submit"]):not([type="button"]):focus,
#returnRequestSection select:focus,
#returnRequestSection textarea:focus {
  border-color: #007BFF;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
}

#returnRequestSection input::-moz-placeholder, #returnRequestSection textarea::-moz-placeholder {
  color: #94a3b8;
}

#returnRequestSection input::placeholder,
#returnRequestSection textarea::placeholder {
  color: #94a3b8;
}

/* ── Remove-btn inside table ── */

#returnRequestSection .rr-remove-btn {
  white-space: nowrap;
  padding: 5px 10px;
  font-size: 12px;
}

#returnMaterialsTable td:last-child,
#returnMaterialsTable th:last-child {
  border-right: none;
}

#returnMaterialsTable th:last-child {
  border-right: none;
}

/* ── Dark mode ── */

html.dark-mode #returnRequestSection .section-content-wrapper {
  background: #242424;
  border-color: #333333;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

html.dark-mode #returnRequestSection label {
  color: #e8e8e8;
}

html.dark-mode #returnRequestSection .required {
  color: #f87171;
}

html.dark-mode #returnRequestSection input:not([type="file"]):not([type="submit"]):not([type="button"]),
html.dark-mode #returnRequestSection select,
html.dark-mode #returnRequestSection textarea {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
  box-shadow: none;
}

html.dark-mode #returnRequestSection input::-moz-placeholder, html.dark-mode #returnRequestSection textarea::-moz-placeholder {
  color: #666666;
}

html.dark-mode #returnRequestSection input::placeholder,
html.dark-mode #returnRequestSection textarea::placeholder {
  color: #666666;
}

html.dark-mode #returnRequestSection select option {
  background: #2e2e2e;
  color: #f0f0f0;
}

html.dark-mode #returnRequestSection input:not([type="file"]):not([type="submit"]):not([type="button"]):focus,
html.dark-mode #returnRequestSection select:focus,
html.dark-mode #returnRequestSection textarea:focus {
  border-color: #f97316;
  background: #353535;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.18);
  outline: none;
}

/* #returnMaterialsTable dark zebra removed — the broken `html html.dark-mode`
   selector never matched, leaving white #f8faff rows stuck in dark mode. The
   request.php table uses the shared Tailwind row dividers now. */

/* sub-field visibility helper */

#returnRequestSection .rr-sub-field {
  display: none;
}

/* ================================================================

/* ================================================================
   COSTING-SPECIFIC STYLES
   material_cost_list.php sub-panel helpers
   material_costing.php — #costingLinesTable + cell inputs
   ================================================================ */

/* ── List page panel helpers ── */

.mc-sub-panel.active {
  display: block;
}

.mc-sub-panel.\!active {
  display: block !important;
}

/* #costingLinesTable: legacy zebra + .cl-* input styling removed (dark-mode bug).
   cost-detail.php now uses Tailwind token classes (bg-card-2 / bg-background /
   border-input) + the shared row dividers, so the .cl-* rules were dead code and
   the even-row zebra's dark override used a broken `html html.dark-mode` selector
   (an <html> nested in an <html> — never matches), which left the white #f8faff
   rows and white inputs stuck in dark mode. Dividers handle row separation now. */

/* LPO input inside info grid dark mode */

html.dark-mode .me-info-block input[type="text"] {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

html.dark-mode .me-info-block input[type="text"]:focus {
  border-color: #f97316;
  outline: none;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
  background: #353535;
}

/* ================================================================
   delivery_management.css — Delivery Management Module
   Covers: active_requests.php, dn_tracking.php,
           edit_request_form.php, edit_request_cancel.php,
           edit_request_queue.php, get_edit_summary_include.php,
           transaction_view.php,
           new_delivery.php, external_delivery_form.php,
           internal_delivery_form.php

   Light theme structure is in light.css (global shell).
   Module-specific selectors here.
   Dark-mode overrides at the bottom use html.dark-mode scoping.
   ================================================================ */

/* ── Back navigation link (new_delivery.php → form pages) ── */

/* ============================================================
   SECTION: ACTIVE TRANSACTIONS — NEW UI COMPONENTS
   type-tabs, horizontal actions, legend, icon-only btn
   ============================================================ */

/* ── All / External / Internal type tabs ── */

.at-type-tab.active {
  color: #007BFF;
  border-bottom-color: #007BFF;
}

.at-type-tab.\!active {
  color: #007BFF !important;
  border-bottom-color: #007BFF !important;
}

.at-type-tab.active .at-type-count {
  background: #dbeafe;
  color: #1d4ed8;
}

.at-type-tab.\!active .at-type-count {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}

/* ── Results info text ── */

/* ── Horizontal action buttons row ── */

/* ── Icon-only view button ── */

/* ── Legend row (SVG icons + labels) ── */

/* ============================================================
   SCOPE 2 — EDIT REQUEST FEATURE
   edit_request_form.php, edit_request_cancel.php
   get_edit_summary_include.php
============================================================ */

/* ── Page body (reuses sk-page-body — no new class needed) ── */

/* ── Warning note banner ── */

.edit-warning-note strong {
  color: #78350f;
}

/* ── Edit section card (same feel as qc-section) ── */

/* ── Edit section header ── */

/* ── Info grid (read-only display) ── */

.edit-info-grid .ei-label {
  font-weight: 700;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0.04em;
}

.edit-info-grid .ei-val {
  color: #1e293b;
  font-weight: 500;
}

/* ── Form groups ── */

.edit-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.edit-form-group input[type="text"],
.edit-form-group textarea,
.edit-form-group select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  background: #f8fafc;
  color: #1e293b;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.edit-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.edit-form-group input[type="text"]:focus,
.edit-form-group textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

.edit-form-group .req {
  color: #ef4444;
  margin-left: 2px;
}

/* ── Two-column form grid ── */

/* ── Materials table ── */

.edit-mat-table th {
  background: #0f172a;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 10px;
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 2px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 5;
}

.edit-mat-table th:last-child {
  border-right: none;
}

.edit-mat-table td {
  padding: 10px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
}

.edit-mat-table tbody tr:hover td {
  background: #f8fafc;
}

.edit-mat-table input[type="text"],
.edit-mat-table input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  background: #f8fafc;
  color: #1e293b;
  box-sizing: border-box;
}

.edit-mat-table input:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.12);
}

/* ── Add row button ── */

/* ── Actions bar ── */

/* ── Edit review — read-only field ── */

/* ── Edit review — diff indicators ── */

/* ── Edit mat-table row classes ── */

tr.diff-added td {
  background: #f0fdf4;
}

tr.diff-removed td {
  background: #fef2f2;
}

/* ── Block banner (shown on action pages when DN is locked) ── */

.edit-block-banner .ebb-title {
  font-size: 15px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-block-banner .ebb-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 6px;
  color: #92400e;
}

.edit-block-banner .ebb-label {
  font-weight: 700;
  min-width: 160px;
  flex-shrink: 0;
}

.edit-block-banner .ebb-val {
  color: #1e293b;
}

.edit-block-banner .ebb-note {
  margin-top: 14px;
  font-size: 12px;
  color: #92400e;
  font-style: italic;
}

/* ── Amber Info Banner (Is_Edited = 1, not locked) ── */

.edit-amber-banner .eab-title {
  font-size: 14px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 10px;
}

.edit-amber-banner .eab-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 5px;
  color: #92400e;
}

.edit-amber-banner .eab-label {
  font-weight: 700;
  min-width: 140px;
  flex-shrink: 0;
}

.edit-amber-banner .eab-val {
  color: #1e293b;
}

.edit-amber-banner .eab-note {
  margin-top: 12px;
}

/* ================================================================
   DARK MODE — delivery_management.css
   All rules below apply only when body has the .dark-mode class.
   ================================================================ */

/* ── Back nav link dark override ── */

html.dark-mode .back-nav-link {
  color: #60a5fa;
}

/* ── Active Transactions type tabs ── */

html.dark-mode .at-type-tab {
  color: #555555;
}

html.dark-mode .at-type-tab:hover {
  color: #d0d0d0;
}

html.dark-mode .at-type-tab.active {
  color: #f97316;
  border-bottom-color: #f97316;
}

html.dark-mode .at-type-tab.\!active {
  color: #f97316 !important;
  border-bottom-color: #f97316 !important;
}

html.dark-mode .at-type-count {
  background: #252525;
  color: #666666;
}

html.dark-mode .at-type-tab.active .at-type-count {
  background: #2a1400;
  color: #fb923c;
}

html.dark-mode .at-type-tab.\!active .at-type-count {
  background: #2a1400 !important;
  color: #fb923c !important;
}

html.dark-mode .at-results-info {
  color: #888888;
}

html.dark-mode .at-legend {
  color: #666666;
}

html.dark-mode .at-legend-sep {
  color: #333333;
}

/* ============================================================
   SCOPE 2 — EDIT REQUEST FEATURE (Dark Mode)
============================================================ */

html.dark-mode .edit-warning-note {
  background: #2a1e00;
  border-color: #b45309;
  color: #fcd34d;
}

html.dark-mode .edit-warning-note strong {
  color: #fbbf24;
}

html.dark-mode .edit-section {
  background: #1e1e1e;
  border-color: rgba(249,115,22,0.18);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

html.dark-mode .edit-info-grid .ei-label {
  color: #888888;
}

html.dark-mode .edit-info-grid .ei-val {
  color: #e0e0e0;
}

html.dark-mode .edit-form-group label {
  color: #888888;
}

html.dark-mode .edit-form-group input[type="text"],
html.dark-mode .edit-form-group textarea,
html.dark-mode .edit-form-group select {
  background: #252525;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

html.dark-mode .edit-form-group input[type="text"]:focus,
html.dark-mode .edit-form-group textarea:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

/* edit-mat-table dark mode — matches dm-table dark style */

html.dark-mode .edit-mat-table thead tr {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode .edit-mat-table th {
  background: transparent;
  color: #ffffff;
  border-right-color: rgba(0,0,0,0.35);
  border-bottom-color: rgba(255,255,255,0.12);
}

html.dark-mode .edit-mat-table th:last-child {
  border-right: none;
}

html.dark-mode .edit-mat-table td {
  border-bottom-color: #2a2a2a;
  color: #e0e0e0;
}

html.dark-mode .edit-mat-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

html.dark-mode .edit-mat-table tbody tr:hover td {
  background: rgba(249,115,22,0.07);
}

html.dark-mode .edit-mat-table input[type="text"],
html.dark-mode .edit-mat-table input[type="number"] {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

html.dark-mode .edit-mat-table input:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.15);
}

html.dark-mode .edit-add-row-btn {
  background: #2a1400;
  border-color: #7c3100;
  color: #fb923c;
}

html.dark-mode .edit-add-row-btn:hover {
  background: #3d1e00;
  border-color: #f97316;
  color: #f97316;
}

html.dark-mode .edit-remove-row-btn {
  background: #2d0a0a;
  border-color: #7f1d1d;
  color: #f87171;
}

html.dark-mode .edit-remove-row-btn:hover {
  background: #3d1010;
  border-color: #991b1b;
}

html.dark-mode .edit-new-row-badge {
  background: #052e16;
  color: #4ade80;
}

html.dark-mode .edit-btn-cancel {
  background: #252525;
  border-color: #3a3a3a;
  color: #a0a0a0;
}

html.dark-mode .edit-btn-cancel:hover {
  background: #2e2e2e;
  color: #e0e0e0;
}

html.dark-mode .edit-block-banner {
  background: #2a1e00;
  border-color: #b45309;
}

html.dark-mode .edit-block-banner .ebb-title {
  color: #fcd34d;
}

html.dark-mode .edit-block-banner .ebb-row {
  color: #fcd34d;
}

html.dark-mode .edit-block-banner .ebb-val {
  color: #e0e0e0;
}

html.dark-mode .edit-block-banner .ebb-note {
  color: #f59e0b;
}

/* ── Edit review — read-only field (dark) ── */

html.dark-mode .edit-readonly-field {
  background: #252525;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

html.dark-mode .edit-form-group textarea:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

/* ── Edit review — diff indicators (dark) ── */

html.dark-mode .diff-old {
  background: #3d1010;
  color: #fca5a5;
}

html.dark-mode .diff-new {
  background: #052e16;
  color: #4ade80;
}

html.dark-mode .diff-added {
  background: #052e16;
  color: #4ade80;
}

html.dark-mode .diff-removed {
  background: #3d1010;
  color: #fca5a5;
}

html.dark-mode .diff-arrow {
  color: #555555;
}

/* ── Edit mat-table row classes (dark) ── */

html.dark-mode tr.diff-added td {
  background: #0a2e16;
}

html.dark-mode tr.diff-removed td {
  background: #2d0a0a;
}

/* ── Edit btn-submit (dark) ── */

html.dark-mode .edit-btn-submit {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 3px 10px rgba(249,115,22,0.30);
}

html.dark-mode .edit-btn-submit:hover {
  background: linear-gradient(90deg, #b35000, #ea6c0a);
  box-shadow: 0 4px 14px rgba(249,115,22,0.45);
}

/* ── Amber Info Banner (Dark Mode) ── */

html.dark-mode .edit-amber-banner {
  background: #2a1e00;
  border-color: #b45309;
  border-left-color: #f59e0b;
}

html.dark-mode .edit-amber-banner .eab-title {
  color: #fcd34d;
}

html.dark-mode .edit-amber-banner .eab-row {
  color: #fcd34d;
}

html.dark-mode .edit-amber-banner .eab-val {
  color: #e0e0e0;
}

/* ── Active Transactions action buttons (dark) ── */

html.dark-mode .at-btn--view {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow: 0 2px 8px rgba(29,78,216,0.35);
}

html.dark-mode .at-btn--view:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 12px rgba(29,78,216,0.55);
}

html.dark-mode .at-btn--edit {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 2px 8px rgba(217,119,6,0.35);
}

html.dark-mode .at-btn--edit:hover {
  background: linear-gradient(135deg, #b45309, #92400e);
  box-shadow: 0 4px 12px rgba(217,119,6,0.55);
}

html.dark-mode .at-btn--cancel {
  background: #2d0a0a;
  color: #f87171;
  border-color: #7f1d1d;
}

html.dark-mode .at-btn--cancel:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(220,38,38,0.40);
}

html.dark-mode .at-status-note {
  color: #555555;
}

html.dark-mode .at-status-note--locked {
  color: #fcd34d;
  background: #2a1e00;
  border-color: #b45309;
}

/* ================================================================
   DELIVERY FORMS — delivery_management.css
   External delivery form, internal delivery form, new delivery
   chooser, QC modal, form footer, plate preview, head-office notice.
   Moved here from light.css and dark.css in Phase 3.
   ================================================================ */

/* ============================================================
   DELIVERY FORMS — light.css (Phase 1+3 combined)
   Covers external_delivery_form.php + internal_delivery_form.php
   ============================================================ */

/* ===== SECTION WRAPPER ===== */

#externalDeliverySection,
#internalDeliverySection {
  font-size: 14px;
  color: #1e293b;
}

/* ===== SECTION HEADER BANNER ===== */

.section-h2-header {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px 0;
  letter-spacing: -0.2px;
}

/* ===== SECTION CONTENT WRAPPER ===== */

/* ===== LABELS ===== */

#externalDeliverySection label,
#internalDeliverySection label {
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
  color: #374151;
  font-size: 13.5px;
}

/* ===== FORM FIELDS ===== */

#externalDeliverySection input,
#externalDeliverySection select,
#externalDeliverySection textarea,
#internalDeliverySection input,
#internalDeliverySection select,
#internalDeliverySection textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #d1d9e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background: #f8fafc;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

#externalDeliverySection input:focus,
#externalDeliverySection select:focus,
#externalDeliverySection textarea:focus,
#internalDeliverySection input:focus,
#internalDeliverySection select:focus,
#internalDeliverySection textarea:focus {
  border-color: #007BFF;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
}

/* ===== DISABLED ===== */

#externalDeliverySection input[disabled],
#internalDeliverySection input[disabled] {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
  border-color: #e2e8f0;
}

#externalDeliverySection select[disabled],
#internalDeliverySection select[disabled] {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
  border-color: #e2e8f0;
  opacity: 1;
  /* prevent browser-default dim on top of our colour */
}

/* ===== FILE INPUT ===== */

#externalDeliverySection input[type="file"],
#internalDeliverySection input[type="file"] {
  padding: 6px 10px;
  background: #fff;
}

/* ===== FORM ROWS ===== */

#externalDeliverySection .form-row,
#internalDeliverySection .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#externalDeliverySection .form-row > div,
#internalDeliverySection .form-row > div {
  flex: 1;
  min-width: 200px;
}

/* ===== INNER SECTION CARDS ===== */

#externalDeliverySection .section-card,
#internalDeliverySection .section-card {
  background: #f8faff;
  border: 2px solid #007BFF !important;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,123,255,0.10);
}

#externalDeliverySection .section-card h3,
#internalDeliverySection .section-card h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: #007BFF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== BTN-PRIMARY / BTN-SECONDARY / BTN-DANGER — standalone ===== */

/* Used on pages like storekeeper_material_entry.php outside delivery section contexts */

/* ===== BUTTONS ===== */

#externalDeliverySection .btn-primary,
#internalDeliverySection .btn-primary {
  background: #007BFF;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  box-shadow: 0 3px 10px rgba(0,123,255,0.25);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#externalDeliverySection .btn-primary:hover,
#internalDeliverySection .btn-primary:hover {
  background: #0056b3;
  box-shadow: 0 4px 14px rgba(0,123,255,0.35);
  transform: translateY(-1px);
}

#externalDeliverySection .btn-secondary,
#internalDeliverySection .btn-secondary {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}

#externalDeliverySection .btn-secondary:hover,
#internalDeliverySection .btn-secondary:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

#externalDeliverySection .btn-danger,
#internalDeliverySection .btn-danger {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}

#externalDeliverySection .btn-danger:hover,
#internalDeliverySection .btn-danger:hover {
  background: #dc2626;
}

#externalDeliverySection .button-row,
#internalDeliverySection .button-row {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

/* ===== TOGGLE SWITCH ===== */

#externalDeliverySection .switch,
#internalDeliverySection .switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  flex-shrink: 0;
}

#externalDeliverySection .switch input,
#internalDeliverySection .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#externalDeliverySection .slider,
#internalDeliverySection .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: .3s;
  border-radius: 22px;
}

#externalDeliverySection .slider:before,
#internalDeliverySection .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#externalDeliverySection .switch input:checked + .slider,
#internalDeliverySection .switch input:checked + .slider {
  background-color: #007BFF;
}

#externalDeliverySection .switch input:checked + .slider:before,
#internalDeliverySection .switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* ===== TEXTAREA ===== */

#externalDeliverySection textarea,
#internalDeliverySection textarea {
  min-height: 80px;
  resize: vertical;
}

/* ===== ATTACHMENTS BOX (external delivery form — original pattern) ===== */

#attachmentsBox,
#internalAttachmentsBox {
  border: 1.5px solid #d1d9e0;
  border-radius: 8px;
  padding: 10px;
  height: 140px;
  width: 100%;
  max-width: 550px;
  overflow-y: auto;
  background: #f8fafc;
  font-size: 14px;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ===== ATTACH-CARD / ATTACH-BTN / ATTACH-BOX / FILE-ROW
   Ported from workflow.css so internal_delivery_form.php
   (which loads delivery_management.css, not workflow.css)
   renders identically to security_in.php                  ===== */

#internalDeliverySection .attach-card {
  background: #f9fbff;
  border: 2px solid #9cc1ff;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 18px;
}

#internalDeliverySection .attach-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#internalDeliverySection .attach-box {
  height: 160px;
  overflow-y: auto;
  background: #f9fbff;
  border: 2px solid #9cc1ff;
  border-radius: 12px;
  padding: 8px 10px;
  box-sizing: border-box;
}

#internalDeliverySection .sec-attach-label {
  font-weight: 600;
  color: #1f3b7b;
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

#internalDeliverySection .sec-empty-text {
  padding: 6px 8px;
  color: #94a3b8;
  font-size: 13px;
}

#internalDeliverySection .file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}

#internalDeliverySection .file-row:last-child {
  border-bottom: none;
}

#internalDeliverySection .file-row:hover {
  background: #f3f7ff;
}

#internalDeliverySection .file-row span  {
  font-size: 14px;
}

#internalDeliverySection .attach-btn {
  border: none;
  border-radius: 22px;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin-right: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  font-family: inherit;
}

#internalDeliverySection .attach-btn.blue {
  background: #007BFF;
  box-shadow: 0 3px 8px rgba(0,123,255,0.25);
}

#internalDeliverySection .attach-btn.blue:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

#internalDeliverySection .attach-btn.blue:disabled {
  background: #a8c7f5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#internalDeliverySection .attach-btn.grey {
  background: #6b7280;
}

#internalDeliverySection .attach-btn.grey:hover {
  background: #4b5563;
}

#internalDeliverySection .attach-btn.red {
  background: #ef4444;
}

#internalDeliverySection .attach-btn.red:hover {
  background: #dc2626;
}

#materialsTable th:last-child,
#internalMaterialsTable th:last-child,
#materialsTable td:last-child,
#internalMaterialsTable td:last-child {
  border-right: none;
}

#internalMaterialsTable tbody tr:nth-child(even) {
  background: #f8faff;
}

/* Column widths */

#materialsTable th:nth-child(1), #materialsTable td:nth-child(1) {
  width: 60%;
}

#materialsTable th:nth-child(2), #materialsTable td:nth-child(2) {
  width: 15%;
}

#materialsTable th:nth-child(3), #materialsTable td:nth-child(3) {
  width: 15%;
}

#materialsTable th:nth-child(4), #materialsTable td:nth-child(4) {
  width: 10%;
}

#internalMaterialsTable th:nth-child(1), #internalMaterialsTable td:nth-child(1) {
  width: 15%;
}

#internalMaterialsTable th:nth-child(2), #internalMaterialsTable td:nth-child(2) {
  width: 50%;
}

#internalMaterialsTable th:nth-child(3), #internalMaterialsTable td:nth-child(3) {
  width: 12%;
}

#internalMaterialsTable th:nth-child(4), #internalMaterialsTable td:nth-child(4) {
  width: 13%;
}

#internalMaterialsTable th:nth-child(5), #internalMaterialsTable td:nth-child(5) {
  width: 10%;
}

/* ===== MATERIALS CONTAINER ===== */

/* ===== LPO SPECIAL STATES ===== */

#externalDeliverySection input.lpo-readonly {
  background-color: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

#externalDeliverySection input.no-lpo {
  background: #fffbe6 !important;
  color: #8a6d3b !important;
  font-style: italic;
  border: 1.5px solid #f0c36d !important;
}

/* ===== ERROR / SUCCESS / HINT ===== */

#externalDeliverySection .error,
#internalDeliverySection .error {
  color: #dc2626;
  font-size: 12.5px;
  margin-top: 4px;
  display: block;
}

#externalDeliverySection .success,
#internalDeliverySection .success {
  color: #16a34a;
  font-size: 12.5px;
  margin-top: 4px;
  display: block;
}

/* ===== FORM TOAST ===== */

/* ============================================================
   SECTION: CHOOSER CARD SVG ICON
   ============================================================ */

/* ============================================================
   SECTION: FORM — STICKY SUBMIT FOOTER
   ============================================================ */

/* ── Head Office info notice (internal + external delivery forms) ── */

.head-office-notice svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #3b82f6;
}

/* ============================================================
   SECTION: VEHICLE PLATE LIVE PREVIEW
   ============================================================ */

/* ================================================================
   DELIVERY FORMS DARK MODE — delivery_management.css
   All rules already prefixed with html.dark-mode.
   ================================================================ */

/* DELIVERY FORMS — dark.css (Phase 1+3 combined)
   ============================================================ */

/* ===== SECTION HEADER BANNER — orange gradient in dark mode ===== */

html.dark-mode .section-h2-header {
  background: linear-gradient(90deg, #f97316, #fb923c) !important;
  color: #ffffff !important;
}

/* ===== OUTER SECTION-CARD (wraps entire form) ===== */

html.dark-mode #externalDeliverySection.section-card,
html.dark-mode #internalDeliverySection.section-card {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* ===== SECTION CONTENT WRAPPER — Level 1 ===== */

/* White box in light mode → dark card in dark mode */

html.dark-mode .section-content-wrapper {
  background: #242424;
  border: 1.5px solid #333333;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

/* ===== FORM BASE ===== */

html.dark-mode #externalDeliverySection,
html.dark-mode #internalDeliverySection {
  color: #f0f0f0;
}

/* Bright labels */

html.dark-mode #externalDeliverySection label,
html.dark-mode #internalDeliverySection label {
  color: #e8e8e8;
  font-weight: 600;
}

/* ===== FORM FIELDS — clearly lighter than wrapper ===== */

html.dark-mode #externalDeliverySection input,
html.dark-mode #externalDeliverySection select,
html.dark-mode #externalDeliverySection textarea,
html.dark-mode #internalDeliverySection input,
html.dark-mode #internalDeliverySection select,
html.dark-mode #internalDeliverySection textarea {
  background: #2e2e2e;
  border: 1.5px solid #484848;
  color: #f0f0f0;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html.dark-mode #externalDeliverySection input::-moz-placeholder, html.dark-mode #externalDeliverySection textarea::-moz-placeholder, html.dark-mode #internalDeliverySection input::-moz-placeholder, html.dark-mode #internalDeliverySection textarea::-moz-placeholder {
  color: #777777;
}

html.dark-mode #externalDeliverySection input::placeholder,
html.dark-mode #externalDeliverySection textarea::placeholder,
html.dark-mode #internalDeliverySection input::placeholder,
html.dark-mode #internalDeliverySection textarea::placeholder {
  color: #777777;
}

html.dark-mode #externalDeliverySection select option,
html.dark-mode #internalDeliverySection select option {
  background: #2e2e2e;
  color: #f0f0f0;
}

html.dark-mode #externalDeliverySection input:focus,
html.dark-mode #externalDeliverySection select:focus,
html.dark-mode #externalDeliverySection textarea:focus,
html.dark-mode #internalDeliverySection input:focus,
html.dark-mode #internalDeliverySection select:focus,
html.dark-mode #internalDeliverySection textarea:focus {
  border-color: #f97316;
  background: #353535;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.18);
  outline: none;
}

/* ===== DISABLED ===== */

html.dark-mode #externalDeliverySection input[disabled],
html.dark-mode #internalDeliverySection input[disabled] {
  background: #252525;
  color: #555555;
  border-color: #333333;
  cursor: not-allowed;
}

html.dark-mode #externalDeliverySection select[disabled],
html.dark-mode #internalDeliverySection select[disabled] {
  background: #252525;
  color: #555555;
  border-color: #333333;
  cursor: not-allowed;
  opacity: 1;
}

/* ===== FILE INPUT ===== */

html.dark-mode #externalDeliverySection input[type="file"],
html.dark-mode #internalDeliverySection input[type="file"] {
  background: #2e2e2e;
}

/* ===== INNER SECTION CARDS (Attachments, Materials) ===== */

/* Darker than wrapper to create depth, orange accent border */

html.dark-mode #externalDeliverySection .section-card,
html.dark-mode #internalDeliverySection .section-card {
  background: #1c1c1c !important;
  border: 1.5px solid #f97316 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

html.dark-mode #externalDeliverySection .section-card h3,
html.dark-mode #internalDeliverySection .section-card h3 {
  color: #f97316;
}

/* ===== BUTTONS ===== */

html.dark-mode #externalDeliverySection .btn-primary,
html.dark-mode #internalDeliverySection .btn-primary {
  background: #f97316;
  color: #ffffff;
  border: none;
  box-shadow: 0 3px 10px rgba(249,115,22,0.35);
}

html.dark-mode #externalDeliverySection .btn-primary:hover,
html.dark-mode #internalDeliverySection .btn-primary:hover {
  background: #ea6c0a;
  box-shadow: 0 4px 14px rgba(249,115,22,0.50);
  transform: translateY(-1px);
}

/* Submit button (input[type=submit]) */

html.dark-mode #externalDeliverySection input[type="submit"],
html.dark-mode #internalDeliverySection input[type="submit"] {
  background: #f97316;
  color: #ffffff;
  border: none;
  box-shadow: 0 3px 10px rgba(249,115,22,0.35);
  cursor: pointer;
}

html.dark-mode #externalDeliverySection input[type="submit"]:hover,
html.dark-mode #internalDeliverySection input[type="submit"]:hover {
  background: #ea6c0a;
}

html.dark-mode #externalDeliverySection .btn-secondary,
html.dark-mode #internalDeliverySection .btn-secondary {
  background: #2e2e2e;
  color: #d0d0d0;
  border: 1.5px solid #484848;
}

html.dark-mode #externalDeliverySection .btn-secondary:hover,
html.dark-mode #internalDeliverySection .btn-secondary:hover {
  background: #383838;
  border-color: #585858;
}

html.dark-mode #externalDeliverySection .btn-danger,
html.dark-mode #internalDeliverySection .btn-danger {
  background: #e53e3e;
  color: #fff;
  border: none;
}

html.dark-mode #externalDeliverySection .btn-danger:hover,
html.dark-mode #internalDeliverySection .btn-danger:hover {
  background: #c53030;
}

/* ===== TOGGLE SWITCH ===== */

html.dark-mode #externalDeliverySection .slider,
html.dark-mode #internalDeliverySection .slider {
  background-color: #484848;
}

html.dark-mode #externalDeliverySection .switch input:checked + .slider,
html.dark-mode #internalDeliverySection .switch input:checked + .slider {
  background-color: #f97316;
}

/* ===== ATTACHMENTS BOX — dark mode ===== */

html.dark-mode #attachmentsBox,
html.dark-mode #internalAttachmentsBox {
  background: #2e2e2e !important;
  border: 1.5px solid #484848 !important;
  box-shadow: none !important;
}

html.dark-mode .att-name {
  color: #e8e8e8;
}

/* Dark mode for the new security_in-style attachment widget inside internal delivery form */

html.dark-mode #internalDeliverySection .attach-card {
  background: #1c1c1c;
  border-color: #f97316;
}

html.dark-mode #internalDeliverySection .attach-box {
  background: #2e2e2e;
  border-color: #f97316;
}

html.dark-mode #internalDeliverySection .sec-attach-label {
  color: #f97316;
}

html.dark-mode #internalDeliverySection .sec-empty-text   {
  color: #666666;
}

html.dark-mode #internalDeliverySection .file-row         {
  border-bottom-color: #333;
}

html.dark-mode #internalDeliverySection .file-row:hover   {
  background: rgba(249,115,22,0.07);
}

html.dark-mode #internalDeliverySection .file-row span    {
  color: #e0e0e0;
}

html.dark-mode #internalDeliverySection .attach-btn.blue {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 3px 8px rgba(249,115,22,0.3);
}

html.dark-mode #internalDeliverySection .attach-btn.blue:hover  {
  background: #ea6c0a;
}

html.dark-mode #internalDeliverySection .attach-btn.blue:disabled {
  background: #7a4010;
  cursor: not-allowed;
  box-shadow: none;
}

html.dark-mode #internalDeliverySection .attach-btn.grey {
  background: #484848;
}

html.dark-mode #internalDeliverySection .attach-btn.grey:hover {
  background: #555555;
}

html.dark-mode #internalDeliverySection .attach-btn.red  {
  background: #e53e3e;
}

html.dark-mode #internalDeliverySection .attach-btn.red:hover  {
  background: #c53030;
}

html.dark-mode #materialsTable th:last-child,
html.dark-mode #internalMaterialsTable th:last-child {
  border-right: none;
}

html.dark-mode #internalMaterialsTable tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

/* ===== MATERIALS CONTAINER + SCROLL WRAPPER ===== */

html.dark-mode .materials-container {
  border-color: #f97316;
}

html.dark-mode .materials-scroll-wrapper {
  background: #1c1c1c;
  border-radius: 6px;
}

/* ===== LPO SPECIAL STATES ===== */

html.dark-mode #externalDeliverySection input.lpo-readonly {
  background-color: #2a2000 !important;
  border-color: #5a4000 !important;
  color: #d4a800 !important;
}

/* ===== ERROR / SUCCESS / HINT ===== */

html.dark-mode #externalDeliverySection .error,
html.dark-mode #internalDeliverySection .error {
  color: #f87171;
}

html.dark-mode #externalDeliverySection .success,
html.dark-mode #internalDeliverySection .success {
  color: #4ade80;
}

html.dark-mode .form-hint-text {
  color: #999999;
}

/* ===== FORM TOAST ===== */

html.dark-mode .form-toast {
  background-color: #2a2a2a;
  color: #f0f0f0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

/* ================================================================
   DELIVERY FORM COMPONENTS DARK MODE — delivery_management.css
   Chooser icon, sticky form footer, plate preview, head-office notice.
   ================================================================ */

/* ============================================================
   DELIVERY FORM NEW COMPONENTS — dark.css (Phase 3 stays)
   Chooser icon, sticky form footer, plate preview,
   head-office notice.
   ============================================================ */

/* ── Chooser icon ── */

html.dark-mode .chooser-icon {
  color: #f97316;
}

/* ── Sticky form footer ── */

html.dark-mode .form-action-footer {
  background: #1e1e1e !important;
  border-top-color: #2a2a2a !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.4) !important;
}

html.dark-mode .form-action-info {
  color: #666666;
}

/* ── Plate preview ── */

html.dark-mode .plate-preview-wrap {
  background: #0c1a2e !important;
  border-color: #1e3a5f !important;
}

html.dark-mode .plate-preview-label {
  color: #555555;
}

html.dark-mode .plate-preview-badge {
  color: #93c5fd;
}

/* ── Head Office notice dark mode ── */

html.dark-mode .head-office-notice {
  background: #0c1a2e !important;
  border-color: #1e3a5f !important;
  color: #93c5fd !important;
}

html.dark-mode .head-office-notice svg {
  color: #60a5fa !important;
}

/* ================================================================
   DELIVERY TRACKING & EDIT REQUEST — Styles from inline blocks
   ================================================================ */

/* ── dn_tracking.php ── */

/* ── Tracking-specific additions that extend the standard system ── */

/* Page header — matches qc-header-gradient used in grn/review pages */

/* Search bar inside a qc-section */

.track-search-row input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid #d8dde6;
  border-radius: 9px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: #1e293b;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.track-search-row input[type="text"]:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.track-search-row .btn-search {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s;
}

.track-search-row .btn-search:hover {
  opacity: 0.9;
}

.track-search-row .btn-back {
  padding: 10px 16px;
  border-radius: 9px;
  background: transparent;
  color: #007BFF;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1.5px solid #007BFF;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.track-search-row .btn-back:hover {
  background: #007BFF;
  color: #fff;
}

/* Summary info grid (single DN view) — matches .info grid pattern */

.track-summary-item strong {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.track-summary-item span {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

/* Status / type / GPS badges — reuse readonly-pill where possible */

/* Progress tracker */

.tracker-wrap   {
  margin: 32px 8px 8px;
  position: relative;
}

.tracker        {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.tracker::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50px;
  right: 50px;
  height: 4px;
  background: #e0e7ff;
  z-index: 1;
}

.tracker-progress {
  position: absolute;
  top: 18px;
  left: 50px;
  height: 4px;
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  z-index: 2;
  transition: width 0.8s ease;
}

.tracker-step         {
  position: relative;
  text-align: center;
  flex: 1;
  z-index: 3;
}

.tracker-circle {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #e0e7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.tracker-step.completed .tracker-circle {
  background: linear-gradient(135deg, #007BFF, #00BFFF);
}

.tracker-step.current   .tracker-circle {
  background: #00BFFF;
  animation: pulse 1.5s infinite;
}

.tracker-step-label {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 3px;
}

.tracker-step-date  {
  font-size: 10px;
  color: #6b7280;
}

@keyframes pulse {
  0%   {
    transform: scale(1);
    box-shadow: 0 0 0 0    rgba(0,191,255,0.6);
  }

  50%  {
    transform: scale(1.06);
    box-shadow: 0 0 0 10px rgba(0,191,255,0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0    rgba(0,191,255,0);
  }
}

/* Transit time colours */

/* Live map button — matches qc-filter-btn style */

/* Empty state */

.track-empty .icon {
  font-size: 36px;
  display: block;
  margin-bottom: 10px;
}

/* Inline map */

#mapContainer {
  display: none;
}

#mapFrame {
  width: 100%;
  height: 480px;
  border: 1px solid #e0e7ff;
  border-radius: 10px;
}

/* Section title bar inside a qc-section */

/* ── Dark mode overrides ── */

html.dark-mode .track-summary-item,
        [data-theme="dark"] .track-summary-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

html.dark-mode .track-summary-item strong,
        [data-theme="dark"] .track-summary-item strong {
  color: #94a3b8;
}

html.dark-mode .track-summary-item span,
        [data-theme="dark"] .track-summary-item span   {
  color: #f1f5f9;
}

html.dark-mode .tracker::before,
        [data-theme="dark"] .tracker::before            {
  background: rgba(255,255,255,0.1);
}

html.dark-mode .tracker-circle,
        [data-theme="dark"] .tracker-circle             {
  background: rgba(255,255,255,0.08);
}

html.dark-mode .tracker-step-label,
        [data-theme="dark"] .tracker-step-label         {
  color: #e2e8f0;
}

html.dark-mode .tracker-step-date,
        [data-theme="dark"] .tracker-step-date          {
  color: #94a3b8;
}

html.dark-mode .track-section-title,
        [data-theme="dark"] .track-section-title        {
  color: #e2e8f0;
}

html.dark-mode .track-count-pill,
        [data-theme="dark"] .track-count-pill           {
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
}

html.dark-mode .track-search-row input[type="text"],
        [data-theme="dark"] .track-search-row input[type="text"] {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}

html.dark-mode .track-search-row .btn-back,
        [data-theme="dark"] .track-search-row .btn-back {
  border-color: #60a5fa;
  color: #60a5fa;
}

html.dark-mode .track-search-row .btn-back:hover,
        [data-theme="dark"] .track-search-row .btn-back:hover {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}

html.dark-mode #mapFrame,
        [data-theme="dark"] #mapFrame {
  border-color: rgba(255,255,255,0.1);
}

/* Dark badge overrides */

html.dark-mode .track-badge-grey,
        [data-theme="dark"] .track-badge-grey {
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
  border-color: rgba(255,255,255,0.1);
}

html.dark-mode .track-badge-gps-no,
        [data-theme="dark"] .track-badge-gps-no {
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
  border-color: rgba(255,255,255,0.1);
}

/* ── edit_request_form.php ── */

.er-action-col {
  white-space: nowrap;
  vertical-align: middle;
  padding: 4px 6px !important;
}

.er-select-btn,
.er-change-btn,
.er-qty-input  {
  width: 80px;
  padding: 5px 7px;
  border: 1.5px solid #c5d0dc;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  text-align: right;
  -moz-appearance: textfield;
}

.er-qty-input::-webkit-outer-spin-button,
.er-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.er-qty-input:focus {
  border-color: #007BFF;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.10);
}

/* Dark mode overrides for edit request buttons — uses html.dark-mode (not body.dark) */

html.dark-mode .er-select-btn {
  background: linear-gradient(90deg, #c85a00, #f97316) !important;
  color: #fff !important;
  border: none !important;
}

html.dark-mode .er-select-btn:hover {
  background: linear-gradient(90deg, #b35000, #ea6c0a) !important;
}

html.dark-mode .er-change-btn {
  background: #252525 !important;
  color: #a0a0a0 !important;
  border: 1.5px solid #3a3a3a !important;
}

html.dark-mode .er-change-btn:hover {
  background: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #555555 !important;
}

html.dark-mode .er-remove-btn {
  background: #2d0a0a !important;
  color: #f87171 !important;
  border: 1.5px solid #7f1d1d !important;
}

html.dark-mode .er-remove-btn:hover {
  background: #3d1010 !important;
  border-color: #991b1b !important;
}

html.dark-mode .er-qty-input {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

html.dark-mode .er-qty-input:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

html.dark-mode .er-sn-col {
  color: #888888;
}

/* ================================================================
   DELIVERY CHOOSER PAGE (new_delivery.php)
   Styles extracted from light.css Phase 4
   ================================================================ */

/* ===== CHOOSER PAGE ===== */

.iframe-wrapper {
  width: 100%;
  height: calc(100vh - 120px);
  border: none;
}

/* ── DARK MODE — Delivery Chooser ─────────────────────────── */

/* ===== CHOOSER ===== */

html.dark-mode .chooser-container {
  background: #141414;
}

html.dark-mode .chooser-card {
  background: #1e1e1e;
  border: 2px solid #f97316;
  box-shadow: 0 4px 14px rgba(249,115,22,0.18);
  color: #ffffff;
}

html.dark-mode .chooser-card:hover {
  border-color: #fb923c;
  box-shadow: 0 12px 28px rgba(249,115,22,0.30);
  background: #252525;
}

html.dark-mode .chooser-title {
  color: #ffffff;
}

html.dark-mode .chooser-desc {
  color: #999999;
}

/* ================================================================
   FILTER ACTION BAR + FILTER MODAL + LOC-SEARCH WIDGET
   Shared component — delivery management pages use delivery_management.css
   so these components must live here too (not only in workflow.css).
   ================================================================ */

/* ── Action bar ─────────────────────────────────────────────── */

/* ── Filter button ──────────────────────────────────────────── */

.qc-filter-btn svg {
  flex-shrink: 0;
}

/* ── Filter modal overlay ───────────────────────────────────── */

/* ── Filter modal card ──────────────────────────────────────── */

@keyframes dmFilterIn {
  from {
    transform: scale(0.96) translateY(8px);
    opacity: 0;
  }

  to   {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ── Filter modal body ──────────────────────────────────────── */

.qc-filter-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qc-filter-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.qc-filter-row label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.qc-filter-row select,
.qc-filter-row input[type="text"],
.qc-filter-row input[type="date"] {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.qc-filter-row input[type="text"] {
  cursor: text;
}

.qc-filter-row select:hover,
.qc-filter-row input[type="text"]:hover,
.qc-filter-row input[type="date"]:hover {
  border-color: #a5b4fc;
}

.qc-filter-row select:focus,
.qc-filter-row input[type="text"]:focus,
.qc-filter-row input[type="date"]:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
  background-color: #fff;
}

/* ── Searchable location widget inside filter row ───────────── */

.qc-filter-row .loc-search-display {
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qc-filter-row .loc-search-display:hover {
  border-color: #a5b4fc;
}

.qc-filter-row .loc-search-open .loc-search-display,
.qc-filter-row .loc-search-display:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
  background-color: #fff;
}

.qc-filter-row .loc-search-placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.qc-filter-row .loc-search-selected {
  color: #1e293b;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qc-filter-row .loc-search-arrow {
  font-size: 11px;
  color: #6b7280;
}

/* ── Filter modal footer ────────────────────────────────────── */

/* ── Empty state ────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
  font-size: 14px;
}

.empty-state .icon {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
}

.empty-state p {
  margin: 0;
}

/* ── DARK MODE — Filter modal + action bar + loc-search ─────── */

html.dark-mode .qc-filter-btn {
  background: #1e1e1e;
  border-color: #383838;
  color: #d0d0d0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

html.dark-mode .qc-filter-btn:hover {
  background: #2a2a2a;
  border-color: #007BFF;
  color: #ffffff;
}

html.dark-mode .qc-filter-badge {
  background: #007BFF;
}

html.dark-mode .qc-filter-row label {
  color: #aaaaaa;
}

html.dark-mode .qc-filter-row select,
html.dark-mode .qc-filter-row input[type="text"],
html.dark-mode .qc-filter-row input[type="date"] {
  background: #2a2a2a;
  border-color: #383838;
  color: #e0e0e0;
}

html.dark-mode .qc-filter-row select:hover,
html.dark-mode .qc-filter-row input[type="text"]:hover,
html.dark-mode .qc-filter-row input[type="date"]:hover {
  border-color: #007BFF;
}

html.dark-mode .qc-filter-row select:focus,
html.dark-mode .qc-filter-row input[type="text"]:focus,
html.dark-mode .qc-filter-row input[type="date"]:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.18);
  background: #1e1e1e;
}

html.dark-mode .qc-filter-row .loc-search-display {
  background: #2a2a2a;
  border-color: #383838;
  color: #e0e0e0;
}

html.dark-mode .qc-filter-row .loc-search-display:hover {
  border-color: #007BFF;
}

html.dark-mode .qc-filter-row .loc-search-open .loc-search-display,
html.dark-mode .qc-filter-row .loc-search-display:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.18);
  background: #1e1e1e;
}

html.dark-mode .qc-filter-row .loc-search-placeholder {
  color: #666666;
}

html.dark-mode .qc-filter-row .loc-search-selected {
  color: #e0e0e0;
}

html.dark-mode .loc-search-dropdown {
  background: #1e1e1e;
  border-color: #383838;
}

html.dark-mode .loc-search-input-wrap {
  border-bottom-color: #2a2a2a;
}

html.dark-mode .loc-search-input {
  background: #2a2a2a;
  border-color: #383838;
  color: #e0e0e0;
}

html.dark-mode .loc-search-input:focus {
  border-color: #007BFF;
  background: #1e1e1e;
}

html.dark-mode .loc-search-item:hover {
  background: #1a2a40;
}

html.dark-mode .loc-search-code {
  color: #60a5fa;
  background: #1a2a40;
  border-color: #1e3a5f;
}

html.dark-mode .loc-search-name {
  color: #d0d0d0;
}

html.dark-mode .loc-search-loading,
html.dark-mode .loc-search-empty {
  color: #555555;
}

html.dark-mode .empty-state {
  color: #555555;
}

html.dark-mode .empty-state p {
  color: #555555;
}

/* ================================================================
   REDESIGN — delivery_management.css
   Modern page header, table, card, and button components.
   Used by: active_requests.php, edit_request_queue.php,
            edit_request_review.php, dn_tracking.php
   ================================================================ */

/* ── Shared component imports from workflow.css ─────────────────
   qc-section, qc-table, qc-header-*, pill, back-btn, btn-open
   are defined in workflow.css but also needed here.
   Below are self-contained equivalents for delivery_management pages.
   ─────────────────────────────────────────────────────────────── */

/* ── Page Header ────────────────────────────────────────────── */

.dm-page-header__sub strong {
  color: #007BFF;
  font-weight: 700;
}

/* ── Card wrapper ───────────────────────────────────────────── */

/* ── Table wrapper ──────────────────────────────────────────── */

/* ── Main data table ────────────────────────────────────────── */

/* Table header */

.dm-table thead th {
  background: #0f172a;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 16px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255,255,255,0.06);
  border-right: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

.dm-table thead th:last-child {
  border-right: none;
}

.dm-table thead th.dm-th-actions {
  text-align: center;
  min-width: 120px;
}

/* Table body rows */

.dm-table tbody tr {
  transition: background 0.12s ease;
}

.dm-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #f1f5f9;
}

.dm-table tbody tr:hover td {
  background: #f0f7ff;
}

.dm-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

.dm-table tbody tr:nth-child(even):hover td {
  background: #f0f7ff;
}

.dm-table td {
  padding: 13px 16px;
  vertical-align: middle;
  color: #334155;
}

/* DN number cell */

/* Type badge */

/* Edit number cell */

/* Role pill */

/* Status pill (stage at request) */

/* Reason + date cells */

/* ── Actions column — stacked vertically ────────────────────── */

/* ── Universal button base ──────────────────────────────────── */

.dm-btn svg {
  flex-shrink: 0;
}

/* View — solid blue */

/* Edit Request — amber */

/* Cancel — red outline */

/* Review — teal/indigo */

/* Neutral/back — ghost */

/* Approve — green */

/* Reject — red */

/* ── Status / note cells ────────────────────────────────────── */

/* ── Empty state ────────────────────────────────────────────── */

/* ── Back button (edit_request_review.php) ──────────────────── */

/* ── Decision bar (edit_request_review.php) ─────────────────── */

/* ── Edit history badge button ──────────────────────────────── */

.edit-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #c2410c;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.edit-badge-btn:hover {
  background: #fed7aa;
  border-color: #fb923c;
}

/* ================================================================
   DARK MODE — new DM components
   Matches the operational dark mode palette from workflow.css:
     Surfaces:     #1e1e1e / #2a2a2a
     Accent:       #f97316 (orange)
     Table header: linear-gradient(90deg, #c85a00, #f97316)
     Text:         #e0e0e0
     Hover rows:   rgba(249,115,22,0.07)
   ================================================================ */

/* ── Page header ────────────────────────────────────────────── */

html.dark-mode .dm-page-header {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

html.dark-mode .dm-page-header__icon {
  background: linear-gradient(135deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(249,115,22,0.30);
}

html.dark-mode .dm-page-header__title {
  color: #e0e0e0;
}

html.dark-mode .dm-page-header__sub   {
  color: #888888;
}

html.dark-mode .dm-page-header__sub strong {
  color: #f97316;
}

/* ── Card ───────────────────────────────────────────────────── */

html.dark-mode .dm-card {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

/* ── Table wrapper ──────────────────────────────────────────── */

html.dark-mode .dm-table-wrapper {
  background: #1a1a1a;
  border: 1.5px solid #f97316;
  border-radius: 10px;
  overflow-x: auto;
}

/* ── Table header ───────────────────────────────────────────── */

html.dark-mode .dm-table thead tr {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode .dm-table thead th {
  background: transparent;
  color: #ffffff;
  border-right: 2px solid rgba(0,0,0,0.40);
  border-bottom: 2px solid rgba(255,255,255,0.12);
  letter-spacing: 0.06em;
}

html.dark-mode .dm-table thead th:last-child {
  border-right: none;
}

/* ── Table body ─────────────────────────────────────────────── */

html.dark-mode .dm-table tbody tr:not(:last-child) td {
  border-bottom-color: #2a2a2a;
}

html.dark-mode .dm-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

html.dark-mode .dm-table tbody tr:hover td {
  background: rgba(249,115,22,0.07);
}

html.dark-mode .dm-table td {
  color: #e0e0e0;
}

/* ── Cell-level elements ────────────────────────────────────── */

html.dark-mode .dm-dn-num {
  color: #ffffff;
}

html.dark-mode .dm-edit-num {
  color: #f97316;
}

html.dark-mode .dm-type-badge--external {
  background: rgba(249,115,22,0.10);
  color: #fdba74;
  border-color: rgba(249,115,22,0.25);
}

html.dark-mode .dm-type-badge--internal {
  background: rgba(249,115,22,0.08);
  color: #fcd34d;
  border-color: rgba(249,115,22,0.20);
}

html.dark-mode .dm-role-pill {
  background: #252525;
  color: #a0a0a0;
  border-color: #3a3a3a;
}

html.dark-mode .dm-status-pill {
  background: #2a1e00;
  color: #fcd34d;
  border-color: #5a3d00;
}

html.dark-mode .dm-td-reason {
  color: #888888;
}

html.dark-mode .dm-td-date   {
  color: #777777;
}

/* ── Buttons ────────────────────────────────────────────────── */

/* View — orange gradient (matches primary action in dark operational pages) */

html.dark-mode .dm-btn--view {
  background: linear-gradient(135deg, #c85a00, #f97316);
  box-shadow: 0 2px 8px rgba(249,115,22,0.30);
  color: #ffffff;
}

html.dark-mode .dm-btn--view:hover {
  background: linear-gradient(135deg, #b35000, #ea6c0a);
  box-shadow: 0 4px 12px rgba(249,115,22,0.50);
}

/* Edit Request — slightly darker orange to distinguish from View */

html.dark-mode .dm-btn--edit {
  background: #2a1400;
  color: #fb923c;
  border: 1.5px solid #7c3100;
}

html.dark-mode .dm-btn--edit:hover {
  background: linear-gradient(135deg, #c85a00, #f97316);
  color: #ffffff;
  border-color: #f97316;
  box-shadow: 0 4px 10px rgba(249,115,22,0.40);
}

/* Cancel Request — red (functional colour — keep distinct) */

html.dark-mode .dm-btn--cancel {
  background: #2d0a0a;
  color: #f87171;
  border-color: #7f1d1d;
}

html.dark-mode .dm-btn--cancel:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 4px 10px rgba(220,38,38,0.40);
}

/* Review — orange (primary CTA in dark mode) */

html.dark-mode .dm-btn--review {
  background: linear-gradient(135deg, #c85a00, #f97316);
  box-shadow: 0 2px 8px rgba(249,115,22,0.30);
  color: #ffffff;
}

html.dark-mode .dm-btn--review:hover {
  background: linear-gradient(135deg, #b35000, #ea6c0a);
  box-shadow: 0 4px 12px rgba(249,115,22,0.50);
}

/* Neutral/back — subtle dark button */

html.dark-mode .dm-btn--neutral {
  background: #252525;
  color: #a0a0a0;
  border-color: #3a3a3a;
}

html.dark-mode .dm-btn--neutral:hover {
  background: #2a2a2a;
  color: #e0e0e0;
  border-color: #555555;
}

/* Approve — keep green (functional: success/confirm) */

html.dark-mode .dm-btn--approve {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 2px 8px rgba(22,163,74,0.25);
}

html.dark-mode .dm-btn--approve:hover {
  background: linear-gradient(135deg, #15803d, #166534);
  box-shadow: 0 4px 12px rgba(22,163,74,0.40);
}

/* Reject — keep red (functional: danger/decline) */

html.dark-mode .dm-btn--reject {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 2px 8px rgba(220,38,38,0.25);
}

html.dark-mode .dm-btn--reject:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  box-shadow: 0 4px 12px rgba(220,38,38,0.40);
}

/* ── Status notes ───────────────────────────────────────────── */

html.dark-mode .dm-status-note {
  color: #555555;
}

html.dark-mode .dm-status-note--locked {
  background: #2a1e00;
  border-color: #b45309;
  color: #fcd34d;
}

/* ── Empty state ────────────────────────────────────────────── */

html.dark-mode .dm-empty-state {
  background: transparent;
}

html.dark-mode .dm-empty-state__icon  {
  filter: none;
}

html.dark-mode .dm-empty-state__title {
  color: #888888;
}

html.dark-mode .dm-empty-state__sub   {
  color: #555555;
}

/* ── Back button ────────────────────────────────────────────── */

html.dark-mode .dm-back-btn {
  background: #252525;
  color: #f97316;
  border-color: #444444;
}

html.dark-mode .dm-back-btn:hover {
  background: #f97316;
  color: #ffffff;
  border-color: #f97316;
}

/* ── Decision bar buttons ───────────────────────────────────── */

/* dm-btn--approve and dm-btn--reject handled above */

/* ── Edit history badge ─────────────────────────────────────── */

html.dark-mode .edit-badge-btn {
  background: #2a1400;
  color: #fb923c;
  border-color: #7c3100;
}

html.dark-mode .edit-badge-btn:hover {
  background: #3d1e00;
  border-color: #f97316;
}

/* ── Edit section header — orange in dark mode ──────────────── */

html.dark-mode .edit-section-header {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

/* ── qc-filter-btn override for delivery management pages ────── */

/* (already defined earlier; this reinforces the orange hover accent) */

html.dark-mode .qc-filter-btn:hover {
  border-color: #f97316;
  color: #f97316;
}

html.dark-mode .qc-filter-badge {
  background: #f97316;
}

/* ── dm-table-wrapper inside dm-card — orange border ─────────── */

html.dark-mode .dm-card .dm-table-wrapper {
  border: 1.5px solid #f97316;
  border-radius: 0;
}

/* ── Track page header — orange in dark mode ────────────────── */

html.dark-mode .track-page-header {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

/* ── btn-search dark override (dn_tracking.php) ─────────────── */

html.dark-mode .track-search-row .btn-search {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode .track-search-row input[type="text"]::-moz-placeholder {
  color: #666666;
}

html.dark-mode .track-search-row input[type="text"]::placeholder {
  color: #666666;
}

/* ================================================================
   DELIVERY MANAGEMENT — Targeted fixes and additions
   Covers: tv-section borders, tv-table header update,
           edit-section visibility, edit-section-hint,
           qc-section/qc-table for dn_tracking.php
   ================================================================ */

/* ── edit-section dark: visible orange-tinted borders ──────── */

html.dark-mode .edit-section {
  background: #1e1e1e;
  border: 1px solid #2e2e2e;
  border-left: 3px solid rgba(249,115,22,0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}

/* ── edit-section-hint dark ─────────────────────────────────── */

html.dark-mode .edit-section-hint {
  color: #666666;
  border-bottom-color: #2a2a2a;
}

/* ── qc-section + qc-table dark (for dn_tracking.php) ──────── */

html.dark-mode .qc-section {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

html.dark-mode .qc-header-blue {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode .qc-table-wrapper {
  background: #1a1a1a;
  border: 1.5px solid #f97316;
}

html.dark-mode table.qc-table thead tr {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode table.qc-table thead th {
  background: transparent;
  color: #ffffff;
  border-right-color: rgba(0,0,0,0.40);
  border-bottom-color: rgba(255,255,255,0.12);
}

html.dark-mode table.qc-table thead th:last-child {
  border-right: none;
}

html.dark-mode table.qc-table td {
  border-bottom-color: #2a2a2a;
  color: #e0e0e0;
}

html.dark-mode table.qc-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

html.dark-mode table.qc-table tbody tr:hover td {
  background: rgba(249,115,22,0.07);
}

html.dark-mode .pill {
  background: #2a2a2a;
  border-color: #444444;
  color: #f97316;
}

/* ================================================================
   CHOOSER PAGE — Updated layout & cards
   ================================================================ */

/* Remove old background that clashed with layout */

/* Fixed-size cards — overflow:hidden so ripple doesn't escape */

/* Icon, title, desc — use z-index so ripple renders below text */

/* ================================================================
   QC DECISION MODAL — fully styled
   ================================================================ */

@keyframes qcDecisionPop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }

  to   {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.qc-decision-question strong {
  color: #1e293b;
}

.qc-decision-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qc-decision-choice.selected {
  border-color: #007BFF;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
}

.qc-decision-choice.\!selected {
  border-color: #007BFF !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12) !important;
}

.qc-decision-btn--continue:hover:not(:disabled) {
  background: linear-gradient(90deg, #0056b3, #009fdd);
  box-shadow: 0 4px 14px rgba(0,123,255,0.35);
  transform: translateY(-1px);
}

/* ================================================================
   DARK MODE — Chooser + QC Decision Modal
   ================================================================ */

html.dark-mode .chooser-container {
  background: transparent;
}

html.dark-mode .chooser-card {
  background: #1e1e1e;
  border-color: #f97316;
  box-shadow: 0 4px 18px rgba(249,115,22,0.18);
  color: #ffffff;
}

html.dark-mode .chooser-card:hover {
  border-color: #fb923c;
  box-shadow: 0 14px 32px rgba(249,115,22,0.30);
  background: #252525;
}

html.dark-mode .chooser-icon  {
  color: #f97316;
}

html.dark-mode .chooser-title {
  color: #ffffff;
}

html.dark-mode .chooser-desc  {
  color: #888888;
}

/* QC modal dark */

html.dark-mode .qc-decision-overlay {
  background: rgba(0,0,0,0.75);
}

html.dark-mode .qc-decision-card {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65);
}

html.dark-mode .qc-decision-header {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode .qc-decision-body {
  background: #1e1e1e;
}

html.dark-mode .qc-decision-question {
  color: #c0c0c0;
}

html.dark-mode .qc-decision-question strong {
  color: #e0e0e0;
}

html.dark-mode .qc-decision-choice {
  background: #252525;
  border-color: #3a3a3a;
}

html.dark-mode .qc-decision-choice:hover {
  border-color: #f97316;
  background: #2a1400;
}

html.dark-mode .qc-decision-choice.selected {
  border-color: #f97316;
  background: rgba(249,115,22,0.10);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

html.dark-mode .qc-decision-choice.\!selected {
  border-color: #f97316 !important;
  background: rgba(249,115,22,0.10) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important;
}

html.dark-mode .qc-choice-label {
  color: #e0e0e0;
}

html.dark-mode .qc-choice-desc  {
  color: #666666;
}

html.dark-mode .qc-decision-footer {
  border-top-color: #2a2a2a;
}

html.dark-mode .qc-decision-btn--cancel {
  background: #252525;
  border-color: #3a3a3a;
  color: #a0a0a0;
}

html.dark-mode .qc-decision-btn--cancel:hover {
  background: #2a2a2a;
  color: #e0e0e0;
}

html.dark-mode .qc-decision-btn--continue {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 3px 10px rgba(249,115,22,0.30);
}

html.dark-mode .qc-decision-btn--continue:hover:not(:disabled) {
  background: linear-gradient(90deg, #b35000, #ea6c0a);
  box-shadow: 0 4px 14px rgba(249,115,22,0.45);
}

html.dark-mode .qc-decision-btn--continue:disabled {
  opacity: 0.35;
}

/* ── dm-page-header QC badge (internal form) dark mode ──────── */

html.dark-mode .dm-page-header__sub strong {
  color: #f97316;
}

/* ================================================================
   UNIFIED QC MODAL — new_delivery.php now uses the same
   qc-modal-overlay / qc-modal-card / choice-row / btn-action
   classes as storekeeper_review.php (workflow.css).
   These rules are copied verbatim so both pages render identically
   regardless of which CSS file they load.
   ================================================================ */

.qc-modal-overlay.active {
  display: flex;
}

.qc-modal-overlay.\!active {
  display: flex !important;
}

@keyframes qcModalIn {
  from {
    transform: scale(0.95) translateY(10px);
    opacity: 0;
  }

  to   {
    transform: scale(1)    translateY(0);
    opacity: 1;
  }
}

.qc-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.qc-question strong {
  color: #007BFF;
}

.choice-row.selected {
  border-color: #007BFF;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
}

.choice-row.\!selected {
  border-color: #007BFF !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12) !important;
}

.choice-row input  {
  display: none;
}

.choice-row:hover   .btn-select {
  background: #eff6ff;
}

.choice-row.selected .btn-select {
  background: #007BFF;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,123,255,0.30);
}

.choice-row.\!selected .btn-select {
  background: #007BFF !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,123,255,0.30) !important;
}

.btn-action.cancel {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.btn-action.cancel:hover {
  background: #e5e7eb;
  color: #111827;
}

.btn-action.confirm {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

.btn-action.\!confirm {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

.btn-action.confirm.ready {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,123,255,0.25);
}

.btn-action.\!confirm.ready {
  background: linear-gradient(90deg, #007BFF, #00BFFF) !important;
  color: #fff !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(0,123,255,0.25) !important;
}

.btn-action.confirm.ready:hover {
  background: linear-gradient(90deg, #0056b3, #0099dd);
  transform: translateY(-1px);
}

.btn-action.\!confirm.ready:hover {
  background: linear-gradient(90deg, #0056b3, #0099dd) !important;
  transform: translateY(-1px) !important;
}

/* Dark mode — unified QC modal */

html.dark-mode .qc-modal-overlay  {
  background: rgba(0,0,0,0.70);
}

html.dark-mode .qc-modal-card     {
  background: #1e1e1e;
  box-shadow: 0 20px 60px rgba(0,0,0,0.60);
}

html.dark-mode .qc-modal-header   {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode .qc-question       {
  color: #d0d0d0;
}

html.dark-mode .qc-question strong {
  color: #f97316;
}

html.dark-mode .choice-row        {
  background: #252525;
  border-color: #3a3a3a;
}

html.dark-mode .choice-row:hover  {
  border-color: #f97316;
  background: rgba(249,115,22,0.08);
}

html.dark-mode .choice-row.selected {
  border-color: #f97316;
  background: rgba(249,115,22,0.10);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

html.dark-mode .choice-row.\!selected {
  border-color: #f97316 !important;
  background: rgba(249,115,22,0.10) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important;
}

html.dark-mode .btn-select        {
  background: #2a2a2a;
  border-color: #f97316;
  color: #f97316;
}

html.dark-mode .choice-row:hover   .btn-select {
  background: rgba(249,115,22,0.12);
}

html.dark-mode .choice-row.selected .btn-select {
  background: #f97316;
  color: #fff;
  box-shadow: 0 2px 6px rgba(249,115,22,0.35);
}

html.dark-mode .choice-row.\!selected .btn-select {
  background: #f97316 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(249,115,22,0.35) !important;
}

html.dark-mode .choice-desc       {
  color: #888888;
}

html.dark-mode .qc-modal-actions  {
  border-top-color: #2a2a2a;
}

html.dark-mode .btn-action.cancel {
  background: #252525;
  border-color: #3a3a3a;
  color: #a0a0a0;
}

html.dark-mode .btn-action.cancel:hover {
  background: #2e2e2e;
  color: #e0e0e0;
}

html.dark-mode .btn-action.confirm      {
  background: #2a2a2a;
  color: #555555;
}

html.dark-mode .btn-action.\!confirm      {
  background: #2a2a2a !important;
  color: #555555 !important;
}

html.dark-mode .btn-action.confirm.ready {
  background: linear-gradient(90deg, #c85a00, #f97316);
  color: #fff;
  box-shadow: 0 3px 10px rgba(249,115,22,0.30);
}

html.dark-mode .btn-action.\!confirm.ready {
  background: linear-gradient(90deg, #c85a00, #f97316) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(249,115,22,0.30) !important;
}

html.dark-mode .btn-action.confirm.ready:hover {
  background: linear-gradient(90deg, #b35000, #ea6c0a);
}

html.dark-mode .btn-action.\!confirm.ready:hover {
  background: linear-gradient(90deg, #b35000, #ea6c0a) !important;
}

/* ================================================================
   EDIT REQUEST CONFIRMATION MODAL  (Phase 6)
   Replaces the native confirm() dialog on edit_request_review.php.
   Follows the qc-modal-overlay / er-confirm pattern.
   ================================================================ */

/* Overlay */

.er-confirm-overlay.active {
  display: flex;
}

.er-confirm-overlay.\!active {
  display: flex !important;
}

/* Card */

@keyframes erModalIn {
  from {
    transform: scale(0.95) translateY(10px);
    opacity: 0;
  }

  to   {
    transform: scale(1)    translateY(0);
    opacity: 1;
  }
}

/* Header — colour applied dynamically by JS */

.er-confirm-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

/* Body */

/* DN / Edit identification row */

/* Change summary line */

/* Remarks */

/* Footer */

/* ── Dark mode ───────────────────────────────────────────────── */

html.dark-mode .er-confirm-overlay {
  background: rgba(0,0,0,0.70);
}

html.dark-mode .er-confirm-card {
  background: #1e1e1e;
  box-shadow: 0 20px 60px rgba(0,0,0,0.60);
}

html.dark-mode .er-confirm-header--approve {
  background: linear-gradient(90deg, #14532d, #16a34a);
}

html.dark-mode .er-confirm-header--reject  {
  background: linear-gradient(90deg, #7f1d1d, #b91c1c);
}

html.dark-mode .er-confirm-dn-badge {
  background: #1e3a5f;
  color: #93c5fd;
  border-color: #1e40af;
}

html.dark-mode .er-confirm-dn-edit  {
  color: #d0d0d0;
}

html.dark-mode .er-confirm-dn-req   {
  color: #444444;
}

html.dark-mode .er-confirm-summary  {
  background: #252525;
  border-color: #2a2a2a;
  color: #b0b0b0;
}

html.dark-mode .er-confirm-label    {
  color: #888888;
}

html.dark-mode .er-confirm-optional {
  color: #444444;
}

html.dark-mode .er-confirm-textarea {
  background: #252525;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

html.dark-mode .er-confirm-textarea:focus {
  border-color: #f97316;
  background: #2a2a2a;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}

html.dark-mode .er-confirm-remarks-err {
  color: #fca5a5;
}

html.dark-mode .er-confirm-footer {
  border-top-color: #2a2a2a;
}

/* ================================================================
   workflow.css — Operational Workflow Module
   Covers: storekeeper_review.php, storekeeper_decision.php,
           storekeeper_material_entry.php, storekeeper_grn.php,
           qc_pending.php, qc_inspection.php,
           security_pending.php, security_out.php, security_in.php,
           return_request.php, return_pending_external.php,
           return_qc_check.php, return_security_check.php,
           success_message.php

   Light theme structure is in light.css (global shell).
   Module-specific selectors here.
   Dark-mode overrides at the bottom use html.dark-mode scoping.
   ================================================================ */

/* ============================================================
   SECTION: STOREKEEPER PAGES
   Covers: storekeeper_review.php, storekeeper_review_internal.php,
           storekeeper_decision.php, storekeeper_decision_internal.php,
           storekeeper_material_entry.php, storekeeper_grn.php,
           success_message.php
   ============================================================ */

/* ===== PAGE BASE ===== */

/* ===== SECTION CARD ===== */

/* ===== SECTION HEADERS ===== */

/* Standard gradient header — used in decision/material/internal pages */

/* Solid blue — used in list pages (review, review_internal, grn list) */

/* Gradient — used in grn form view */

/* ===== INFO GRID ===== */

.info {
  background: #f1f6ff;
  border-radius: 12px;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 12px 24px;
}

.label {
  color: #0b61ff;
  font-weight: 700;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

.\!val {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.val {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}

.muted {
  font-size: 12px;
  color: #6b7280;
}

/* ===== DETAILS GRID (GRN page) ===== */

.details {
  background: #f1f5ff;
  padding: 15px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}

.details strong {
  color: #007BFF;
  font-weight: 600;
}

/* ===== PILLS & CHIPS ===== */

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #dbe3ff;
  color: #0b61ff;
  font-size: 12px;
  vertical-align: middle;
  font-weight: 600;
  white-space: nowrap;
}

.readonly-pill.verify {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bdf0d2;
}

.readonly-pill.\!verify {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bdf0d2 !important;
}

.readonly-pill.reject {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.readonly-pill.\!reject {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

/* ===== QC BLOCK (internal decision) ===== */

.qc-option input {
  display: none;
}

.qc-option input:checked + .qc-chip.qc-yes {
  background: linear-gradient(90deg, #16a34a, #22c55e);
  color: #fff;
  border-color: #16a34a;
}

.qc-option input:checked + .qc-chip.qc-no {
  background: linear-gradient(90deg, #6b7280, #4b5563);
  color: #fff;
  border-color: #4b5563;
}

/* ===== DECISION CHOICES ===== */

.choice {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.choice input[type=radio] {
  display: none;
}

.choice input[value="VERIFY"]:checked + .chip-label,
.choice input[value="VERIFY"]:checked + .chip {
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color: #fff;
  border-color: #16a34a;
  box-shadow: 0 3px 8px rgba(34,197,94,0.3);
}

.choice input[value="REJECT"]:checked + .chip-label,
.choice input[value="REJECT"]:checked + .chip {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  color: #fff;
  border-color: #dc2626;
  box-shadow: 0 3px 8px rgba(239,68,68,0.3);
}

/* ===== TABLES ===== */

table.qc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  min-width: 600px;
}

.sk-table,
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.qc-section thead tr th,
.tbl-wrap thead tr th,
table.qc-table thead th {
  background: linear-gradient(90deg, #007bff, #00bfff);
  color: #fff;
  padding: 12px 15px;
  border: none;
  border-right: 2px solid rgba(255,255,255,0.9);
  border-bottom: 2px solid rgba(255,255,255,0.15);
  text-align: left;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

.qc-section thead tr th:last-child,
.tbl-wrap thead tr th:last-child,
table.qc-table thead th:last-child {
  border-right: none;
}

.list-view table.qc-table thead th {
  background: #0091FF;
  border-right: 2px solid rgba(255,255,255,0.9);
  text-align: center;
}

.list-view table.qc-table thead th:last-child {
  border-right: none;
}

.form-view table.qc-table thead th {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
}

.qc-section tbody tr td,
.tbl-wrap tbody tr td {
  padding: 11px 12px;
  border-bottom: 1px solid #e0e7ff;
  vertical-align: middle;
}

table.qc-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e0e7ff;
  vertical-align: middle;
}

.list-view table.qc-table td {
  text-align: center;
}

.list-view table.qc-table td:first-child {
  color: #007BFF;
  font-weight: 600;
  text-align: left;
  padding-left: 20px;
}

.qc-section tbody tr:nth-child(even),
.tbl-wrap tbody tr:nth-child(even),
table.qc-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.qc-section tbody tr:hover td,
.tbl-wrap tbody tr:hover td,
table.qc-table tbody tr:hover {
  background: #eff6ff;
}

/* Table column helpers */

/* ===== INPUTS ===== */

.req-hint    {
  font-size: 11px;
  color: #dc3545;
  margin-top: 4px;
  font-style: italic;
  display: none;
  padding-left: 4px;
}

input.qty-input {
  width: 100px;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
}

input.text-input,
textarea.text-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: #f8fafc;
  color: #1e293b;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.text-input:focus {
  border-color: #007BFF;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

textarea.text-input::-moz-placeholder {
  color: #94a3b8;
}

textarea.text-input::placeholder {
  color: #94a3b8;
}

/* ── Storekeeper decision / review remarks ── */

textarea.row-remark {
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  background: #f8fafc;
  color: #1e293b;
  box-sizing: border-box;
  display: block;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.row-remark:focus {
  border-color: #007BFF;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

textarea.row-remark::-moz-placeholder {
  color: #94a3b8;
}

textarea.row-remark::placeholder {
  color: #94a3b8;
}

/* QC inspection fail-reason / review-comment textareas now styled via
   Tailwind tokens (bg-card-2/border-input) on qc/inspection.php — legacy
   un-layered rules removed so the token utilities win in dark mode. */

/* LPO block */

.lpo-input {
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  min-width: 280px;
  color: #854d0e;
}

.lpo-input:focus {
  border-color: #007BFF;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* ================================================================
   SUB-PANEL TABS — underline strip (New / Returned from QC / Locked)
   Clean text tabs with bottom border indicator + inline count chip
   ================================================================ */

.toggle-btn span.icon {
  font-size: 14px;
  line-height: 1;
}

.toggle-btn:hover:not(.active) {
  color: #007BFF;
}

.toggle-btn.active {
  color: #007BFF;
  font-weight: 700;
  border-bottom-color: #007BFF;
  background: transparent;
  box-shadow: none;
}

.toggle-btn.\!active {
  color: #007BFF !important;
  font-weight: 700 !important;
  border-bottom-color: #007BFF !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Inline count chip inside toggle-btn */

.toggle-btn.active .tab-count-chip {
  background: #007BFF;
  color: #ffffff;
}

.toggle-btn.\!active .tab-count-chip {
  background: #007BFF !important;
  color: #ffffff !important;
}

.toggle-btn.active .tab-count-chip--danger {
  background: #ef4444;
  color: #ffffff;
}

.toggle-btn.\!active .tab-count-chip--danger {
  background: #ef4444 !important;
  color: #ffffff !important;
}

.tab-pane.active {
  display: block;
}

.tab-pane.\!active {
  display: block !important;
}

/* Dark mode */

html.dark-mode .toggle-bar {
  border-bottom-color: #2a2a2a;
}

html.dark-mode .toggle-btn {
  color: #555555;
}

html.dark-mode .toggle-btn:hover:not(.active) {
  color: #f97316;
}

html.dark-mode .toggle-btn.active {
  color: #f97316;
  border-bottom-color: #f97316;
}

html.dark-mode .toggle-btn.\!active {
  color: #f97316 !important;
  border-bottom-color: #f97316 !important;
}

html.dark-mode .tab-count-chip {
  background: #2a2a2a;
  color: #888888;
}

html.dark-mode .toggle-btn.active .tab-count-chip {
  background: #f97316;
  color: #ffffff;
}

html.dark-mode .toggle-btn.\!active .tab-count-chip {
  background: #f97316 !important;
  color: #ffffff !important;
}

html.dark-mode .tab-count-chip--danger {
  background: #2d0a0a;
  color: #f87171;
}

html.dark-mode .toggle-btn.active .tab-count-chip--danger {
  background: #ef4444;
  color: #ffffff;
}

html.dark-mode .toggle-btn.\!active .tab-count-chip--danger {
  background: #ef4444 !important;
  color: #ffffff !important;
}

/* ===== BUTTONS ===== */

/* .btn base and .btn.primary/.btn.cancel are defined in the original light.css section above */

.\!btn.blue {
  background: #007BFF !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(0,123,255,0.25) !important;
}

.btn.blue {
  background: #007BFF;
  color: #fff;
  border: none;
  box-shadow: 0 3px 10px rgba(0,123,255,0.25);
}

.\!btn.blue:hover {
  background: #0056b3 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,123,255,0.35) !important;
}

.btn.blue:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,123,255,0.35);
}

.\!btn.blue:disabled {
  background: #a8c7f5 !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

.btn.blue:disabled {
  background: #a8c7f5;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

.\!btn.grey {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
}

.btn.grey {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid #cbd5e1;
}

.\!btn.grey:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.btn.grey:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.\!btn.red {
  background: #ef4444 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(239,68,68,0.25) !important;
}

.btn.red {
  background: #ef4444;
  color: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(239,68,68,0.25);
}

.\!btn.red:hover {
  background: #dc2626 !important;
  transform: translateY(-1px) !important;
}

.btn.red:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.\!btn.sk-primary {
  background: linear-gradient(90deg, #22c55e, #16a34a) !important;
  box-shadow: 0 4px 12px rgba(34,197,94,0.3) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 9px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn.sk-primary {
  background: linear-gradient(90deg, #22c55e, #16a34a);
  box-shadow: 0 4px 12px rgba(34,197,94,0.3);
  border: none;
  border-radius: 12px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.\!btn.sk-primary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.btn.sk-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.\!btn.secondary {
  background: #f0f4ff !important;
  color: #0b61ff !important;
  border: 1px solid #bcd3ff !important;
}

.btn.secondary {
  background: #f0f4ff;
  color: #0b61ff;
  border: 1px solid #bcd3ff;
}

.\!btn.sm {
  padding: 8px 14px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
}

.btn.sm {
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 14px;
}

/* Reject reason readonly input */

.reject-reason[readonly],
.reject-reason-readonly {
  background: #f1f5f9 !important;
  color: #94a3b8;
}

.reject-reason:not([readonly]):not(.reject-reason-readonly) {
  background: #fff !important;
  color: #1e293b;
}

.btn-submit.sm {
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 14px;
}

/* ===== TOOLBAR / ACTIONS ===== */

.actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* ===== ATTACHMENTS ===== */

.attach {
  background: #f9fbff;
  border: 1.5px solid #dbeafe;
  border-radius: 14px;
  padding: 16px;
}

.attach-box:empty::before {
  content: "No files selected.";
  color: #94a3b8;
  font-size: 13px;
}

#filesBox {
  height: 150px;
  overflow-y: auto;
  border: 2px solid #007BFF;
  border-radius: 10px;
  background: #f8faff;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,123,255,0.08);
}

#filesBox:empty::before {
  content: "No files selected.";
  color: #94a3b8;
  font-size: 13px;
}

.file-row span  {
  font-size: 14px;
}

.hide {
  display: none;
}

/* ===== TOGGLE SWITCH ===== */

.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  vertical-align: middle;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch input:checked + .slider {
  background-color: #007BFF;
}

.switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* ===== EMPTY STATE ===== */

.empty-state {
  background: #f9fbff;
  border: 1px solid #e0e7ff;
  border-radius: 16px;
  padding: 25px;
  text-align: center;
  margin-top: 15px;
  box-shadow: 0 4px 14px rgba(0,123,255,0.08);
}

.empty-state span.icon {
  font-size: 28px;
  display: block;
  margin-bottom: 10px;
}

.empty-state i {
  font-size: 40px;
  display: block;
  margin-bottom: 15px;
  color: #cbd5e1;
}

.empty-state p {
  color: #007BFF;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

/* ===== MISC ===== */

.err-msg {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 15px;
}

/* ===== MODAL (storekeeper_review.php) ===== */

.qc-modal-overlay.active {
  display: flex;
}

.qc-modal-overlay.\!active {
  display: flex !important;
}

@keyframes qcModalIn {
  from {
    transform: scale(0.95) translateY(10px);
    opacity: 0;
  }

  to   {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.qc-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.qc-question strong {
  color: #007BFF;
}

.choice-row.selected {
  border-color: #007BFF;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
}

.choice-row.\!selected {
  border-color: #007BFF !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12) !important;
}

.choice-row input {
  display: none;
}

.choice-row:hover .btn-select {
  background: #eff6ff;
}

.choice-row.selected .btn-select {
  background: #007BFF;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,123,255,0.30);
}

.choice-row.\!selected .btn-select {
  background: #007BFF !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,123,255,0.30) !important;
}

.btn-action.cancel {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.btn-action.cancel:hover {
  background: #e5e7eb;
  color: #111827;
}

.btn-action.confirm {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

.btn-action.\!confirm {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

.btn-action.confirm.ready {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,123,255,0.25);
}

.btn-action.\!confirm.ready {
  background: linear-gradient(90deg, #007BFF, #00BFFF) !important;
  color: #fff !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(0,123,255,0.25) !important;
}

.btn-action.confirm.ready:hover {
  background: linear-gradient(90deg, #0056b3, #0099dd);
  transform: translateY(-1px);
}

.btn-action.\!confirm.ready:hover {
  background: linear-gradient(90deg, #0056b3, #0099dd) !important;
  transform: translateY(-1px) !important;
}

/* ===== SUCCESS MESSAGE PAGE ===== */

.success-wrapper {
  max-width: 640px;
  width: 100%;
  padding: 20px;
}

.success-card {
  background: #ffffff;
  padding: 40px 48px;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(15,23,42,0.15);
  animation: sk-fadeIn 0.35s ease-out;
}

.checkmark svg {
  width: 38px;
  height: 38px;
  color: white;
}

h2.success-title {
  font-size: 24px;
  margin-top: 8px;
  margin-bottom: 10px;
  color: #0b63d1;
  font-weight: 600;
}

p.success-message {
  font-size: 15px;
  color: #374151;
  margin-bottom: 6px;
}

p.dn-number {
  font-size: 15px;
  color: #111827;
  font-weight: 500;
  margin-bottom: 18px;
}

.countdown {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 24px;
}

.countdown span {
  font-weight: 600;
  color: #0b63d1;
}

.btn-back {
  display: inline-block;
  padding: 11px 26px;
  background: linear-gradient(90deg, #0b63d1, #1d4ed8);
  color: white;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(37,99,235,0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-back:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37,99,235,0.55);
  opacity: 0.95;
}

@keyframes sk-fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to   {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sk-popIn {
  0%   {
    transform: scale(0.4);
    opacity: 0;
  }

  80%  {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

/* ============================================================
   SECTION: RETURN PENDING PAGES — rp-filter-bar
   Absolute-positioned compact search bar (top-right)
   ============================================================ */

.rp-filter-bar label {
  display: none;
}

.rp-filter-bar input[type="text"],
.rp-filter-bar input[type="date"] {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-family: inherit;
  font-size: 12px;
  background: #fff;
}

.rp-filter-bar input[type="text"] {
  width: 160px;
}

.rp-filter-bar button {
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #007BFF;
  color: #fff;
  transition: all 0.2s ease;
}

.rp-filter-bar button:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

/* ============================================================
   SECTION: RETURN PENDING — badge classes (used by pending return tables)
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.badge-status.closed           {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* ============================================================
   SECTION: FORM VALIDATION — inline field error state
   Only triggers when JS explicitly adds .field-touched on blur.
   Never fires on page load. The :invalid:not(:placeholder-shown)
   approach was removed because fields without a placeholder attr
   have :placeholder-shown = false at all times, causing red borders
   to appear immediately on page load before the user types anything.
   ============================================================ */

input.field-touched:invalid,
select.field-touched:invalid {
  border-color: #ef4444 !important;
  background-color: #fff5f5 !important;
}

input.field-touched:invalid:focus,
select.field-touched:invalid:focus {
  box-shadow: 0 0 0 2px rgba(239,68,68,0.15);
}

/* ============================================================
   SECTION: QC PAGES
   Covers: qc_pending.php, qc_inspection.php
   ============================================================ */

/* ===== QC ACTION BAR + FILTER MODAL (qc_pending.php) ===== */

.qc-filter-btn svg {
  flex-shrink: 0;
}

/* Modal overlay */

/* Modal card */

/* Modal header */

/* Modal body */

.qc-filter-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qc-filter-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.qc-filter-row label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.qc-filter-row select,
.qc-filter-row input[type="text"],
.qc-filter-row input[type="date"] {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.qc-filter-row input[type="text"] {
  cursor: text;
}

.qc-filter-row select:hover,
.qc-filter-row input[type="text"]:hover,
.qc-filter-row input[type="date"]:hover {
  border-color: #a5b4fc;
}

.qc-filter-row select:focus,
.qc-filter-row input[type="text"]:focus,
.qc-filter-row input[type="date"]:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
  background-color: #fff;
}

/* Searchable location widget inside a filter row — match input height */

.qc-filter-row .loc-search-display {
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qc-filter-row .loc-search-display:hover {
  border-color: #a5b4fc;
}

.qc-filter-row .loc-search-open .loc-search-display,
.qc-filter-row .loc-search-display:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
  background-color: #fff;
}

.qc-filter-row .loc-search-placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.qc-filter-row .loc-search-selected   {
  color: #1e293b;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modal footer */

/* ===== INSPECT BUTTON (qc_pending.php) ===== */

a.btn-inspect {
  background: #007BFF;
  color: #fff !important;
  padding: 6px 22px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
  border: none;
}

a.btn-inspect:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

/* ===== RADIO GROUP (qc_inspection.php) ===== */

.radio-group input[type="radio"] {
  display: none;
}

.radio-group label {
  padding: 6px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  background: #fff;
}

.radio-group input[type="radio"]:checked + label {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: #fff;
  border-color: #007BFF;
  box-shadow: 0 3px 8px rgba(0,123,255,0.25);
}

/* ===== INFO BOX (qc_inspection.php) ===== */

/* ===== TABLE INPUTS (qc_inspection.php) =====
   Readonly + editable qty inputs now styled via Tailwind tokens
   (bg-background / bg-card-2 / border-input) on qc/inspection.php.
   Legacy un-layered rules removed so the token utilities win in dark mode. */

/* ===== ATTACHMENT LABEL (qc_inspection.php) ===== */

/* ===== EMPTY FILES TEXT (qc_inspection.php JS) ===== */

/* ===== TOAST (qc_inspection.php) ===== */

#toast {
  visibility: hidden;
  min-width: 260px;
  max-width: 420px;
  background-color: #28a745;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 10px 16px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ============================================================
   SECTION: SECURITY PAGES
   Covers: security_pending.php, security_out.php, security_in.php
   ============================================================ */

/* ===== PAGE BASE ===== */

/* body, .back-btn, .details, .section-title, .attach-card,
   .attach-row, .attach-box, .file-row, .btn-submit, .btn-grey,
   .btn-danger, .radio-group, .qc-table-wrapper, .qc-readonly-input,
   .qc-qty-input, textarea.row-remark — all already defined above */

/* ===== SECURITY PENDING PAGE ===== */

/* ===== SECURITY OUT / IN SECTION CARD ===== */

/* ===== DRIVER / VEHICLE INPUT GRID (security_out.php) ===== */

.dv-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1f3b7b;
  font-size: 13.5px;
}

.\!hint {
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 6px !important;
}

.hint {
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
}

@media (max-width: 980px) {
  .dv-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== DRIVER / VEHICLE VERIFY CARDS (security_in.php) ===== */

@media (max-width: 1000px) {
  .verify-flex {
    grid-template-columns: 1fr;
  }
}

.recorded-info span {
  color: #007BFF;
  font-weight: 600;
}

.update-grid.single {
  grid-template-columns: 1fr;
}

.update-grid label {
  font-weight: 600;
  color: #1f3b7b;
  margin-bottom: 4px;
  display: block;
  white-space: nowrap;
  font-size: 13.5px;
}

.update-grid input {
  width: 90%;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  background: #f8fafc;
  color: #1e293b;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.update-grid input:focus {
  border-color: #007BFF;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* ===== SECURITY TABLE WRAPPER (security_in.php uses .table-wrapper) ===== */

/* Scoped to security pages to avoid conflicting with the existing .table-wrapper */

.sec-section .table-wrapper,
.sec-table-wrapper {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: auto;
  background: #f9fbff;
  border: 2px solid #9cc1ff;
  border-radius: 12px;
  padding: 0;
  scroll-behavior: smooth;
}

/* ===== SECURITY TABLE (sec-table) ===== */

table.sec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table.sec-table thead tr {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: #fff;
}

table.sec-table thead th {
  background: transparent;
  color: #fff;
  font-weight: 600;
  padding: 12px 15px;
  text-align: left;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  border-right: 2px solid rgba(255,255,255,0.9);
  border-bottom: 2px solid rgba(255,255,255,0.15);
}

table.sec-table thead th:last-child {
  border-right: none;
}

/* Pending table — full-width, center-aligned cells */

table.sec-pending-table th,
table.sec-pending-table td {
  text-align: center;
}

table.sec-pending-table td:first-child {
  color: #007BFF;
  font-weight: 600;
  text-align: left;
}

table.sec-pending-table th:nth-child(1), table.sec-pending-table td:nth-child(1) {
  width: auto;
  text-align: left;
}

table.sec-pending-table th:nth-child(2), table.sec-pending-table td:nth-child(2) {
  width: auto;
}

table.sec-pending-table th:nth-child(3), table.sec-pending-table td:nth-child(3) {
  width: auto;
}

table.sec-pending-table th:nth-child(4), table.sec-pending-table td:nth-child(4) {
  width: auto;
}

table.sec-pending-table th:nth-child(5), table.sec-pending-table td:nth-child(5) {
  width: auto;
}

table.sec-table tbody tr {
  background: #fff;
  transition: background 0.15s ease;
}

table.sec-table tbody tr:hover {
  background: #f1f7ff;
}

table.sec-table td {
  padding: 12px 14px;
  vertical-align: middle;
  border-bottom: 1px solid #e0e7ff;
  text-align: left;
}

/* Column widths */

table.sec-table th:nth-child(1), table.sec-table td:nth-child(1) {
  width: 36%;
}

table.sec-table th:nth-child(2), table.sec-table td:nth-child(2) {
  width: 10%;
  text-align: center;
}

table.sec-table th:nth-child(3), table.sec-table td:nth-child(3) {
  width: 10%;
  text-align: center;
}

table.sec-table th:nth-child(4), table.sec-table td:nth-child(4) {
  width: 12%;
  text-align: center;
}

table.sec-table th:nth-child(5), table.sec-table td:nth-child(5) {
  width: 28%;
}

/* ===== RADIO GROUP FOR MATERIALS (security_in.php) ===== */

.radio-group-mat input[type="radio"] {
  display: none;
}

.radio-group-mat label {
  padding: 6px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: #475569;
}

.radio-group-mat input[value="VERIFY"]:checked + label {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: #fff;
  border-color: #007BFF;
  box-shadow: 0 3px 8px rgba(0,123,255,0.25);
}

.radio-group-mat input[value="REJECT"]:checked + label {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  color: #fff;
  border-color: #dc2626;
  box-shadow: 0 3px 8px rgba(239,68,68,0.25);
}

/* ===== FAIL CARD (security_out.php — QC failed warning) ===== */

/* ── Warning variant of sec-header (failed/rejected sections) ──
   Light mode: amber gradient — visually signals rejected/info content
   Dark mode:  darker amber gradient set via html.dark-mode below    */

/* ── Reason label in failed materials table ──
   Themed per mode so it reads cleanly in both light and dark.    */

/* ===== ACTIONS RIGHT ===== */

/* ===== ATTACHMENT BUTTONS (security_in uses .attach-btn) ===== */

.attach-btn.blue {
  background: #007BFF;
  box-shadow: 0 3px 8px rgba(0,123,255,0.25);
}

.attach-btn.blue:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

.attach-btn.blue:disabled {
  background: #a8c7f5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.attach-btn.red {
  background: #ef4444;
}

.attach-btn.red:hover {
  background: #dc2626;
}

/* ===== ATTACHMENT LABEL ===== */

/* ===== EMPTY FILES TEXT ===== */

/* ===== QC STATUS BADGES (security_pending.php) ===== */

/* ===== MUTED TEXT (already has .muted from SK section, extend here) ===== */

/* .muted already defined — no duplicate needed */

/* ================================================================
   DARK MODE — workflow.css
   All rules below apply only when body has the .dark-mode class.
   ================================================================ */

/* ============================================================
   SECTION: STOREKEEPER PAGES — dark.css
   COLOR OVERRIDES ONLY
   ============================================================ */

/* ===== PAGE BASE ===== */

html.dark-mode .sk-page-body {
  background: #141414;
  color: #e0e0e0;
  min-height: 100vh;
}

/* ===== SECTION CARD ===== */

html.dark-mode .qc-section {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

/* ===== SECTION HEADERS ===== */

html.dark-mode .qc-header {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

html.dark-mode .qc-header-blue {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.15);
}

html.dark-mode .qc-header-gradient {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ===== INFO GRID ===== */

html.dark-mode .info {
  background: #1c1c1c;
  border: 1.5px solid #f97316;
}

html.dark-mode .label {
  color: #f97316;
}

html.dark-mode .val {
  color: #e0e0e0;
}

html.dark-mode .\!val {
  color: #e0e0e0 !important;
}

html.dark-mode .section-sub {
  color: #999999;
}

html.dark-mode .small-note {
  color: #777777;
}

html.dark-mode .muted {
  color: #777777;
}

/* ===== DETAILS GRID (GRN) ===== */

html.dark-mode .details {
  background: #1c1c1c;
  border: 1.5px solid #f97316;
}

html.dark-mode .details strong {
  color: #f97316;
}

/* ===== PILLS & CHIPS ===== */

html.dark-mode .pill {
  background: #2a2a2a;
  border-color: #444;
  color: #f97316;
}

html.dark-mode .chip {
  border-color: #484848;
  background: #2e2e2e;
  color: #e0e0e0;
}

html.dark-mode .chip-label {
  border-color: #484848;
  background: #2e2e2e;
  color: #e0e0e0;
}

html.dark-mode .readonly-pill.verify {
  background: #052e16;
  color: #4ade80;
  border-color: #166534;
}

html.dark-mode .readonly-pill.\!verify {
  background: #052e16 !important;
  color: #4ade80 !important;
  border-color: #166534 !important;
}

html.dark-mode .readonly-pill.reject {
  background: #2d0a0a;
  color: #f87171;
  border-color: #7f1d1d;
}

html.dark-mode .readonly-pill.\!reject {
  background: #2d0a0a !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
}

/* ===== QC BLOCK ===== */

html.dark-mode .qc-block {
  background: #1a2535;
  border-color: #2e4a6e;
}

html.dark-mode .qc-title {
  color: #60a5fa;
}

html.dark-mode .qc-sub {
  color: #c0c0c0;
}

html.dark-mode .qc-chip {
  background: #1e2a3a;
  border-color: #3b5a8a;
  color: #c0c0c0;
}

html.dark-mode .qc-chip.qc-yes {
  border-color: #166534;
}

html.dark-mode .qc-chip.qc-no {
  border-color: #555555;
}

html.dark-mode .qc-option input:checked + .qc-chip.qc-yes {
  background: linear-gradient(90deg, #15803d, #16a34a);
  border-color: #15803d;
}

html.dark-mode .qc-option input:checked + .qc-chip.qc-no {
  background: linear-gradient(90deg, #4b5563, #6b7280);
  border-color: #4b5563;
}

/* ===== TABLES ===== */

html.dark-mode .tbl-wrap {
  background: #1e1e1e;
  border-color: #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
}

html.dark-mode .tbl-wrap table thead tr {
  background: #1a0a00;
}

html.dark-mode .qc-table-wrapper {
  background: #1a1a1a;
  border: 1.5px solid #f97316;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
}

html.dark-mode table.qc-table thead tr {
  background: #1a0a00;
}

html.dark-mode .qc-section thead tr th,
html.dark-mode .tbl-wrap thead tr th,
html.dark-mode table.qc-table thead th {
  background: #1a0a00;
  padding: 12px 15px;
  border-right: 1px solid #2a2a2a;
  border-bottom: 2px solid #2a2a2a;
  color: #f97316;
  font-weight: 700;
}

html.dark-mode table.qc-table thead th:last-child {
  border-right: none;
}

html.dark-mode .qc-section thead tr th,
html.dark-mode .tbl-wrap thead tr th {
  border-right: 1px solid #2a2a2a;
  border-bottom: 2px solid #2a2a2a;
}

html.dark-mode .qc-section thead tr th:last-child,
html.dark-mode .tbl-wrap thead tr th:last-child {
  border-right: none;
}

html.dark-mode .list-view table.qc-table thead th {
  background: #1a0a00;
  color: #f97316;
}

html.dark-mode .form-view table.qc-table thead th {
  background: #1a0a00;
  color: #f97316;
}

html.dark-mode table.qc-table td {
  border-bottom-color: #2e2e2e;
  color: #e0e0e0;
  padding: 12px 14px;
}

html.dark-mode .qc-section table.qc-table th,
html.dark-mode .qc-section table.qc-table td {
  text-align: center;
}

html.dark-mode .qc-section table.qc-table td:first-child {
  color: #f97316;
  font-weight: 600;
  text-align: left;
  padding-left: 20px;
}

html.dark-mode .qc-section tbody tr:nth-child(even),
html.dark-mode .tbl-wrap tbody tr:nth-child(even),
html.dark-mode table.qc-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

html.dark-mode .qc-section tbody tr:hover td,
html.dark-mode .tbl-wrap tbody tr:hover td,
html.dark-mode table.qc-table tbody tr:hover {
  background: rgba(249,115,22,0.07);
}

/* ===== INPUTS ===== */

html.dark-mode .input-base {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

html.dark-mode .input-base:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

html.dark-mode .input-error {
  border-color: #f87171 !important;
  background: #2d0a0a;
}

html.dark-mode .error-msg {
  color: #f87171;
}

html.dark-mode .req-hint {
  color: #f87171;
}

html.dark-mode input.qty-input {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

html.dark-mode input.text-input,
html.dark-mode textarea.text-input {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

html.dark-mode textarea.text-input:focus {
  border-color: #f97316;
  background: #353535;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

html.dark-mode textarea.text-input::-moz-placeholder {
  color: #666666;
}

html.dark-mode textarea.text-input::placeholder {
  color: #666666;
}

html.dark-mode textarea.row-remark {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

html.dark-mode textarea.row-remark:focus {
  border-color: #f97316;
  background: #353535;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

html.dark-mode textarea.row-remark::-moz-placeholder {
  color: #666666;
}

html.dark-mode textarea.row-remark::placeholder {
  color: #666666;
}

/* dark-mode fail-reason / review-comment now via Tailwind tokens (see above). */

/* LPO block */

html.dark-mode .lpo-group {
  background: #1e1e1e;
  border-color: #2a2a2a;
}

html.dark-mode .lpo-input {
  background: #141414;
  border-color: #2a2a2a;
  color: #e0e0e0;
}

html.dark-mode .lpo-input:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

html.dark-mode .lpo-na {
  background: #141414 !important;
  border-color: #2a2a2a !important;
  color: #888888 !important;
}

html.dark-mode .lpo-active {
  background: #141414 !important;
  color: #e0e0e0 !important;
}

/* LPO label override */

html.dark-mode .lpo-group .label,
html.dark-mode .lpo-group > div[class*="label"] {
  color: #f97316 !important;
}

/* Actions footer */

html.dark-mode .actions {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 14px 20px;
}

/* ===== TOGGLE BAR dark mode — underline strip ===== */

/* (full definition in the toggle-bar section above) */

/* ===== BUTTONS ===== */

html.dark-mode .btn.blue {
  background: #f97316;
  color: #fff;
  box-shadow: 0 3px 10px rgba(249,115,22,0.35);
}

html.dark-mode .\!btn.blue {
  background: #f97316 !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(249,115,22,0.35) !important;
}

html.dark-mode .btn.blue:hover {
  background: #ea6c0a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(249,115,22,0.50);
}

html.dark-mode .\!btn.blue:hover {
  background: #ea6c0a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(249,115,22,0.50) !important;
}

html.dark-mode .btn.blue:disabled {
  background: #5a3a10;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}

html.dark-mode .\!btn.blue:disabled {
  background: #5a3a10 !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

html.dark-mode .btn.grey {
  background: #2e2e2e;
  color: #a0a0a0;
  border-color: #484848;
}

html.dark-mode .\!btn.grey {
  background: #2e2e2e !important;
  color: #a0a0a0 !important;
  border-color: #484848 !important;
}

html.dark-mode .btn.grey:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

html.dark-mode .\!btn.grey:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

html.dark-mode .btn.red {
  background: #e53e3e;
  color: #fff;
  box-shadow: 0 2px 6px rgba(229,62,62,0.3);
}

html.dark-mode .\!btn.red {
  background: #e53e3e !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(229,62,62,0.3) !important;
}

html.dark-mode .btn.red:hover {
  background: #c53030;
  transform: translateY(-1px);
}

html.dark-mode .\!btn.red:hover {
  background: #c53030 !important;
  transform: translateY(-1px) !important;
}

html.dark-mode .btn.sk-primary {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(249,115,22,0.3);
  color: #fff;
}

html.dark-mode .\!btn.sk-primary {
  background: linear-gradient(90deg, #c85a00, #f97316) !important;
  box-shadow: 0 4px 12px rgba(249,115,22,0.3) !important;
  color: #fff !important;
}

html.dark-mode .btn.sk-primary:disabled {
  opacity: 0.4;
}

html.dark-mode .\!btn.sk-primary:disabled {
  opacity: 0.4 !important;
}

/* Reject reason readonly input */

html.dark-mode .reject-reason[readonly],
html.dark-mode .reject-reason-readonly {
  background: #252525 !important;
  color: #666666;
}

html.dark-mode .reject-reason:not([readonly]):not(.reject-reason-readonly) {
  background: #2e2e2e !important;
  color: #f0f0f0;
}

html.dark-mode .btn.secondary {
  background: #2a2a2a;
  color: #f97316;
  border-color: #444;
}

html.dark-mode .\!btn.secondary {
  background: #2a2a2a !important;
  color: #f97316 !important;
  border-color: #444 !important;
}

html.dark-mode .btn-open {
  background: #f97316;
  color: #fff !important;
}

html.dark-mode .btn-open:hover {
  background: #ea6c0a;
}

html.dark-mode .btn-submit {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode .btn-submit:hover {
  background: linear-gradient(90deg, #a34800, #ea6c0a);
  box-shadow: 0 4px 10px rgba(249,115,22,0.4);
}

html.dark-mode .back-btn {
  background: #2a2a2a;
  color: #f97316;
  border-color: #444;
}

html.dark-mode .back-btn:hover {
  background: #f97316;
  color: #fff;
  border-color: #f97316;
}

/* ===== ATTACHMENTS ===== */

html.dark-mode .attach {
  background: #1c1c1c;
  border-color: #f97316;
}

html.dark-mode .attach-card {
  background: #1c1c1c;
  border-color: #f97316;
}

html.dark-mode .attach-box {
  background: #2e2e2e;
  border-color: #f97316;
}

html.dark-mode #filesBox {
  background: #2e2e2e;
  border-color: #444;
}

html.dark-mode .file-row {
  border-bottom-color: #333;
}

html.dark-mode .file-row:hover {
  background: rgba(249,115,22,0.07);
}

html.dark-mode .file-row span {
  color: #e0e0e0;
}

/* ===== TOGGLE SWITCH ===== */

html.dark-mode .slider {
  background-color: #484848;
}

html.dark-mode .switch input:checked + .slider {
  background-color: #f97316;
}

/* ===== EMPTY STATE ===== */

html.dark-mode .empty-state {
  background: #1e1e1e;
  border-color: #333;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

html.dark-mode .empty-state p {
  color: #f97316;
}

html.dark-mode .empty-state i {
  color: #555;
}

/* ===== MISC ===== */

html.dark-mode .err-msg {
  background: #2d0a0a;
  border-color: #7f1d1d;
  color: #f87171;
}

html.dark-mode .section-title {
  color: #f97316;
}

html.dark-mode .qc-comment {
  color: #fca5a5;
  background: #2d0a0a;
  border-color: #7f1d1d;
}

/* ===== MODAL dark mode ===== */

html.dark-mode .qc-modal-overlay {
  background: rgba(0,0,0,0.70);
}

html.dark-mode .qc-modal-card {
  background: #1e1e1e;
  box-shadow: 0 20px 60px rgba(0,0,0,0.70);
}

html.dark-mode .qc-modal-header {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode .qc-question {
  color: #d0d0d0;
}

html.dark-mode .qc-question strong {
  color: #f97316;
}

html.dark-mode .choice-row {
  border-color: #2a2a2a;
  background: #252525;
}

html.dark-mode .choice-row:hover {
  border-color: #f97316;
  background: rgba(249,115,22,0.08);
}

html.dark-mode .choice-row.selected {
  border-color: #f97316;
  background: rgba(249,115,22,0.10);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

html.dark-mode .choice-row.\!selected {
  border-color: #f97316 !important;
  background: rgba(249,115,22,0.10) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important;
}

html.dark-mode .btn-select {
  border-color: #f97316;
  color: #f97316;
  background: #2a2a2a;
}

html.dark-mode .choice-row:hover .btn-select {
  background: rgba(249,115,22,0.12);
}

html.dark-mode .choice-row.selected .btn-select {
  background: #f97316;
  color: #fff;
  box-shadow: 0 2px 6px rgba(249,115,22,0.40);
}

html.dark-mode .choice-row.\!selected .btn-select {
  background: #f97316 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(249,115,22,0.40) !important;
}

html.dark-mode .choice-desc {
  color: #888888;
}

html.dark-mode .qc-modal-actions {
  border-top-color: #2a2a2a;
}

html.dark-mode .btn-action.cancel {
  background: #252525;
  color: #c0c0c0;
  border-color: #3a3a3a;
}

html.dark-mode .btn-action.cancel:hover {
  background: #2e2e2e;
  color: #e0e0e0;
}

html.dark-mode .btn-action.confirm {
  background: #2a2a2a;
  color: #555555;
}

html.dark-mode .btn-action.\!confirm {
  background: #2a2a2a !important;
  color: #555555 !important;
}

html.dark-mode .btn-action.confirm.ready {
  background: linear-gradient(90deg, #c85a00, #f97316);
  color: #fff;
  box-shadow: 0 3px 10px rgba(249,115,22,0.30);
}

html.dark-mode .btn-action.\!confirm.ready {
  background: linear-gradient(90deg, #c85a00, #f97316) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(249,115,22,0.30) !important;
}

html.dark-mode .btn-action.confirm.ready:hover {
  background: linear-gradient(90deg, #b35000, #ea6c0a);
  transform: translateY(-1px);
}

html.dark-mode .btn-action.\!confirm.ready:hover {
  background: linear-gradient(90deg, #b35000, #ea6c0a) !important;
  transform: translateY(-1px) !important;
}

/* ===== SUCCESS MESSAGE PAGE ===== */

html.dark-mode .success-page-body {
  background: linear-gradient(135deg, #141414, #1e1e1e);
  color: #e0e0e0;
}

html.dark-mode .success-card {
  background: #1e1e1e;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

html.dark-mode h2.success-title {
  color: #f97316;
}

html.dark-mode p.success-message {
  color: #c0c0c0;
}

html.dark-mode p.dn-number {
  color: #e0e0e0;
}

html.dark-mode .countdown {
  color: #777777;
}

html.dark-mode .countdown span {
  color: #f97316;
}

html.dark-mode .btn-back {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(249,115,22,0.4);
}

html.dark-mode .btn-back:hover {
  box-shadow: 0 6px 18px rgba(249,115,22,0.55);
  opacity: 0.95;
}

/* ============================================================
   SECTION: QC PAGES — dark.css
   COLOR OVERRIDES ONLY
   ============================================================ */

/* ===== QC ACTION BAR + FILTER MODAL ===== */

html.dark-mode .qc-filter-btn {
  background: #252525;
  color: #c0c0c0;
  border-color: #3a3a3a;
  box-shadow: none;
}

html.dark-mode .qc-filter-btn:hover {
  background: #2e2e2e;
  border-color: #f97316;
  color: #ffffff;
}

html.dark-mode .qc-filter-badge {
  background: #f97316;
}

html.dark-mode .qc-filter-row label {
  color: #888888;
}

html.dark-mode .qc-filter-row select,
html.dark-mode .qc-filter-row input[type="text"],
html.dark-mode .qc-filter-row input[type="date"] {
  background: #141414;
  border-color: #2a2a2a;
  color: #e0e0e0;
}

html.dark-mode .qc-filter-row input[type="text"] {
  cursor: text;
}

html.dark-mode .qc-filter-row select:hover,
html.dark-mode .qc-filter-row input[type="text"]:hover,
html.dark-mode .qc-filter-row input[type="date"]:hover {
  border-color: #f97316;
}

html.dark-mode .qc-filter-row select:focus,
html.dark-mode .qc-filter-row input[type="text"]:focus,
html.dark-mode .qc-filter-row input[type="date"]:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
  background-color: #1a1a1a;
}

/* Searchable location widget inside filter row — dark mode */

html.dark-mode .qc-filter-row .loc-search-display {
  background: #141414;
  border-color: #2a2a2a;
  color: #e0e0e0;
}

html.dark-mode .qc-filter-row .loc-search-display:hover {
  border-color: #f97316;
}

html.dark-mode .qc-filter-row .loc-search-open .loc-search-display,
html.dark-mode .qc-filter-row .loc-search-display:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
  background-color: #1a1a1a;
}

html.dark-mode .qc-filter-row .loc-search-placeholder {
  color: #555555;
}

html.dark-mode .qc-filter-row .loc-search-selected {
  color: #e0e0e0;
}

/* ===== INSPECT BUTTON ===== */

html.dark-mode a.btn-inspect {
  background: #f97316;
  color: #fff !important;
}

html.dark-mode a.btn-inspect:hover {
  background: #ea6c0a;
}

/* ===== RADIO GROUP ===== */

html.dark-mode .radio-group label {
  border-color: #484848;
  background: #2e2e2e;
  color: #d0d0d0;
}

html.dark-mode .radio-group input[type="radio"]:checked + label {
  background: linear-gradient(90deg, #c85a00, #f97316);
  border-color: #f97316;
  box-shadow: 0 3px 8px rgba(249,115,22,0.3);
}

/* ===== INFO BOX ===== */

html.dark-mode .info-box {
  background: #1e2235;
  border-color: #3b4a7a;
  color: #a0aec0;
}

/* ===== TABLE INPUTS — qc-input dark rules removed (Tailwind tokens) ===== */

/* ===== ATTACHMENT LABEL ===== */

html.dark-mode .qc-attach-label {
  color: #f97316;
}

/* ===== EMPTY FILES TEXT ===== */

html.dark-mode .sk-empty-text {
  color: #666666;
}

/* ===== TOAST ===== */

html.dark-mode #toast {
  background-color: #166534;
}

/* ============================================================
   SECTION: SECURITY PAGES — dark.css
   COLOR OVERRIDES ONLY
   ============================================================ */

/* ===== SECURITY PENDING PAGE ===== */

html.dark-mode .security-section {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

html.dark-mode .security-header {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.15);
}

html.dark-mode .no-data {
  color: #888888;
}

/* ===== SECURITY SECTION CARD ===== */

html.dark-mode .sec-section {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

html.dark-mode .sec-header {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ===== DRIVER / VEHICLE INPUT GRID ===== */

html.dark-mode .dv-grid {
  background: #1c1c1c;
  border-color: #f97316;
}

html.dark-mode .dv-field {
  background: #252525;
  border-color: #333333;
}

html.dark-mode .dv-field label {
  color: #f97316;
}

html.dark-mode .hint {
  color: #888888;
}

html.dark-mode .\!hint {
  color: #888888 !important;
}

/* ── Dark mode: fix invisible calendar/clock icons in date/time inputs ── */

html.dark-mode .dv-field input[type="date"],
html.dark-mode .dv-field input[type="time"] {
  color-scheme: dark;
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

html.dark-mode .dv-field input[type="date"]:focus,
html.dark-mode .dv-field input[type="time"]:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

/* ===== DRIVER / VEHICLE VERIFY CARDS ===== */

html.dark-mode .verify-card {
  background: #1c1c1c;
  border-color: #f97316;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

html.dark-mode .recorded-info {
  background: linear-gradient(180deg, #1e1e1e, #1a1a1a);
  border-color: #333333;
  color: #e0e0e0;
}

html.dark-mode .recorded-info span {
  color: #f97316;
}

html.dark-mode .update-fields {
  border-top-color: #333333;
  background: #242424;
}

html.dark-mode .update-grid label {
  color: #f97316;
}

html.dark-mode .update-grid input {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

html.dark-mode .update-grid input:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

/* ===== SECURITY TABLE WRAPPER ===== */

html.dark-mode .sec-section .table-wrapper,
html.dark-mode .sec-table-wrapper {
  background: #1a1a1a;
  border-color: #f97316;
}

/* ===== SECURITY TABLE ===== */

html.dark-mode table.sec-table thead tr {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode table.sec-table thead th {
  border-right: 2px solid rgba(0,0,0,0.55);
  border-bottom-color: rgba(255,255,255,0.12);
}

html.dark-mode table.sec-table tbody tr {
  background: #1e1e1e;
}

html.dark-mode table.sec-table tbody tr:hover {
  background: rgba(249,115,22,0.07);
}

html.dark-mode table.sec-table td {
  border-bottom-color: #2e2e2e;
  color: #e0e0e0;
}

/* ===== PENDING TABLE OVERRIDES ===== */

html.dark-mode table.sec-pending-table th,
html.dark-mode table.sec-pending-table td {
  text-align: center;
}

html.dark-mode table.sec-pending-table td:first-child {
  color: #f97316;
  font-weight: 600;
  text-align: left;
  padding-left: 20px;
}

/* ===== RADIO GROUP FOR MATERIALS ===== */

html.dark-mode .radio-group-mat label {
  border-color: #484848;
  background: #2e2e2e;
  color: #d0d0d0;
}

html.dark-mode .radio-group-mat input[value="VERIFY"]:checked + label {
  background: linear-gradient(90deg, #c85a00, #f97316);
  border-color: #f97316;
  box-shadow: 0 3px 8px rgba(249,115,22,0.3);
}

html.dark-mode .radio-group-mat input[value="REJECT"]:checked + label {
  background: linear-gradient(90deg, #c53030, #e53e3e);
  border-color: #e53e3e;
}

/* ===== FAIL CARD ===== */

html.dark-mode .fail-card {
  background: #2d0a0a;
  border-color: #7f1d1d;
  color: #f87171;
}

/* ── Warning sec-header: amber in dark mode ── */

html.dark-mode .sec-header--warning {
  background: linear-gradient(90deg, #92400e, #c2410c);
}

/* ── Reason labels in dark mode ── */

html.dark-mode .fail-label-partial {
  color: #fb923c;
  /* bright amber on dark background */
}

html.dark-mode .fail-label-fail {
  color: #f87171;
  /* bright red on dark background */
}

/* ===== ATTACHMENT BUTTONS ===== */

html.dark-mode .attach-btn.blue {
  background: #f97316;
  box-shadow: 0 3px 8px rgba(249,115,22,0.3);
}

html.dark-mode .attach-btn.blue:hover {
  background: #ea6c0a;
}

html.dark-mode .attach-btn.blue:disabled {
  background: #5a3a10;
  opacity: 0.6;
}

html.dark-mode .attach-btn.grey {
  background: #484848;
}

html.dark-mode .attach-btn.grey:hover {
  background: #555555;
}

html.dark-mode .attach-btn.red {
  background: #e53e3e;
}

html.dark-mode .attach-btn.red:hover {
  background: #c53030;
}

/* ===== ATTACHMENT LABEL ===== */

html.dark-mode .sec-attach-label {
  color: #f97316;
}

/* ===== EMPTY FILES TEXT ===== */

html.dark-mode .sec-empty-text {
  color: #666666;
}

/* ===== QC STATUS BADGES ===== */

html.dark-mode .status-pass {
  color: #4ade80;
}

html.dark-mode .status-partial {
  color: #fbbf24;
}

html.dark-mode .status-fail {
  color: #f87171;
}

/* ── Return pending filter bar ── */

html.dark-mode .rp-filter-bar input[type="text"],
html.dark-mode .rp-filter-bar input[type="date"] {
  background: #252525;
  border-color: #333333;
  color: #e0e0e0;
}

html.dark-mode .rp-filter-bar button {
  background: #c85a00;
}

html.dark-mode .rp-filter-bar button:hover {
  background: #f97316;
}

/* ── Return pending badge classes ── */

html.dark-mode .badge-qc {
  background: #071830;
  color: #7dd3fc;
  border-color: #0e3a6b;
}

html.dark-mode .badge-sk {
  background: #2a1e00;
  color: #fbbf24;
  border-color: #854d0e;
}

html.dark-mode .badge-status {
  background: #252525;
  color: #888888;
  border-color: #333333;
}

html.dark-mode .badge-status.pending_security {
  background: #2a1400;
  color: #fb923c;
  border-color: #7c2d12;
}

html.dark-mode .badge-status.closed {
  background: #0a1f0f;
  color: #4ade80;
  border-color: #14532d;
}

/* ── Form validation error state ── */

html.dark-mode input.field-touched:invalid,
html.dark-mode select.field-touched:invalid {
  border-color: #ef4444 !important;
  background-color: #2d0a0a !important;
}

html.dark-mode input.field-touched:invalid:focus,
html.dark-mode select.field-touched:invalid:focus {
  box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
}

/* ============================================================
   BTN-PRIMARY / BTN-SECONDARY / BTN-DANGER — global dark mode
   Covers pages like storekeeper_material_entry.php that use
   these classes outside of a delivery section context.
   Section-scoped rules (#internalDeliverySection .btn-primary)
   take precedence where they exist.
   ============================================================ */

html.dark-mode .sk-page-body .btn-primary,
html.dark-mode .btn-primary {
  background: #f97316;
  color: #ffffff;
  border: none;
  box-shadow: 0 3px 10px rgba(249,115,22,0.35);
}

html.dark-mode .sk-page-body .btn-primary:hover,
html.dark-mode .btn-primary:hover {
  background: #ea6c0a;
  box-shadow: 0 4px 14px rgba(249,115,22,0.50);
  transform: translateY(-1px);
}

html.dark-mode .sk-page-body .btn-primary:disabled,
html.dark-mode .btn-primary:disabled {
  background: #5a3a10;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}

html.dark-mode .sk-page-body .btn-secondary,
html.dark-mode .btn-secondary {
  background: #2e2e2e;
  color: #d0d0d0;
  border: 1.5px solid #484848;
}

html.dark-mode .sk-page-body .btn-secondary:hover,
html.dark-mode .btn-secondary:hover {
  background: #383838;
  border-color: #585858;
}

html.dark-mode .sk-page-body .btn-danger,
html.dark-mode .btn-danger {
  background: #e53e3e;
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(229,62,62,0.3);
}

html.dark-mode .sk-page-body .btn-danger:hover,
html.dark-mode .btn-danger:hover {
  background: #c53030;
}

/* ================================================================
   RETURNS — Styles extracted from individual return page inline blocks
   ================================================================ */

/* ── return_tracking.php ── */

body {
  font-family: 'Inter', sans-serif;
  background:#f9fafc;
  margin: 0;
  padding: 0;
}

.\!container {
  max-width: 1100px !important;
  margin: auto !important;
}

.container {
  max-width: 1100px;
  margin: auto;
}

.card {
  background:#fff;
  padding:25px;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  margin-bottom:20px;
}

.header-bar {
  background: linear-gradient(90deg, #FF9800, #EF6C00);
  color:white;
  padding:15px 20px;
  border-radius:12px;
  font-weight:600;
  margin-bottom:20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 18px;
}

.btn-back {
  background: rgba(255,255,255,0.2);
  color: white;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.4);
  transition: background 0.2s;
}

.btn-back:hover {
  background: rgba(255,255,255,0.3);
}

.status {
  font-size:18px;
  font-weight:600;
  text-align:center;
  margin-bottom:25px;
}

.summary-item strong {
  display:block;
  font-size:14px;
  margin-bottom:6px;
  color:#555;
}

.summary-item span {
  font-size:15px;
  font-weight:600;
  color:#111;
}

.badge {
  padding:6px 12px;
  border-radius:20px;
  font-weight:600;
  font-size:13px;
  display:inline-block;
}

/* tracker bar */

.tracker {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin:40px 20px;
  position:relative;
}

.tracker::before {
  content:"";
  position:absolute;
  top:18px;
  left:60px;
  right:60px;
  height:4px;
  background:#e0e0e0;
  z-index:1;
}

.step {
  position:relative;
  text-align:center;
  flex:1;
  z-index:3;
}

.circle {
  width:36px;
  height:36px;
  margin:0 auto 12px;
  border-radius:50%;
  background:#e0e0e0;
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
  font-weight:bold;
  font-size:16px;
  box-shadow:0 3px 6px rgba(0,0,0,0.1);
}

.step.completed .circle {
  background:#FF9800;
}

.step.current .circle {
  background:#FFB74D;
  animation:pulse 1.5s infinite;
}

.label {
  font-size:14px;
  font-weight:600;
  margin-bottom:4px;
  color:#333;
}

.\!loc {
  font-size:11px !important;
  color:#6b7280 !important;
  font-weight:normal !important;
  display:block !important;
  margin-top:2px !important;
}

.loc {
  font-size:11px;
  color:#6b7280;
  font-weight:normal;
  display:block;
  margin-top:2px;
}

.date {
  font-size:12px;
  color:#555;
  margin-top:5px;
}

@keyframes pulse {
  0% {
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,152,0,0.6);
  }

  50% {
    transform:scale(1.05);
    box-shadow:0 0 0 12px rgba(255,152,0,0);
  }

  100% {
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,152,0,0);
  }
}

/* ── return_qc_check.php ── */

body {
  font-family: 'Inter', sans-serif;
  background:#f9fafc;
  margin: 0;
  padding: 0;
  color:#333;
}

/* 🔹 Filters (Compact & Top-Right) */

.filter-bar input[type="text"] {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-family: inherit;
  font-size: 12px;
  background: #fff;
  width: 180px;
}

.filter-bar button, .filter-bar a.clear-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #0091FF;
  color: #fff;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.filter-bar button:hover, .filter-bar a.clear-btn:hover {
  background: #007BE6;
  transform: translateY(-1px);
}

.filter-bar a.clear-btn {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.filter-bar a.clear-btn:hover {
  background: #fca5a5;
}

table.qc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #f9fbff;
}

.qc-table th, .qc-table td {
  padding: 12px 14px;
  text-align: center;
}

.qc-table thead th {
  background: #0091FF;
  color: #fff;
  font-weight: 600;
  border-right: 2px solid rgba(255,255,255,0.9);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
}

.qc-table thead th:last-child {
  border-right: none;
}

.qc-table tr:nth-child(even) {
  background: #f4f7ff;
}

.qc-table tr:hover {
  background: #e9f1ff;
  transition: 0.2s ease-in-out;
}

.qc-table td {
  border-bottom: 1px solid #e0e7ff;
}

.qc-table td:first-child {
  color: #007BFF;
  font-weight: 600;
}

.empty-state {
  padding: 60px;
  text-align: center;
  color: #94a3b8;
}

.empty-state i {
  display: block;
  font-size: 48px;
  margin-bottom: 20px;
  color: #cbd5e1;
}

/* ── return_qc_detail.php ── */

body {
  font-family: 'Inter', Arial, sans-serif;
  background: #f9fafc;
  margin: 0;
  color: #333;
}

.details {
  background: #f1f5ff;
  padding: 15px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}

.details strong {
  color: #007BFF;
  font-weight: 600;
}

/* 🔹 Table Styles */

table.qc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 700px;
}

table.qc-table thead tr {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: white;
}

table.qc-table thead th {
  background: transparent;
  color: white;
  font-weight: 600;
  padding: 12px 15px;
  text-align: left;
  font-size: 15px;
  position: sticky;
  top: 0;
  z-index: 2;
}

table.qc-table tbody tr {
  background: #fff;
  transition: background 0.15s ease;
}

table.qc-table tbody tr:hover {
  background: #f1f7ff;
}

table.qc-table td {
  padding: 14px;
  vertical-align: middle;
  border: 1px solid #f0f4f9;
}

/* 🔹 Inputs */

input.text-input {
  width: 95%;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
}

/* 🔹 Buttons */

/* 🔹 Standardized Attachment Styles */

.attach-box:empty::before {
  content: "No files selected.";
  color: #94a3b8;
  font-size: 13px;
}

.file-row span {
  font-size: 14px;
}

.btn-submit.sm {
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 14px;
  margin:0;
}

/* ── return_security_check.php ── */

body {
  font-family: 'Inter', sans-serif;
  background:#f9fafc;
  margin: 0;
  padding: 0;
  color:#333;
}

/* 🔹 Filters (Compact & Top-Right) */

.filter-bar input[type="text"] {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-family: inherit;
  font-size: 12px;
  background: #fff;
  width: 250px;
}

.filter-bar button, .filter-bar a.clear-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #0091FF;
  color: #fff;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.filter-bar button:hover, .filter-bar a.clear-btn:hover {
  background: #007BE6;
  transform: translateY(-1px);
}

.filter-bar a.clear-btn {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.filter-bar a.clear-btn:hover {
  background: #fca5a5;
}

table.qc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #f9fbff;
}

.qc-table th, .qc-table td {
  padding: 12px 14px;
  text-align: center;
}

.qc-table thead th {
  background: #0091FF;
  color: #fff;
  font-weight: 600;
  border-right: 2px solid rgba(255,255,255,0.9);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
}

.qc-table thead th:last-child {
  border-right: none;
}

.qc-table tr:nth-child(even) {
  background: #f4f7ff;
}

.qc-table tr:hover {
  background: #e9f1ff;
  transition: 0.2s ease-in-out;
}

.qc-table td {
  border-bottom: 1px solid #e0e7ff;
}

.qc-table td:first-child {
  color: #007BFF;
  font-weight: 600;
}

.empty-state {
  padding: 60px;
  text-align: center;
  color: #94a3b8;
}

.empty-state i {
  display: block;
  font-size: 48px;
  margin-bottom: 20px;
  color: #cbd5e1;
}

/* ── return_security_detail.php ── */

body {
  font-family: 'Inter', Arial, sans-serif;
  background: #f9fafc;
  margin: 0;
  color: #333;
}

.details {
  background: #f1f5ff;
  padding: 15px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}

.details strong {
  color: #007BFF;
  font-weight: 600;
}

/* 🔹 Table Styles */

table.qc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 700px;
}

table.qc-table thead tr {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: white;
}

table.qc-table thead th {
  background: transparent;
  color: white;
  font-weight: 600;
  padding: 12px 15px;
  text-align: left;
  font-size: 15px;
  position: sticky;
  top: 0;
  z-index: 2;
}

table.qc-table tbody tr {
  background: #fff;
  transition: background 0.15s ease;
}

table.qc-table tbody tr:hover {
  background: #f1f7ff;
}

table.qc-table td {
  padding: 14px;
  vertical-align: middle;
  border: 1px solid #f0f4f9;
}

/* 🔹 Buttons */

/* 🔹 Standardized Attachment Styles */

.attach-box:empty::before {
  content: "No files selected.";
  color: #94a3b8;
  font-size: 13px;
}

.file-row span {
  font-size: 14px;
}

.btn-submit.sm {
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 14px;
  margin:0;
}

/* ── return_item_internal.php ── */

body {
  font-family: 'Inter', Arial, sans-serif;
  background: #f9fafc;
  margin: 0;
  color: #333;
}

.details {
  background: #f1f5ff;
  padding: 15px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}

.details strong {
  color: #007BFF;
  font-weight: 600;
}

/* 🔹 Table Styles */

table.qc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 700px;
}

table.qc-table thead tr {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: white;
}

table.qc-table thead th {
  background: transparent;
  color: white;
  font-weight: 600;
  padding: 12px 15px;
  text-align: left;
  font-size: 15px;
  position: sticky;
  top: 0;
  z-index: 2;
}

table.qc-table tbody tr {
  background: #fff;
  transition: background 0.15s ease;
}

table.qc-table tbody tr:hover {
  background: #f1f7ff;
}

table.qc-table td {
  padding: 14px;
  vertical-align: middle;
  border: 1px solid #f0f4f9;
}

table.qc-table td:first-child {
  font-weight: 600;
  color: #007BFF;
}

/* 🔹 Inputs */

input.qty-input {
  width: 90px;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  font-family: inherit;
}

input.text-input {
  width: 95%;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
}

textarea {
  width: 98%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

/* 🔹 Buttons */

/* 🔹 Standardized Attachment Styles */

.attach-box:empty::before {
  content: "No files selected.";
  color: #94a3b8;
  font-size: 13px;
}

.file-row span {
  font-size: 14px;
}

.btn-submit.sm {
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 14px;
  margin:0;
}

/* ── return_item_external.php ── */

body {
  font-family: 'Inter', Arial, sans-serif;
  background: #f9fafc;
  margin: 0;
  color: #333;
}

.details {
  background: #f1f5ff;
  padding: 15px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}

.details strong {
  color: #007BFF;
  font-weight: 600;
}

/* 🔹 Table Styles */

table.qc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 700px;
}

table.qc-table thead tr {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: white;
}

table.qc-table thead th {
  background: transparent;
  color: white;
  font-weight: 600;
  padding: 12px 15px;
  text-align: left;
  font-size: 15px;
  position: sticky;
  top: 0;
  z-index: 2;
}

table.qc-table tbody tr {
  background: #fff;
  transition: background 0.15s ease;
}

table.qc-table tbody tr:hover {
  background: #f1f7ff;
}

table.qc-table td {
  padding: 14px;
  vertical-align: middle;
  border: 1px solid #f0f4f9;
}

table.qc-table td:first-child {
  font-weight: 600;
  color: #007BFF;
}

/* 🔹 Inputs */

input.qty-input {
  width: 90px;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  font-family: inherit;
}

input.text-input {
  width: 95%;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
}

textarea {
  width: 98%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

/* 🔹 Buttons */

/* 🔹 Standardized Attachment Styles */

.attach-box:empty::before {
  content: "No files selected.";
  color: #94a3b8;
  font-size: 13px;
}

.file-row span {
  font-size: 14px;
}

.btn-submit.sm {
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 14px;
  margin:0;
}

/* ================================================================
   STOREKEEPER — Small inline styles from review pages
   ================================================================ */

/* ── storekeeper_review.php ── */

.panel {
  display: none;
}

.panel.active {
  display: block;
}

.panel.\!active {
  display: block !important;
}

/* ── storekeeper_review_internal.php ── */

.tab-pane.active {
  display: block;
}

.tab-pane.\!active {
  display: block !important;
}

/* ================================================================
   WORKFLOW.CSS — FULL STYLE REFRESH
   Aligns all workflow pages with the unified application standard:
     • Dark navy table headers with column dividers (light mode)
     • Orange gradient table headers (dark mode)
     • dm-back-btn replacing back-btn on detail pages
     • btn-open upgraded to pill-badge style
     • qc-header / qc-header-blue modernized in light mode
     • qc-section card border more defined
     • Covers: QC, Security, Storekeeper, Returns
   ================================================================ */

/* ── qc-section: cleaner light mode card ──────────────────────── */

/* ── qc-header: keep gradient but modernize ───────────────────── */

/* ── qc-header-blue: match qc-header ─────────────────────────── */

/* ── Table headers — blue gradient (light mode) ──────────────── */

/* Workflow pages keep their own visual language: blue gradient    */

/* headers inside qc-section cards. The dark-navy (#0f172a) style  */

/* is for standalone delivery-management tables only.              */

.qc-section thead tr th,
.tbl-wrap thead tr th,
table.qc-table thead th {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: #ffffff;
  padding: 13px 15px;
  border: none;
  border-right: 2px solid rgba(255,255,255,0.22);
  border-bottom: 2px solid rgba(255,255,255,0.15);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

.qc-section thead tr th:last-child,
.tbl-wrap thead tr th:last-child,
table.qc-table thead th:last-child {
  border-right: none;
}

/* list-view / form-view keep the same blue gradient */

.list-view table.qc-table thead th,
.form-view table.qc-table thead th {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  text-align: left;
}

/* ── Table body rows — improved spacing ───────────────────────── */

.qc-section tbody tr td,
.tbl-wrap tbody tr td,
table.qc-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
}

table.qc-table tbody tr:nth-child(even),
.qc-section tbody tr:nth-child(even),
.tbl-wrap tbody tr:nth-child(even) {
  background: #fafbfc;
}

table.qc-table tbody tr:hover,
.qc-section tbody tr:hover td,
.tbl-wrap tbody tr:hover td {
  background: #f0f7ff;
}

/* ── qc-table-wrapper: clean border ───────────────────────────── */

/* ── tbl-wrap: match qc-table-wrapper ────────────────────────── */

/* ── btn-open: modern rounded button ─────────────────────────── */

/* ── btn-submit: match application primary action ─────────────── */

.btn-submit.sm {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
}

/* ── back-btn: also accepts new dm-back-btn style ─────────────── */

/* back-btn kept for legacy; dm-back-btn is the new standard */

/* ── info grid: slightly improved ────────────────────────────── */

.info {
  background: #f0f6ff;
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px 20px;
  border: 1px solid #dce8ff;
}

.label {
  color: #007BFF;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 3px;
}

.\!val {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.val {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

/* ── Empty state ─────────────────────────────────────────────── */

.sk-empty-text,


/* ================================================================
   DARK MODE — Workflow refresh overrides
   Keeps the established orange-accent palette.
   ================================================================ */

/* qc-section dark */
html.dark-mode .qc-section {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

/* Section headers dark */

html.dark-mode .qc-header,
html.dark-mode .qc-header-blue,
html.dark-mode .qc-header-gradient {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Table wrappers dark — orange border matching material entry */

html.dark-mode .qc-table-wrapper {
  background: #1a1a1a;
  border: 1.5px solid #f97316;
}

html.dark-mode .tbl-wrap {
  background: #1a1a1a;
  border: 1.5px solid #f97316;
}

/* Table header dark — solid dark with orange text (matches material entry) */

html.dark-mode .qc-section thead tr th,
html.dark-mode .tbl-wrap thead tr th,
html.dark-mode table.qc-table thead tr,
html.dark-mode table.qc-table thead th {
  background: #1a0a00;
  color: #f97316;
  border-right: 1px solid #2a2a2a;
  border-bottom: 2px solid #2a2a2a;
}

html.dark-mode .qc-section thead tr th:last-child,
html.dark-mode .tbl-wrap thead tr th:last-child,
html.dark-mode table.qc-table thead th:last-child {
  border-right: none;
}

/* Override list-view / form-view — all solid dark in dark */

html.dark-mode .list-view table.qc-table thead th,
html.dark-mode .form-view table.qc-table thead th {
  background: #1a0a00;
  color: #f97316;
}

/* Table body dark — solid dark rows matching material entry */

html.dark-mode table.qc-table td,
html.dark-mode .qc-section tbody tr td,
html.dark-mode .tbl-wrap tbody tr td {
  border-bottom-color: #2a2a2a;
  color: #e0e0e0;
  background: transparent;
}

html.dark-mode .qc-section tbody tr,
html.dark-mode .tbl-wrap tbody tr,
html.dark-mode table.qc-table tbody tr {
  background: #1e1e1e;
}

html.dark-mode table.qc-table tbody tr:nth-child(even),
html.dark-mode .qc-section tbody tr:nth-child(even),
html.dark-mode .tbl-wrap tbody tr:nth-child(even) {
  background: #1a1a1a !important;
}

html.dark-mode table.qc-table tbody tr:hover,
html.dark-mode .qc-section tbody tr:hover td,
html.dark-mode .tbl-wrap tbody tr:hover td {
  background: rgba(249,115,22,0.07) !important;
}

/* btn-open dark */

html.dark-mode .btn-open {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 2px 8px rgba(249,115,22,0.30);
  color: #fff !important;
}

html.dark-mode .btn-open:hover {
  background: linear-gradient(90deg, #b35000, #ea6c0a);
  box-shadow: 0 4px 12px rgba(249,115,22,0.50);
}

/* btn-submit dark */

html.dark-mode .btn-submit {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 3px 10px rgba(249,115,22,0.30);
}

html.dark-mode .btn-submit:hover {
  background: linear-gradient(90deg, #b35000, #ea6c0a);
  box-shadow: 0 4px 14px rgba(249,115,22,0.45);
}

/* back-btn dark */

html.dark-mode .back-btn {
  background: #252525;
  color: #f97316;
  border-color: #3a3a3a;
}

html.dark-mode .back-btn:hover {
  background: #f97316;
  color: #fff;
  border-color: #f97316;
}

/* info grid dark */

html.dark-mode .info {
  background: #1c1c1c;
  border-color: #f97316;
}

html.dark-mode .label {
  color: #f97316;
}

html.dark-mode .val   {
  color: #e0e0e0;
}

html.dark-mode .\!val   {
  color: #e0e0e0 !important;
}

/* Empty state dark */

html.dark-mode .sk-empty-text,
html.dark-mode .no-data {
  color: #555555;
}

/* pill dark — reinforced */

html.dark-mode .pill {
  background: rgba(249,115,22,0.10);
  border-color: rgba(249,115,22,0.30);
  color: #f97316;
}

/* ================================================================
   DELIVERY TYPE SWITCH — storekeeper_review.php (External / Internal)
   Solid filled pill: active = blue fill + white text, inactive = ghost
   ================================================================ */

.wf-stage-tab:not(.active) + .wf-stage-tab:not(.active)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: #e2e8f0;
}

.wf-stage-tab:hover:not(.active) {
  color: #007BFF;
  background: #f0f7ff;
}

.wf-stage-tab.active {
  background: linear-gradient(135deg, #007BFF, #00BFFF);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,123,255,0.30);
}

.wf-stage-tab.\!active {
  background: linear-gradient(135deg, #007BFF, #00BFFF) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0,123,255,0.30) !important;
}

.wf-stage-tab:not(.active) .wf-stage-count {
  background: #e2e8f0;
  color: #64748b;
}

/* Dark mode */

html.dark-mode .wf-stage-tabs {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

html.dark-mode .wf-stage-tab {
  color: #555555;
}

html.dark-mode .wf-stage-tab:not(.active) + .wf-stage-tab:not(.active)::before {
  background: #2a2a2a;
}

html.dark-mode .wf-stage-tab:hover:not(.active) {
  color: #f97316;
  background: rgba(249,115,22,0.08);
}

html.dark-mode .wf-stage-tab.active {
  background: linear-gradient(135deg, #c85a00, #f97316);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35);
}

html.dark-mode .wf-stage-tab.\!active {
  background: linear-gradient(135deg, #c85a00, #f97316) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35) !important;
}

html.dark-mode .wf-stage-count {
  background: #2a2a2a;
  color: #888888;
}

html.dark-mode .wf-stage-tab.active .wf-stage-count {
  background: rgba(255,255,255,0.20);
  color: #ffffff;
}

html.dark-mode .wf-stage-tab.\!active .wf-stage-count {
  background: rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
}

/* ================================================================
   WORKFLOW — DM COMPONENT SYSTEM
   Mirrors the dm-page-header / dm-card / dm-table / dm-btn / dm-empty-state
   components from delivery_management.css so workflow pages match
   the same visual standard as Active Transactions, Edit Approvals, etc.
   ================================================================ */

/* ── Page Header ────────────────────────────────────────────── */

.dm-page-header__sub strong {
  color: #007BFF;
  font-weight: 700;
}

/* ── Card wrapper ───────────────────────────────────────────── */

/* ── Card section divider (title bar inside dm-card) ─────────── */

/* ── Table wrapper ──────────────────────────────────────────── */

/* ── Main data table ────────────────────────────────────────── */

.dm-table thead th {
  background: #0f172a;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 16px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255,255,255,0.06);
  border-right: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

.dm-table thead th:last-child {
  border-right: none;
}

.dm-table thead th.dm-th-actions {
  text-align: center;
  min-width: 120px;
}

.dm-table tbody tr {
}

.dm-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #f1f5f9;
}

.dm-table tbody tr:hover td {
  background: #f0f7ff;
}

.dm-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

.dm-table td {
  padding: 13px 16px;
  vertical-align: middle;
  color: #334155;
  transition: background 0.12s ease;
}

/* ── Actions column ─────────────────────────────────────────── */

/* ── Universal button base ──────────────────────────────────── */

.dm-btn svg {
  flex-shrink: 0;
}

/* View — solid blue */

/* Cancel — red outline */

/* Neutral/ghost */

/* ── Status / note cells ────────────────────────────────────── */

/* ── Empty state ────────────────────────────────────────────── */

/* ── Edit history badge button ──────────────────────────────── */

.edit-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #c2410c;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.edit-badge-btn:hover {
  background: #fed7aa;
  border-color: #fb923c;
}

/* ── Locked-pending-edit info banner ────────────────────────── */

/* ── Locked badge inside DN cell ─────────────────────────────── */

/* ================================================================
   DARK MODE — DM Component System
   ================================================================ */

/* Page header dark */

html.dark-mode .dm-page-header {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

html.dark-mode .dm-page-header__icon {
  background: linear-gradient(135deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(249,115,22,0.30);
}

html.dark-mode .dm-page-header__title {
  color: #e0e0e0;
}

html.dark-mode .dm-page-header__sub   {
  color: #888888;
}

html.dark-mode .dm-page-header__sub strong {
  color: #f97316;
}

/* Card dark */

html.dark-mode .dm-card {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

html.dark-mode .dm-card__section-title {
  color: #555555;
  border-bottom-color: #2a2a2a;
}

/* Table dark */

html.dark-mode .dm-table-wrapper {
  background: #1e1e1e;
  border: 1.5px solid #f97316;
  border-radius: 10px;
  overflow-x: auto;
}

html.dark-mode .dm-table thead tr {
  background: linear-gradient(90deg, #c85a00, #f97316);
}

html.dark-mode .dm-table thead th {
  background: transparent;
  color: #ffffff;
  border-right: 1px solid rgba(0,0,0,0.30);
  border-bottom: none;
}

html.dark-mode .dm-table thead th:last-child {
  border-right: none;
}

html.dark-mode .dm-table tbody tr td {
  background: #1e1e1e;
  transition: background 0.12s ease;
}

html.dark-mode .dm-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #252525;
}

html.dark-mode .dm-table tbody tr:nth-child(even) td {
  background: #1a1a1a;
}

html.dark-mode .dm-table tbody tr:hover td,
html.dark-mode .dm-table tbody tr:nth-child(even):hover td {
  background: rgba(249,115,22,0.07);
}

html.dark-mode .dm-table td {
  color: #d0d0d0;
}

/* Buttons dark */

html.dark-mode .dm-btn--view {
  background: #f97316;
  box-shadow: 0 2px 8px rgba(249,115,22,0.30) !important;
  color: #ffffff;
}

html.dark-mode .dm-btn--view:hover {
  background: #ea6c0a;
  box-shadow: 0 4px 12px rgba(249,115,22,0.50) !important;
  color: #ffffff;
}

html.dark-mode .dm-btn--cancel {
  background: #2d0a0a;
  color: #f87171;
  border-color: #7f1d1d;
}

html.dark-mode .dm-btn--cancel:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 4px 10px rgba(220,38,38,0.40);
}

html.dark-mode .dm-btn--neutral {
  background: #252525;
  color: #a0a0a0;
  border-color: #3a3a3a;
}

html.dark-mode .dm-btn--neutral:hover {
  background: #2e2e2e;
  border-color: #555555;
  color: #d0d0d0;
}

/* Status notes dark */

html.dark-mode .dm-status-note {
  color: #555555;
}

html.dark-mode .dm-status-note--locked {
  background: #2a1e00;
  border-color: #b45309;
  color: #fcd34d;
}

/* Empty state dark */

html.dark-mode .dm-empty-state__title {
  color: #888888;
}

html.dark-mode .dm-empty-state__sub   {
  color: #555555;
}

/* Edit badge dark */

html.dark-mode .edit-badge-btn {
  background: #2a1400;
  border-color: #7c3100;
  color: #fb923c;
}

html.dark-mode .edit-badge-btn:hover {
  background: #3a1d00;
  border-color: #f97316;
  color: #ffffff;
}

/* Locked banner dark */

html.dark-mode .dm-locked-banner {
  background: #2a1e00;
  border-color: #b45309;
  color: #fcd34d;
}

/* Locked badge dark */

html.dark-mode .qc-locked-badge {
  background: #2a1e00;
  border-color: #b45309;
  color: #fcd34d;
}

/* ================================================================
   DECISION PAGES — Unified styling
   dm-back-btn: modern back link used on all decision detail pages
   sec-section / sec-header: aliased to match qc-section / qc-header
   so security detail pages share the same visual card as SK/QC pages
   ================================================================ */

/* ── Back button (modern, used on detail/decision pages) ──────── */

/* ── Security detail pages — alias sec-section → qc-section ──── */

/* ── Decision page header ────────────────────────────────────── */

/* Uses the existing qc-section + qc-header for the info card,
   but we add a mini "breadcrumb" bar above each decision page    */

/* ── Dark mode ───────────────────────────────────────────────── */

html.dark-mode .dm-back-btn {
  background: #1e2a3a;
  border-color: #2e4a6e;
  color: #60a5fa;
}

html.dark-mode .dm-back-btn:hover {
  background: linear-gradient(90deg, #c85a00, #f97316);
  border-color: #f97316;
  color: #fff;
  box-shadow: 0 3px 10px rgba(249,115,22,0.25);
}

html.dark-mode .sec-section {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

html.dark-mode .sec-header {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

html.dark-mode .decision-page-header__badge {
  background: linear-gradient(135deg, #c85a00, #f97316);
  box-shadow: 0 3px 10px rgba(249,115,22,0.25);
}

html.dark-mode .decision-page-header__title {
  color: #e0e0e0;
}

html.dark-mode .decision-page-header__sub   {
  color: #888888;
}

html.dark-mode .decision-page-header__dn    {
  color: #f97316;
}

/* ================================================================
   QC INSPECTION DECISION PAGE — Input field styles
   ================================================================ */

/* qc-readonly-input / qc-qty-input / fail-reason / review-comment now styled
   via Tailwind tokens on qc/inspection.php (bg-background / bg-card-2 /
   border-input). Legacy rules removed so the token utilities win cleanly. */

/* Attach box file list */

.attach-box .file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

/* Dark mode */

/* dark-mode qc-input rules removed — Tailwind tokens handle dark mode now. */

html.dark-mode .attach-box .file-row {
  border-bottom-color: #2a2a2a;
}

#materialsTable th:last-child,
#materialsTable td:last-child {
  border-right: none;
}

#materialsTable th:last-child {
  border-right: none;
}

#materialsTable tbody tr:nth-child(even) {
  background: #f8faff;
}

/* ── attach-scroll: the file list box ───────────────────────── */

/* ── sec-section used for material entry boxes ──────────────── */

/* Light mode: matches sec-section (blue border) + sec-header */

/* (Already defined above from security pages — no change needed) */

/* ================================================================
   STOREKEEPER MATERIAL ENTRY — Dark mode
   ================================================================ */

/* Materials scroll wrapper dark */

html.dark-mode .materials-scroll-wrapper {
  background: #1c1c1c;
  border-color: #f97316;
  /* ── Dark mode scrollbar ── */
  scrollbar-color: #f97316 #1c1c1c;
  scrollbar-width: thin;
}

html.dark-mode .materials-scroll-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark-mode .materials-scroll-wrapper::-webkit-scrollbar-track {
  background: #1c1c1c;
  border-radius: 4px;
}

html.dark-mode .materials-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #f97316;
  border-radius: 4px;
  border: 2px solid #1c1c1c;
}

html.dark-mode .materials-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #ea6c0a;
}

html.dark-mode #materialsTable th:last-child {
  border-right: none;
}

html.dark-mode #materialsTable td:last-child {
  border-right: none;
}

html.dark-mode #materialsTable tbody tr:nth-child(even) {
  background: #1a1a1a;
}

/* ================================================================
   COLUMN WIDTHS — QC + Security material tables (7-column layout)
   Col 1: Resource Code | Col 2: Description | Col 3: DN Qty
   Col 4: Accepted Qty  | Col 5: Rejected Qty | Col 6: Unit
   Col 7: Reason / Remarks
   ================================================================ */

#qcMaterialsTable  th:nth-child(1), #qcMaterialsTable  td:nth-child(1),
#secOutMaterialsTable th:nth-child(1), #secOutMaterialsTable td:nth-child(1),
#secInMaterialsTable  th:nth-child(1), #secInMaterialsTable  td:nth-child(1) {
  width: 12%;
  min-width: 90px;
}

#qcMaterialsTable  th:nth-child(2), #qcMaterialsTable  td:nth-child(2),
#secOutMaterialsTable th:nth-child(2), #secOutMaterialsTable td:nth-child(2),
#secInMaterialsTable  th:nth-child(2), #secInMaterialsTable  td:nth-child(2) {
  width: 26%;
}

#qcMaterialsTable  th:nth-child(3), #qcMaterialsTable  td:nth-child(3),
#secOutMaterialsTable th:nth-child(3), #secOutMaterialsTable td:nth-child(3),
#secInMaterialsTable  th:nth-child(3), #secInMaterialsTable  td:nth-child(3) {
  width: 11%;
  min-width: 80px;
}

#qcMaterialsTable  th:nth-child(4), #qcMaterialsTable  td:nth-child(4),
#secOutMaterialsTable th:nth-child(4), #secOutMaterialsTable td:nth-child(4),
#secInMaterialsTable  th:nth-child(4), #secInMaterialsTable  td:nth-child(4) {
  width: 13%;
  min-width: 90px;
}

#qcMaterialsTable  th:nth-child(5), #qcMaterialsTable  td:nth-child(5),
#secOutMaterialsTable th:nth-child(5), #secOutMaterialsTable td:nth-child(5),
#secInMaterialsTable  th:nth-child(5), #secInMaterialsTable  td:nth-child(5) {
  width: 13%;
  min-width: 90px;
}

#qcMaterialsTable  th:nth-child(6), #qcMaterialsTable  td:nth-child(6),
#secOutMaterialsTable th:nth-child(6), #secOutMaterialsTable td:nth-child(6),
#secInMaterialsTable  th:nth-child(6), #secInMaterialsTable  td:nth-child(6) {
  width: 6%;
  min-width: 50px;
}

#qcMaterialsTable  th:nth-child(7), #qcMaterialsTable  td:nth-child(7),
#secOutMaterialsTable th:nth-child(7), #secOutMaterialsTable td:nth-child(7),
#secInMaterialsTable  th:nth-child(7), #secInMaterialsTable  td:nth-child(7) {
  width: 19%;
}

/* ================================================================
   STOREKEEPER MATERIAL ENTRY — btn-primary / btn-secondary / btn-danger
   These are defined in delivery_management.css but not loaded on
   workflow pages. Duplicated here so the Material Entry page renders
   correctly without loading an extra stylesheet.
   ================================================================ */

/* Standalone .btn-danger (the !important version above only applies
   as a modifier; this handles the base case for action buttons) */

/* Dark mode */

html.dark-mode .btn-primary {
  background: #f97316;
  box-shadow: 0 3px 10px rgba(249,115,22,0.30);
}

html.dark-mode .btn-primary:hover {
  background: #ea6500;
  box-shadow: 0 4px 14px rgba(249,115,22,0.40);
}

html.dark-mode .btn-primary:disabled {
  background: #5a3010;
  opacity: 0.6;
}

html.dark-mode .btn-secondary {
  background: #252525;
  border-color: #3a3a3a;
  color: #a0a0a0;
}

html.dark-mode .btn-secondary:hover {
  background: #2e2e2e;
  border-color: #555555;
  color: #e0e0e0;
}

html.dark-mode .btn-danger {
  background: #c0392b;
  box-shadow: 0 2px 6px rgba(220,38,38,0.30);
}

html.dark-mode .btn-danger:hover {
  background: #a93226;
}

/* ================================================================
   STOREKEEPER MATERIAL ENTRY — Layout & Style Fixes
   Fixes: info/lpo bordered containers, materials-container wrapper,
   attachment widget (sec-empty-text + hidden buttons),
   footer action buttons (me-form-actions).
   Light + Dark mode covered.
   ================================================================ */

/* ── Fix: remove the border from materials-scroll-wrapper itself ──
   The border is now on .materials-container (outer), not the inner
   scroll wrapper. This mirrors the internal delivery form exactly. */

/* ── materials-container — outer blue-bordered wrapper ─────────── */

/* Matches delivery_management.css .materials-container */

/* ── Info block — bordered card under sec-section ──────────────── */

/* Matches the dv-grid border style used in security_out.php */

.me-info-block .info {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 24px;
  border: none;
  overflow: visible;
}

/* ── LPO block — bordered card under sec-section ───────────────── */

/* Header row — icon + title */

.me-lpo-header svg {
  stroke: #d97706;
  flex-shrink: 0;
}

/* Input field row */

.me-lpo-input::-moz-placeholder {
  color: #d4a05a;
}

.me-lpo-input::placeholder {
  color: #d4a05a;
}

/* NA checkbox row */

/* LPO inline row: input + checkbox side by side */

.me-lpo-na-check-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.me-lpo-na-check-wrap input[type="checkbox"]:checked + .me-lpo-na-box {
  background: #d97706;
  border-color: #b45309;
}

.me-lpo-na-check-wrap input[type="checkbox"]:checked + .me-lpo-na-box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(2px, 0px);
  margin: 1px auto 0;
}

/* ── Attachment inner box — bordered like the outer attach-card ── */

/* ── rm-qty-input / rm-qty-cell — mirrors admin.css / delivery_management.css ── */

/* Added here so workflow.css pages (SK material entry) get the same styling    */

/* as the internal delivery form without loading delivery_management.css         */

.rm-qty-input[readonly],
.rm-qty-input.reject-reason-readonly {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  cursor: default;
}

/* Remove spinner arrows */

.rm-qty-input::-webkit-outer-spin-button,
.rm-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Footer actions bar ─────────────────────────────────────────── */

/* Cancel & Back — styled exactly like dm-back-btn but inside the actions bar */

/* Save & Submit — larger, prominent primary action */

/* ── Dark mode overrides ────────────────────────────────────────── */

/* materials-container dark */

html.dark-mode .materials-container {
  border-color: #f97316;
  box-shadow: 0 2px 8px rgba(249,115,22,0.12);
}

/* info block dark */

html.dark-mode .me-info-block {
  background: #1c1c1c;
  border-color: #f97316;
}

html.dark-mode .me-info-block .info {
  background: transparent;
  border: none;
}

/* LPO block dark */

html.dark-mode .me-lpo-block {
  background: #1a1400;
  border-color: #b45309;
}

html.dark-mode .me-lpo-header {
  color: #f97316;
}

html.dark-mode .me-lpo-header svg {
  stroke: #f97316;
}

html.dark-mode .me-lpo-field-label {
  color: #fbbf24;
}

html.dark-mode .me-lpo-input {
  background: #1e1800 !important;
  border-color: #7c4a00 !important;
  color: #f0e0c0 !important;
}

html.dark-mode .me-lpo-input:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.18) !important;
}

html.dark-mode .me-lpo-input.lpo-na {
  background: #150f00 !important;
  border-color: #5a3400 !important;
  color: #a37000 !important;
}

html.dark-mode .me-lpo-input::-moz-placeholder {
  color: #5a3d1a;
}

html.dark-mode .me-lpo-input::placeholder {
  color: #5a3d1a;
}

html.dark-mode .me-lpo-na-box {
  background: #1e1800;
  border-color: #b45309;
}

html.dark-mode .me-lpo-na-check-wrap input[type="checkbox"]:checked + .me-lpo-na-box {
  background: #d97706;
  border-color: #f97316;
}

html.dark-mode .me-lpo-na-text {
  color: #fbbf24;
}

html.dark-mode .me-lpo-hint {
  color: #92400e;
}

/* Attachment inner box dark */

html.dark-mode .me-attach-box {
  background: #1c1c1c !important;
  border-color: #f97316 !important;
}

/* rm-qty-input dark */

html.dark-mode .rm-qty-input {
  background: #2e2e2e !important;
  border-color: #484848 !important;
  color: #f0f0f0 !important;
}

html.dark-mode .rm-qty-input:focus {
  border-color: #f97316 !important;
  background: #353535 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important;
}

html.dark-mode .rm-qty-input[readonly],
html.dark-mode .rm-qty-input.reject-reason-readonly {
  background: #252525 !important;
  color: #666666 !important;
}

html.dark-mode .rm-qty-input.input-error {
  border-color: #f87171 !important;
  background: #2d0a0a !important;
}

/* footer actions dark */

html.dark-mode .me-form-actions {
  background: #1a1a1a;
  border-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

html.dark-mode .me-submit-btn {
  background: linear-gradient(90deg, #c85a00, #f97316);
  box-shadow: 0 4px 14px rgba(249,115,22,0.30);
}

html.dark-mode .me-submit-btn:hover {
  background: linear-gradient(90deg, #a34800, #ea6c0a);
  box-shadow: 0 6px 18px rgba(249,115,22,0.45);
  transform: translateY(-1px);
}

/* ================================================================
   CROSS-PAGE HARMONIZATION
   Makes storekeeper_decision, storekeeper_decision_internal,
   storekeeper_grn, return_qc_detail, return_security_detail
   visually consistent with storekeeper_material_entry.
   ================================================================ */

/* ── Light mode: info & details grids — blue border like me-info-block ── */

.info {
  border: 1.5px solid #9cc1ff;
}

.details {
  border: 1.5px solid #9cc1ff;
  background: #f9fbff;
}

/* ── Light mode: attach-card border — consistent with me-attach-box ─── */

/* ── Dark mode: number inputs inside decision tables (acc-qty, rej-qty) ── */

html.dark-mode .qc-section input[type="number"],
html.dark-mode .tbl-wrap input[type="number"],
html.dark-mode table.qc-table input[type="number"] {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

html.dark-mode .qc-section input[type="number"]:focus,
html.dark-mode .tbl-wrap input[type="number"]:focus,
html.dark-mode table.qc-table input[type="number"]:focus {
  border-color: #f97316;
  background: #353535;
  outline: none;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

/* ── Dark mode: text-input inside decision tables ── */

html.dark-mode .qc-section input[type="text"].text-input,
html.dark-mode .tbl-wrap input[type="text"].text-input,
html.dark-mode table.qc-table input[type="text"].text-input {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
}

/* ── Dark mode: inline-styled resource code cells (return pages) ── */

html.dark-mode table.qc-table tbody td[style*="#64748b"],
html.dark-mode .qc-section tbody td[style*="#64748b"] {
  color: #a0a0a0 !important;
}

/* ── Dark mode: inline-styled material description cells (return pages) ── */

html.dark-mode table.qc-table tbody td[style*="#007BFF"],
html.dark-mode .qc-section tbody td[style*="#007BFF"] {
  color: #fb923c !important;
}

/* ── Dark mode: qc-section scoped table overrides reset (neutralize old scoped rules) ── */

html.dark-mode .qc-section table.qc-table th,
html.dark-mode .qc-section table.qc-table td {
  text-align: left;
}

html.dark-mode .qc-section table.qc-table td:first-child {
  color: #e0e0e0;
  font-weight: normal;
  padding-left: 14px;
}

/* ── Dark mode: attach-card and attach-box consistent orange borders ── */

html.dark-mode .attach-card {
  background: #1c1c1c;
  border-color: #f97316;
}

html.dark-mode .attach-box {
  background: #2e2e2e;
  border-color: #f97316;
}

/* ── Dark mode: qc-section card border reinforced ── */

html.dark-mode .qc-section {
  border-color: #2a2a2a;
}

/* ── Dark mode: .alert-box in return_security_detail ── */

html.dark-mode .alert-box {
  background: #1e1400;
  border-color: #7c4a00;
  color: #fbbf24;
}

/* ================================================================
   INLINE-STYLE DARK MODE OVERRIDES
   Targets inline-styled elements in storekeeper_decision.php,
   storekeeper_decision_internal.php, and storekeeper_grn.php
   ================================================================ */

/* ── storekeeper_decision.php ── */

/* QC Requirement notice box (light blue inline bg) */

html.dark-mode .qc-section > div[style*="#f0f9ff"],
html.dark-mode .qc-section > div[style*="background:#f0f9ff"] {
  background: #0f1e2e !important;
  border-color: #1e4a6e !important;
  color: #60a5fa !important;
}

html.dark-mode .qc-section > div[style*="#f0f9ff"] span[style*="#64748b"] {
  color: #555555 !important;
}

/* QC Review comment cell — amber background */

html.dark-mode td.col-remark[style*="#fff7ed"] {
  background: #1e1400 !important;
  border-left-color: #7c4a00 !important;
}

html.dark-mode td.col-remark[style*="#fff7ed"] .small-note,
html.dark-mode td.col-remark[style*="#fff7ed"] div[style*="#d97706"] {
  color: #fb923c !important;
}

html.dark-mode td.col-remark[style*="#fff7ed"] div[style*="#92400e"] {
  color: #d4a05a !important;
}

/* Material description inline colors inside table cells */

html.dark-mode .col-desc div[style*="#1e293b"],
html.dark-mode td.col-desc[style*="#1e293b"],
html.dark-mode .col-desc div[style*="#475569"] {
  color: #e0e0e0 !important;
}

/* Accepted qty (green) and Rejected qty (red) — lighten for dark rows */

html.dark-mode td.col-qty[style*="#15803d"] {
  color: #4ade80 !important;
}

html.dark-mode td.col-qty[style*="#b91c1c"] {
  color: #f87171 !important;
}

/* ── storekeeper_decision_internal.php ── */

/* Inline-overridden pill (QC Review Requested badge) */

html.dark-mode .pill[style*="#fef2f2"],
html.dark-mode .pill[style*="background:#fef2f2"] {
  background: #2d0a0a !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}

#skIntActionTable td:last-child,
#skIntInfoTable  td:last-child,
#skIntReviewTable td:last-child,
#skDecOtherTable td:last-child {
  border-right: none;
}

#skIntActionTable th:last-child,
#skIntReviewTable th:last-child {
  border-right: none;
}

#skIntInfoTable th:last-child, #skDecOtherTable th:last-child {
  border-right: none;
}

/* Zebra striping removed — these storekeeper-decision tables now use the
   shared Tailwind row dividers + hover (matching the QC tables). The old
   light zebra (#f8faff / #fff9f5) had a broken `html html.dark-mode` dark
   override (double-html selector matches nothing), so the near-white rows
   bled into dark mode (the "white row flash"). Dividers handle separation. */

/* ── Dark mode: stage badges ─────────────────────────────────── */

html.dark-mode .ski-badge-secout {
  background: #0f1e2e;
  color: #60a5fa;
  border-color: #1e3a5f;
}

html.dark-mode .ski-badge-secin  {
  background: #2d0a0a;
  color: #f87171;
  border-color: #7f1d1d;
}

html.dark-mode .ski-badge-qc     {
  background: #1e1200;
  color: #fb923c;
  border-color: #7c3a00;
}

html.dark-mode .ski-badge-sk     {
  background: #052e16;
  color: #4ade80;
  border-color: #166534;
}

html.dark-mode .ski-badge-prev   {
  background: #252525;
  color: #888888;
  border-color: #3a3a3a;
}

/* ── storekeeper_grn.php ── */

/* Delivery type badge (light blue inline pill in list view) */

html.dark-mode span[style*="background:#e0f2fe"],
html.dark-mode span[style*="background: #e0f2fe"] {
  background: #0f1e2e !important;
  color: #60a5fa !important;
  border-color: #1e4a6e !important;
}

/* Sub-text #64748b inside list-view and form-view rows */

html.dark-mode .list-view div[style*="color:#64748b"],
html.dark-mode .list-view span[style*="color:#64748b"],
html.dark-mode .form-view div[style*="color:#64748b"],
html.dark-mode .form-view span[style*="color:#64748b"] {
  color: #888888 !important;
}

/* GRN Details inputs block — override inline white background */

html.dark-mode .form-view .details[style*="background:#fff"],
html.dark-mode .form-view .details[style*="background: #fff"] {
  background: #1c1c1c !important;
  border-color: #f97316 !important;
}

/* Form labels inside GRN Details block */

html.dark-mode .form-view .details label[style*="#333"],
html.dark-mode .form-view .details label[style*="color:#333"] {
  color: #d0d0d0 !important;
}

/* Remarks label (outside .details but same form-view) */

html.dark-mode .form-view > div label[style*="#333"],
html.dark-mode .form-view > div label[style*="color:#333"] {
  color: #d0d0d0 !important;
}

/* Attach card label */

html.dark-mode .attach-card label[style*="#1f3b7b"],
html.dark-mode .attach-card > label {
  color: #d0d0d0 !important;
}

/* ================================================================
   PENDING LIST PAGES — DARK MODE OVERRIDES
   Covers: storekeeper_review.php, storekeeper_review_internal.php,
   return_qc_check.php, return_security_check.php,
   return_pending_external.php, return_pending_internal.php
   ================================================================ */

/* ── dm-table: strong DN/Return numbers — white for prominence ── */

html.dark-mode .dm-table td strong {
  color: #ffffff;
}

/* ── Inline text colors in table cells ── */

/* Initiator/person names (#334155) */

html.dark-mode .dm-table td div[style*="color:#334155"],
html.dark-mode .dm-table td[style*="color:#334155"] {
  color: #e0e0e0 !important;
}

/* Muted secondary text (#64748b) — dates, sub-labels, driver names */

html.dark-mode .dm-table td[style*="color:#64748b"],
html.dark-mode .dm-table td div[style*="color:#64748b"],
html.dark-mode .dm-table td span[style*="color:#64748b"] {
  color: #888888 !important;
}

/* Reason / sub-text (#475569) */

html.dark-mode .dm-table td[style*="color:#475569"],
html.dark-mode .dm-table td div[style*="color:#475569"] {
  color: #a0a0a0 !important;
}

/* Very muted sub-text (#94a3b8) — DN ref under return number */

html.dark-mode .dm-table td span[style*="color:#94a3b8"] {
  color: #666666 !important;
}

/* ── Inline status / badge spans inside dm-table ── */

/* PENDING status — amber */

html.dark-mode .dm-table span[style*="background:#fff7ed"] {
  background: #2a1400 !important;
  color: #fb923c !important;
}

/* Items count badge — light blue */

html.dark-mode .dm-table span[style*="background:#e0f2fe"] {
  background: #0f1e2e !important;
  color: #60a5fa !important;
}

/* COMPLETE / CLOSED — green */

html.dark-mode .dm-table span[style*="background:#dcfce7"] {
  background: #052e16 !important;
  color: #4ade80 !important;
}

/* Default / neutral status — gray */

html.dark-mode .dm-table span[style*="background:#f1f5f9"] {
  background: #252525 !important;
  color: #a0a0a0 !important;
}

/* ================================================================
   QC INSPECTION DECISION PAGE (qc_inspection.php)
   1. Edit lock/amber banners (missing from workflow.css — ported from delivery_management.css)
   2. Delivery info card inline style dark overrides
   3. Table inline style dark overrides
   4. SK rejected section dark overrides
   5. Edit History Modal dark mode
   Light mode + dark mode both covered.
   ================================================================ */

/* ── 1. Edit banners — light mode ── */

.edit-block-banner .ebb-title {
  font-size: 15px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-block-banner .ebb-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 6px;
  color: #92400e;
}

.edit-block-banner .ebb-label {
  font-weight: 700;
  min-width: 160px;
  flex-shrink: 0;
}

.edit-block-banner .ebb-val   {
  color: #1e293b;
}

.edit-block-banner .ebb-note  {
  margin-top: 14px;
  font-size: 12px;
  color: #92400e;
  font-style: italic;
}

.edit-amber-banner .eab-title {
  font-size: 14px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 10px;
}

.edit-amber-banner .eab-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 5px;
  color: #92400e;
}

.edit-amber-banner .eab-label {
  font-weight: 700;
  min-width: 140px;
  flex-shrink: 0;
}

.edit-amber-banner .eab-val   {
  color: #1e293b;
}

.edit-amber-banner .eab-note  {
  margin-top: 12px;
}

/* ── 1. Edit banners — dark mode ── */

html.dark-mode .edit-block-banner {
  background: #2a1e00;
  border-color: #b45309;
}

html.dark-mode .edit-block-banner .ebb-title {
  color: #fcd34d;
}

html.dark-mode .edit-block-banner .ebb-row   {
  color: #fcd34d;
}

html.dark-mode .edit-block-banner .ebb-val   {
  color: #e0e0e0;
}

html.dark-mode .edit-block-banner .ebb-note  {
  color: #f59e0b;
}

html.dark-mode .edit-amber-banner {
  background: #2a1e00;
  border-color: #b45309;
  border-left-color: #f59e0b;
}

html.dark-mode .edit-amber-banner .eab-title {
  color: #fcd34d;
}

html.dark-mode .edit-amber-banner .eab-row   {
  color: #fcd34d;
}

html.dark-mode .edit-amber-banner .eab-val   {
  color: #e0e0e0;
}

/* ── 2. Delivery info card — dark mode inline overrides ── */

/* Label row: color:#64748b → muted */

html.dark-mode .dm-card__body div[style*="color:#64748b"] {
  color: #888888 !important;
}

/* DN Number: color:#007BFF → orange */

html.dark-mode .dm-card__body div[style*="color:#007BFF"] {
  color: #f97316 !important;
}

/* Driver / Vehicle values: color:#1e293b → light */

html.dark-mode .dm-card__body div[style*="color:#1e293b"] {
  color: #e0e0e0 !important;
}

/* From / To values: color:#475569 → muted */

html.dark-mode .dm-card__body div[style*="color:#475569"] {
  color: #a0a0a0 !important;
}

/* ── 3. Table cell inline style overrides — dark mode ── */

/* Resource Code cells: color:#007BFF → orange */

html.dark-mode .dm-table td[style*="color:#007BFF"] {
  color: #fb923c !important;
}

/* SK Remark cells: color:#64748b → muted */

html.dark-mode .dm-table td[style*="color:#64748b"] {
  color: #888888 !important;
}

/* N/A and "review not applicable" spans: color:#9ca3af → darker muted */

html.dark-mode .dm-table td span[style*="color:#9ca3af"],
html.dark-mode .dm-table td[style*="color:#9ca3af"]  {
  color: #666666 !important;
}

/* Checkbox accent color: blue → orange */

html.dark-mode .dm-table input[type="checkbox"] {
  accent-color: #f97316 !important;
}

/* ── 4. SK rejected section — dark mode ── */

/* Section title: amber color + light border-bottom */

html.dark-mode .dm-card__section-title[style*="color:#c2410c"] {
  color: #fb923c !important;
  border-bottom-color: #2a1400 !important;
}

/* Info note box below section title: light bg + gray text */

html.dark-mode .dm-card div[style*="background:#f8fafc"] {
  background: #1a1a1a !important;
  color: #888888 !important;
  border-bottom-color: #2a2a2a !important;
}

/* code tag inside the info box */

html.dark-mode .dm-card div[style*="background:#f8fafc"] code {
  background: #252525 !important;
  color: #fb923c !important;
}

/* ── 5. Edit History Modal — dark mode ── */

/* Define card-bg and text CSS variables in dark mode */

html.dark-mode {
  --card-bg: #1e1e1e;
  --text-primary: #e0e0e0;
  --text-muted: #888888;
}

/* Modal overlay backdrop */

html.dark-mode #editHistoryModal {
  background: rgba(0,0,0,0.75) !important;
}

/* Modal card shell */

html.dark-mode #editHistoryModal > div {
  background: #1e1e1e !important;
  border: 1px solid #2a2a2a;
}

/* Modal title */

html.dark-mode #editHistoryModal h3 {
  color: #e0e0e0 !important;
}

/* Close button */

html.dark-mode #editHistoryModal button {
  color: #888888 !important;
}

/* Each edit entry card */

html.dark-mode #editHistoryContent > div {
  border-color: #2a2a2a !important;
}

/* Edit number heading */

html.dark-mode #editHistoryContent div[style*="color:#1e293b"] {
  color: #e0e0e0 !important;
}

/* Meta labels (Requested by, etc.) */

html.dark-mode #editHistoryContent span[style*="color:#64748b"] {
  color: #888888 !important;
}

/* Table header row */

html.dark-mode #editHistoryContent tr[style*="background:#f1f5f9"] {
  background: #1a0a00 !important;
}

html.dark-mode #editHistoryContent tr[style*="background:#f1f5f9"] th {
  color: #f97316 !important;
}

/* Table rows */

html.dark-mode #editHistoryContent tr[style*="border-bottom:1px solid #e2e8f0"] {
  border-bottom-color: #2a2a2a !important;
}

/* Old value (red) → lighter red */

html.dark-mode #editHistoryContent td[style*="color:#991b1b"] {
  color: #f87171 !important;
}

/* New value (green) → lighter green */

html.dark-mode #editHistoryContent td[style*="color:#166534"] {
  color: #4ade80 !important;
}

/* ================================================================
   RETURN REQUEST FORM — #returnRequestSection
   Mirrors internal delivery form styling (section-content-wrapper
   pattern) but scoped to workflow.css since $moduleCSS = workflow.css
   ================================================================ */

/* ── Wrapper + form-row ── */

#returnRequestSection .section-content-wrapper {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-top: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

#returnRequestSection .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#returnRequestSection .form-row > div {
  flex: 1;
  min-width: 220px;
}

/* ── Labels ── */

#returnRequestSection label {
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
  color: #374151;
  font-size: 13.5px;
}

#returnRequestSection .required {
  color: #e53e3e;
}

/* ── All inputs, selects, textareas ── */

#returnRequestSection input:not([type="file"]):not([type="submit"]):not([type="button"]),
#returnRequestSection select,
#returnRequestSection textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #d1d9e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background: #f8fafc;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

#returnRequestSection input:not([type="file"]):not([type="submit"]):not([type="button"]):focus,
#returnRequestSection select:focus,
#returnRequestSection textarea:focus {
  border-color: #007BFF;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
}

#returnRequestSection input::-moz-placeholder, #returnRequestSection textarea::-moz-placeholder {
  color: #94a3b8;
}

#returnRequestSection input::placeholder,
#returnRequestSection textarea::placeholder {
  color: #94a3b8;
}

/* ── Remove-btn inside table ── */

#returnRequestSection .rr-remove-btn {
  white-space: nowrap;
  padding: 5px 10px;
  font-size: 12px;
}

#returnMaterialsTable td:last-child,
#returnMaterialsTable th:last-child {
  border-right: none;
}

#returnMaterialsTable th:last-child {
  border-right: none;
}

/* ── Dark mode ── */

html.dark-mode #returnRequestSection .section-content-wrapper {
  background: #242424;
  border-color: #333333;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

html.dark-mode #returnRequestSection label {
  color: #e8e8e8;
}

html.dark-mode #returnRequestSection .required {
  color: #f87171;
}

html.dark-mode #returnRequestSection input:not([type="file"]):not([type="submit"]):not([type="button"]),
html.dark-mode #returnRequestSection select,
html.dark-mode #returnRequestSection textarea {
  background: #2e2e2e;
  border-color: #484848;
  color: #f0f0f0;
  box-shadow: none;
}

html.dark-mode #returnRequestSection input::-moz-placeholder, html.dark-mode #returnRequestSection textarea::-moz-placeholder {
  color: #666666;
}

html.dark-mode #returnRequestSection input::placeholder,
html.dark-mode #returnRequestSection textarea::placeholder {
  color: #666666;
}

html.dark-mode #returnRequestSection select option {
  background: #2e2e2e;
  color: #f0f0f0;
}

html.dark-mode #returnRequestSection input:not([type="file"]):not([type="submit"]):not([type="button"]):focus,
html.dark-mode #returnRequestSection select:focus,
html.dark-mode #returnRequestSection textarea:focus {
  border-color: #f97316;
  background: #353535;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.18);
  outline: none;
}

/* #returnMaterialsTable dark zebra removed — the broken `html html.dark-mode`
   selector never matched, leaving white #f8faff rows stuck in dark mode. The
   request.php table uses the shared Tailwind row dividers now. */

/* sub-field visibility helper */

#returnRequestSection .rr-sub-field {
  display: none;
}

/* ================================================================
   RETURN TRACKING PAGE — tracking CSS ported from delivery_management.css
   (return_tracking.php uses workflow.css, not delivery_management.css)
   ================================================================ */

.track-search-row input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid #d8dde6;
  border-radius: 9px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: #1e293b;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.track-search-row input[type="text"]:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.track-search-row .btn-search {
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s;
}

.track-search-row .btn-search:hover {
  opacity: 0.9;
}

.track-search-row .btn-back {
  padding: 10px 16px;
  border-radius: 9px;
  background: transparent;
  color: #007BFF;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1.5px solid #007BFF;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.track-search-row .btn-back:hover {
  background: #007BFF;
  color: #fff;
}

.track-summary-item strong {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.track-summary-item span {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.tracker-wrap   {
  margin: 32px 8px 8px;
  position: relative;
}

.tracker        {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.tracker::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50px;
  right: 50px;
  height: 4px;
  background: #e0e7ff;
  z-index: 1;
}

.tracker-progress {
  position: absolute;
  top: 18px;
  left: 50px;
  height: 4px;
  background: linear-gradient(90deg, #007BFF, #00BFFF);
  z-index: 2;
  transition: width 0.8s ease;
}

.tracker-step         {
  position: relative;
  text-align: center;
  flex: 1;
  z-index: 3;
}

.tracker-circle {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #e0e7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.tracker-step.completed .tracker-circle {
  background: linear-gradient(135deg, #007BFF, #00BFFF);
}

.tracker-step.current   .tracker-circle {
  background: #00BFFF;
  animation: trackerPulse 1.5s infinite;
}

.tracker-step-label {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 3px;
}

.tracker-step-date  {
  font-size: 10px;
  color: #6b7280;
}

@keyframes trackerPulse {
  0%   {
    transform: scale(1);
    box-shadow: 0 0 0 0    rgba(0,191,255,0.6);
  }

  50%  {
    transform: scale(1.06);
    box-shadow: 0 0 0 10px rgba(0,191,255,0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0    rgba(0,191,255,0);
  }
}

.track-empty .icon {
  font-size: 36px;
  display: block;
  margin-bottom: 10px;
}

/* ── Dark mode ── */

html.dark-mode .track-summary-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

html.dark-mode .track-summary-item strong {
  color: #94a3b8;
}

html.dark-mode .track-summary-item span   {
  color: #f1f5f9;
}

html.dark-mode .tracker::before            {
  background: rgba(255,255,255,0.1);
}

html.dark-mode .tracker-circle             {
  background: rgba(255,255,255,0.08);
}

html.dark-mode .tracker-step-label         {
  color: #e2e8f0;
}

html.dark-mode .tracker-step-date          {
  color: #94a3b8;
}

html.dark-mode .track-section-title        {
  color: #e2e8f0;
}

html.dark-mode .track-count-pill           {
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
}

html.dark-mode .track-badge-grey           {
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
  border-color: rgba(255,255,255,0.1);
}

html.dark-mode .track-search-row input[type="text"] {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}

html.dark-mode .track-search-row .btn-back {
  border-color: #60a5fa;
  color: #60a5fa;
}

html.dark-mode .track-search-row .btn-back:hover {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}

/* Fixed height — always 380 px; scrolls when rows exceed the container. */

.mat-table-scroll {
  overflow: auto;
  height: 380px;
}

/* Select / Change / Remove — JS sets className so Tailwind can't scan them */

.mat-btn-select {
  background-color: #007BFF;
  color: #fff;
}

.mat-btn-select:hover {
  background-color: #0056b3;
}

html.dark-mode .mat-btn-select {
  background-color: #f97316;
}

html.dark-mode .mat-btn-select:hover {
  background-color: #ea6c0a;
}

/* Change — blue outlined in light (visual sibling of solid-blue Select);
       orange outlined in dark (warm theme secondary action) */

.mat-btn-change {
  color: #007BFF;
  border: 1px solid #93c5fd;
  /* blue-300 — visible, clearly blue */
  background-color: transparent;
}

.mat-btn-change:hover {
  background-color: #eff6ff;
}

/* blue-50 */

html.dark-mode .mat-btn-change {
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.40);
  background-color: transparent;
}

html.dark-mode .mat-btn-change:hover {
  background-color: rgba(249, 115, 22, 0.12);
}

/* Remove — outlined red in light; red-400 in dark (distinct from orange Change) */

.mat-btn-remove {
  color: #dc2626;
  border: 1px solid #f87171;
  /* red-400 — clearly visible */
  background-color: transparent;
}

.mat-btn-remove:hover {
  background-color: #fef2f2;
}

/* red-50 */

html.dark-mode .mat-btn-remove {
  color: #f87171;
  /* red-400 — clearly red on dark bg */
  border-color: rgba(248, 113, 113, 0.45);
  background-color: transparent;
}

html.dark-mode .mat-btn-remove:hover {
  background-color: rgba(248, 113, 113, 0.10);
}

/* Resource code value — slightly larger than the table's base text-sm */

.rm-code-val {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* 15px semibold */

/* ── Tab active states — delivery type tabs + sub-tabs ─────────────────
       Named classes so JS classList.add/remove stays clean (single token
       instead of 5 individual dark: utility strings). ─────────────────── */

/* Delivery type tabs — solid pill: blue light / orange dark */

.delivery-tab-active {
  background-color: #007BFF;
  color: #ffffff;
  border-radius: 0.5rem;
  /* rounded-lg */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.delivery-tab-active:hover {
  background-color: #0056b3;
}

html.dark-mode .delivery-tab-active {
  background-color: #f97316;
  color: #ffffff;
}

html.dark-mode .delivery-tab-active:hover {
  background-color: #ea6c0a;
}

/* Sub-tabs — solid brand blue light / solid orange dark (mirrors the
       active-tab treatment so the selection reads clearly on the slate-100
       container instead of a faint white-on-grey pill). */

.sub-tab-active {
  background-color: #007BFF;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 91, 187, 0.30);
}

.sub-tab-active:hover {
  background-color: #0056b3;
}

html.dark-mode .sub-tab-active {
  background-color: #f97316;
  /* solid orange — distinct from inactive */
  color: #ffffff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.-bottom-9 {
  bottom: -2.25rem;
}

.-right-6 {
  right: -1.5rem;
}

.bottom-3 {
  bottom: 0.75rem;
}

.bottom-8 {
  bottom: 2rem;
}

.bottom-\[22px\] {
  bottom: 22px;
}

.left-0 {
  left: 0px;
}

.left-0\.5 {
  left: 0.125rem;
}

.left-1\/2 {
  left: 50%;
}

.left-3 {
  left: 0.75rem;
}

.left-\[calc\(50\%\+12px\)\] {
  left: calc(50% + 12px);
}

.right-0 {
  right: 0px;
}

.right-2 {
  right: 0.5rem;
}

.right-2\.5 {
  right: 0.625rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-9 {
  right: 2.25rem;
}

.right-\[60px\] {
  right: 60px;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.z-10 {
  z-index: 10;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-\[10000\] {
  z-index: 10000;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[2000\] {
  z-index: 2000;
}

.z-\[2\] {
  z-index: 2;
}

.z-\[998\] {
  z-index: 998;
}

.z-\[9998\] {
  z-index: 9998;
}

.z-\[99999\] {
  z-index: 99999;
}

.z-\[9999\] {
  z-index: 9999;
}

.z-\[999\] {
  z-index: 999;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-full {
  grid-column: 1 / -1;
}

.m-0 {
  margin: 0px;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.-mb-0\.5 {
  margin-bottom: -0.125rem;
}

.-mb-px {
  margin-bottom: -1px;
}

.-ml-2 {
  margin-left: -0.5rem;
}

.-mr-1 {
  margin-right: -0.25rem;
}

.-mt-1 {
  margin-top: -0.25rem;
}

.-mt-5 {
  margin-top: -1.25rem;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-3\.5 {
  margin-bottom: 0.875rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-\[22px\] {
  margin-bottom: 22px;
}

.ml-0\.5 {
  margin-left: 0.125rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.box-border {
  box-sizing: border-box;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.\!h-\[200px\] {
  height: 200px !important;
}

.\!h-\[260px\] {
  height: 260px !important;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[110px\] {
  height: 110px;
}

.h-\[130px\] {
  height: 130px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[30px\] {
  height: 30px;
}

.h-\[480px\] {
  height: 480px;
}

.h-\[520px\] {
  height: 520px;
}

.h-\[70px\] {
  height: 70px;
}

.h-\[76px\] {
  height: 76px;
}

.h-\[85px\] {
  height: 85px;
}

.h-\[calc\(100vh-70px\)\] {
  height: calc(100vh - 70px);
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-72 {
  max-height: 18rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-\[300px\] {
  max-height: 300px;
}

.max-h-\[400px\] {
  max-height: 400px;
}

.max-h-\[420px\] {
  max-height: 420px;
}

.max-h-\[480px\] {
  max-height: 480px;
}

.max-h-\[80vh\] {
  max-height: 80vh;
}

.max-h-\[82vh\] {
  max-height: 82vh;
}

.max-h-\[88vh\] {
  max-height: 88vh;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.min-h-\[118px\] {
  min-height: 118px;
}

.min-h-\[160px\] {
  min-height: 160px;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[52px\] {
  min-height: 52px;
}

.min-h-\[60px\] {
  min-height: 60px;
}

.min-h-\[60vh\] {
  min-height: 60vh;
}

.min-h-screen {
  min-height: 100vh;
}

.w-0\.5 {
  width: 0.125rem;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-44 {
  width: 11rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[110px\] {
  width: 110px;
}

.w-\[130px\] {
  width: 130px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[250px\] {
  width: 250px;
}

.w-\[30px\] {
  width: 30px;
}

.w-\[440px\] {
  width: 440px;
}

.w-\[600px\] {
  width: 600px;
}

.w-\[70px\] {
  width: 70px;
}

.w-\[76px\] {
  width: 76px;
}

.w-\[85px\] {
  width: 85px;
}

.w-\[90px\] {
  width: 90px;
}

.w-\[95\%\] {
  width: 95%;
}

.w-\[calc\(100\%-24px\)\] {
  width: calc(100% - 24px);
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-8 {
  min-width: 2rem;
}

.min-w-\[18px\] {
  min-width: 18px;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[20px\] {
  min-width: 20px;
}

.min-w-\[22px\] {
  min-width: 22px;
}

.min-w-\[280px\] {
  min-width: 280px;
}

.min-w-\[300px\] {
  min-width: 300px;
}

.min-w-\[320px\] {
  min-width: 320px;
}

.min-w-\[32px\] {
  min-width: 32px;
}

.min-w-\[500px\] {
  min-width: 500px;
}

.min-w-\[64px\] {
  min-width: 64px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-\[140px\] {
  max-width: 140px;
}

.max-w-\[180px\] {
  max-width: 180px;
}

.max-w-\[200px\] {
  max-width: 200px;
}

.max-w-\[260px\] {
  max-width: 260px;
}

.max-w-\[600px\] {
  max-width: 600px;
}

.max-w-\[65\%\] {
  max-width: 65%;
}

.max-w-\[650px\] {
  max-width: 650px;
}

.max-w-\[70px\] {
  max-width: 70px;
}

.max-w-\[800px\] {
  max-width: 800px;
}

.max-w-\[90vw\] {
  max-width: 90vw;
}

.max-w-\[95vw\] {
  max-width: 95vw;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.border-spacing-0 {
  --tw-border-spacing-x: 0px;
  --tw-border-spacing-y: 0px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

.origin-left {
  transform-origin: left;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.animate-\[filterModalIn_0\.2s_ease-out\] {
  animation: filterModalIn 0.2s ease-out;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-text {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.resize-y {
  resize: vertical;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[18px\] {
  gap: 18px;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2\.5 {
  row-gap: 0.625rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-blue-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-divide-opacity, 1));
}

.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}

.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}

.divide-slate-300 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-divide-opacity, 1));
}

.divide-white\/30 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.3);
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-\[18px\] {
  border-radius: 18px;
}

.rounded-\[26px\] {
  border-radius: 26px;
}

.rounded-\[3px\] {
  border-radius: 3px;
}

.rounded-\[5px\] {
  border-radius: 5px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-\[1\.5px\] {
  border-width: 1.5px;
}

.border-y-\[1\.5px\] {
  border-top-width: 1.5px;
  border-bottom-width: 1.5px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-b-\[1\.5px\] {
  border-bottom-width: 1.5px;
}

.border-l {
  border-left-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-l-\[5px\] {
  border-left-width: 5px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-t-\[3px\] {
  border-top-width: 3px;
}

.border-dashed {
  border-style: dashed;
}

.border-none {
  border-style: none;
}

.border-\[\#e5edf5\] {
  --tw-border-opacity: 1;
  border-color: rgb(229 237 245 / var(--tw-border-opacity, 1));
}

.border-\[\#e8eeff\] {
  --tw-border-opacity: 1;
  border-color: rgb(232 238 255 / var(--tw-border-opacity, 1));
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.border-blue-400\/40 {
  border-color: rgb(96 165 250 / 0.4);
}

.border-border {
  border-color: var(--border);
}

.border-brand {
  --tw-border-opacity: 1;
  border-color: rgb(0 123 255 / var(--tw-border-opacity, 1));
}

.border-brand\/30 {
  border-color: rgb(0 123 255 / 0.3);
}

.border-brand\/50 {
  border-color: rgb(0 123 255 / 0.5);
}

.border-brand\/60 {
  border-color: rgb(0 123 255 / 0.6);
}

.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-indigo-100 {
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
}

.border-input {
  border-color: var(--input);
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-red-600\/40 {
  border-color: rgb(220 38 38 / 0.4);
}

.border-sky-200 {
  --tw-border-opacity: 1;
  border-color: rgb(186 230 253 / var(--tw-border-opacity, 1));
}

.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-slate-200\/60 {
  border-color: rgb(226 232 240 / 0.6);
}

.border-slate-200\/70 {
  border-color: rgb(226 232 240 / 0.7);
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}

.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}

.border-white\/50 {
  border-color: rgb(255 255 255 / 0.5);
}

.border-white\/55 {
  border-color: rgb(255 255 255 / 0.55);
}

.\!border-t-green-600 {
  --tw-border-opacity: 1 !important;
  border-top-color: rgb(22 163 74 / var(--tw-border-opacity, 1)) !important;
}

.border-l-\[var\(--feed-color\2c \#007BFF\)\] {
  border-left-color: var(--feed-color,#007BFF);
}

.border-l-amber-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.border-l-brand {
  --tw-border-opacity: 1;
  border-left-color: rgb(0 123 255 / var(--tw-border-opacity, 1));
}

.border-t-amber-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.border-t-brand {
  --tw-border-opacity: 1;
  border-top-color: rgb(0 123 255 / var(--tw-border-opacity, 1));
}

.border-t-green-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-t-red-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-t-slate-400 {
  --tw-border-opacity: 1;
  border-top-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-\[\#f8faff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f9fbff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 251 255 / var(--tw-bg-opacity, 1));
}

.bg-\[var\(--brand-1\)\] {
  background-color: var(--brand-1);
}

.bg-accent {
  background-color: var(--accent);
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-100\/60 {
  background-color: rgb(254 243 199 / 0.6);
}

.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-50\/50 {
  background-color: rgb(255 251 235 / 0.5);
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}

.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.bg-background {
  background-color: var(--background);
}

.bg-black\/10 {
  background-color: rgb(0 0 0 / 0.1);
}

.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-50\/50 {
  background-color: rgb(239 246 255 / 0.5);
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1);
}

.bg-border {
  background-color: var(--border);
}

.bg-brand {
  --tw-bg-opacity: 1;
  background-color: rgb(0 123 255 / var(--tw-bg-opacity, 1));
}

.bg-brand\/10 {
  background-color: rgb(0 123 255 / 0.1);
}

.bg-brand\/5 {
  background-color: rgb(0 123 255 / 0.05);
}

.bg-card {
  background-color: var(--card);
}

.bg-card-2 {
  background-color: var(--card-2);
}

.bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-50\/30 {
  background-color: rgb(240 253 244 / 0.3);
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-100\/60 {
  background-color: rgb(254 226 226 / 0.6);
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-50\/30 {
  background-color: rgb(254 242 242 / 0.3);
}

.bg-red-50\/60 {
  background-color: rgb(254 242 242 / 0.6);
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}

.bg-sky-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-100\/70 {
  background-color: rgb(241 245 249 / 0.7);
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-50\/50 {
  background-color: rgb(248 250 252 / 0.5);
}

.bg-slate-50\/60 {
  background-color: rgb(248 250 252 / 0.6);
}

.bg-slate-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}

.bg-slate-500\/10 {
  background-color: rgb(100 116 139 / 0.1);
}

.bg-slate-900\/45 {
  background-color: rgb(15 23 42 / 0.45);
}

.bg-slate-900\/55 {
  background-color: rgb(15 23 42 / 0.55);
}

.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-white\/25 {
  background-color: rgb(255 255 255 / 0.25);
}

.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}

.bg-white\/\[0\.18\] {
  background-color: rgb(255 255 255 / 0.18);
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-\[url\(\"data\:image\/svg\+xml\2c \%3Csvg\%20xmlns\=\%27http\:\/\/www\.w3\.org\/2000\/svg\%27\%20width\=\%2710\%27\%20height\=\%276\%27\%20viewBox\=\%270\%200\%2010\%206\%27\%3E\%3Cpath\%20d\=\%27M1\%201\.25L5\%204\.75L9\%201\.25\%27\%20stroke\=\%27\%2364748b\%27\%20stroke-width\=\%271\.1\%27\%20stroke-linecap\=\%27round\%27\%20stroke-linejoin\=\%27round\%27\/\%3E\%3C\/svg\%3E\"\)\] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2710%27%20height=%276%27%20viewBox=%270%200%2010%206%27%3E%3Cpath%20d=%27M1%201.25L5%204.75L9%201.25%27%20stroke=%27%2364748b%27%20stroke-width=%271.1%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E");
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-\[\#00c853\] {
  --tw-gradient-from: #00c853 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 200 83 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#00c9b1\] {
  --tw-gradient-from: #00c9b1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 201 177 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#3d5afe\] {
  --tw-gradient-from: #3d5afe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(61 90 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#8b2cf5\] {
  --tw-gradient-from: #8b2cf5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 44 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#f0f4fb\] {
  --tw-gradient-from: #f0f4fb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 244 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#f59e0b\] {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#ff1744\] {
  --tw-gradient-from: #ff1744 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 23 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#ff6a00\] {
  --tw-gradient-from: #ff6a00 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 106 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-brand {
  --tw-gradient-from: #007BFF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 123 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-600 {
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-800 {
  --tw-gradient-from: #1e293b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-black\/25 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#007c2e\] {
  --tw-gradient-to: #007c2e var(--tw-gradient-to-position);
}

.to-\[\#0097a7\] {
  --tw-gradient-to: #0097a7 var(--tw-gradient-to-position);
}

.to-\[\#1a00b8\] {
  --tw-gradient-to: #1a00b8 var(--tw-gradient-to-position);
}

.to-\[\#5a00d6\] {
  --tw-gradient-to: #5a00d6 var(--tw-gradient-to-position);
}

.to-\[\#b0003a\] {
  --tw-gradient-to: #b0003a var(--tw-gradient-to-position);
}

.to-\[\#b45309\] {
  --tw-gradient-to: #b45309 var(--tw-gradient-to-position);
}

.to-\[\#e4eeff\] {
  --tw-gradient-to: #e4eeff var(--tw-gradient-to-position);
}

.to-\[\#ee0979\] {
  --tw-gradient-to: #ee0979 var(--tw-gradient-to-position);
}

.to-\[\#f9fbff\] {
  --tw-gradient-to: #f9fbff var(--tw-gradient-to-position);
}

.to-brand-light {
  --tw-gradient-to: #00BFFF var(--tw-gradient-to-position);
}

.to-green-500 {
  --tw-gradient-to: #22c55e var(--tw-gradient-to-position);
}

.to-sky-400 {
  --tw-gradient-to: #38bdf8 var(--tw-gradient-to-position);
}

.to-sky-50 {
  --tw-gradient-to: #f0f9ff var(--tw-gradient-to-position);
}

.to-slate-200 {
  --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position);
}

.to-slate-700 {
  --tw-gradient-to: #334155 var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.bg-\[position\:right_12px_center\] {
  background-position: right 12px center;
}

.bg-right {
  background-position: right;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.stroke-white {
  stroke: #fff;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-14 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[10px\] {
  padding-left: 10px;
  padding-right: 10px;
}

.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}

.px-\[22px\] {
  padding-left: 22px;
  padding-right: 22px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[11px\] {
  padding-top: 11px;
  padding-bottom: 11px;
}

.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}

.py-\[9px\] {
  padding-top: 9px;
  padding-bottom: 9px;
}

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-1\.5 {
  padding-bottom: 0.375rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-2\.5 {
  padding-bottom: 0.625rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-16 {
  padding-right: 4rem;
}

.pr-28 {
  padding-right: 7rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-7 {
  padding-right: 1.75rem;
}

.pr-9 {
  padding-right: 2.25rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-3\.5 {
  padding-top: 0.875rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-\[18px\] {
  padding-top: 18px;
}

.pt-\[22px\] {
  padding-top: 22px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.font-\[inherit\] {
  font-family: inherit;
}

.font-mono {
  font-family: "JetBrains Mono", monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-\[0\.88em\] {
  font-size: 0.88em;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11\.5px\] {
  font-size: 11.5px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13\.5px\] {
  font-size: 13.5px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[48px\] {
  font-size: 48px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black {
  font-weight: 900;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.normal-case {
  text-transform: none;
}

.italic {
  font-style: italic;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[-2px\] {
  letter-spacing: -2px;
}

.tracking-\[0\.01em\] {
  letter-spacing: 0.01em;
}

.tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}

.tracking-\[0\.03em\] {
  letter-spacing: 0.03em;
}

.tracking-\[0\.04em\] {
  letter-spacing: 0.04em;
}

.tracking-\[0\.055em\] {
  letter-spacing: 0.055em;
}

.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}

.tracking-\[0\.07em\] {
  letter-spacing: 0.07em;
}

.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}

.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}

.tracking-\[0\.25px\] {
  letter-spacing: 0.25px;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[var\(--feed-color\2c \#007BFF\)\] {
  color: var(--feed-color,#007BFF);
}

.text-accent {
  color: var(--accent);
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-brand {
  --tw-text-opacity: 1;
  color: rgb(0 123 255 / var(--tw-text-opacity, 1));
}

.text-current {
  color: currentColor;
}

.text-cyan-700 {
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.text-foreground {
  color: var(--foreground);
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-input {
  color: var(--input);
}

.text-muted {
  color: var(--muted);
}

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-orange-brand {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.text-sky-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}

.text-sky-700 {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}

.text-sky-900 {
  --tw-text-opacity: 1;
  color: rgb(12 74 110 / var(--tw-text-opacity, 1));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-50 {
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}

.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

.accent-accent {
  accent-color: var(--accent);
}

.accent-amber-500 {
  accent-color: #f59e0b;
}

.accent-amber-600 {
  accent-color: #d97706;
}

.accent-blue-500 {
  accent-color: #3b82f6;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-\[0\.22\] {
  opacity: 0.22;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_3px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0 0 0 3px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_4px_rgba\(0\2c 0\2c 0\2c 0\.15\)\] {
  --tw-shadow: 0 0 4px rgba(0,0,0,0.15);
  --tw-shadow-colored: 0 0 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_20px_60px_rgba\(0\2c 0\2c 0\2c 0\.40\)\] {
  --tw-shadow: 0 20px 60px rgba(0,0,0,0.40);
  --tw-shadow-colored: 0 20px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_20px_60px_rgba\(15\2c 23\2c 42\2c 0\.22\)\] {
  --tw-shadow: 0 20px 60px rgba(15,23,42,0.22);
  --tw-shadow-colored: 0 20px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_3px_10px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0 3px 10px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 3px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_3px_10px_rgba\(0\2c 123\2c 255\2c 0\.25\)\] {
  --tw-shadow: 0 3px 10px rgba(0,123,255,0.25);
  --tw-shadow-colored: 0 3px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_14px_rgba\(0\2c 123\2c 255\2c 0\.35\)\] {
  --tw-shadow: 0 4px 14px rgba(0,123,255,0.35);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_20px_rgba\(0\2c 124\2c 46\2c 0\.40\)\] {
  --tw-shadow: 0 6px 20px rgba(0,124,46,0.40);
  --tw-shadow-colored: 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_20px_rgba\(0\2c 151\2c 167\2c 0\.40\)\] {
  --tw-shadow: 0 6px 20px rgba(0,151,167,0.40);
  --tw-shadow-colored: 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_20px_rgba\(176\2c 0\2c 58\2c 0\.40\)\] {
  --tw-shadow: 0 6px 20px rgba(176,0,58,0.40);
  --tw-shadow-colored: 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_20px_rgba\(180\2c 83\2c 9\2c 0\.40\)\] {
  --tw-shadow: 0 6px 20px rgba(180,83,9,0.40);
  --tw-shadow-colored: 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_20px_rgba\(238\2c 9\2c 121\2c 0\.40\)\] {
  --tw-shadow: 0 6px 20px rgba(238,9,121,0.40);
  --tw-shadow-colored: 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_20px_rgba\(26\2c 0\2c 184\2c 0\.40\)\] {
  --tw-shadow: 0 6px 20px rgba(26,0,184,0.40);
  --tw-shadow-colored: 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_20px_rgba\(90\2c 0\2c 214\2c 0\.40\)\] {
  --tw-shadow: 0 6px 20px rgba(90,0,214,0.40);
  --tw-shadow-colored: 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
  --tw-shadow-colored: inset 0 2px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-soft {
  --tw-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 2px 6px var(--tw-shadow-color), 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-amber-500\/25 {
  --tw-shadow-color: rgb(245 158 11 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-black\/30 {
  --tw-shadow-color: rgb(0 0 0 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-brand\/25 {
  --tw-shadow-color: rgb(0 123 255 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-brand\/30 {
  --tw-shadow-color: rgb(0 123 255 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-green-600\/25 {
  --tw-shadow-color: rgb(22 163 74 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-red-500\/25 {
  --tw-shadow-color: rgb(239 68 68 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-8 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-inset {
  --tw-ring-inset: inset;
}

.ring-amber-200\/70 {
  --tw-ring-color: rgb(253 230 138 / 0.7);
}

.ring-blue-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}

.ring-blue-200\/70 {
  --tw-ring-color: rgb(191 219 254 / 0.7);
}

.ring-brand {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 123 255 / var(--tw-ring-opacity, 1));
}

.ring-brand\/20 {
  --tw-ring-color: rgb(0 123 255 / 0.2);
}

.ring-cyan-200\/70 {
  --tw-ring-color: rgb(165 243 252 / 0.7);
}

.ring-emerald-200\/70 {
  --tw-ring-color: rgb(167 243 208 / 0.7);
}

.ring-green-200\/70 {
  --tw-ring-color: rgb(187 247 208 / 0.7);
}

.ring-green-500\/15 {
  --tw-ring-color: rgb(34 197 94 / 0.15);
}

.ring-indigo-200\/70 {
  --tw-ring-color: rgb(199 210 254 / 0.7);
}

.ring-orange-200\/70 {
  --tw-ring-color: rgb(254 215 170 / 0.7);
}

.ring-purple-200\/70 {
  --tw-ring-color: rgb(233 213 255 / 0.7);
}

.ring-red-200\/70 {
  --tw-ring-color: rgb(254 202 202 / 0.7);
}

.ring-red-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.ring-ring {
  --tw-ring-color: var(--ring);
}

.ring-sky-200\/70 {
  --tw-ring-color: rgb(186 230 253 / 0.7);
}

.ring-slate-200\/70 {
  --tw-ring-color: rgb(226 232 240 / 0.7);
}

.ring-slate-300\/70 {
  --tw-ring-color: rgb(203 213 225 / 0.7);
}

.ring-teal-200\/70 {
  --tw-ring-color: rgb(153 246 228 / 0.7);
}

.ring-violet-200\/70 {
  --tw-ring-color: rgb(221 214 254 / 0.7);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
  --tw-drop-shadow: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[border\2c box-shadow\] {
  transition-property: border,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[opacity\2c visibility\] {
  transition-property: opacity,visibility;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[transform\2c box-shadow\] {
  transition-property: transform,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-75 {
  transition-duration: 75ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(160px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
}

/* =============================================================
   Targeted preflight fallback (Visual Identity Alignment v2)
   -------------------------------------------------------------
   Tailwind preflight (corePlugins.preflight) is disabled so the
   migrated @layer-components shell keeps browser defaults. That
   leaves two visible gaps the audit found — re-introduced here
   in @layer base (lowest priority; overrides nothing, so any
   utility/component class still wins):
     1. Form controls don't inherit the UI font → they render in
        the browser's UA font instead of Inter.
     2. Bare <button> elements show native OS chrome (grey fill).
   ============================================================= */

/* =============================================================
   Module: light.css — Global Shell (layout, header, sidebar,
            forms, buttons, modals, MD3 tokens, root vars)
   Source: public/light.css (1308 lines, the foundation file)
   Migrated as raw CSS inside @layer components.
   ============================================================= */

/* end light.css */

/* =============================================================
   Module: dark.css — Dark mode overrides for the global shell
            (scoped to html.dark-mode) + access_denied .ad-* rules.
   Source: public/dark.css (464 lines)
   Warm-orange .page-container radial glow PRESERVED here per
   Phase 9 Safeguard #22.
   ============================================================= */

/* end dark.css */

/* =============================================================
   Module: analytics.css — Dashboard & Analytics
   Source: analytics.css (677 lines)
   ============================================================= */

/* ── KPI Cards ─────────────────────────────────────────────────────────────
   T7.B — Migrated to render_kpi_card() molecule
   (src/App/Views/components/molecules/kpi-card.php). Legacy .kpi-card /
   .kpi-total / .kpi-icon stack removed.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Action Bar ────────────────────────────────────────────────────────────
   T7.D — Migrated. .action-bar / .btn-new-delivery / .btn-filter /
   .btn-refresh-pill / .filter-badge / .last-updated-soft / .action-bar-spacer
   now expressed as pure utilities inline on the dashboard view.
   ────────────────────────────────────────────────────────────────────────── */

/* @keyframes must live outside @layer — browser CSS layer spec does not
   cascade @keyframes, so they must be at the stylesheet root level.   */

@keyframes filterModalIn {
  from {
    transform: scale(0.96) translateY(8px);
    opacity: 0;
  }

  to   {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ── Filter Modal ─────────────────────────────────────────────────────────
   T7.D — Migrated. .filter-modal-* / .filter-row / .btn-filter-{reset,apply}
   now expressed as pure utilities inline on the dashboard view. The
   @keyframes filterModalIn declaration stays at sheet root (above).
   ────────────────────────────────────────────────────────────────────────── */

/* ── Activity Feed ──────────────────────────────────────────── */

/* ── Filter Items & Tab Styles ──────────────────────────────── */

/* ── Section spacing & Chart canvas ────────────────────────── */

/* ── Location search widget (dashboard filter modal) ────────── */

/* ── Dark mode — Dashboard (mirrors analytics.css dark section) */

/* =============================================================
   Module: admin.css — Administration Module
   Migrated to @layer components — raw CSS preserved.
   ============================================================= */

/* end admin.css */

/* =============================================================
   Module: inventory.css — Inventory & Costing Module
   Migrated to @layer components — raw CSS preserved.
   ============================================================= */

/* end inventory.css */

/* =============================================================
   Module: delivery_management.css — Delivery Management Module
   Migrated to @layer components — raw CSS preserved.
   ============================================================= */

/* end delivery_management.css */

/* =============================================================
   Module: workflow.css — QC, Security, Storekeeper, Returns
   Migrated to @layer components — raw CSS preserved.
   ============================================================= */

/* end workflow.css */

/* ── Materials table — scroll container + action buttons ────────────────────
   .mat-table-scroll  — fixed-height scroll wrapper; sticky thead pins headers
                        while tbody scrolls. JS-assigned so not scannable by
                        Tailwind's static scanner.
   .mat-btn-select    — primary action (blue light / orange dark)
   .mat-btn-change    — secondary action (ghost with orange tint dark)
   .mat-btn-remove    — outlined danger (red light / orange dark)
   ─────────────────────────────────────────────────────────────────────────── */

.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}

.file\:cursor-pointer::file-selector-button {
  cursor: pointer;
}

.file\:rounded-l-md::file-selector-button {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:border-r::file-selector-button {
  border-right-width: 1px;
}

.file\:border-input::file-selector-button {
  border-color: var(--input);
}

.file\:bg-card::file-selector-button {
  background-color: var(--card);
}

.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.file\:py-2::file-selector-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-foreground::file-selector-button {
  color: var(--foreground);
}

.placeholder\:text-muted::-moz-placeholder {
  color: var(--muted);
}

.placeholder\:text-muted::placeholder {
  color: var(--muted);
}

.placeholder\:text-slate-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.placeholder\:text-slate-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.last\:mb-0:last-child {
  margin-bottom: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:border-r-0:last-child {
  border-right-width: 0px;
}

.focus-within\:border-blue-500:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus-within\:shadow-\[0_0_8px_rgba\(78\2c 141\2c 245\2c 0\.55\)\2c inset_0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.04\)\]:focus-within {
  --tw-shadow: 0 0 8px rgba(78,141,245,0.55),inset 0 2px 4px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color), inset 0 2px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-\[3px\]:hover {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-px:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-\[var\(--feed-color\2c \#007BFF\)\]:hover {
  border-color: var(--feed-color,#007BFF);
}

.hover\:border-brand:hover {
  --tw-border-opacity: 1;
  border-color: rgb(0 123 255 / var(--tw-border-opacity, 1));
}

.hover\:border-brand\/40:hover {
  border-color: rgb(0 123 255 / 0.4);
}

.hover\:border-brand\/50:hover {
  border-color: rgb(0 123 255 / 0.5);
}

.hover\:border-brand\/60:hover {
  border-color: rgb(0 123 255 / 0.6);
}

.hover\:border-indigo-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}

.hover\:border-red-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.hover\:border-slate-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.hover\:border-slate-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.hover\:bg-\[var\(--brand-1-dark\)\]:hover {
  background-color: var(--brand-1-dark);
}

.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-dark:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 86 179 / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand\/10:hover {
  background-color: rgb(0 123 255 / 0.1);
}

.hover\:bg-brand\/5:hover {
  background-color: rgb(0 123 255 / 0.05);
}

.hover\:bg-card:hover {
  background-color: var(--card);
}

.hover\:bg-card-2:hover {
  background-color: var(--card-2);
}

.hover\:bg-emerald-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/25:hover {
  background-color: rgb(255 255 255 / 0.25);
}

.hover\:bg-white\/30:hover {
  background-color: rgb(255 255 255 / 0.3);
}

.hover\:bg-white\/70:hover {
  background-color: rgb(255 255 255 / 0.7);
}

.hover\:from-white:hover {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-\[\#f2f8ff\]:hover {
  --tw-gradient-to: #f2f8ff var(--tw-gradient-to-position);
}

.hover\:text-brand:hover {
  --tw-text-opacity: 1;
  color: rgb(0 123 255 / var(--tw-text-opacity, 1));
}

.hover\:text-foreground:hover {
  color: var(--foreground);
}

.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-900:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-2xl:hover {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_12px_30px_rgba\(56\2c 129\2c 255\2c 0\.50\)\]:hover {
  --tw-shadow: 0 12px 30px rgba(56,129,255,0.50);
  --tw-shadow-colored: 0 12px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_14px_34px_-12px_rgba\(0\2c 123\2c 255\2c 0\.45\)\]:hover {
  --tw-shadow: 0 14px 34px -12px rgba(0,123,255,0.45);
  --tw-shadow-colored: 0 14px 34px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_6px_14px_rgba\(0\2c 123\2c 255\2c 0\.15\)\]:hover {
  --tw-shadow: 0 6px 14px rgba(0,123,255,0.15);
  --tw-shadow-colored: 0 6px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:file\:bg-background::file-selector-button:hover {
  background-color: var(--background);
}

.focus\:border-\[var\(--brand-1\)\]:focus {
  border-color: var(--brand-1);
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:bg-white:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.focus\:shadow-\[0_0_0_3px_rgba\(0\2c 123\2c 255\2c 0\.12\)\]:focus {
  --tw-shadow: 0 0 0 3px rgba(0,123,255,0.12);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[3px\]:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-500\/10:focus {
  --tw-ring-color: rgb(59 130 246 / 0.1);
}

.focus\:ring-brand:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 123 255 / var(--tw-ring-opacity, 1));
}

.focus\:ring-green-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.focus\:ring-ring:focus {
  --tw-ring-color: var(--ring);
}

.focus\:ring-offset-1:focus {
  --tw-ring-offset-width: 1px;
}

.focus\:ring-offset-card:focus {
  --tw-ring-offset-color: var(--card);
}

.focus-visible\:rounded-t:focus-visible {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-amber-400:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-blue-400:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-brand:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 123 255 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-green-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-red-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: var(--ring);
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: var(--background);
}

.focus-visible\:ring-offset-card:focus-visible {
  --tw-ring-offset-color: var(--card);
}

.active\:translate-y-0:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:translate-y-px:active {
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:translate-y-0:disabled {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:bg-background:disabled {
  background-color: var(--background);
}

.disabled\:bg-slate-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-none:disabled {
  background-image: none;
}

.disabled\:text-muted:disabled {
  color: var(--muted);
}

.disabled\:text-slate-400:disabled {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-85:disabled {
  opacity: 0.85;
}

.disabled\:shadow-none:disabled {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:opacity-\[0\.32\] {
  opacity: 0.32;
}

.peer:checked ~ .peer-checked\:translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:bg-brand {
  --tw-bg-opacity: 1;
  background-color: rgb(0 123 255 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.peer:checked ~ .peer-checked\:from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.peer:checked ~ .peer-checked\:to-sky-400 {
  --tw-gradient-to: #38bdf8 var(--tw-gradient-to-position);
}

.peer:checked ~ .peer-checked\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.data-\[state\=open\]\:flex[data-state="open"] {
  display: flex;
}

.data-\[active\=true\]\:rounded-md[data-active="true"] {
  border-radius: 0.375rem;
}

.data-\[active\=true\]\:border-blue-300[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.data-\[state\=active\]\:border-brand[data-state="active"] {
  --tw-border-opacity: 1;
  border-color: rgb(0 123 255 / var(--tw-border-opacity, 1));
}

.data-\[active\=true\]\:bg-blue-50[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.data-\[active\=true\]\:bg-blue-500\/10[data-active="true"] {
  background-color: rgb(59 130 246 / 0.1);
}

.data-\[state\=active\]\:bg-blue-50\/50[data-state="active"] {
  background-color: rgb(239 246 255 / 0.5);
}

.data-\[active\=true\]\:px-1\.5[data-active="true"] {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.data-\[active\=true\]\:py-0\.5[data-active="true"] {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.data-\[active\=true\]\:font-semibold[data-active="true"] {
  font-weight: 600;
}

.data-\[active\=true\]\:text-blue-600[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.data-\[active\=true\]\:text-blue-700[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.data-\[state\=active\]\:text-brand[data-state="active"] {
  --tw-text-opacity: 1;
  color: rgb(0 123 255 / var(--tw-text-opacity, 1));
}

.group[data-state="open"] .group-data-\[state\=open\]\:scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-\[state\=open\]\:opacity-100 {
  opacity: 1;
}

.dark\:divide-border:is(.dark-mode *) > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border);
}

.dark\:divide-white\/10:is(.dark-mode *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.1);
}

.dark\:divide-white\/5:is(.dark-mode *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.05);
}

.dark\:border-amber-500\/30:is(.dark-mode *) {
  border-color: rgb(245 158 11 / 0.3);
}

.dark\:border-amber-500\/40:is(.dark-mode *) {
  border-color: rgb(245 158 11 / 0.4);
}

.dark\:border-amber-700:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-700\/50:is(.dark-mode *) {
  border-color: rgb(180 83 9 / 0.5);
}

.dark\:border-amber-700\/60:is(.dark-mode *) {
  border-color: rgb(180 83 9 / 0.6);
}

.dark\:border-amber-900:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(120 53 15 / var(--tw-border-opacity, 1));
}

.dark\:border-blue-900:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}

.dark\:border-border:is(.dark-mode *) {
  border-color: var(--border);
}

.dark\:border-brand:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(0 123 255 / var(--tw-border-opacity, 1));
}

.dark\:border-brand-light:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(0 191 255 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-700:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-800\/60:is(.dark-mode *) {
  border-color: rgb(6 95 70 / 0.6);
}

.dark\:border-green-500\/40:is(.dark-mode *) {
  border-color: rgb(34 197 94 / 0.4);
}

.dark\:border-green-900:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(20 83 45 / var(--tw-border-opacity, 1));
}

.dark\:border-input:is(.dark-mode *) {
  border-color: var(--input);
}

.dark\:border-orange-500\/30:is(.dark-mode *) {
  border-color: rgb(249 115 22 / 0.3);
}

.dark\:border-orange-brand:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}

.dark\:border-orange-brand\/30:is(.dark-mode *) {
  border-color: rgb(249 115 22 / 0.3);
}

.dark\:border-orange-brand\/40:is(.dark-mode *) {
  border-color: rgb(249 115 22 / 0.4);
}

.dark\:border-orange-brand\/50:is(.dark-mode *) {
  border-color: rgb(249 115 22 / 0.5);
}

.dark\:border-orange-brand\/60:is(.dark-mode *) {
  border-color: rgb(249 115 22 / 0.6);
}

.dark\:border-red-500\/40:is(.dark-mode *) {
  border-color: rgb(239 68 68 / 0.4);
}

.dark\:border-red-800\/50:is(.dark-mode *) {
  border-color: rgb(153 27 27 / 0.5);
}

.dark\:border-red-900:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(127 29 29 / var(--tw-border-opacity, 1));
}

.dark\:border-sky-800:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(7 89 133 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-600:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-700:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}

.dark\:border-transparent:is(.dark-mode *) {
  border-color: transparent;
}

.dark\:border-white\/10:is(.dark-mode *) {
  border-color: rgb(255 255 255 / 0.1);
}

.dark\:\!border-t-emerald-400:is(.dark-mode *) {
  --tw-border-opacity: 1 !important;
  border-top-color: rgb(52 211 153 / var(--tw-border-opacity, 1)) !important;
}

.dark\:border-l-amber-500:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-left-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.dark\:border-l-blue-500:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-left-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.dark\:border-t-orange-brand:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-top-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}

.dark\:border-t-slate-500:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-top-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}

.dark\:bg-\[\#0f0a05\]:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 10 5 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#242424\]:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(36 36 36 / var(--tw-bg-opacity, 1));
}

.dark\:bg-amber-500\/10:is(.dark-mode *) {
  background-color: rgb(245 158 11 / 0.1);
}

.dark\:bg-amber-500\/15:is(.dark-mode *) {
  background-color: rgb(245 158 11 / 0.15);
}

.dark\:bg-amber-500\/20:is(.dark-mode *) {
  background-color: rgb(245 158 11 / 0.2);
}

.dark\:bg-amber-500\/5:is(.dark-mode *) {
  background-color: rgb(245 158 11 / 0.05);
}

.dark\:bg-amber-900\/40:is(.dark-mode *) {
  background-color: rgb(120 53 15 / 0.4);
}

.dark\:bg-amber-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
}

.dark\:bg-amber-950\/20:is(.dark-mode *) {
  background-color: rgb(69 26 3 / 0.2);
}

.dark\:bg-amber-950\/30:is(.dark-mode *) {
  background-color: rgb(69 26 3 / 0.3);
}

.dark\:bg-amber-950\/40:is(.dark-mode *) {
  background-color: rgb(69 26 3 / 0.4);
}

.dark\:bg-black\/25:is(.dark-mode *) {
  background-color: rgb(0 0 0 / 0.25);
}

.dark\:bg-black\/70:is(.dark-mode *) {
  background-color: rgb(0 0 0 / 0.7);
}

.dark\:bg-blue-500\/20:is(.dark-mode *) {
  background-color: rgb(59 130 246 / 0.2);
}

.dark\:bg-blue-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-950\/40:is(.dark-mode *) {
  background-color: rgb(23 37 84 / 0.4);
}

.dark\:bg-border:is(.dark-mode *) {
  background-color: var(--border);
}

.dark\:bg-brand:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 123 255 / var(--tw-bg-opacity, 1));
}

.dark\:bg-brand\/20:is(.dark-mode *) {
  background-color: rgb(0 123 255 / 0.2);
}

.dark\:bg-card:is(.dark-mode *) {
  background-color: var(--card);
}

.dark\:bg-card-2:is(.dark-mode *) {
  background-color: var(--card-2);
}

.dark\:bg-cyan-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(8 51 68 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-900\/40:is(.dark-mode *) {
  background-color: rgb(6 78 59 / 0.4);
}

.dark\:bg-emerald-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(2 44 34 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-950\/40:is(.dark-mode *) {
  background-color: rgb(2 44 34 / 0.4);
}

.dark\:bg-green-500\/20:is(.dark-mode *) {
  background-color: rgb(34 197 94 / 0.2);
}

.dark\:bg-green-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(5 46 22 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-950\/10:is(.dark-mode *) {
  background-color: rgb(5 46 22 / 0.1);
}

.dark\:bg-green-950\/40:is(.dark-mode *) {
  background-color: rgb(5 46 22 / 0.4);
}

.dark\:bg-indigo-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 27 75 / var(--tw-bg-opacity, 1));
}

.dark\:bg-orange-500:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.dark\:bg-orange-500\/15:is(.dark-mode *) {
  background-color: rgb(249 115 22 / 0.15);
}

.dark\:bg-orange-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(67 20 7 / var(--tw-bg-opacity, 1));
}

.dark\:bg-orange-brand:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.dark\:bg-orange-brand\/10:is(.dark-mode *) {
  background-color: rgb(249 115 22 / 0.1);
}

.dark\:bg-orange-brand\/5:is(.dark-mode *) {
  background-color: rgb(249 115 22 / 0.05);
}

.dark\:bg-purple-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(59 7 100 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-500\/10:is(.dark-mode *) {
  background-color: rgb(239 68 68 / 0.1);
}

.dark\:bg-red-500\/20:is(.dark-mode *) {
  background-color: rgb(239 68 68 / 0.2);
}

.dark\:bg-red-900\/20:is(.dark-mode *) {
  background-color: rgb(127 29 29 / 0.2);
}

.dark\:bg-red-900\/40:is(.dark-mode *) {
  background-color: rgb(127 29 29 / 0.4);
}

.dark\:bg-red-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-950\/10:is(.dark-mode *) {
  background-color: rgb(69 10 10 / 0.1);
}

.dark\:bg-red-950\/20:is(.dark-mode *) {
  background-color: rgb(69 10 10 / 0.2);
}

.dark\:bg-red-950\/40:is(.dark-mode *) {
  background-color: rgb(69 10 10 / 0.4);
}

.dark\:bg-sky-900\/40:is(.dark-mode *) {
  background-color: rgb(12 74 110 / 0.4);
}

.dark\:bg-sky-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(8 47 73 / var(--tw-bg-opacity, 1));
}

.dark\:bg-sky-950\/30:is(.dark-mode *) {
  background-color: rgb(8 47 73 / 0.3);
}

.dark\:bg-slate-600:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-700:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.dark\:bg-teal-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(4 47 46 / var(--tw-bg-opacity, 1));
}

.dark\:bg-violet-950:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(46 16 101 / var(--tw-bg-opacity, 1));
}

.dark\:bg-white\/\[0\.02\]:is(.dark-mode *) {
  background-color: rgb(255 255 255 / 0.02);
}

.dark\:bg-white\/\[0\.03\]:is(.dark-mode *) {
  background-color: rgb(255 255 255 / 0.03);
}

.dark\:bg-yellow-950\/40:is(.dark-mode *) {
  background-color: rgb(66 32 6 / 0.4);
}

.dark\:from-\[\#0f0f0f\]:is(.dark-mode *) {
  --tw-gradient-from: #0f0f0f var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 15 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-\[\#242424\]:is(.dark-mode *) {
  --tw-gradient-from: #242424 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(36 36 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-\[\#26160a\]:is(.dark-mode *) {
  --tw-gradient-from: #26160a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(38 22 10 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-orange-500:is(.dark-mode *) {
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-orange-brand:is(.dark-mode *) {
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:to-\[\#160d04\]:is(.dark-mode *) {
  --tw-gradient-to: #160d04 var(--tw-gradient-to-position);
}

.dark\:to-\[\#1a1a1a\]:is(.dark-mode *) {
  --tw-gradient-to: #1a1a1a var(--tw-gradient-to-position);
}

.dark\:to-\[\#242424\]:is(.dark-mode *) {
  --tw-gradient-to: #242424 var(--tw-gradient-to-position);
}

.dark\:to-\[\#ea6c0a\]:is(.dark-mode *) {
  --tw-gradient-to: #ea6c0a var(--tw-gradient-to-position);
}

.dark\:to-\[\#fb923c\]:is(.dark-mode *) {
  --tw-gradient-to: #fb923c var(--tw-gradient-to-position);
}

.dark\:to-orange-400:is(.dark-mode *) {
  --tw-gradient-to: #fb923c var(--tw-gradient-to-position);
}

.dark\:to-slate-700:is(.dark-mode *) {
  --tw-gradient-to: #334155 var(--tw-gradient-to-position);
}

.dark\:text-amber-100:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-200:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-50:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(255 251 235 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-200:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.dark\:text-brand-light:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(0 191 255 / var(--tw-text-opacity, 1));
}

.dark\:text-cyan-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-foreground:is(.dark-mode *) {
  color: var(--foreground);
}

.dark\:text-green-200:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}

.dark\:text-green-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.dark\:text-green-400:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}

.dark\:text-muted:is(.dark-mode *) {
  color: var(--muted);
}

.dark\:text-orange-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

.dark\:text-orange-400:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.dark\:text-orange-brand:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.dark\:text-orange-brand\/80:is(.dark-mode *) {
  color: rgb(249 115 22 / 0.8);
}

.dark\:text-purple-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.dark\:text-purple-400:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.dark\:text-red-200:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.dark\:text-red-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-sky-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}

.dark\:text-sky-400:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}

.dark\:text-teal-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(94 234 212 / var(--tw-text-opacity, 1));
}

.dark\:text-teal-400:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}

.dark\:text-violet-300:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}

.dark\:text-white:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:text-yellow-400:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.dark\:shadow-2xl:is(.dark-mode *) {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:shadow-\[0_3px_10px_rgba\(249\2c 115\2c 22\2c 0\.28\)\]:is(.dark-mode *) {
  --tw-shadow: 0 3px 10px rgba(249,115,22,0.28);
  --tw-shadow-colored: 0 3px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:shadow-\[0_3px_10px_rgba\(249\2c 115\2c 22\2c 0\.30\)\]:is(.dark-mode *) {
  --tw-shadow: 0 3px 10px rgba(249,115,22,0.30);
  --tw-shadow-colored: 0 3px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:shadow-\[0_4px_14px_rgba\(249\2c 115\2c 22\2c 0\.35\)\]:is(.dark-mode *) {
  --tw-shadow: 0 4px 14px rgba(249,115,22,0.35);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:shadow-none:is(.dark-mode *) {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:shadow-orange-brand\/30:is(.dark-mode *) {
  --tw-shadow-color: rgb(249 115 22 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.dark\:ring-amber-900:is(.dark-mode *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(120 53 15 / var(--tw-ring-opacity, 1));
}

.dark\:ring-blue-900:is(.dark-mode *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity, 1));
}

.dark\:ring-border:is(.dark-mode *) {
  --tw-ring-color: var(--border);
}

.dark\:ring-green-900:is(.dark-mode *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(20 83 45 / var(--tw-ring-opacity, 1));
}

.dark\:ring-orange-brand:is(.dark-mode *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity, 1));
}

.dark\:ring-red-900:is(.dark-mode *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity, 1));
}

.dark\:placeholder\:text-muted:is(.dark-mode *)::-moz-placeholder {
  color: var(--muted);
}

.dark\:placeholder\:text-muted:is(.dark-mode *)::placeholder {
  color: var(--muted);
}

.dark\:hover\:border-input:hover:is(.dark-mode *) {
  border-color: var(--input);
}

.dark\:hover\:border-orange-brand\/40:hover:is(.dark-mode *) {
  border-color: rgb(249 115 22 / 0.4);
}

.dark\:hover\:border-orange-brand\/50:hover:is(.dark-mode *) {
  border-color: rgb(249 115 22 / 0.5);
}

.dark\:hover\:border-orange-brand\/60:hover:is(.dark-mode *) {
  border-color: rgb(249 115 22 / 0.6);
}

.dark\:hover\:bg-\[\#1c1208\]:hover:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(28 18 8 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-amber-900:hover:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-amber-900\/60:hover:is(.dark-mode *) {
  background-color: rgb(120 53 15 / 0.6);
}

.dark\:hover\:bg-card-2:hover:is(.dark-mode *) {
  background-color: var(--card-2);
}

.dark\:hover\:bg-emerald-900\/20:hover:is(.dark-mode *) {
  background-color: rgb(6 78 59 / 0.2);
}

.dark\:hover\:bg-orange-500\/25:hover:is(.dark-mode *) {
  background-color: rgb(249 115 22 / 0.25);
}

.dark\:hover\:bg-orange-600:hover:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-orange-brand-hover:hover:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(234 108 10 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-orange-brand\/10:hover:is(.dark-mode *) {
  background-color: rgb(249 115 22 / 0.1);
}

.dark\:hover\:bg-orange-brand\/20:hover:is(.dark-mode *) {
  background-color: rgb(249 115 22 / 0.2);
}

.dark\:hover\:bg-red-900:hover:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-red-950:hover:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-red-950\/40:hover:is(.dark-mode *) {
  background-color: rgb(69 10 10 / 0.4);
}

.hover\:dark\:bg-card-2:is(.dark-mode *):hover {
  background-color: var(--card-2);
}

.dark\:hover\:from-\[\#2a2a2a\]:hover:is(.dark-mode *) {
  --tw-gradient-from: #2a2a2a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(42 42 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:hover\:to-\[\#2a2a2a\]:hover:is(.dark-mode *) {
  --tw-gradient-to: #2a2a2a var(--tw-gradient-to-position);
}

.dark\:hover\:text-foreground:hover:is(.dark-mode *) {
  color: var(--foreground);
}

.dark\:hover\:text-orange-brand:hover:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.hover\:dark\:text-foreground:is(.dark-mode *):hover {
  color: var(--foreground);
}

.dark\:hover\:shadow-\[0_14px_36px_-12px_rgba\(249\2c 115\2c 22\2c 0\.5\)\]:hover:is(.dark-mode *) {
  --tw-shadow: 0 14px 36px -12px rgba(249,115,22,0.5);
  --tw-shadow-colored: 0 14px 36px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:focus\:border-orange-500:focus:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}

.focus\:dark\:bg-card:is(.dark-mode *):focus {
  background-color: var(--card);
}

.dark\:focus\:ring-orange-500\/15:focus:is(.dark-mode *) {
  --tw-ring-color: rgb(249 115 22 / 0.15);
}

.dark\:disabled\:bg-card:disabled:is(.dark-mode *) {
  background-color: var(--card);
}

.dark\:disabled\:text-muted:disabled:is(.dark-mode *) {
  color: var(--muted);
}

.peer:checked ~ .dark\:peer-checked\:bg-orange-brand:is(.dark-mode *) {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .dark\:peer-checked\:from-orange-500:is(.dark-mode *) {
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.peer:checked ~ .dark\:peer-checked\:to-orange-400:is(.dark-mode *) {
  --tw-gradient-to: #fb923c var(--tw-gradient-to-position);
}

.dark\:data-\[state\=active\]\:border-orange-brand[data-state="active"]:is(.dark-mode *) {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}

.data-\[active\=true\]\:dark\:border-orange-500\/40:is(.dark-mode *)[data-active="true"] {
  border-color: rgb(249 115 22 / 0.4);
}

.dark\:data-\[state\=active\]\:bg-orange-900\/10[data-state="active"]:is(.dark-mode *) {
  background-color: rgb(124 45 18 / 0.1);
}

.data-\[active\=true\]\:dark\:bg-orange-500\/10:is(.dark-mode *)[data-active="true"] {
  background-color: rgb(249 115 22 / 0.1);
}

.dark\:data-\[state\=active\]\:text-orange-brand[data-state="active"]:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.data-\[active\=true\]\:dark\:text-orange-300:is(.dark-mode *)[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

.data-\[active\=true\]\:dark\:text-orange-500:is(.dark-mode *)[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

@media (max-width: 768px) {
  .max-\[768px\]\:hidden {
    display: none;
  }

  .max-\[768px\]\:gap-2 {
    gap: 0.5rem;
  }
}

@media (max-width: 600px) {
  .max-\[600px\]\:text-\[38px\] {
    font-size: 38px;
  }
}

@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:block {
    display: block;
  }

  .sm\:w-44 {
    width: 11rem;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:w-80 {
    width: 20rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sm\:py-11 {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:gap-1 {
    gap: 0.25rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:self-stretch {
    align-self: stretch;
  }

  .md\:pt-6 {
    padding-top: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[2fr_1fr\] {
    grid-template-columns: 2fr 1fr;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }
}

.\[\&\>\*\]\:min-w-0>* {
  min-width: 0px;
}

.\[\&\>svg\]\:opacity-60>svg {
  opacity: 0.6;
}

.\[\&\>td\]\:bg-green-50>td {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.\[\&\>td\]\:bg-red-50>td {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:\[\&\>td\]\:bg-blue-50>td:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.dark\:\[\&\>td\]\:bg-green-950\/20>td:is(.dark-mode *) {
  background-color: rgb(5 46 22 / 0.2);
}

.dark\:\[\&\>td\]\:bg-red-950\/20>td:is(.dark-mode *) {
  background-color: rgb(69 10 10 / 0.2);
}

.dark\:hover\:\[\&\>td\]\:bg-orange-950\/10>td:hover:is(.dark-mode *) {
  background-color: rgb(67 20 7 / 0.1);
}

.active>.\[\.active\>\&\]\:bg-brand\/10 {
  background-color: rgb(0 123 255 / 0.1);
}

.active>.\[\.active\>\&\]\:text-brand {
  --tw-text-opacity: 1;
  color: rgb(0 123 255 / var(--tw-text-opacity, 1));
}

.active>.dark\:\[\.active\>\&\]\:bg-brand\/20:is(.dark-mode *) {
  background-color: rgb(0 123 255 / 0.2);
}

.active>.dark\:\[\.active\>\&\]\:text-brand-light:is(.dark-mode *) {
  --tw-text-opacity: 1;
  color: rgb(0 191 255 / var(--tw-text-opacity, 1));
}

.open>.\[\.open\>\&\]\:block {
  display: block;
}

.open>.\[\.open\>\&\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}