/* ═══════════════════════════════════════════════════════════════
   global.css – Admin Component Library & Layout (REFACTORED)
   Requires token.css to be loaded first.

   ── NEW TOKENS REQUIRED IN token.css ──
   This refactor introduces the following semantic tokens that did not
   exist in the original token set. They are prefixed --new- below so
   they are easy to find; rename to your convention once added to
   token.css (then strip the --new- prefix throughout this file).

   --new-color-white:        #ffffff;
     General-purpose white. Used for "text/icon on a solid accent
     background" cases (buttons, active pills, badges) and a couple
     of literal white fills.

   --new-overlay-scrim:      rgba(0, 0, 0, 0.45);
     Dark backdrop behind modals (.pos-modal-overlay and friends).

   --new-shadow-ink:         #000000;
     Neutral "ink" black used as the dark component in color-mix()
     shadow tints (e.g. the voucher card's secondary drop shadow).
     Distinct from --new-overlay-scrim, which is a fixed rgba value
     rather than a mixable base color.

   --new-on-accent-overlay-20: color-mix(in srgb, var(--new-color-white) 20%, transparent);
     "Frosted" 20%-white fill used for badges sitting on top of an
     accent-colored background (e.g. count bubble inside an active
     filter pill).

   --new-divider-white-10:   color-mix(in srgb, var(--new-color-white) 10%, transparent);
     Hairline divider on dark surfaces (.divide-y).

   --new-logo-shadow-soft:   rgba(0, 0, 0, 0.2);
   --new-logo-shadow-strong: rgba(0, 0, 0, 0.3);
     Drop-shadow tints behind the sidebar brand logo (dark/light theme).

   ── Voucher / Gift-Card Print Component (self-contained light palette) ──
   The printable voucher card is intentionally a light, paper-like
   surface with its own pink brand color, independent of the app's
   orange --accent-primary dark theme. Rather than forcing it onto
   the existing accent tokens (which would change its appearance),
   it gets its own small semantic palette:

   --new-voucher-bg:           #ffffff;
   --new-voucher-accent:       #E8579A;
   --new-voucher-accent-light: #F87BAC;
   --new-voucher-accent-deep:  #b5406b;   (code-strip / CTA text on tint bg)
   --new-voucher-text-meta:    #333333;
   --new-voucher-text-code:    #222222;
   --new-voucher-text-faint:   #bbbbbb;   (sub-labels, captions)
   --new-voucher-text-faint-2: #cccccc;   (meta labels, code labels)
   --new-voucher-text-faint-3: #aaaaaa;   (value label)
   --new-voucher-border-tint:  #e8d0df;   (hairline borders on pink wash)
   --new-voucher-border-tint-2:#f0d8e8;   (QR wrap / terms-strip border)
   --new-voucher-surface-tint: #fdf5fa;   (pink-wash background)
   --new-voucher-surface-tint-2:#fff0f6;  (QR panel gradient end)
   --new-voucher-code-bg:      #f9f4f7;   (code chip background)
   --new-voucher-print-border: #dddddd;   (print-mode card border)

   All --new-voucher-accent* tints used at low opacity throughout this
   component (0.045–0.32) are now generated with color-mix() against
   --new-voucher-accent / --new-voucher-accent-light, so no separate
   token is needed per opacity step.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   All spacing, typography, layout, and display helpers used across
   the app, consolidated here. Every utility below was previously
   defined 2-6 times throughout the file; only one definition (the
   final, cascade-winning version where values differed) is kept.
   ═══════════════════════════════════════════════════════════════ */

/* ── Semantic color / background utilities ── */
.bg-base           { background-color: var(--bg-base) !important; }
.bg-surface        { background-color: var(--bg-surface) !important; }
.bg-accent-muted   { background-color: var(--accent-muted) !important; }

.bg-surface-90 { background-color: color-mix(in srgb, var(--bg-surface) 92%, transparent) !important; }
.bg-surface-80 { background-color: color-mix(in srgb, var(--bg-surface) 84%, transparent) !important; }
.bg-surface-70 { background-color: color-mix(in srgb, var(--bg-surface) 76%, transparent) !important; }
.bg-surface-20 { background-color: color-mix(in srgb, var(--bg-surface) 28%, transparent) !important; }
.bg-surface-15 { background-color: color-mix(in srgb, var(--bg-surface) 22%, transparent) !important; }

.bg-base-90 { background-color: color-mix(in srgb, var(--bg-base) 88%, transparent) !important; }
.bg-base-80 { background-color: color-mix(in srgb, var(--bg-base) 84%, transparent) !important; }
.bg-base-70 { background-color: color-mix(in srgb, var(--bg-base) 78%, transparent) !important; }

.bg-accent-8  { background-color: color-mix(in srgb, var(--accent-primary) 8%, transparent) !important; }
.bg-accent-12 { background-color: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; }
.bg-accent-18 { background-color: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; }
.bg-accent-20 { background-color: color-mix(in srgb, var(--accent-primary) 20%, transparent) !important; }

/* ── Text color utilities ── */
.text-primary      { color: var(--text-primary) !important; }
.text-secondary    { color: var(--text-secondary) !important; }
.text-muted        { color: var(--text-muted) !important; }
/* NOTE: source file had two competing definitions of .text-accent —
   color: var(--text-accent) and color: var(--accent-primary). The
   var(--accent-primary) version was defined last and is therefore
   what currently renders; preserved as-is below. Flagged in the
   replacement map as a likely unintentional drift worth a design
   review, since a dedicated --text-accent token exists and is now
   unused by this class. */
.text-accent       { color: var(--accent-primary) !important; }
.text-orange       { color: var(--text-orange) !important; }
.text-blue         { color: var(--text-blue) !important; }
.text-info         { color: var(--text-blue) !important; }
.text-muted-light  { color: color-mix(in srgb, var(--text-muted) 80%, var(--text-secondary) 20%) !important; }
.text-muted-40     { color: color-mix(in srgb, var(--text-muted) 40%, transparent) !important; }
.text-success      { color: var(--status-success-text) !important; }
.text-error        { color: var(--status-error-text) !important; }
.text-warn         { color: var(--status-warn-text) !important; }

/* ── Border color utilities ── */
.border-default    { border-color: var(--border) !important; }
.border-strong     { border-color: var(--border-strong) !important; }
/* NOTE: source had this both with and without !important across two
   identical-value definitions; the !important (later) version wins. */
.border-accent     { border-color: var(--border-accent) !important; }
.border-success    { border-color: var(--status-success-border) !important; }
.border-warn       { border-color: var(--status-warn-border) !important; }
.border-error      { border-color: var(--status-error-border) !important; }
.bg-error          { background-color: var(--status-error-bg) !important; }

/* ── Gradient & shadow utilities ── */
.from-accent {
  --tw-gradient-from: var(--accent-primary) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: color-mix(in srgb, var(--accent-primary) 0%, transparent) var(--tw-gradient-to-position) !important;
}
.to-accent-hover {
  --tw-gradient-to: var(--accent-hover) var(--tw-gradient-to-position) !important;
}
.shadow-accent-muted {
  --tw-shadow-color: color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
  --tw-shadow: var(--tw-shadow-colored);
}

/* ── Hover / focus variants ── */
.hover\:bg-accent-muted:hover { background-color: var(--accent-muted) !important; }
.hover\:border-accent:hover   { border-color: var(--border-accent) !important; }
.hover\:text-accent:hover     { color: var(--accent-primary) !important; }
.focus\:border-accent:focus   { border-color: var(--accent-primary) !important; }

/* ── Flex / layout helpers ── */
.flex-row     { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.w-full       { width: 100%; }
.w-32         { width: 8rem; }
.min-w-0      { min-width: 0; }
.overflow-hidden { overflow: hidden; }
.relative-z1  { position: relative; z-index: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.aspect-video { aspect-ratio: 16 / 9; }
.resize-none  { resize: none; }

/* ── Gap utilities ── */
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }

/* ── Grid utilities ── */
.grid-cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.grid-cols-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.grid-cols-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.grid-cols-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.col-span-2    { grid-column: span 2 / span 2; }
.col-span-full { grid-column: 1 / -1; }

/* ── Typography utilities ── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-xs  { font-size: var(--font-size-xs); }
.text-sm  { font-size: var(--font-size-sm); }
.text-lg  { font-size: var(--font-size-lg); }
.text-xl  { font-size: var(--font-size-xl); }
.font-bold   { font-weight: var(--font-weight-bold); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-mono   { font-family: var(--font-mono, monospace); }
.leading-tight    { line-height: 1.25; }
.leading-relaxed  { line-height: 1.625; }
.tracking-widest  { letter-spacing: 0.1em; }
.uppercase   { text-transform: uppercase; }
.capitalize  { text-transform: capitalize; }
.break-all   { word-break: break-all; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Spacing utilities ── */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.ml-2 { margin-left: 0.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pb-10 { padding-bottom: 2.5rem; }
.p-0  { padding: 0; }
.p-md { padding: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* ── Border / divider utilities ── */
.border-top    { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.border-bottom { border-bottom: 1px solid var(--border); margin-bottom: 1rem; padding-bottom: 1rem; }
.divide-y > * + * { border-top: 1px solid var(--new-divider-white-10); }

/* ── Interaction utilities ── */
.cursor-pointer { cursor: pointer; }

/* ── Layout container utilities ── */
.layout-constrained {
  width: 100%;
  /* NOTE: source had two conflicting max-widths (56rem then 42rem);
     the later (42rem) definition is the one currently rendering and
     is preserved here. */
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
.layout-wide {
  width: 100%;
  max-width: 72rem; /* Maps roughly to Tailwind max-w-6xl */
  margin-left: auto;
  margin-right: auto;
}
.sticky-panel { position: sticky; top: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════
   Global Base Styles
   ═══════════════════════════════════════════════════════════════ */
body {
  background: var(--bg-gradient) !important;
  color: var(--text-primary) !important;
}
.admin-body { font-family: var(--font-sans); }

.theme-icon-sun  { display: inline-flex; align-items: center; gap: 0.35rem; }
.theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun  { display: none; }
[data-theme="light"] .theme-icon-moon { display: inline-flex; align-items: center; gap: 0.35rem; }

.sidebar-brand-logo {
  display: block;
  width: 65%;
  height: auto;
  aspect-ratio: auto;          /* keeps it square, adjust as needed */
  margin: 0 auto;
  background-image: var(--brand-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 8px 16px var(--new-logo-shadow-soft));
}
[data-theme="light"] .sidebar-brand-logo {
  filter: drop-shadow(0 12px 22px var(--new-logo-shadow-strong));
}

/* ═══════════════════════════════════════════════════════════════
   Shared Admin Component Library
   ═══════════════════════════════════════════════════════════════ */

.admin-shell {
  border-radius: 2rem;
  border: 1px solid var(--border);
  background-color: var(--bg-surface);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.admin-card {
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background-color: var(--bg-surface);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}
.admin-card-gradient {
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-base));
  padding: 1.25rem;
}

/* NOTE: source had 3 conflicting definitions of .admin-stat-card
   (padding: 1.25rem / 1.5rem / 1rem 1.25rem; transition with/without
   box-shadow). The last-occurring values win under normal cascade
   rules and are preserved here. */
.admin-stat-card {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-base));
  padding: 1rem 1.25rem;
  transition: transform 0.2s ease;
}
.admin-stat-card .stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.admin-stat-card .stat-value {
  margin-top: 0.5rem;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
/* NOTE: source had two conflicting :hover transforms (-2px then -1px);
   the later -1px wins and is preserved. The earlier definition also
   set box-shadow: var(--shadow-card) on hover, which the later
   definition dropped — also preserved as dropped. */
.admin-stat-card:hover { transform: translateY(-1px); }

.admin-page-header { margin-bottom: 1.5rem; }
.admin-page-header .page-eyebrow {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--text-muted);
  font-weight: var(--font-weight-semibold);
}
.admin-page-header h1 {
  margin-top: 0.35rem;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.admin-page-header p {
  margin-top: 0.35rem;
  font-size: var(--font-size-base);
  color: var(--text-muted);
}

.admin-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.admin-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 1rem;
  background: var(--accent-primary);
  color: var(--new-color-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.admin-btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent); }
.admin-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.admin-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 1rem;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.admin-btn-secondary:hover { background: var(--accent-muted); border-color: var(--border-accent); }
.admin-btn-secondary.opacity-50 { opacity: 0.5; }
.admin-btn-secondary.cursor-not-allowed { cursor: not-allowed; }

.admin-btn-success {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 1rem;
  background: var(--status-success-text); /* Using text token as solid bg */
  color: var(--new-color-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.admin-btn-success:hover { filter: brightness(0.9); box-shadow: var(--shadow-card); }
.admin-btn-success.w-full { width: 100%; justify-content: center; }

.admin-btn-warn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 1rem;
  background: var(--status-warn-text);
  color: var(--new-color-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.admin-btn-warn:hover { filter: brightness(0.9); box-shadow: var(--shadow-card); }
.admin-btn-warn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* Destructive / Error variant for system buttons (e.g. Cancel Order) */
.admin-btn-error {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 1rem;
  background: var(--status-error-text);
  color: var(--new-color-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
}
.admin-btn-error:hover { filter: brightness(0.9); box-shadow: var(--shadow-card); }
.admin-btn-error:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.admin-btn-error.w-full { width: 100%; justify-content: center; }

/* Small modifier — shared by primary/secondary/success/warn/error */
.admin-btn-sm,
.admin-btn-warn.admin-btn-sm,
.admin-btn-secondary.admin-btn-sm {
  padding: 0.25rem 0.6rem;
  font-size: var(--font-size-xs);
  border-radius: 0.5rem;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}
/* NOTE: .admin-badge-accent / .admin-badge.admin-badge-accent both had
   two conflicting definitions: one with hardcoded rgba(249,115,22,…)
   values, one with var(--accent-muted)/var(--border-accent). The
   token-based version was defined last in both cases and is the one
   currently rendering; kept as a single tokenized rule below
   (also resolves the literal-color cleanup requested). */
.admin-badge-accent,
.admin-badge.admin-badge-accent {
  background: var(--accent-muted);
  color: var(--accent-primary);
  border: 1px solid var(--border-accent);
}
.admin-badge-secondary {
  background: var(--accent-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.admin-badge-success {
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border: 1px solid var(--status-success-border);
}
.admin-badge-warn {
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
  border: 1px solid var(--status-warn-border);
}
.admin-badge-error {
  background: var(--status-error-bg);
  color: var(--status-error-text);
  border: 1px solid var(--status-error-border);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}
.admin-table thead tr { background: var(--bg-base); }
.admin-table thead th {
  padding: 0.625rem 1rem;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  /* merged from the duplicate at line 1747 of the source, which only
     restated background/color (a no-op given the values above) */
  background: var(--bg-surface-90);
}
.admin-table th { background: var(--bg-surface-90); }
.admin-table td { color: var(--text-primary); }
.admin-table tbody tr {
  border-top: 1px solid var(--border);
  transition: background 0.15s ease;
}
.admin-table tbody tr:hover { background: var(--accent-muted); }
.admin-table tbody td { padding: 0.75rem 1rem; color: var(--text-primary); }
/* NOTE: source defined .admin-table tfoot tr twice, second adding
   !important to background — preserved as the winning (more specific
   in cascade order) declaration. */
.admin-table tfoot tr {
  background: var(--bg-surface-90) !important;
  font-weight: var(--font-weight-semibold);
}

/* NOTE: .admin-form-field label had 4 near-duplicate definitions; the
   final one (with font-weight added, margin-bottom 0.35rem) wins. */
.admin-form-field label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  font-weight: var(--font-weight-medium);
}
.admin-form-field label input[type="checkbox"] { accent-color: var(--accent-primary); }
input[type="checkbox"].accent-primary { accent-color: var(--accent-primary); }
.admin-form-field input,
.admin-form-field select,
.admin-form-field textarea {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  padding: 0.6rem 1rem;
  font-size: var(--font-size-base);
  outline: none;
}
.admin-form-field input:focus,
.admin-form-field select:focus,
.admin-form-field textarea:focus { border-color: var(--accent-primary); }
.admin-form-field input.uppercase { text-transform: uppercase; }

/* NOTE: .admin-input padding had two conflicting values (0.7rem 1rem
   then 0.6rem 1rem); the later 0.6rem 1rem wins. */
.admin-input {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  padding: 0.6rem 1rem;
  font-size: var(--font-size-base);
  outline: none;
}
.admin-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-muted); }
.admin-input[type="file"] { padding: 0.5rem; }

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.admin-form-grid.items-end { align-items: end; }
@media (max-width: 640px) {
  .admin-form-grid { grid-template-columns: 1fr; }
}
.admin-form-section {
  background: var(--accent-muted);
  border: 1px solid var(--border-accent);
  border-radius: 1.25rem;
  padding: 1.5rem;
}

.admin-panel {
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
}
.admin-panel.p-md { padding: 1.5rem; }
.admin-panel .empty-state { padding: 5rem 1.5rem; }
.admin-card.admin-panel { padding: 1.75rem; }
.admin-card .admin-panel { border: none; box-shadow: none; background: transparent; }
/* NOTE: .admin-card .empty-state had two conflicting paddings
   (5rem 1.5rem then 3rem 1rem); the later 3rem 1rem wins. */
.admin-card .empty-state { padding: 3rem 1rem; }
.admin-card .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.admin-card form .admin-form-field:last-of-type { margin-bottom: 0; }

.admin-soft-accent {
  border: 1px solid var(--border-accent);
  background: var(--accent-muted);
  color: var(--accent-primary);
}
.admin-soft-accent.rounded-2xl { border-radius: 1rem; }
.admin-soft-accent.text-xs { font-size: var(--font-size-xs); }

.admin-link { color: var(--text-link); transition: color 0.18s ease; }
.admin-link:hover { color: var(--accent-primary); }

.admin-alert-success {
  border-radius: 1rem;
  border: 1px solid var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-text);
  padding: 0.75rem 1.25rem;
  font-size: var(--font-size-base);
}
.admin-alert-error {
  border-radius: 1rem;
  border: 1px solid var(--status-error-border);
  background: var(--status-error-bg);
  color: var(--status-error-text);
  padding: 0.75rem 1.25rem;
  font-size: var(--font-size-base);
}
.admin-alert-warn {
  border-radius: 1rem;
  border: 1px solid var(--status-warn-border);
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
  padding: 0.75rem 1.25rem;
  font-size: var(--font-size-base);
}
.admin-alert-banner {
  display: flex; align-items: flex-start; justify-content: space-between;
  border-radius: 1.25rem; border: 1px solid var(--border);
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.admin-alert-banner.error   { border-color: var(--status-error-border); background: var(--status-error-bg); }
.admin-alert-banner.warn    { border-color: var(--status-warn-border); background: var(--status-warn-bg); }
.admin-alert-banner.info    { border-color: var(--border-accent); background: var(--accent-muted); }
.admin-alert-banner.success { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-text); }

.admin-empty-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent-muted);
  opacity: 0.4;
  flex-shrink: 0;
}

.admin-disclosure summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.admin-disclosure summary::-webkit-details-marker { display: none; }
.admin-disclosure .disclosure-chevron {
  transition: transform 0.2s ease;
  font-size: 0.8em;
  display: inline-block;
}
.admin-disclosure[open] summary .disclosure-chevron { transform: rotate(90deg); }

.admin-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .admin-sidebar-layout { grid-template-columns: 240px 1fr; }
}

.admin-page-content {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.4rem 0.8rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-toggle-btn:hover { background: var(--accent-muted); border-color: var(--border-accent); color: var(--accent-primary); }

/* ═══════════════════════════════════════════════════════════════
   Navigation Component
   ═══════════════════════════════════════════════════════════════ */
/* NOTE: .sidebar-aside was split across two non-conflicting rules
   (background/border-color in one place, the responsive display:none
   default in another, with a min-width:1024px override already
   present). Merged into one base rule + the existing media override. */
.sidebar-aside {
  display: none;
  background: var(--bg-sidebar) !important;
  border-color: var(--border) !important;
}
@media (min-width: 1024px) {
  .sidebar-aside { display: block !important; }
}

.nav-sections { display: flex; flex-direction: column; gap: 0.85rem; }
.nav-section-card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-primary) 9%, transparent), color-mix(in srgb, var(--text-primary) 12%, transparent));
  padding: 0.35rem 0.45rem;
}
.nav-section-card.active { border-color: var(--border-accent); box-shadow: var(--shadow-accent); }
.nav-section-card[open] { padding-bottom: 0.55rem; }
.nav-section-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; border-radius: 0.8rem; list-style: none; cursor: pointer; padding: 0.2rem 0.25rem;
}
.nav-section-toggle::-webkit-details-marker { display: none; }
.nav-section-toggle:hover { background: var(--accent-muted); }
.nav-section-header {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.35rem;
  color: var(--text-secondary);
}
.nav-section-header h3 { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.nav-section-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-primary); }
.nav-section-chevron { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); transition: transform 0.2s ease, color 0.2s ease; }
.nav-section-card[open] .nav-section-chevron { transform: rotate(180deg); color: var(--accent-primary); }
.nav-links { display: flex; flex-direction: column; gap: 0.22rem; padding: 0.2rem; }
.nav-link {
  display: flex; align-items: center; gap: 0.55rem; border-radius: 0.8rem;
  border: 1px solid transparent; color: var(--nav-link-text) !important;
  text-decoration: none; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold);
  line-height: 1.2; padding: 0.55rem 0.6rem;
}
.nav-link:hover { background: var(--accent-muted) !important; border-color: var(--border); color: var(--nav-link-hover-text) !important; }
.nav-link.active { border-color: var(--border-accent); background: var(--accent-muted); color: var(--text-primary) !important; }
.nav-link-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-secondary); }
.nav-link-label { flex: 1; min-width: 0; }
.nav-item-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem;
  border-radius: 9999px; background: var(--accent-primary); color: var(--new-color-white);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); padding: 0.1rem 0.35rem;
}

#global-search { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
#global-search::placeholder { color: var(--text-muted) !important; }
#global-search-results { background: var(--bg-surface) !important; border-color: var(--border) !important; }
#global-search-results a:hover { background: var(--accent-muted) !important; }
.mobile-topbar { background: var(--bg-topbar); border-color: var(--border) !important; }
.admin-footer { background: var(--bg-footer) !important; border-color: var(--border) !important; }
.admin-footer a { color: var(--accent-primary) !important; }
.admin-footer a:hover { color: var(--accent-hover) !important; }

.brand-logo-shell {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; border: 1px solid var(--border);
  background: var(--accent-muted); box-shadow: var(--shadow-card);
}
.brand-logo-img {
  width: 100%;
  height: 100%;
  background-image: var(--brand-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.sidebar-brand-logo { display: block; width: 65%; height: auto; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 8px 16px var(--new-logo-shadow-soft)); }
[data-theme="light"] .sidebar-brand-logo {
  filter: drop-shadow(0 12px 22px var(--new-logo-shadow-strong));
}

@media (max-width: 1023px) {
  body { padding-bottom: 80px; }
  .mobile-nav-overlay { position: fixed; inset: 0; z-index: 50; background: var(--bg-overlay); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; overflow-y: auto; }
  .mobile-nav-overlay.active { opacity: 1; pointer-events: auto; }
  .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--bg-bottom-nav); backdrop-filter: blur(16px); border-top: 1px solid var(--border-accent); padding: 0.5rem 0; }
  .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem; text-decoration: none; color: var(--bottom-nav-item) !important; font-size: var(--font-size-xs); font-weight: 500; transition: color 0.2s ease; }
  .bottom-nav-item:hover, .bottom-nav-item.active { color: var(--accent-primary) !important; }
  .bottom-nav-badge { position: absolute; top: 0.25rem; right: 0.5rem; background: var(--accent-primary); color: var(--new-color-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); padding: 0.125rem 0.375rem; border-radius: 9999px; min-width: 1.25rem; text-align: center; }
}

.products-card { background-color: var(--bg-surface) !important; }

/* ═══════════════════════════════════════════════════════════════
   Print – global theme override
   ═══════════════════════════════════════════════════════════════ */
@media print {
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg-base:       var(--new-color-white);
    --bg-surface:    var(--new-color-white);
    --bg-sidebar:    var(--new-color-white);
    --bg-input:      var(--new-color-white);
    --text-primary:  #000000;
    --text-secondary:#333333;
    --text-muted:    #555555;
    --border:        #cccccc;
    --border-strong: #999999;
  }
  body { background: var(--new-color-white) !important; color: #000 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Dashboard Layout & Component Utilities
   ═══════════════════════════════════════════════════════════════ */
.dash-layout { display: flex; flex-direction: column; gap: 2rem; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.grid-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 1.5rem; }

.stat-title { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-top: 0.25rem; line-height: 1.1; }
.stat-sub { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 0.35rem; }
.voucher-financial-card .stat-value { margin-top: 0.15rem; }

.icon-box { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; flex-shrink: 0; }
.icon-box svg { width: 1.25rem; height: 1.25rem; }
.icon-box.accent  { background: var(--accent-muted); color: var(--accent-primary); }
.icon-box.success { background: var(--status-success-bg); color: var(--status-success-text); }
.icon-box.error   { background: var(--status-error-bg); color: var(--status-error-text); }
.icon-box.warn    { background: var(--status-warn-bg); color: var(--status-warn-text); }
.icon-box.info    { background: color-mix(in srgb, var(--text-blue) 15%, transparent); color: var(--text-blue); }

/* NOTE: .interactive-card had two conflicting transition values
   across 3 occurrences (a 3-property ease list, then an
   all 0.2s cubic-bezier shorthand). The cubic-bezier version was
   defined last and wins. */
.interactive-card { display: block; text-decoration: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.interactive-card:hover { border-color: var(--border-accent); box-shadow: var(--shadow-accent); transform: translateY(-1px); }
.interactive-card.admin-card { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.interactive-card.admin-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); }

.nav-pills { display: inline-flex; background: var(--bg-input); padding: 0.25rem; border-radius: 0.75rem; border: 1px solid var(--border); }
.nav-pill { padding: 0.35rem 0.75rem; border-radius: 0.5rem; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted); text-decoration: none; transition: all 0.2s ease; }
.nav-pill.active { background: var(--accent-muted); color: var(--accent-primary); }
.nav-pill:hover:not(.active) { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   POS (Point of Sale) Component Specifics
   ═══════════════════════════════════════════════════════════════ */

.pos-body-lock { overflow: hidden; }
@media (max-width: 767px) {
  .pos-body-lock { overflow-y: auto; overflow-x: hidden; }
}

.pos-layout {
  display: grid;
  grid-template-columns: 1fr 430px;
  height: 100vh;
}
@media (max-width: 1280px) { .pos-layout { grid-template-columns: 1fr 380px; } }
@media (max-width: 1100px) { .pos-layout { grid-template-columns: 1fr 340px; } }
@media (max-width: 767px) {
  .pos-layout { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
}

.pos-left,
.pos-checkout-panel {
  overflow: hidden;
  min-height: 0;
}
@media (max-width: 767px) {
  .pos-left,
  .pos-checkout-panel { overflow: visible; min-height: auto; }
  .pos-checkout-panel { border-left: none; border-top: 1px solid var(--border); }
  .pos-cart-section { max-height: none !important; min-height: 40vh; overflow: visible !important; }
  .pos-checkout-scroll { overflow: visible !important; max-height: none !important; }
  .pos-checkout-actions { position: static !important; }
}

@media (max-height: 800px) {
  .pos-header-logo { height: 3rem !important; width: 3rem !important; }
  .pos-header-inner { padding-top: 6px !important; padding-bottom: 6px !important; }
  .pos-total-panel  { padding-top: 10px !important; padding-bottom: 10px !important; }
  .pos-total-amount { font-size: 2.75rem !important; line-height: 1.1 !important; }
  .pos-cash-section { padding-top: 6px !important; padding-bottom: 6px !important; }
  .pos-checkout-actions { padding-top: 6px !important; padding-bottom: 6px !important; }
  .pos-complete-btn { padding-top: 10px !important; padding-bottom: 10px !important; }
}
@media (max-height: 680px) {
  .pos-header-logo  { height: 2rem !important; width: 2rem !important; }
  .pos-header-inner { padding-top: 4px !important; padding-bottom: 4px !important; }
  .pos-total-panel  { padding-top: 6px !important; padding-bottom: 6px !important; }
  .pos-total-amount { font-size: 2rem !important; }
  .pos-cash-section { padding-top: 4px !important; padding-bottom: 4px !important; }
  .pos-checkout-panel { overflow-y: auto; }
}

/* Modal Core Components — also reused/extended for admin & ambassador
   modals throughout the app (was redefined identically 4x). */
.pos-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--new-overlay-scrim); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.pos-modal-overlay.active { display: flex; }

.pos-modal-panel {
  width: 92vw; max-width: 1100px; height: 90vh;
  background: var(--bg-surface); border-radius: 20px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}

/* NOTE: .pos-modal-card was defined 4x. The first (legacy) version
   used px-based sizing with a hardcoded shadow; the 3 later
   occurrences are identical to each other and token-based — that is
   the version currently rendering, and is kept as the single
   definition. */
.pos-modal-card {
  width: 100%;
  max-width: 520px;
  background: var(--bg-surface);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
}

.pos-modal-msg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 24px; color: var(--text-muted); text-align: center; font-size: var(--font-size-sm);
}

.pos-product-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px; padding: 16px;
}
@media (max-width: 640px) {
  .pos-product-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}

.pos-product-tile {
  background: var(--bg-surface); border: 1.5px solid var(--border);
  border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.pos-product-tile:hover { border-color: var(--border-accent); box-shadow: var(--shadow-accent); }

.pos-tile-img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  background: var(--bg-base);
}

.pos-variant-pills { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 8px; }
.pos-variant-pill {
  font-size: 10px; padding: 3px 8px; border-radius: 9999px;
  background: var(--accent-muted); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pos-variant-pill:hover { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--new-color-white); }
.pos-variant-out { opacity: 0.45; }

.pos-payment-box {
  border-radius: 1rem; border: 2px solid var(--border);
  background: var(--bg-surface); padding: 0.75rem; text-align: center;
  transition: all 0.2s ease;
}
.pos-payment-label .peer:checked + .pos-payment-box {
  border-color: var(--accent-primary);
  background: var(--accent-muted);
}
.pos-payment-label .peer:checked + .pos-payment-box .text-xs {
  color: var(--accent-primary);
}

.pos-bg-gradient-down {
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   Native Meter Styling (replaces inline-styled div bars)
   ═══════════════════════════════════════════════════════════════ */
.admin-meter {
  display: block;
  width: 100%;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--bg-base-70); /* Represents empty track */
  border: none;
  overflow: hidden;
}
.admin-meter::-webkit-meter-bar {
  background: var(--bg-base-70);
  border: none;
  border-radius: 9999px;
}
.admin-meter::-webkit-meter-optimum-value {
  background: color-mix(in srgb, var(--accent-primary) 40%, var(--bg-base));
  border-radius: 9999px;
  transition: width 0.3s ease;
}
.admin-meter.current::-webkit-meter-optimum-value { background: var(--accent-primary); }
.admin-meter.empty::-webkit-meter-optimum-value { background: var(--border-strong); opacity: 0.3; }
.admin-meter::-moz-meter-bar {
  background: color-mix(in srgb, var(--accent-primary) 40%, var(--bg-base));
  border-radius: 9999px;
}
.admin-meter.current::-moz-meter-bar { background: var(--accent-primary); }
.admin-meter.empty::-moz-meter-bar { background: var(--border-strong); opacity: 0.3; }

/* ═══════════════════════════════════════════════════════════════
   POS Kanban Board & Metric Utilities
   ═══════════════════════════════════════════════════════════════ */
.pos-kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  min-height: 60vh;
}
.pos-kanban-col { display: flex; flex-direction: column; overflow: hidden; max-height: 75vh; }
.pos-kanban-dimmed { opacity: 0.65; transition: opacity 0.2s ease; }
.pos-kanban-dimmed:hover { opacity: 1; }
.pos-kanban-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  background: var(--bg-surface-80);
}
.pos-kanban-body {
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem;
  overflow-y: auto; flex: 1; background: var(--bg-base-70);
}
.pos-kanban-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  padding: 1rem; box-shadow: var(--shadow-card);
}
.pos-returns-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

/* Base Container */
.pos-invoice-container {
  background: var(--bg-surface);
  color: var(--text-primary);
  max-width: 48rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

/* Header & Watermark */
.pos-invoice-header {
  position: relative;
  overflow: hidden;
  padding: 2rem 3rem 1.75rem;
  background: var(--bg-sidebar); 
  border-bottom: 3px solid var(--accent-primary);
}
.pos-invoice-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pos-invoice-watermark-img {
  width: 100%;
  height: 100%;
  background-image: var(--brand-logo-url);
  background-size: cover;
  background-position: center;
  opacity: 0.08;
}
.pos-invoice-logo {
  max-height: 5.25rem;
  max-width: 24rem;
  width: 12rem;                 /* give it a default width, since <div> has no intrinsic size */
  height: 4rem;                 /* adjust to your actual aspect ratio */
  display: inline-block;
  background-image: var(--brand-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* Header Badge */
.pos-invoice-badge-label {
  font-size: 0.5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-primary) 80%, var(--new-color-white));
  margin-bottom: 0.25rem;
}
.pos-invoice-badge-box {
  display: inline-block;
  border: 1.5px solid var(--accent-primary);
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
}
.pos-invoice-badge-number {
  font-family: var(--font-serif, 'Georgia', serif);
  font-size: 1.6rem;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary); /* Swapped from hardcoded white to adapt to themes */
  letter-spacing: 0.05rem;
  line-height: 1;
}

/* Meta Data Grid */
.pos-invoice-meta {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 1.125rem 3rem;
}
.pos-invoice-meta-label {
  font-size: 0.5rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.2rem;
}
.pos-invoice-meta-value {
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.pos-invoice-micro {
  font-size: 0.6rem;
}

/* Invoice Tags (Voucher, Payment Type) */
.pos-invoice-tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.18rem;
  font-size: 0.6rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06rem;
}
.pos-invoice-tag-dark {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1.5px solid var(--text-primary);
}
.pos-invoice-tag-accent {
  background: var(--accent-muted);
  color: var(--accent-primary);
  border: 1.5px solid var(--accent-primary);
}

/* Items Table */
.pos-invoice-body { padding: 1.75rem 3rem 0; }
.pos-invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin-bottom: 0;
}
.pos-invoice-table thead tr { border-bottom: 2px solid var(--accent-primary); }
.pos-invoice-table thead th {
  padding: 0 0.5rem 0.6rem;
  font-size: 0.55rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  color: var(--text-muted);
}
.pos-invoice-table tbody tr { border-bottom: 1px solid var(--border); }
.pos-invoice-table tbody tr:last-child { border-bottom: none; }
.pos-invoice-table tbody td { padding: 0.7rem 0.5rem; vertical-align: top; }

/* Table Column Widths */
.w-desc { width: 48%; }
.w-qty { width: 8%; }
.w-price { width: 15%; }
.w-total { width: 16%; }
.w-vat { width: 13%; }

.pos-invoice-item-title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}
.pos-invoice-item-sub {
  font-size: 0.55rem;
  color: var(--text-muted);
  letter-spacing: 0.02rem;
}

/* Totals Section */
.pos-invoice-totals-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 3rem 0;
}
.pos-invoice-totals { width: 17.5rem; font-size: 0.75rem; }
.pos-invoice-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.pos-invoice-total-row:last-of-type { border-bottom: none; }

.pos-invoice-discount .text-primary { font-weight: var(--font-weight-bold); }
.pos-invoice-discount-val { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.pos-invoice-discount-val::before { content: '\2212\00A0'; }

.pos-invoice-grand-total {
  margin-top: 0.75rem;
  padding: 0.75rem 0.85rem;
  background: var(--accent-muted);
  border: 2px solid var(--accent-primary);
  border-radius: 0.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pos-invoice-grand-lbl {
  font-size: 0.55rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.pos-invoice-grand-val {
  font-family: var(--font-serif, 'Georgia', serif);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--accent-primary);
}

/* Loyalty & Footer elements */
.pos-invoice-loyalty {
  margin: 0.6rem 3rem 0;
  padding: 0.55rem 0.85rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.pos-invoice-loyalty-icon { font-size: 0.8rem; }

.pos-invoice-footer {
  margin: 1.5rem 3rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.pos-invoice-thanks {
  font-family: var(--font-serif, 'Georgia', serif);
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
  font-style: italic;
}
.pos-invoice-ornament {
  text-align: center;
  color: var(--text-muted-light);
  font-size: 1rem;
  letter-spacing: 0.4rem;
  margin: 0.4rem 0 0;
}
.pos-invoice-contact {
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 0.02rem;
}

.pos-invoice-actions {
  padding: 1.25rem 3rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

/* Critical Print Overrides */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .print-hidden { display: none !important; }
  .pos-invoice-container {
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .pos-invoice-table { page-break-inside: auto; }
  .pos-invoice-table tr { page-break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════
   Order Detail, POS Stats Display & More Utilities
   ═══════════════════════════════════════════════════════════════ */

.grid-order-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .grid-order-detail { grid-template-columns: 3fr 2fr; }
}

.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.pos-stats-viewport { display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; }
.pos-stats-content {
  flex: 1; overflow-y: auto; padding: 2rem;
  display: flex; flex-direction: column; justify-content: center;
}
.pos-stat-giant {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pos-stat-large {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.logo-sm { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.logo-md { width: 4rem; height: 4rem; padding: 0.5rem; flex-shrink: 0; }
.slider-img-thumb { width: 100%; height: 5rem; object-fit: cover; border-radius: 0.5rem; background: var(--bg-base); }
/* NOTE: .icon-xl had two conflicting size definitions (3rem then
   3.5rem with flex-shrink:0 added); the later 3.5rem version wins. */
.icon-xl { width: 3.5rem; height: 3.5rem; flex-shrink: 0; }
.icon-sm { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.icon-md { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

.mt-auto { margin-top: auto; }
.opacity-50 { opacity: 0.5; }
body .hidden { display: none !important; }

.border-b { border-bottom: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-l { border-left: 1px solid var(--border); }
.flex-1 { flex: 1; min-height: 0; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.items-end { align-items: flex-end; }
.bg-transparent { background: transparent; }
.border-none { border: none; }

.legend-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot.accent  { background: var(--accent-primary); }
.legend-dot.success { background: var(--status-success-text); }
.legend-dot.warn    { background: var(--status-warn-text); }
.legend-dot.error   { background: var(--status-error-text); }

.admin-meter.success::-webkit-meter-optimum-value { background: var(--status-success-text); }
.admin-meter.success::-moz-meter-bar { background: var(--status-success-text); }
.admin-meter.warn::-webkit-meter-optimum-value { background: var(--status-warn-text); }
.admin-meter.warn::-moz-meter-bar { background: var(--status-warn-text); }
.admin-meter.error::-webkit-meter-optimum-value { background: var(--status-error-text); }
.admin-meter.error::-moz-meter-bar { background: var(--status-error-text); }

/* ═══════════════════════════════════════════════════════════════
   Accessibility, Radio Card, Statement Extensions, Timeline
   ═══════════════════════════════════════════════════════════════ */
.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;
}

.admin-radio-card { display: block; cursor: pointer; }
/* NOTE: .radio-card-content / .admin-radio-card .radio-card-content
   were split across two non-conflicting partial definitions
   (min-height in one place, border/background/transition in
   another) — merged into one rule. */
.radio-card-content,
.admin-radio-card .radio-card-content {
  border: 2px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  background: var(--bg-surface);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 140px;
}
.admin-radio-card:hover .radio-card-content { border-color: var(--border-accent); }
.admin-radio-input:checked + .radio-card-content {
  border-color: var(--accent-primary);
  background: var(--accent-muted);
}
.admin-radio-input:focus-visible + .radio-card-content {
  box-shadow: 0 0 0 3px var(--accent-muted);
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.pos-invoice-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.pos-invoice-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-bottom: 1px solid var(--border);
}
.pos-invoice-summary-card {
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--border);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-surface);
}
.pos-invoice-summary-card:last-child { border-right: none; }
.pos-invoice-summary-label {
  font-size: 0.6rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.pos-invoice-summary-val {
  font-family: var(--font-serif, 'Georgia', serif);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.pos-invoice-summary-card.is-balance .pos-invoice-summary-val { color: var(--accent-primary); }
.pos-invoice-summary-card.is-paid .pos-invoice-summary-val { color: var(--status-success-text); }

.table-row-error { background-color: color-mix(in srgb, var(--status-error-bg) 40%, transparent); }
.table-row-error:hover { background-color: color-mix(in srgb, var(--status-error-bg) 80%, transparent) !important; }
.mb-0 { margin-bottom: 0; }
.p-2 { padding: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }

.admin-timeline { display: flex; align-items: center; width: 100%; }
.timeline-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.timeline-step:last-child { flex: none; }
.timeline-marker {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  background: var(--bg-surface); border: 2px solid var(--border);
  color: var(--text-muted); z-index: 2; transition: all 0.3s ease;
}
.timeline-step.completed .timeline-marker {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--new-color-white);
}
.timeline-step.current .timeline-marker {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-surface);
  box-shadow: 0 0 0 4px var(--accent-muted);
}
.timeline-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-muted); margin-top: 0.5rem; transition: color 0.3s ease; }
.timeline-step.completed .timeline-label,
.timeline-step.current .timeline-label { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.timeline-track { position: absolute; top: 1rem; left: 50%; right: -50%; height: 2px; background: var(--border); z-index: 1; transition: background 0.3s ease; }
.timeline-step.completed .timeline-track { background: var(--accent-primary); }
.timeline-step:last-child .timeline-track { display: none; }

.admin-badge-info {
  background: color-mix(in srgb, var(--text-blue) 15%, transparent);
  color: var(--text-blue);
  border: 1px solid color-mix(in srgb, var(--text-blue) 30%, transparent);
}

.admin-stat-card.border-accent { border-color: var(--border-accent); }

/* NOTE: .table-scroll-container had two non-conflicting definitions
   (overflow-x/y + max-height + border-bottom in one place,
   border-radius + border + background in the locations-page reuse).
   Merged into one rule covering both intents. */
.table-scroll-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 22rem;
  border-bottom: 1px solid var(--border);
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.table-scroll-container th { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   Expenses, Ambassador Applications & Ambassador Detail Pages
   ═══════════════════════════════════════════════════════════════ */
.expense-section { transition: opacity 0.2s ease; }

@media (max-width: 640px) {
  .grid-cols-2.gap-md { grid-template-columns: 1fr; }
}

.admin-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 1rem;
  padding: 0.4rem 1rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.admin-filter-pill-inactive { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border); }
.admin-filter-pill-inactive:hover { background: var(--accent-muted); border-color: var(--border-accent); color: var(--accent-primary); }
.admin-filter-pill-active { background: var(--accent-primary); color: var(--new-color-white); border-color: var(--accent-primary); box-shadow: var(--shadow-accent); }
.admin-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; padding: 0.05rem 0.5rem; font-size: 0.6rem;
  font-weight: var(--font-weight-bold); line-height: 1.4;
}
.admin-filter-count-inactive { background: var(--accent-muted); color: var(--accent-primary); }
.admin-filter-count-active { background: var(--new-on-accent-overlay-20); color: var(--new-color-white); }

.amb-icon-placeholder { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--accent-muted); flex-shrink: 0; }
.amb-social-pill {
  display: inline-flex; align-items: center; border-radius: 0.75rem;
  border: 1px solid var(--border); padding: 0.1rem 0.6rem; font-size: 0.7rem;
  font-weight: var(--font-weight-semibold); color: var(--text-secondary);
  text-decoration: none; transition: all 0.15s ease; letter-spacing: 0.04em;
}
.amb-social-pill:hover { background: var(--accent-muted); border-color: var(--border-accent); color: var(--accent-primary); }

.admin-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 1.5rem; gap: 0.75rem; background: var(--bg-surface);
}

.amb-card-active { border-color: var(--border); }
.amb-card-error { border-color: var(--status-error-border); background-color: var(--status-error-bg); }
.amb-card-inactive { border-color: var(--border); background-color: var(--bg-base-70); }
.amb-avatar { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--border-accent); box-shadow: var(--shadow-card); }
.amb-avatar-placeholder {
  width: 5rem; height: 5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-muted), var(--bg-surface));
  border: 4px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: var(--font-weight-bold); color: var(--accent-primary);
  box-shadow: var(--shadow-card); flex-shrink: 0;
}
.amb-stat-highlight { border-color: var(--status-warn-border); background: var(--status-warn-bg); }
.amb-code-active { border: 1px solid var(--border); border-radius: 1rem; padding: 0.75rem 1rem; background: var(--accent-muted); }
.amb-code-inactive { border: 1px solid var(--border); border-radius: 1rem; padding: 0.75rem 1rem; opacity: 0.6; background: var(--bg-base-70); }

.amb-badge-white {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--new-on-accent-overlay-20);
  font-size: 0.6rem; font-weight: var(--font-weight-bold); color: var(--new-color-white);
  flex-shrink: 0;
}
.amb-stat-icon { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-muted); opacity: 0.4; flex-shrink: 0; }
.amb-window-open { border-color: var(--status-success-border); background: var(--status-success-bg); }
.amb-window-closed { border-color: var(--border); background: var(--bg-surface); }
.amb-status-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; flex-shrink: 0; }
.amb-status-dot-open { background: var(--status-success-text); }
.amb-status-dot-closed { background: var(--text-muted); }
.amb-avatar-sm { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-accent); flex-shrink: 0; }
.amb-avatar-sm-placeholder {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--accent-muted); border: 2px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: var(--font-weight-bold); color: var(--accent-primary);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Voucher Detail / Create Page (in-app, dark theme — distinct from
   the printable voucher card component below)
   ═══════════════════════════════════════════════════════════════ */
.voucher-status-badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: capitalize;
}
.voucher-status-active { background: var(--status-success-bg); color: var(--status-success-text); border: 1px solid var(--status-success-border); }
.voucher-status-partially_spent { background: var(--status-warn-bg); color: var(--status-warn-text); border: 1px solid var(--status-warn-border); }
.voucher-status-fully_spent { background: var(--bg-base-70); color: var(--text-muted); border: 1px solid var(--border); }
.voucher-status-expired { background: var(--status-error-bg); color: var(--status-error-text); border: 1px solid var(--status-error-border); }
.voucher-status-voided { background: var(--status-error-bg); color: var(--status-error-text); border: 1px solid var(--status-error-border); opacity: 0.7; }

.voucher-progress-track { height: 0.75rem; background: var(--bg-base-70); border-radius: 9999px; overflow: hidden; }
.voucher-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover)); border-radius: 9999px; transition: width 0.3s ease; }

.voucher-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.voucher-meta-grid .col-span-full { grid-column: 1 / -1; }

.voucher-qr-img { width: 10rem; height: 10rem; border-radius: 0.75rem; border: 1px solid var(--border); object-fit: contain; background: var(--bg-surface); }

.voucher-channel-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: var(--font-weight-medium); text-transform: capitalize; }
.voucher-channel-pos { background: var(--accent-muted); color: var(--accent-primary); }
.voucher-channel-web { background: color-mix(in srgb, var(--text-blue) 15%, transparent); color: var(--text-blue); }

.admin-btn-secondary.w-full,
.admin-btn-primary.w-full { width: 100%; justify-content: center; }

.voucher-currency-input { position: relative; max-width: 16rem; }
.voucher-currency-symbol {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg);
}
.voucher-currency-field {
  width: 100%; border: 1px solid var(--border); border-radius: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem 2rem; font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold); color: var(--text-primary);
  background: var(--bg-input); outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.voucher-currency-field:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-muted); }

.voucher-radio { width: 1rem; height: 1rem; accent-color: var(--accent-primary); cursor: pointer; }

.voucher-info-list { list-style: disc; list-style-position: inside; margin-top: 0.5rem; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.6; }
.voucher-info-list li::marker { color: var(--accent-primary); }
.voucher-info-list strong { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   Voucher Print Page (printable gift-voucher card)
   Self-contained light/paper palette — see --new-voucher-* tokens
   at the top of this file. Independent from the app's dark theme
   and orange --accent-primary by design.
   ═══════════════════════════════════════════════════════════════ */
.voucher-print-wrap {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-surface) 50%, var(--bg-base) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: var(--font-sans);
}

.voucher-print-card {
  width: 700px;
  min-height: 340px;
  background: var(--new-voucher-bg);
  border-radius: 1rem;
  box-shadow: 0 8px 48px color-mix(in srgb, var(--new-voucher-accent) 18%, transparent),
              0 2px 16px color-mix(in srgb, var(--new-shadow-ink) 6%, transparent);
  overflow: hidden;
  position: relative;
}

.voucher-print-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, var(--new-voucher-accent) 0%, var(--new-voucher-accent-light) 50%, var(--new-voucher-accent) 100%);
  border-radius: 1rem 0 0 1rem;
}

.voucher-print-inner { display: grid; grid-template-columns: 1fr auto; height: 100%; }

.voucher-print-left { padding: 2.25rem 2rem 2.25rem 3rem; position: relative; }

.voucher-print-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20%;
  pointer-events: none;
  overflow: hidden;
}
.voucher-print-watermark-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 108px;
  font-weight: 700;
  color: color-mix(in srgb, var(--new-voucher-accent) 4.5%, transparent);
  letter-spacing: -4px;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}

.voucher-print-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }
.voucher-print-brand-logo { height: 36px; width: auto; object-fit: contain; }
.voucher-print-brand-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--new-voucher-accent);
  letter-spacing: 1px;
  line-height: 1;
}
.voucher-print-brand-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--new-voucher-text-faint);
  margin-top: 2px;
}

.voucher-print-value-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--new-voucher-text-faint-3);
  margin-bottom: 4px;
}
.voucher-print-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--new-voucher-accent);
  line-height: 1;
  letter-spacing: -1px;
}
.voucher-print-currency {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--new-voucher-accent);
  vertical-align: top;
  margin-top: 8px;
  display: inline-block;
  margin-right: 2px;
}

.voucher-print-gift-tag {
  display: inline-block;
  margin-top: 14px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--new-voucher-accent) 10%, transparent),
    color-mix(in srgb, var(--new-voucher-accent-light) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--new-voucher-accent) 25%, transparent);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--new-voucher-accent-deep);
}

.voucher-print-meta { margin-top: 1.25rem; display: flex; gap: 28px; flex-wrap: wrap; }
.voucher-print-meta-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--new-voucher-text-faint-2);
  margin-bottom: 3px;
}
.voucher-print-meta-value { font-size: 12px; font-weight: 600; color: var(--new-voucher-text-meta); }

.voucher-print-code-strip {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed color-mix(in srgb, var(--new-voucher-accent) 30%, transparent);
  display: flex;
  align-items: center;
  gap: 12px;
}
.voucher-print-code-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--new-voucher-text-faint-2);
}
.voucher-print-code-value {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--new-voucher-text-code);
  background: var(--new-voucher-code-bg);
  border: 1px solid var(--new-voucher-border-tint);
  border-radius: 6px;
  padding: 5px 14px;
}

.voucher-print-right {
  background: linear-gradient(180deg, var(--new-voucher-surface-tint) 0%, var(--new-voucher-surface-tint-2) 100%);
  border-left: 1px dashed color-mix(in srgb, var(--new-voucher-accent) 25%, transparent);
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  gap: 12px;
}
.voucher-print-qr-wrap {
  background: var(--new-color-white);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--new-voucher-accent) 10%, transparent);
  border: 1px solid var(--new-voucher-border-tint-2);
}
.voucher-print-qr-img { width: 120px; height: 120px; display: block; }
.voucher-print-qr-scan {
  font-size: 11px;
  font-weight: 700;
  color: var(--new-voucher-accent);
  letter-spacing: 0.5px;
  text-align: center;
}
.voucher-print-qr-cta { text-align: center; font-size: 9px; color: var(--new-voucher-text-faint); line-height: 1.5; }
.voucher-print-qr-unavailable {
  text-align: center;
  color: var(--text-muted-40);
  font-size: var(--font-size-xs);
  padding: 2rem 0;
}

.voucher-print-terms {
  background: var(--new-voucher-surface-tint);
  border-top: 1px solid var(--new-voucher-border-tint-2);
  padding: 10px 3rem;
  font-size: 8px;
  color: var(--new-voucher-text-faint);
  text-align: center;
  letter-spacing: 0.3px;
}

.voucher-print-actions { margin-top: 28px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Print overrides — shared by the invoice/packing-slip/voucher print
   views. Was previously redefined 3-4x identically; consolidated
   into a single rule set per selector. */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body { background: var(--new-color-white) !important; margin: 0; padding: 0; }
  .print-hidden { display: none !important; }
  .voucher-print-card { box-shadow: none !important; border: 1px solid var(--new-voucher-print-border) !important; }
  @page { size: A5 landscape; margin: 8mm; }
  .voucher-print-wrap { background: var(--new-color-white) !important; padding: 0 !important; min-height: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Vouchers Admin Index — stat & financial summary cards
   ═══════════════════════════════════════════════════════════════ */
.voucher-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.75rem; }
.voucher-stat-card { border-radius: 0.75rem; border: 1px solid var(--border); padding: 0.75rem 0.5rem; text-align: center; background: var(--bg-surface); }
.voucher-stat-number { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: 1.2; }
.voucher-stat-label { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 0.15rem; font-weight: var(--font-weight-medium); }
.voucher-stat-default .voucher-stat-number { color: var(--text-primary); }
.voucher-stat-success .voucher-stat-number { color: var(--status-success-text); }
.voucher-stat-success { border-color: var(--status-success-border); background: var(--status-success-bg); }
.voucher-stat-info .voucher-stat-number { color: var(--text-blue); }
.voucher-stat-info { border-color: color-mix(in srgb, var(--text-blue) 30%, transparent); background: color-mix(in srgb, var(--text-blue) 8%, transparent); }
.voucher-stat-muted .voucher-stat-number { color: var(--text-muted); }
.voucher-stat-muted { border-color: var(--border); background: var(--bg-base-70); }
.voucher-stat-warn .voucher-stat-number { color: var(--status-warn-text); }
.voucher-stat-warn { border-color: var(--status-warn-border); background: var(--status-warn-bg); }
.voucher-stat-error .voucher-stat-number { color: var(--status-error-text); }
.voucher-stat-error { border-color: var(--status-error-border); background: var(--status-error-bg); }
.voucher-stat-warning .voucher-stat-number { color: var(--text-orange); }
.voucher-stat-warning { border-color: color-mix(in srgb, var(--text-orange) 30%, transparent); background: color-mix(in srgb, var(--text-orange) 8%, transparent); }

.voucher-financial-card { border-radius: 0.75rem; border: 1px solid var(--border); padding: 1rem; background: var(--bg-surface); }
.voucher-financial-success { border-color: var(--status-success-border); background: var(--status-success-bg); }
.voucher-financial-warn { border-color: var(--status-warn-border); background: var(--status-warn-bg); }
.voucher-financial-accent { border-color: var(--border-accent); background: var(--accent-muted); }

/* ═══════════════════════════════════════════════════════════════
   Invoice Component (alternate/legacy template — distinct class
   prefix `.invoice-*` vs the POS `.pos-invoice-*` component above;
   both are kept since they style different templates)
   ═══════════════════════════════════════════════════════════════ */
.invoice-wrapper {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  background: var(--bg-surface);
  border-radius: 1rem;
  border: 1px solid var(--border);
  padding: 2rem;
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.3;
}
.invoice-logo-img { max-width: 180px; height: auto; display: block; margin: 0 auto; }
.invoice-logo-text {
  font-family: 'Crimson Pro', serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 8px;
  color: var(--text-primary);
}
.invoice-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-primary), transparent);
  margin: 16px 0;
}
.invoice-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 11px; margin-bottom: 1rem; }
.invoice-label { font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 9px; letter-spacing: 0.5px; margin-bottom: 2px; }
.invoice-number { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--accent-primary); }
.invoice-meta { font-size: 10px; line-height: 1.6; color: var(--text-muted); }
.invoice-customer { text-align: right; }
.invoice-customer-email { font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }
.invoice-loyalty-earned { font-size: 10px; color: var(--accent-primary); margin-top: 4px; }

.shipping-address { background: var(--bg-base); padding: 12px; border-radius: 8px; margin: 16px 0; font-size: 11px; }
.shipping-address-text { font-family: inherit; font-size: 10px; line-height: 1.5; margin: 0; white-space: pre-wrap; color: var(--text-primary); }

.invoice-table { width: 100%; border-collapse: collapse; margin: 16px 0 12px 0; font-size: 11px; }
.invoice-table thead th {
  background: var(--bg-base);
  padding: 8px 6px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--accent-primary);
}
.invoice-table thead th.text-right,
.invoice-table tbody td.text-right { text-align: right; }
.invoice-table tbody td { padding: 8px 6px; border-bottom: 1px solid var(--border); }
.invoice-item-title { font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
.invoice-item-variant { font-size: 9px; color: var(--text-muted); }
.invoice-item-total { font-weight: 600; color: var(--text-primary); }
.invoice-item-meta { font-size: 10px; color: var(--text-muted); }

.invoice-total-section { margin-top: 12px; max-width: 320px; margin-left: auto; font-size: 11px; }
.invoice-total-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.invoice-total-amount { font-weight: 600; color: var(--text-primary); }
.invoice-total-discount { font-weight: 600; color: var(--status-success-text); }
.invoice-total-row.grand-total {
  border-top: 2px solid var(--accent-primary);
  border-bottom: none;
  padding-top: 10px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
}
.invoice-grand-total { color: var(--accent-primary); }

.invoice-footer { margin-top: 24px; text-align: center; font-size: 10px; color: var(--text-muted); padding: 12px 0; border-top: 1px solid var(--border); }
.invoice-footer-contact { margin-top: 4px; }
.invoice-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body { background: var(--new-color-white) !important; margin: 0; padding: 0; }
  .invoice-wrapper { max-width: 100%; margin: 0; padding: 20mm; border: none !important; border-radius: 0 !important; box-sizing: border-box; }
  .print-hidden { display: none !important; }
  .invoice-header { page-break-after: avoid; }
  .invoice-items { page-break-inside: avoid; }
  .invoice-table { page-break-inside: auto; }
  .invoice-table tr { page-break-inside: avoid; page-break-after: auto; }
}

/* Additional utilities introduced alongside the invoice component
   (folded into the main utility list — listed again here only as
   provenance; not redefined) */
.mb-4 { margin-bottom: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.gap-2 { gap: 0.5rem; }

/* ═══════════════════════════════════════════════════════════════
   Packing Slip Component
   ═══════════════════════════════════════════════════════════════ */
.packing-wrapper {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  background: var(--bg-surface);
  border-radius: 1rem;
  border: 1px solid var(--border);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.3;
}
.packing-logo-img { max-width: 180px; height: auto; display: block; margin: 0 auto; }
.packing-logo-text {
  font-family: 'Crimson Pro', serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 8px;
  color: var(--text-primary);
}
.packing-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-primary), transparent);
  margin: 16px 0;
}
.packing-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin: 12px 0;
}
.packing-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; font-size: 11px; }
.packing-stat { background: var(--bg-base); padding: 10px; border-radius: 6px; text-align: center; }
.packing-stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.packing-stat-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.packing-stat-order { font-size: 14px; }

.packing-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 11px; margin-bottom: 16px; }
.packing-label { font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 9px; letter-spacing: 0.5px; margin-bottom: 2px; }
.packing-order-meta { font-size: 10px; line-height: 1.6; color: var(--text-primary); }
.packing-customer { text-align: right; }
.packing-customer-email { font-weight: 600; margin-bottom: 4px; font-size: 11px; color: var(--text-primary); }
.packing-delivery-type { font-size: 10px; color: var(--text-muted); margin-top: 6px; }

.packing-shipping-box { background: var(--bg-base); padding: 16px; border-radius: 8px; margin: 16px 0; border: 2px dashed var(--accent-primary); }
.packing-shipping-address { font-family: inherit; font-size: 12px; line-height: 1.5; margin: 0; white-space: pre-wrap; color: var(--text-primary); font-weight: 500; }

.packing-table { width: 100%; border-collapse: collapse; margin: 16px 0 12px 0; font-size: 11px; }
.packing-table thead th {
  background: var(--bg-base);
  padding: 10px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--accent-primary);
}
.packing-table thead th.text-right,
.packing-table tbody td.text-right { text-align: right; }
.packing-table tbody td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
.packing-checkbox-col { width: 40px; text-align: center; }
.packing-checkbox { width: 18px; height: 18px; border: 2px solid var(--text-muted); display: inline-block; border-radius: 3px; }
.packing-item-title { font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
.packing-item-variant { font-size: 9px; color: var(--text-muted); }
.packing-item-qty { font-weight: 700; font-size: 13px; color: var(--text-primary); }
.packing-item-meta { font-size: 10px; color: var(--text-muted); }

.packing-footer { margin-top: 24px; text-align: center; font-size: 10px; color: var(--text-muted); padding: 12px 0; border-top: 1px solid var(--border); }
.packing-footer-verify { font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }
.packing-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body { background: var(--new-color-white) !important; margin: 0; padding: 0; }
  .packing-wrapper { max-width: 100%; margin: 0; padding: 20mm; border: none !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box; }
  .print-hidden { display: none !important; }
  .packing-header { page-break-after: avoid; }
  .packing-items { page-break-inside: avoid; }
  .packing-table { page-break-inside: auto; }
  .packing-table tr { page-break-inside: avoid; page-break-after: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   Returns Management Extensions
   ═══════════════════════════════════════════════════════════════ */
.return-image { transition: transform 0.2s ease; }
a:hover .return-image { transform: scale(1.05); }

.admin-btn-success.admin-btn-sm { padding: 0.25rem 0.6rem; font-size: var(--font-size-xs); border-radius: 0.5rem; }

/* NOTE: source used a generic `input:checked` selector here (vs.
   `.admin-radio-input:checked` used by the main radio-card rule
   above) — kept as a distinct, slightly broader selector since it
   is technically different markup and merging it could change
   behavior on radio cards that don't use the .admin-radio-input
   class on their <input>. */
.admin-radio-card input:checked + .radio-card-content {
  border-color: var(--accent-primary);
  background: var(--accent-muted);
}
.admin-radio-card input:focus-visible + .radio-card-content {
  box-shadow: 0 0 0 3px var(--accent-muted);
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   Tiptap Editor / Prose Styling
   ═══════════════════════════════════════════════════════════════ */
.admin-prose-editor { line-height: 1.65; }
.admin-prose-editor .ProseMirror { min-height: 22rem; outline: none; }
.admin-prose-editor h2,
.admin-prose-editor h3,
.admin-prose-editor h4,
.admin-prose-editor h5 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold, 700);
}
.admin-prose-editor h2 { font-size: var(--font-size-2xl, 1.5rem); }
.admin-prose-editor h3 { font-size: var(--font-size-xl, 1.25rem); }
.admin-prose-editor h4 { font-size: var(--font-size-lg, 1.125rem); }
.admin-prose-editor h5 { font-size: var(--font-size-base, 1rem); }
.admin-prose-editor blockquote {
  border-left: 3px solid var(--border-accent);
  padding-left: 0.75rem;
  color: var(--text-secondary);
  background: var(--accent-muted);
  margin: 1rem 0;
  padding: 0.75rem;
  border-radius: 0 0.5rem 0.5rem 0;
}
.admin-prose-editor ul,
.admin-prose-editor ol { margin-left: 1.25rem; padding-left: 0.5rem; margin-bottom: 1rem; }
.admin-prose-editor ul { list-style: disc; }
.admin-prose-editor ol { list-style: decimal; }
.admin-prose-editor table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.admin-prose-editor table td,
.admin-prose-editor table th { border: 1px solid var(--border); padding: 0.5rem; }
.admin-prose-editor table th { background: var(--bg-surface-90); font-weight: var(--font-weight-semibold, 600); }
.admin-prose-editor .ProseMirror p.is-editor-empty:first-child::before {
  color: var(--text-muted);
  content: 'Start writing your article...';
  float: left;
  height: 0;
  pointer-events: none;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════
   Editor Toolbar Components
   ═══════════════════════════════════════════════════════════════ */
.editor-toolbar-btn {
  padding: 0.35rem 0.6rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.editor-toolbar-btn:hover { background: var(--accent-muted); color: var(--accent-primary); }
.editor-toolbar-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.editor-toolbar-select {
  padding: 0.35rem 1.5rem 0.35rem 0.6rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  appearance: auto;
  transition: all 0.15s ease;
}
.editor-toolbar-select:hover { border-color: var(--border-accent); background: var(--bg-surface); }
.editor-toolbar-select:focus { outline: none; border-color: var(--accent-primary); }

/* ═══════════════════════════════════════════════════════════════
   Tester Assignments / Autocomplete Dropdown
   ═══════════════════════════════════════════════════════════════ */
.tester-search-dropdown {
  max-height: 15rem;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  position: relative;
}
.tester-search-item { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s ease; }
.tester-search-item:last-child { border-bottom: none; }
.tester-search-item:hover { background: var(--accent-muted); }

/* ═══════════════════════════════════════════════════════════════
   Locations / Store Management Page
   ═══════════════════════════════════════════════════════════════ */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.loyalty-mono { font-family: var(--font-mono, monospace); }
.settings-mono { font-family: var(--font-mono, monospace); letter-spacing: 0.025em; }

@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 1; }
  80%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.delay-150 { animation-delay: 150ms; }

input[type="checkbox"].accent-pink-500 { accent-color: var(--accent-primary); }

/* Dashboard specific background utilities */
.bg-success { background-color: var(--status-success-bg) !important; } 
.bg-warn { background-color: var(--status-warn-bg) !important; }       
.bg-info { background-color: color-mix(in srgb, var(--text-blue) 8%, transparent) !important; } 

/* Dashboard layout & alignment utility replacements */
.chart-container { height: 300px; }
.panel-header { padding: 1.25rem 1.25rem 0 1.25rem; }
.legend-dot.info { background: var(--text-blue); }
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.text-md { font-size: var(--font-size-md) !important; }
.align-middle { vertical-align: middle !important; }

/* ═══════════════════════════════════════════════════════════════
   New Utilities Extracted from Refactoring
   ═══════════════════════════════════════════════════════════════ */

/* Mobile Search Toggle Behaviors (Extracted from layout.html <style>) */
@media (max-width: 1023px) {
  .mobile-search-collapsed { display: none !important; }
  .mobile-search-expanded { display: block !important; }
}

/* Sticky Action Bar (Extracted from layout.html <style>) */
.sticky-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}
@media (max-width: 1023px) {
  .has-sticky-bar { padding-bottom: 4.5rem; }
}

/* File input pseudo-element styling mapped to existing tokens (Used in backups.html) */
.admin-file-input::-file-selector-button {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: var(--accent-muted);
  color: var(--accent-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-file-input::-file-selector-button:hover {
  background: var(--bg-surface);
}

/* Base Modal Scrim Background (Used in users.html) */
.bg-overlay-scrim {
  background: var(--new-overlay-scrim);
  backdrop-filter: blur(4px);
}

/* Solid accent background utility when a non-button container requires solid brand fill (Used in users.html avatars) */
.bg-accent-solid {
  background-color: var(--accent-primary) !important;
  color: var(--new-color-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   New Utilities for Refactored Templates
   ═══════════════════════════════════════════════════════════════ */

/* Used in pos_orders.html for 16px SVG icons */
.icon-base { 
  width: 1rem; 
  height: 1rem; 
  flex-shrink: 0; 
}

/* Used in pos_daily_report.html for auto-width inputs in tight headers */
.admin-input-inline { 
  width: auto; 
  padding: 0.4rem 0.8rem; 
  display: inline-block; 
}

/* Used in reports_events_pl.html for custom progress bar heights/radii */
.h-1 { height: 0.25rem; }
.h-full { height: 100%; }
.rounded-full { border-radius: 9999px; }

/* ═══════════════════════════════════════════════════════════════
   New Layout Utilities for Reports Pages
   ═══════════════════════════════════════════════════════════════ */

/* Dynamic inline height chart support utilities */
.bg-accent { background-color: var(--accent-primary) !important; }
.border-info { border-color: color-mix(in srgb, var(--text-blue) 30%, transparent) !important; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.h-1-5 { height: 0.375rem; }
.h-2 { height: 0.5rem; }
.h-100px { height: 100px; }
.max-h-80px { max-height: 80px; }
.min-h-100px { min-height: 100px; }
.min-h-120px { min-height: 120px; }
.min-w-36px { min-width: 36px; }
.min-w-28px { min-width: 28px; }
.h-3 { height: 0.75rem; }
.w-3 { width: 0.75rem; }
.rounded-sm { border-radius: 0.125rem; }
.rounded-t-sm { border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; }
.rounded-t-md { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }
.origin-left { transform-origin: left; }
.rotate-45 { transform: rotate(45deg); }

.pos-header-logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-image: var(--brand-logo-url);
  background-size: 80%;        /* makes the logo a bit smaller inside the circle */
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--accent-muted);   /* optional, if you want a fallback */
}

.login-hero-logo {
  width: 10rem;            /* roughly h-40 */
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.4));
  transition: transform 0.5s;
}
.login-hero-logo:hover { transform: scale(1.05); }

/* ═══════════════════════════════════════════════════════════════
   Sidebar Collapsed State & Scrollbar Fixes
   ═══════════════════════════════════════════════════════════════ */

/* Hide native scrollbar but keep scroll functionality */
.sidebar-aside::-webkit-scrollbar {
  display: none;
}
.sidebar-aside {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Adjust padding and center content when collapsed */
.sidebar-collapsed .px-6 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Prevent the logo from shrinking to microscopic sizes */
.sidebar-collapsed .sidebar-brand-logo {
  width: 90%;
  min-width: 2.2rem;
}

/* Hide text labels, badges, and chevrons */
.sidebar-collapsed .nav-link-label,
.sidebar-collapsed .nav-section-header h3,
.sidebar-collapsed .nav-item-badge,
.sidebar-collapsed .nav-section-chevron,
.sidebar-collapsed .theme-text {
  display: none !important;
}

/* Re-center icons */
.sidebar-collapsed .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.sidebar-collapsed .nav-section-header {
  justify-content: center;
}

/* Shrink theme toggle button footprint */
.sidebar-collapsed .theme-toggle-btn {
  padding: 0.5rem;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   Support Chat Widget (desktop only)
   ═══════════════════════════════════════════════════════════════ */

/* Hide the entire widget on screens smaller than 1024px */
@media (max-width: 1023px) {
  .chat-widget-wrapper {
    display: none !important;
  }
}

/* Floating Action Button */
.chat-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: var(--accent-primary);
  color: var(--new-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  border: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.chat-fab:hover {
  background: var(--accent-hover);
  transform: scale(1.08);
}

/* Chat Panel – hidden by default, shown when .open is added */
.chat-panel {
  position: fixed;
  bottom: 6rem;               /* above the FAB */
  right: 1.5rem;
  z-index: 9998;
  width: 22rem;
  max-height: 60vh;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-card);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel.open {
  display: flex;
}

/* Messages scroll area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg-base-80);
}

/* Chat bubbles */
.chat-bubble {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  line-height: 1.4;
  word-wrap: break-word;
}
.chat-bubble-user {
  align-self: flex-end;
  background: var(--accent-primary);
  color: var(--new-color-white);
  border-bottom-right-radius: 0.25rem;
}
.chat-bubble-support {
  align-self: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-bottom-left-radius: 0.25rem;
}

/* Custom grid layouts and responsive layout utilities required for product detail layout mapping */
.grid-layout-workspace { 
  display: grid; 
  gap: 1.5rem; 
}
@media (min-width: 1280px) { 
  .grid-layout-workspace { grid-template-columns: minmax(0, 1.7fr) 320px; } 
}

.grid-layout-detail { 
  display: grid; 
  gap: 1rem; 
}
@media (min-width: 1280px) { 
  .grid-layout-detail { grid-template-columns: minmax(0, 1.2fr) 320px; } 
}

.grid-layout-bulk { 
  display: grid; 
  gap: 1.25rem; 
}
@media (min-width: 1280px) { 
  .grid-layout-bulk { grid-template-columns: minmax(0, 1fr) 340px; } 
}

.grid-cols-auto-last { 
  display: grid; 
  gap: 0.75rem; 
}
@media (min-width: 640px) { 
  .grid-cols-auto-last { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } 
}

/* Base utility gap fillers missing from global.css but previously injected via arbitrary classes */
.border-dashed { border-style: dashed !important; }
.object-cover { object-fit: cover !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }

/* Fixed widths injected directly into JS logic constraints */
.w-16 { width: 4rem !important; }
.w-24 { width: 6rem !important; }
.w-28 { width: 7rem !important; }

/* Miscellaneous */
.h-40 { height: 10rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.self-start { align-self: flex-start !important; }
/* ═══════════════════════════════════════════════════════════════
   Home Page / Grouped Thumbnail Layout
   ═══════════════════════════════════════════════════════════════ */

/* ── 3 Groups Wide ── */
.home-groups-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start; /* Allows groups to size based on content height */
}

.home-section-wrapper {
  background: var(--bg-surface-80);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.home-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.home-section-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.home-section-alert {
  font-size: var(--font-size-xs);
  color: var(--status-error-text);
  font-weight: var(--font-weight-bold);
}

/* ── 3 Buttons Wide ── */
.home-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* ── Thumbnail Button Styling ── */
.home-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  aspect-ratio: 1 / 1; /* Forces a uniform thumbnail square */
}

.home-tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.home-tile-icon {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  transition: color 0.15s ease;
}

.home-tile:hover .home-tile-icon {
  color: var(--accent-primary);
}

.home-tile-label {
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
  word-wrap: break-word;
}

.home-tile:hover .home-tile-label {
  color: var(--text-primary);
}

.home-tile-badge {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  background: var(--status-error-bg);
  color: var(--status-error-text);
  border: 1px solid var(--status-error-border);
  font-size: 0.6rem;
  font-weight: var(--font-weight-bold);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* ── Responsive Scaling ── */
@media (max-width: 1024px) {
  .home-groups-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .home-groups-container {
    grid-template-columns: 1fr;
  }
  .home-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}