@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --color-bg: #f7f7f4;
  --color-surface: #ffffff;
  --color-surface-muted: #f2f3f0;
  --color-surface-hover: #ecefeb;
  --color-text-primary: #17201d;
  --color-text-secondary: #5f6965;
  --color-text-muted: #87908c;
  --color-text-inverse: #ffffff;
  --color-border: #dde2de;
  --color-border-strong: #c7cec9;
  --color-primary: #155b49;
  --color-primary-hover: #104b3c;
  --color-primary-active: #0c4033;
  --color-primary-soft: #e3f0eb;
  --color-gold: #a66f12;
  --color-gold-soft: #f7ebcf;
  --color-success: #237a57;
  --color-success-soft: #e2f2ea;
  --color-warning: #a46a13;
  --color-warning-soft: #faedcf;
  --color-danger: #a73d4a;
  --color-danger-soft: #f7e3e6;
  --color-info: #376fa7;
  --color-info-soft: #e3edf8;
  --color-overlay: rgba(15, 23, 20, 0.56);
  --font-ui: Inter, "Segoe UI", Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 26px;
  --font-size-3xl: 32px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --shadow-dropdown: 0 8px 24px rgba(20, 30, 25, 0.1);
  --shadow-dialog: 0 16px 48px rgba(20, 30, 25, 0.16);

  /* Compatibility aliases used by Photo Mode. */
  --epjs-ink: var(--color-text-primary);
  --epjs-charcoal: var(--color-text-secondary);
  --epjs-ivory: var(--color-bg);
  --epjs-paper: var(--color-surface);
  --epjs-line: var(--color-border);
  --epjs-line-strong: var(--color-border-strong);
  --epjs-gold: var(--color-gold);
  --epjs-jade: var(--color-primary);
  --epjs-ruby: var(--color-danger);
  --epjs-blue: var(--color-info);
  --epjs-muted: var(--color-text-secondary);
  --epjs-radius: var(--radius-md);
}

html,
body,
#root {
  min-height: 100%;
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-ui) !important;
}

body {
  font-size: var(--font-size-md);
  line-height: 1.45;
  font-feature-settings: "tnum";
}

*,
*::before,
*::after {
  box-sizing: border-box;
  letter-spacing: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-primary) !important;
  font-weight: 700 !important;
}

:focus-visible {
  outline: 3px solid rgba(21, 91, 73, 0.28) !important;
  outline-offset: 2px !important;
}

/* Application shell and primary navigation */
#root > div[class*="md:pl-64"] {
  background: var(--color-bg) !important;
}

#root > div > aside[class*="fixed"][class*="w-64"] {
  width: 248px !important;
  background: var(--color-surface) !important;
  border-right: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
}

#root > div > aside[class*="fixed"] > div > div:first-child {
  min-height: 72px;
  height: auto !important;
  padding: var(--space-4) var(--space-5) !important;
  border-color: var(--color-border) !important;
}

#root > div > aside[class*="fixed"] h1 {
  color: var(--color-text-primary) !important;
  font-size: var(--font-size-lg) !important;
  line-height: 1.25 !important;
}

#root > div > aside[class*="fixed"] nav {
  padding: var(--space-3) !important;
  background: transparent !important;
}

.epjs-nav-section-label {
  margin: var(--space-4) var(--space-3) var(--space-1);
  color: var(--color-text-muted) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.epjs-nav-section-label:first-child {
  margin-top: var(--space-1);
}

#root > div > aside[class*="fixed"] nav a,
#root > div > aside[class*="fixed"] nav button {
  min-height: 42px;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

#root > div > aside[class*="fixed"] nav a:hover,
#root > div > aside[class*="fixed"] nav button:hover {
  background: var(--color-surface-hover) !important;
  color: var(--color-text-primary) !important;
}

#root > div > aside[class*="fixed"] nav a[class*="bg-slate-900"] {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
}

#root > div > aside[class*="fixed"] nav a[class*="bg-slate-900"] * {
  color: inherit !important;
}

#root > div > aside[class*="fixed"] nav > div[class*="border-t"] {
  border-color: var(--color-border) !important;
}

#root > div > aside[class*="fixed"] nav > div[class*="border-t"] p[class*="uppercase"] {
  color: var(--color-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

#root > div > aside[class*="fixed"] nav > div[class*="border-t"] button[class*="border"] {
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
}

#root > div > aside[class*="fixed"] > div > div:last-child {
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
}

#root > div > header[class*="sticky"] {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

#root > div > nav[class*="fixed"][class*="bottom-0"] {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  box-shadow: 0 -6px 24px rgba(20, 30, 25, 0.07) !important;
}

#root > div > nav[class*="fixed"][class*="bottom-0"] a {
  color: var(--color-text-muted) !important;
}

#root > div > nav[class*="fixed"][class*="bottom-0"] a[class*="text-slate-900"] {
  color: var(--color-primary) !important;
}

main[class*="max-w-7xl"] {
  padding: var(--space-6) var(--space-8) !important;
}

/* Flat surfaces */
#root [class*="rounded"][class*="border"] {
  border-color: var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}

#root [class*="bg-white"] {
  background-color: var(--color-surface) !important;
}

#root [class*="bg-slate-50"],
#root [class*="bg-slate-100"],
#root [class*="bg-gray-50"],
#root [class*="bg-gray-100"] {
  background-color: var(--color-surface-muted) !important;
}

#root [class*="shadow-sm"] {
  box-shadow: none !important;
}

#root [class*="shadow-md"],
#root [class*="shadow-lg"],
#root [class*="shadow-xl"] {
  box-shadow: var(--shadow-dropdown) !important;
}

#root [class*="bg-gradient"] {
  background-image: none !important;
}

#root [class*="text-slate-900"],
#root [class*="text-gray-900"] {
  color: var(--color-text-primary) !important;
}

#root [class*="text-slate-700"],
#root [class*="text-slate-600"],
#root [class*="text-gray-700"],
#root [class*="text-gray-600"] {
  color: var(--color-text-secondary) !important;
}

#root [class*="text-slate-500"],
#root [class*="text-slate-400"],
#root [class*="text-gray-500"],
#root [class*="text-gray-400"] {
  color: var(--color-text-muted) !important;
}

/* Controls and buttons */
input,
select,
textarea,
[role="combobox"] {
  min-height: 40px;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted) !important;
}

input:focus,
select:focus,
textarea:focus,
[role="combobox"]:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(21, 91, 73, 0.14) !important;
  outline: none !important;
}

button,
a[class*="inline-flex"],
[role="button"] {
  border-radius: var(--radius-md) !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 90ms ease !important;
}

button[class*="bg-slate-900"],
button[class*="bg-indigo"],
button[class*="bg-blue"],
button[class*="bg-emerald"],
button[class*="bg-green"],
a[class*="bg-slate-900"],
a[class*="bg-indigo"],
a[class*="bg-blue"],
a[class*="bg-emerald"] {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: none !important;
}

button[class*="bg-slate-900"] *,
button[class*="bg-indigo"] *,
button[class*="bg-blue"] *,
button[class*="bg-emerald"] *,
button[class*="bg-green"] *,
a[class*="bg-slate-900"] *,
a[class*="bg-indigo"] *,
a[class*="bg-blue"] *,
a[class*="bg-emerald"] * {
  color: inherit !important;
}

button[class*="bg-slate-900"]:hover,
button[class*="bg-indigo"]:hover,
button[class*="bg-blue"]:hover,
button[class*="bg-emerald"]:hover,
a[class*="bg-slate-900"]:hover,
a[class*="bg-indigo"]:hover,
a[class*="bg-blue"]:hover {
  background: var(--color-primary-hover) !important;
}

#root button[class*="border"][class*="bg-transparent"],
#root button[class*="border"][class*="bg-white"],
#root a[class*="border"] {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
}

#root button[class*="text-red"],
#root button[class*="text-rose"],
#root button[class*="bg-red"] {
  border-color: #d8aeb4 !important;
  background: var(--color-danger-soft) !important;
  color: var(--color-danger) !important;
}

#root button:disabled,
#root [aria-disabled="true"] {
  border-color: var(--color-border) !important;
  background: var(--color-surface-muted) !important;
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Semantic colors */
#root [class*="text-emerald"],
#root [class*="text-green"] { color: var(--color-success) !important; }
#root [class*="text-amber"],
#root [class*="text-yellow"] { color: var(--color-warning) !important; }
#root [class*="text-red"],
#root [class*="text-rose"] { color: var(--color-danger) !important; }
#root [class*="text-blue"],
#root [class*="text-indigo"],
#root [class*="text-purple"] { color: var(--color-info) !important; }

#root [class*="bg-emerald-50"],
#root [class*="bg-green-50"] { background: var(--color-success-soft) !important; }
#root [class*="bg-amber-50"],
#root [class*="bg-yellow-50"] { background: var(--color-warning-soft) !important; }
#root [class*="bg-red-50"],
#root [class*="bg-rose-50"] { background: var(--color-danger-soft) !important; }
#root [class*="bg-blue-50"],
#root [class*="bg-indigo-50"],
#root [class*="bg-purple-50"] { background: var(--color-info-soft) !important; }

/* Dashboard */
body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: var(--space-3) !important;
}

body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) > div {
  min-width: 0;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) > div > div {
  position: relative;
  display: block !important;
  padding: var(--space-4) !important;
  min-width: 0;
}

body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) > div > div > div:first-child {
  width: 100%;
  min-width: 0;
}

body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) p[class*="uppercase"] {
  color: var(--color-text-secondary) !important;
  font-size: 11px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) p[class*="text-xl"] {
  color: var(--color-text-primary) !important;
  font-size: clamp(16px, 1.3vw, 20px) !important;
  line-height: 1.15 !important;
  white-space: nowrap;
}

body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) span[class*="text-\[10px\]"] {
  display: none !important;
}

body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) [class*="rounded-lg"][class*="shrink-0"] {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
}

body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) > div:nth-child(4) [class*="shrink-0"] {
  display: none !important;
}

body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) > div:nth-child(4) p[class*="text-xl"] {
  font-size: clamp(15px, 1.18vw, 18px) !important;
}

body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-6"] > div {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

/* Tables, lists, reports, history, receipts and approvals */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}

thead,
thead[class*="bg"],
#root [class*="bg-slate-50"][class*="uppercase"] {
  background: var(--color-surface-muted) !important;
}

th {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

th,
td {
  padding: 11px 14px !important;
  border-color: var(--color-border) !important;
  vertical-align: middle;
}

tbody tr:hover {
  background: var(--color-surface-hover) !important;
}

/* Forms */
body.epjs-route-add main form,
body.epjs-route-settings main form {
  max-width: 1080px;
}

body.epjs-route-add main [class*="rounded"][class*="border"],
body.epjs-route-settings main [class*="rounded"][class*="border"] {
  box-shadow: none !important;
}

body.epjs-route-add main form > div,
body.epjs-route-settings main form > div {
  border-color: var(--color-border) !important;
}

/* Dialogs and overlays */
#root div[class*="fixed"][class*="inset-0"] {
  background-color: var(--color-overlay) !important;
}

#root div[class*="fixed"][class*="inset-0"] > div[class*="rounded"],
#root div[class*="fixed"][class*="inset-0"] > div[class*="bg-white"] {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dialog) !important;
}

/* Inventory */
body.epjs-route-inventory main > div > div:first-child {
  align-items: center;
}

body.epjs-route-inventory [class*="rounded-full"] {
  border-radius: var(--radius-full) !important;
}

body.epjs-route-inventory div[class*="fixed"][class*="inset-0"] > div {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

body.epjs-route-inventory div[class*="fixed"][class*="inset-0"] [class*="bg-gradient"],
body.epjs-route-inventory div[class*="fixed"][class*="inset-0"] [class*="bg-blue-50"] {
  background: var(--color-surface-muted) !important;
}

/* Storefront remains product-forward but uses the same admin language. */
body.epjs-route-storefront [class*="aspect-[4/5]"] {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface-muted) !important;
}

body.epjs-route-storefront h1[class*="text-4xl"],
body.epjs-route-storefront h1[class*="text-5xl"] {
  font-size: var(--font-size-3xl) !important;
  line-height: 1.15 !important;
}

/* Authentication */
body.epjs-route-login,
body:has(input[type="password"]) {
  background: var(--color-bg) !important;
}

body:has(input[type="password"]) #root > div {
  background: var(--color-bg) !important;
}

body:has(input[type="password"]) #root [class*="max-w"] {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dialog) !important;
}

/* Photo Mode selection */
.epjs-plus-shell,
.epjs-storefront-plus {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-ui) !important;
}

.epjs-plus-sidebar,
.epjs-plus-topbar,
.epjs-plus-sidepanel {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

.epjs-plus-brand h1,
.epjs-plus-title h2,
.epjs-plus-section h3,
.epjs-plus-modal h3 {
  font-family: var(--font-ui) !important;
  color: var(--color-text-primary) !important;
}

.epjs-plus-brand h1 { font-size: var(--font-size-xl) !important; }
.epjs-plus-brand p,
.epjs-plus-title p,
.epjs-plus-item-meta,
.epjs-plus-status { color: var(--color-text-secondary) !important; }

.epjs-plus-search,
.epjs-plus-selection-toolbar,
.epjs-plus-selection-footer {
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
}

.epjs-plus-item {
  min-height: 68px;
  background: var(--color-surface) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

.epjs-plus-item:hover { background: var(--color-surface-hover) !important; }
.epjs-plus-item.is-selected {
  background: var(--color-primary-soft) !important;
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
}

.epjs-plus-check.is-checked,
.epjs-plus-count {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
}

.epjs-plus-btn,
.epjs-plus-mini-btn {
  min-height: 40px;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
}

.epjs-plus-mini-btn { min-width: 36px; min-height: 36px; }
.epjs-plus-btn:hover,
.epjs-plus-mini-btn:hover { background: var(--color-surface-hover) !important; }

.epjs-plus-btn.primary,
.epjs-plus-btn.dark,
.epjs-plus-tool-process.primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
}

.epjs-plus-btn.primary:hover,
.epjs-plus-btn.dark:hover { background: var(--color-primary-hover) !important; }

.epjs-plus-btn.danger,
.epjs-plus-mini-btn.danger {
  background: var(--color-danger-soft) !important;
  border-color: #d8aeb4 !important;
  color: var(--color-danger) !important;
}

.epjs-plus-pending-sync.has-pending,
.epjs-plus-pending-section {
  background: var(--color-warning-soft) !important;
  border-color: #e2c78e !important;
  color: #6f470a !important;
}

/* Camera: dark only while actively capturing. */
.epjs-plus-shell[data-phase="capture"] .epjs-plus-stage,
.epjs-plus-shell[data-phase="capture"] .epjs-plus-camera-wrap {
  background: #0f1714 !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-camera-label {
  background: linear-gradient(180deg, rgba(8, 14, 12, 0.9), rgba(8, 14, 12, 0)) !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-camera-label h3,
.epjs-plus-shell[data-phase="capture"] .epjs-plus-camera-label p {
  color: #ffffff !important;
  font-family: "SFMono-Regular", Consolas, monospace !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-camera-label::before {
  background: #d0a541 !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-capturebar {
  background: rgba(10, 18, 15, 0.96) !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-capturebar .epjs-plus-btn {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  color: #ffffff !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-capture {
  border-radius: 50% !important;
  border-color: #ffffff !important;
  background: #ffffff !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-capture span::before,
.epjs-plus-shell[data-phase="capture"] .epjs-plus-capture span::after {
  color: var(--color-primary) !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-sidepanel,
.epjs-plus-shell[data-phase="capture"] .epjs-plus-camera-tools {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-stepper {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface) !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-stepper button,
.epjs-plus-shell[data-phase="capture"] .epjs-plus-stepper output {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-stepper button:hover {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-active) !important;
}

.epjs-plus-shell[data-phase="capture"] .epjs-plus-stepper-control label {
  color: var(--color-text-secondary) !important;
}

/* Post-processing: light, flat workspace. */
.epjs-plus-shell[data-phase="review"] {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-main,
.epjs-plus-shell[data-phase="review"] .epjs-plus-stage,
.epjs-plus-shell[data-phase="review"] .epjs-plus-sidepanel {
  background: var(--color-bg) !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-camera-wrap {
  background: var(--color-surface-muted) !important;
  border: 1px solid var(--color-border) !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-camera-label {
  background: linear-gradient(180deg, rgba(15, 23, 20, 0.82), rgba(15, 23, 20, 0)) !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-camera-label h3,
.epjs-plus-shell[data-phase="review"] .epjs-plus-camera-label p {
  color: #ffffff !important;
  font-family: "SFMono-Regular", Consolas, monospace !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-capturebar {
  min-height: 72px !important;
  padding: var(--space-3) var(--space-4) !important;
  gap: var(--space-2) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  font-family: var(--font-ui) !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-capturebar .epjs-plus-btn {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 var(--space-2) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border-strong) !important;
  border-width: 1px !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-capturebar .epjs-plus-btn.primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-capturebar .danger,
.epjs-plus-shell[data-phase="review"] #epjsPlusRetake {
  background: var(--color-danger-soft) !important;
  color: var(--color-danger) !important;
  border-color: #d8aeb4 !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-edit-tools {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  padding-bottom: var(--space-5) !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-edit-tools h3 {
  color: var(--color-text-secondary) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.epjs-plus-section {
  border-color: var(--color-border) !important;
}

.epjs-plus-filter,
.epjs-plus-crop,
.epjs-plus-tag {
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
}

.epjs-plus-filter.is-selected,
.epjs-plus-crop.is-selected,
.epjs-plus-tag.is-selected {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-active) !important;
  box-shadow: 0 0 0 2px rgba(21, 91, 73, 0.12) !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-filter,
.epjs-plus-shell[data-phase="review"] .epjs-plus-crop,
.epjs-plus-shell[data-phase="review"] .epjs-plus-tag,
.epjs-plus-shell[data-phase="review"] .epjs-plus-input {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.epjs-plus-shell[data-phase="review"] .epjs-plus-filter.is-selected,
.epjs-plus-shell[data-phase="review"] .epjs-plus-crop.is-selected,
.epjs-plus-shell[data-phase="review"] .epjs-plus-tag.is-selected {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-active) !important;
  box-shadow: 0 0 0 2px rgba(21, 91, 73, 0.12) !important;
}

.epjs-plus-item-actions .epjs-plus-mini-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: var(--radius-md) !important;
}

.epjs-plus-modal { background: var(--color-overlay) !important; }
.epjs-plus-modal-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dialog) !important;
  color: var(--color-text-primary) !important;
}

/* Operation mode indicator */
#epjsOperationStatus {
  background: var(--color-primary) !important;
  border-color: var(--color-primary-hover) !important;
  color: #ffffff !important;
}

#epjsOperationStatus.is-blocked {
  background: var(--color-danger) !important;
  border-color: #87313c !important;
}

/* Keep the full-screen imaging workspace free of app-shell overlays. */
body:has(.epjs-plus-shell[data-phase="capture"]) #epjsOperationStatus,
body:has(.epjs-plus-shell[data-phase="review"]) #epjsOperationStatus {
  display: none !important;
}

/* Responsive */
@media (max-width: 1180px) {
  body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body { font-size: var(--font-size-sm); }

  #root > div > main,
  main[class*="max-w-7xl"] {
    padding: var(--space-4) !important;
  }

  body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-2) !important;
  }

  body.epjs-route-dashboard main > div > div[class*="grid"][class*="gap-4"]:has(> div:nth-child(6)) > div > div {
    padding: var(--space-3) !important;
  }

  button,
  input,
  select,
  textarea,
  [role="button"] {
    min-height: 40px;
  }

  #root [class*="text-4xl"],
  #root [class*="text-5xl"] {
    font-size: var(--font-size-2xl) !important;
    line-height: 1.15 !important;
  }

  .epjs-plus-shell[data-phase="review"] .epjs-plus-stage,
  .epjs-plus-shell[data-phase="capture"] .epjs-plus-stage {
    border: 0 !important;
  }

  .epjs-plus-shell[data-phase="review"] .epjs-plus-capturebar {
    min-height: 64px !important;
    padding: var(--space-2) 10px !important;
    gap: 6px !important;
    border-width: 1px 0 !important;
  }

  .epjs-plus-shell[data-phase="review"] .epjs-plus-capturebar .epjs-plus-btn,
  .epjs-plus-shell[data-phase="review"] .epjs-plus-capturebar .epjs-plus-btn.primary {
    min-height: 42px !important;
    border-radius: var(--radius-md) !important;
    font-size: 10px !important;
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusCaptureExit,
  .epjs-plus-shell[data-phase="review"] #epjsPlusUsePreview,
  .epjs-plus-shell[data-phase="review"] #epjsPlusRetake {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusCaptureExit,
  .epjs-plus-shell[data-phase="review"] #epjsPlusUsePreview {
    background: var(--color-surface) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text-primary) !important;
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusCaptureExit::before,
  .epjs-plus-shell[data-phase="review"] #epjsPlusUsePreview::before,
  .epjs-plus-shell[data-phase="review"] #epjsPlusRetake::before {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    position: static !important;
    line-height: 1 !important;
    color: currentColor !important;
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusCaptureExit::before {
    width: 16px !important;
    height: 16px !important;
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusReview,
  .epjs-plus-shell[data-phase="review"] #epjsPlusNext {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    text-align: center !important;
    line-height: 1 !important;
    font-size: 11px !important;
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusReview::before,
  .epjs-plus-shell[data-phase="review"] #epjsPlusNext::before {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    flex: 0 0 auto !important;
    position: static !important;
    transform: none !important;
    line-height: 1 !important;
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusReview {
    background: var(--color-surface) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text-primary) !important;
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusNext {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
  }

  .epjs-plus-modal-card {
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .epjs-plus-shell[data-phase="select"] .epjs-plus-selection-footer {
    gap: 6px !important;
    padding: 7px 10px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    background: var(--color-surface) !important;
  }

  .epjs-plus-shell[data-phase="select"] .epjs-plus-selection-actions {
    gap: 6px !important;
  }

  .epjs-plus-shell[data-phase="select"] .epjs-plus-selection-actions .epjs-plus-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding-inline: 6px !important;
    font-size: 10px !important;
  }

  .epjs-plus-shell[data-phase="select"] .epjs-plus-pending-sync {
    min-height: 34px !important;
    padding: 4px 6px !important;
    border-radius: var(--radius-md) !important;
  }

  .epjs-plus-shell[data-phase="select"] .epjs-plus-back-dashboard {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    overflow: hidden;
    font-size: 0 !important;
  }

  .epjs-plus-shell[data-phase="select"] .epjs-plus-back-dashboard::before {
    content: "\2190";
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
  }
}

@media (max-width: 400px) {
  .epjs-plus-shell[data-phase="review"] #epjsPlusReview,
  .epjs-plus-shell[data-phase="review"] #epjsPlusNext {
    gap: 5px !important;
    padding-inline: 6px !important;
    font-size: 0 !important;
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusReview::after,
  .epjs-plus-shell[data-phase="review"] #epjsPlusNext::after {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusReview::after {
    content: "Previous";
  }

  .epjs-plus-shell[data-phase="review"] #epjsPlusNext::after {
    content: "Next";
  }
}

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