/*
  Back-office look for InvenTree's web app (/web/), matched to the studio front
  end in web/css/app.css: undiluted ink, bone text, and the flash palette —
  vermilion, marigold, jade, cobalt. Inserted into every /web/ page by the
  reverse proxy (see infra/Caddyfile); InvenTree itself is untouched.

  Mantine writes its own tokens on :root after this sheet loads, so ours use a
  higher specificity (html:not(#x)) to win. Mantine also ships a dark scheme,
  so this pins both schemes to the same ink rather than letting the moon icon
  produce a third look.
*/
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

html:not(#x), html:not(#x)[data-mantine-color-scheme="dark"], html:not(#x)[data-mantine-color-scheme="light"] {
  --ti-ink: #141110;
  --ti-raise: #1d1917;
  --ti-raise-2: #26201e;
  --ti-bone: #f4efe9;
  --ti-bone-2: #ded5cd;
  --ti-muted: #a1958d;
  --ti-rule: #2e2724;
  --ti-rule-2: #403733;
  --ti-vermilion: #d63c28;
  --ti-vermilion-lift: #f2604c;
  --ti-marigold: #e3a128;
  --ti-jade: #26a269;
  --ti-cobalt: #3d6fe0;

  --mantine-font-family: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mantine-font-family-headings: "Fraunces", Georgia, serif;
  --mantine-color-body: var(--ti-ink);
  --mantine-color-text: var(--ti-bone);
  --mantine-color-dimmed: var(--ti-muted);
  --mantine-color-anchor: var(--ti-vermilion-lift);
  --mantine-color-bright: var(--ti-bone);
  --mantine-color-default: var(--ti-raise);
  --mantine-color-default-hover: var(--ti-raise-2);
  --mantine-color-default-color: var(--ti-bone);
  --mantine-color-default-border: var(--ti-rule-2);
  --mantine-color-placeholder: var(--ti-muted);
  --mantine-primary-color-filled: var(--ti-vermilion);
  --mantine-primary-color-filled-hover: var(--ti-vermilion-lift);
  --mantine-primary-color-light: var(--ti-raise-2);
  --mantine-primary-color-light-hover: var(--ti-rule-2);
  --mantine-primary-color-light-color: var(--ti-bone);
  --mantine-primary-color-contrast: #ffffff;
  --mantine-color-gray-0: var(--ti-raise);
  --mantine-color-gray-1: var(--ti-raise-2);
  --mantine-color-gray-2: var(--ti-rule-2);
  --mantine-color-gray-3: var(--ti-rule-2);
  --mantine-color-dark-4: var(--ti-rule-2);
  --mantine-color-dark-5: var(--ti-rule);
  --mantine-color-dark-6: var(--ti-raise);
  --mantine-color-dark-7: var(--ti-raise);
  --mantine-color-dark-8: var(--ti-ink);
  --mantine-color-dark-9: var(--ti-ink);
  /* Mantine's named colours. InvenTree encodes state with these (a purchase
     order badge asks for blue-filled, a danger button for red-light), so they
     are remapped onto the flash palette rather than overridden per component.
     Filled tones are deep enough to carry Mantine's white label text. */
  --mantine-color-red-filled: #a32a1b;
  --mantine-color-red-filled-hover: #c2321f;
  --mantine-color-red-light: #47140f;
  --mantine-color-red-light-hover: #5d1b14;
  --mantine-color-red-light-color: #f2604c;
  --mantine-color-green-filled: #16704a;
  --mantine-color-green-filled-hover: #1b8a5a;
  --mantine-color-green-light: #0c3323;
  --mantine-color-green-light-hover: #10442e;
  --mantine-color-green-light-color: #4ecf95;
  --mantine-color-teal-filled: #16704a;
  --mantine-color-teal-light: #0c3323;
  --mantine-color-teal-light-color: #4ecf95;
  --mantine-color-blue-filled: #2b52ad;
  --mantine-color-blue-filled-hover: #3462cc;
  --mantine-color-blue-light: #12204a;
  --mantine-color-blue-light-hover: #182b61;
  --mantine-color-blue-light-color: #9dbaf7;
  --mantine-color-cyan-filled: #2b52ad;
  --mantine-color-cyan-light: #12204a;
  --mantine-color-cyan-light-color: #9dbaf7;
  --mantine-color-indigo-filled: #2b52ad;
  --mantine-color-indigo-light: #12204a;
  --mantine-color-indigo-light-color: #9dbaf7;
  --mantine-color-yellow-filled: #8a6110;
  --mantine-color-yellow-filled-hover: #a87615;
  --mantine-color-yellow-light: #3d2a08;
  --mantine-color-yellow-light-hover: #52380b;
  --mantine-color-yellow-light-color: #e3a128;
  --mantine-color-orange-filled: #8a6110;
  --mantine-color-orange-light: #3d2a08;
  --mantine-color-orange-light-color: #e3a128;
  --mantine-color-gray-filled: #4a423d;
  --mantine-color-gray-light: #26201e;
  --mantine-color-gray-light-hover: #2e2724;
  --mantine-color-gray-light-color: #ded5cd;
  /* Outline/subtle variants read their label from *-outline. Untouched, a
     Cancel button next to a vermilion Submit rendered in Mantine's stock blue. */
  --mantine-color-blue-outline: #9dbaf7;
  --mantine-color-blue-outline-hover: #12204a;
  --mantine-color-red-outline: #f2604c;
  --mantine-color-red-outline-hover: #47140f;
  --mantine-color-green-outline: #4ecf95;
  --mantine-color-green-outline-hover: #0c3323;
  --mantine-color-teal-outline: #4ecf95;
  --mantine-color-yellow-outline: #e3a128;
  --mantine-color-yellow-outline-hover: #3d2a08;
  --mantine-color-orange-outline: #e3a128;
  --mantine-color-cyan-outline: #9dbaf7;
  --mantine-color-indigo-outline: #9dbaf7;
  --mantine-color-gray-outline: #ded5cd;
  --mantine-color-gray-outline-hover: #26201e;
  --mantine-color-dark-outline: #ded5cd;
  --mantine-color-dark-filled: #26201e;
  --mantine-color-dark-light: #1d1917;
  --mantine-color-dark-light-color: #ded5cd;
  --mantine-radius-default: 6px;
  --mantine-radius-xs: 3px;
  --mantine-radius-sm: 3px;
  --mantine-radius-md: 6px;
  --mantine-radius-lg: 12px;
  --mantine-shadow-xs: none;
  --mantine-shadow-sm: none;
  --mantine-shadow-md: 0 24px 50px -24px #000;
  color-scheme: dark;
}

html, body, #root {
  background: #141110 !important;
  color: #f4efe9;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* --- type -------------------------------------------------------------------------- */
.mantine-Title-root, h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600 !important; letter-spacing: -.03em; color: #f4efe9 !important;
}
/* InvenTree paints page titles as gradient text from the primary palette; make them bone */
.mantine-Text-root[data-variant="gradient"], .mantine-Title-root[data-variant="gradient"] {
  background: none !important; background-image: none !important;
  color: #f4efe9 !important; -webkit-text-fill-color: #f4efe9 !important;
  font-family: "Fraunces", Georgia, serif !important; font-weight: 600 !important;
}
.mantine-Tabs-tab { font-weight: 500; color: #a1958d !important; }
.mantine-Tabs-tab[data-active] { border-color: #d63c28 !important; color: #f4efe9 !important; }
.mantine-datatable-header th, .mantine-Table-th {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: #a1958d !important; background: #1d1917 !important;
}
.mantine-datatable-header { border-bottom: 1.5px solid #403733 !important; }
.mantine-Table-tr { border-color: #2e2724 !important; }
.mantine-Table-tr:hover td { background: #141110 !important; }
.mantine-datatable-empty-state, .mantine-datatable-empty-row { background: #1d1917 !important; }

/* --- surfaces: panels on the ink, opened by a rule, not floated on a shadow --------- */
.mantine-Paper-root {
  background: #1d1917 !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1px #2e2724 !important;
}
.mantine-Paper-root .mantine-Paper-root { box-shadow: none !important; border-radius: 3px !important; background: #26201e !important; }
.mantine-Divider-root { border-color: #2e2724 !important; }

/* header and navbar */
header, [class*="Header-root"], .mantine-AppShell-header {
  background: #141110 !important;
  border-bottom: 1px solid #2e2724 !important;
}
.mantine-AppShell-navbar { background: #141110 !important; border-right: 1px solid #2e2724 !important; }

/* controls */
.mantine-Button-root { border-radius: 3px !important; font-weight: 600; }
.mantine-Button-root:not([data-variant="default"]):not([data-variant="subtle"]):not([data-variant="outline"]):not([data-variant="light"]) {
  background: #d63c28 !important; color: #ffffff !important; border-color: #d63c28 !important;
}
.mantine-Button-root:not([data-variant="default"]):not([data-variant="subtle"]):not([data-variant="outline"]):not([data-variant="light"]):hover { background: #f2604c !important; }
.mantine-Input-input {
  background: #141110 !important; border-color: #403733 !important;
  color: #f4efe9 !important; border-radius: 3px !important;
}
.mantine-Input-input:focus, .mantine-Input-input:focus-within { border-color: #d63c28 !important; }
.mantine-ActionIcon-root { color: #ded5cd !important; }
.mantine-Anchor-root { color: #f2604c !important; }
.mantine-SegmentedControl-root { background: #26201e !important; border-radius: 3px !important; }
.mantine-SegmentedControl-indicator { background: #d63c28 !important; border-radius: 2px !important; }
.mantine-SegmentedControl-label { color: #a1958d !important; }
.mantine-SegmentedControl-label[data-active] { color: #ffffff !important; }
.mantine-Indicator-indicator { background: #d63c28 !important; color: #ffffff !important; }
.mantine-Notification-root { background: #26201e !important; border-left: 3px solid #d63c28 !important; }
.mantine-Badge-root { border-radius: 999px !important; font-weight: 600; }
.mantine-Code-root { background: #26201e !important; color: #e3a128 !important; }

/* the dashboard's own stat widgets pick up the pigments rather than Mantine's blues */
.mantine-Progress-section { background: #d63c28 !important; }
.mantine-RingProgress-root path[stroke]:not([stroke="transparent"]) { stroke: #d63c28; }

/* alerts and notices: InvenTree ships these on Mantine's light washes, which
   punch a pale slab through the ink. Re-lay them on the pigment they mean. */
.mantine-Alert-root {
  background: #26201e !important;
  border: 0 !important;
  border-left: 3px solid #d63c28 !important;
  border-radius: 3px !important;
  color: #ded5cd !important;
}
.mantine-Alert-title { color: #f2604c !important; font-family: "IBM Plex Sans", sans-serif !important; font-weight: 600 !important; }
.mantine-Alert-message, .mantine-Alert-body { color: #ded5cd !important; }
.mantine-Alert-root a, .mantine-Alert-message a { color: #f2604c !important; text-decoration: underline; }
.mantine-Alert-closeButton { color: #a1958d !important; }
.mantine-Alert-root[data-variant="light"] { background: #26201e !important; }

/* the header's account control sits on ink, so it cannot keep Mantine's dim grey */
.mantine-AppShell-header .mantine-Button-root,
.mantine-AppShell-header .mantine-Button-label,
.mantine-AppShell-header .mantine-Text-root { color: #ded5cd !important; }
.mantine-AppShell-header .mantine-Button-root:hover { background: #26201e !important; }
/* the account control renders as an UnstyledButton with its own dim colour */
.mantine-AppShell-header .mantine-UnstyledButton-root,
.mantine-AppShell-header .mantine-UnstyledButton-root span,
header .mantine-UnstyledButton-root, header .mantine-UnstyledButton-root span { color: #ded5cd !important; }
.mantine-Menu-dropdown { background: #26201e !important; border: 1px solid #403733 !important; }
.mantine-Menu-item:hover { background: #141110 !important; color: #f2604c !important; }
.mantine-Menu-label { color: #a1958d !important; }

/* --- login: the ink sheet, the mark on the right (splash via .env) ------------------ */
.mantine-BackgroundImage-root { background-color: #141110 !important; }
.mantine-BackgroundImage-root .mantine-Paper-root {
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1px #403733, 0 50px 100px -40px #000 !important;
}

/* === Bringing the back office up to the dashboard's standard =================
   InvenTree's own screens carried three habits the studio front end does not:
   bright form controls that glare on ink, tables where every cell is boxed
   rather than separated by a rule, and several nested panels of chrome before
   any content. These rules fix those, using the same tokens as web/css/app.css.
   ========================================================================== */

/* --- form controls: dark, with the pigment reserved for "on" --------------- */
.mantine-Checkbox-input, .mantine-Radio-input, .mantine-Chip-input + label {
  background-color: #141110 !important;
  border-color: #403733 !important;
  border-radius: 3px !important;
}
.mantine-Radio-input { border-radius: 50% !important; }
.mantine-Checkbox-input:checked, .mantine-Radio-input:checked {
  background-color: #d63c28 !important;
  border-color: #d63c28 !important;
}
.mantine-Checkbox-icon { color: #ffffff !important; }
.mantine-Switch-track { background-color: #26201e !important; border-color: #403733 !important; }
.mantine-Switch-input:checked + .mantine-Switch-track { background-color: #d63c28 !important; border-color: #d63c28 !important; }
.mantine-Switch-thumb { background-color: #f4efe9 !important; border: 0 !important; }

/* --- tables: rows separated by a rule, not cells boxed in a grid ----------- */
.mantine-datatable-table td, .mantine-datatable-table th,
.mantine-Table-table td, .mantine-Table-table th {
  border-left: 0 !important;
  border-right: 0 !important;
}
.mantine-datatable-table tbody td, .mantine-Table-tbody td {
  border-bottom: 1px solid #2e2724 !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}
.mantine-datatable-table thead th, .mantine-Table-thead th {
  border-bottom: 1.5px solid #403733 !important;
  text-transform: none !important;
}
.mantine-datatable-row:hover td, .mantine-Table-tr:hover td { background: #141110 !important; }
.mantine-datatable-table, .mantine-Table-table { border: 0 !important; }
/* the row-action menu should sit quiet until the row is reached */
.mantine-datatable-row-expansion-cell, td .mantine-ActionIcon-root { color: #8a7f77 !important; }
.mantine-datatable-row:hover td .mantine-ActionIcon-root { color: #ded5cd !important; }

/* --- panels: one surface, not three nested boxes --------------------------- */
.mantine-Breadcrumbs-root { font-size: 12.5px; }
.mantine-Paper-root:has(> .mantine-Breadcrumbs-root) {
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.mantine-Paper-root .mantine-Paper-root .mantine-Paper-root { background: transparent !important; box-shadow: none !important; }
.mantine-Card-root { background: #1d1917 !important; box-shadow: inset 0 0 0 1px #2e2724 !important; border: 0 !important; border-radius: 6px !important; }

/* --- secondary controls stay quiet; the pigment means "primary" ------------ */
.mantine-ActionIcon-root:not([data-variant="filled"]) {
  background: transparent !important;
  color: #ded5cd !important;
  border-radius: 3px !important;
}
.mantine-ActionIcon-root:not([data-variant="filled"]):hover { background: #26201e !important; color: #f4efe9 !important; }
.mantine-ActionIcon-root[data-variant="filled"] { background: #d63c28 !important; color: #fff !important; }

/* --- pagination and page-size, matching the front end's footer ------------- */
.mantine-Pagination-control {
  background: transparent !important;
  border: 1px solid #403733 !important;
  color: #ded5cd !important;
  border-radius: 3px !important;
}
.mantine-Pagination-control[data-active] { background: #d63c28 !important; border-color: #d63c28 !important; color: #fff !important; }
.mantine-Pagination-control:not([data-active]):hover { background: #26201e !important; }
.mantine-datatable-pagination { border-top: 1px solid #2e2724 !important; padding-top: 12px !important; }

/* --- inputs and selects ---------------------------------------------------- */
.mantine-Select-input, .mantine-MultiSelect-input, .mantine-NumberInput-input,
.mantine-TextInput-input, .mantine-Textarea-input, .mantine-DateInput-input {
  background: #141110 !important; border-color: #403733 !important; color: #f4efe9 !important; border-radius: 3px !important;
}
.mantine-Select-dropdown, .mantine-Combobox-dropdown, .mantine-Popover-dropdown {
  background: #26201e !important; border: 1px solid #403733 !important; border-radius: 6px !important;
}
.mantine-Combobox-option[data-combobox-selected], .mantine-Select-option[data-combobox-selected] { background: #d63c28 !important; color: #fff !important; }
.mantine-Combobox-option:hover, .mantine-Select-option:hover { background: #141110 !important; }

/* --- dialogs and drawers, matching the front end's change sheet ------------ */
.mantine-Modal-content, .mantine-Drawer-content {
  background: #1d1917 !important; color: #f4efe9 !important;
  box-shadow: inset 0 0 0 1px #403733, 0 40px 90px -30px #000 !important;
  border-radius: 6px !important;
}
.mantine-Modal-header, .mantine-Drawer-header { background: #1d1917 !important; border-bottom: 1px solid #2e2724 !important; }
.mantine-Modal-title, .mantine-Drawer-title { font-family: "Fraunces", Georgia, serif !important; font-weight: 600 !important; font-size: 20px !important; letter-spacing: -.015em; }
.mantine-Overlay-root { background: rgba(8, 6, 6, .72) !important; }

/* --- misc chrome ----------------------------------------------------------- */
.mantine-Loader-root { color: #d63c28 !important; }
.mantine-Tooltip-tooltip { background: #f4efe9 !important; color: #141110 !important; border-radius: 3px !important; font-weight: 500; }
.mantine-Spotlight-content, .mantine-Spotlight-search { background: #1d1917 !important; color: #f4efe9 !important; }
.mantine-NavLink-root:hover { background: #26201e !important; }
.mantine-NavLink-root[data-active] { background: #26201e !important; color: #f4efe9 !important; }

/* --- the last of the back-office chrome ------------------------------------ */

/* The account control renders as an UnstyledButton and inherits ink on ink,
   which makes it invisible against the header. */
.mantine-UnstyledButton-root:not(.mantine-Button-root):not(.mantine-ActionIcon-root):not(.mantine-Tabs-tab) { color: #ded5cd !important; }
.mantine-UnstyledButton-root:not(.mantine-Button-root):not(.mantine-ActionIcon-root):not(.mantine-Tabs-tab):hover { color: #f4efe9 !important; }
.mantine-NavLink-root, .mantine-NavLink-label { color: inherit !important; }

/* A breadcrumb and a page title do not each need their own boxed panel. Flatten
   them so the content is the only surface, as on the studio screens. The table
   panel is excluded, so it keeps its edge. */
.mantine-Paper-root:has(.mantine-Breadcrumbs-root):not(:has(table)),
.mantine-Paper-root:has(> .mantine-Group-root .mantine-Title-root):not(:has(table)) {
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Filled icon buttons in a page header are menus, not primary actions, so they
   should not shout. Pigment stays for genuine actions inside forms and tables. */
.mantine-Paper-root:has(.mantine-Title-root) > * .mantine-ActionIcon-root[data-variant="filled"],
.mantine-Paper-root:has(.mantine-Breadcrumbs-root) .mantine-ActionIcon-root[data-variant="filled"] {
  background: transparent !important;
  color: #ded5cd !important;
  box-shadow: inset 0 0 0 1px #403733 !important;
}
.mantine-Paper-root:has(.mantine-Title-root) > * .mantine-ActionIcon-root[data-variant="filled"]:hover {
  background: #26201e !important; color: #f4efe9 !important;
}

/* The toolbar above a table: quiet controls, evenly spaced. */
.mantine-datatable-header + *, .mantine-Group-root > .mantine-ActionIcon-root { border-radius: 3px !important; }

/* A page title needs no frame of its own. */
.mantine-AppShell-main > .mantine-Paper-root:not(:has(table)):not(:has(.mantine-Alert-root)) {
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Order and stock states carry the same meaning here as on the studio screens,
   so they carry the same colours: jade settled, marigold waiting, vermilion
   wrong. Grey pills made every state look alike. */

/* Badges carry order and stock state. Their tone comes from the remapped named
   colours above; only shape and text treatment are set here. */
.mantine-Badge-root { border-radius: 999px !important; font-weight: 600 !important; letter-spacing: .03em; }
.mantine-Badge-root[data-variant="outline"], .mantine-Badge-root[data-variant="default"] {
  background: #26201e !important; color: #ded5cd !important; border-color: #403733 !important;
}

/* The page title arrives wrapped in the same ringed panel as real content, so
   every screen opened with a heading boxed like a card. Flatten that first
   panel into a heading rule; the panels below it keep their frame. */
.mantine-Container-root > .mantine-Stack-root > .mantine-Stack-root > .mantine-Paper-root:first-child {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #2e2724 !important;
  padding: 2px 0 14px !important;
}