/* Bernunzio back-office skin (docs/design-language.md applied to the plain
   Django 5 admin — PARITY "drop grappelli" row): admin colour variables
   and widget fixes. The topbar and menu are Tailwind (admin.css). */

:root {
  /* White header with ink text, like the public site. */
  --header-bg: #ffffff;
  --header-color: #525252;
  --header-branding-color: #171717;
  --header-link-color: #171717;

  --breadcrumbs-bg: #f5f5f5;
  --breadcrumbs-fg: #525252;
  --breadcrumbs-link-fg: #171717;

  /* Module/table chrome: monochrome. */
  --primary: #404040;
  --secondary: #262626;
  --accent: #e7e5e4;

  --button-bg: #171717;
  --button-hover-bg: #404040;
  --default-button-bg: #000000;
  --default-button-hover-bg: #404040;

  --object-tools-bg: #525252;
  --object-tools-hover-bg: #171717;
}

/* The admin theme toggle stamps data-theme; keep the skin coherent in dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --header-bg: #171717;
    --header-color: #a3a3a3;
    --header-branding-color: #fafafa;
    --header-link-color: #fafafa;
    --breadcrumbs-bg: #262626;
    --breadcrumbs-fg: #a3a3a3;
    --breadcrumbs-link-fg: #fafafa;
    --primary: #525252;
    --accent: #44403c;
  }
  /* widgets.css hardcodes #333 on var(--accent) for the date-picker caption. */
  .calendar caption,
  .calendarbox h2 {
    color: #fafafa;
  }
  /* Near-black button fill has no boundary against the dark body. */
  .button,
  input[type="submit"],
  input[type="button"] {
    border: 1px solid #8a8a8a;
  }
}
html[data-theme="dark"] {
  --header-bg: #171717;
  --header-color: #a3a3a3;
  --header-branding-color: #fafafa;
  --header-link-color: #fafafa;
  --breadcrumbs-bg: #262626;
  --breadcrumbs-fg: #a3a3a3;
  --breadcrumbs-link-fg: #fafafa;
  --primary: #525252;
  --accent: #44403c;
}
html[data-theme="dark"] .calendar caption,
html[data-theme="dark"] .calendarbox h2 {
  color: #fafafa;
}
html[data-theme="dark"] .button,
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] input[type="button"] {
  border: 1px solid #8a8a8a;
}
html[data-theme="light"] {
  --header-bg: #ffffff;
  --header-color: #525252;
  --header-branding-color: #171717;
  --header-link-color: #171717;
  --breadcrumbs-bg: #f5f5f5;
  --breadcrumbs-fg: #525252;
  --breadcrumbs-link-fg: #171717;
  --primary: #404040;
  --accent: #e7e5e4;
}

/* widgets.css pairs these with --header-link-color, assuming a dark header;
   this skin's light header ink vanishes on the dark chooser chrome. */
.selector-chosen-title,
.selector-chosen-title label,
.selector-chosen .list-footer-display {
  color: #ffffff;
}

/* widgets.css presses calendar/time picks with background: var(--header-bg)
   + white text — white-on-white with this skin's light header. */
.calendar td a:active,
.timelist a:active {
  background: #171717;
  color: #ffffff;
}

/* Header product jump-search dropdown (docs/specs/admin-product-search.md).
   The form and input are laid out by Tailwind in admin/base_site.html;
   admin theme variables keep the listbox honest in dark mode. */
[data-product-jump] ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--body-bg);
  color: var(--body-fg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  max-height: min(60vh, 480px);
  overflow-y: auto;
}

[data-product-jump] li {
  padding: 6px 12px;
  cursor: pointer;
}

[data-product-jump] li[aria-selected="true"],
[data-product-jump] li:hover {
  background: var(--darkened-bg);
}

/* Orders "By date" from/to form (templates/admin/shop/order_date_filter.html,
   docs/specs/ryan-feedback-2026-11-02.md item 5): sits under the preset links
   inside #changelist-filter, on the admin's own tokens. */
#changelist-filter .order-date-range {
  padding: 0 15px 10px;
}
#changelist-filter .order-date-range p {
  margin: 0 0 8px;
}
#changelist-filter .order-date-range label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--body-quiet-color);
  margin-bottom: 3px;
}
#changelist-filter .order-date-range input[type="date"] {
  width: 100%;
  box-sizing: border-box;
}
#changelist-filter .order-date-range .button {
  margin-top: 4px;
}

/* Product "Sales history" table (shop.admin.ProductAdmin.sales_history,
   item 7): a read-only field, so it renders inside the aligned form row. */
.sales-history {
  width: 100%;
  max-width: 48rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.sales-history th,
.sales-history td {
  padding: 4px 10px 4px 0;
  text-align: left;
  border-bottom: 1px solid var(--hairline-color);
  vertical-align: top;
}
.sales-history th {
  font-weight: 600;
  color: var(--body-quiet-color);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}
.sales-history .align-right {
  text-align: right;
  white-space: nowrap;
}

/* Mirror scrollbar above wide changelists (static/js/admin-top-scroll.js). */
#changelist-form .top-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 6px;
}
#changelist-form .top-scroll > div {
  height: 1px;
}
#changelist-form .top-scroll[hidden] {
  display: none;
}

/* Before/after values on an object's History page
   (docs/specs/admin-change-history.md). */
#change-history table.history-values {
  margin: 0.5rem 0 0.25rem;
  width: auto;
  font-size: 0.8125rem;
}
#change-history table.history-values caption {
  caption-side: top;
  text-align: left;
  padding: 0.25rem 0;
  font-weight: 600;
  background: none;
  color: inherit;
}
#change-history table.history-values th,
#change-history table.history-values td {
  padding: 0.25rem 0.75rem 0.25rem 0;
  vertical-align: top;
  max-width: 32rem;
  overflow-wrap: anywhere;
}

/* Object-tool buttons (a POST that must not be a link): the product page's
   "Create purchase order" (docs/specs/sam-feedback-2026-11-07.md item 4). */
.object-tools form {
  display: block;
  float: left;
  margin: 0;
}
.object-tools button {
  display: block;
  padding: 3px 12px;
  border: 0;
  border-radius: 15px;
  background: var(--object-tools-bg);
  color: var(--object-tools-fg);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.object-tools button:hover,
.object-tools button:focus {
  background: var(--object-tools-hover-bg);
}

/* A fieldset with the "highlight" class: its folded heading on an amber bar
   (the product's Notes, Sam 2026-11-07). Same look in the new admin
   (templates/admin/crud/_fieldset.html). */
fieldset.module.highlight > details > summary,
fieldset.module.highlight > .fieldset-heading {
  background: #fde68a; /* amber-200 */
  border-color: #f59e0b; /* amber-500 */
  color: #451a03; /* amber-950 */
}
fieldset.module.highlight > details > summary .fieldset-heading {
  color: inherit;
}
html[data-theme="dark"] fieldset.module.highlight > details > summary,
html[data-theme="dark"] fieldset.module.highlight > .fieldset-heading {
  background: #78350f; /* amber-900 */
  border-color: #b45309; /* amber-700 */
  color: #fffbeb; /* amber-50 */
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) fieldset.module.highlight > details > summary,
  html:not([data-theme="light"]) fieldset.module.highlight > .fieldset-heading {
    background: #78350f;
    border-color: #b45309;
    color: #fffbeb;
  }
}