/* ==========================================================================
   DT GLOBAL — ADMIN / TOOLING SKIN
   Built on the soft-UI system in /css/neu.css. Load neu.css first.

   Every selector that existed before the redesign is preserved by name so that
   server-rendered markup and the JS that queries it keep working untouched —
   only the material, spacing, type and motion changed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Legacy variable bridge
   Older inline styles and widget CSS still reference the pre-redesign custom
   properties. Alias them onto the design tokens so nothing renders unstyled.
   -------------------------------------------------------------------------- */
:root,
:root[data-theme='light'],
:root[data-theme='dark'] {
  --bg-primary:      var(--neu-surface);
  --bg-secondary:    var(--neu-surface-raised);
  --button-bg:       var(--neu-surface);
  --sidebar-bg:      var(--neu-surface);
  --text-primary:    var(--neu-text);
  --text-secondary:  var(--neu-text-muted);
  --accent-color:    var(--neu-accent);
  --border-color:    var(--neu-line);
  --hover-bg:        var(--neu-accent-soft);
  --status-active:   var(--neu-success);
  --status-inactive: var(--neu-text-faint);
}

:root {
  --app-topbar-h: 4.25rem;
  --app-sidebar-w: 16.5rem;
  --app-gutter: 2rem;
}

body {
  font-family: var(--neu-font-sans);
  background-color: var(--neu-surface);
  color: var(--neu-text);
}

body a { color: var(--neu-accent-text); text-decoration: none; }
body a:hover { color: var(--neu-accent-hover); }

.label { font-size: var(--neu-text-md); font-weight: var(--neu-weight-medium); }

/* --------------------------------------------------------------------------
   APP SHELL
   -------------------------------------------------------------------------- */

.app-container { display: flex; min-height: 100vh; }

.side-menu {
  width: var(--app-sidebar-w);
  padding: var(--neu-sp-5);
  background-color: var(--neu-surface);
  border-right: 1px solid var(--neu-line);
}

.main-content { flex: 1; padding: var(--app-gutter); }

/* Fixed chrome -------------------------------------------------------------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--neu-z-topbar);
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--app-topbar-h);
  padding-left: var(--app-sidebar-w);
  background: var(--neu-surface);
  color: var(--neu-text);
  box-shadow: 0 1px 0 var(--neu-line), 0 10px 24px -22px var(--neu-shadow-cast);
  transition: background-color var(--neu-dur-3) var(--neu-ease);
}

/* Hairline that fades toward the edges — reads as a machined seam, not a border */
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neu-line-strong) 12%,
              var(--neu-line-strong) 88%, transparent);
  pointer-events: none;
}

.logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--neu-z-topbar) + 1);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--app-sidebar-w);
  height: var(--app-topbar-h);
  padding-inline: var(--neu-sp-6);
  cursor: pointer;
  transition: width var(--neu-dur-3) var(--neu-ease);
}
.logo img {
  max-height: 2.8rem;
  width: auto;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(23, 23, 21, 0.1);
  border-radius: var(--neu-r-sm);
  background: #fafaf9;
  box-sizing: border-box;
  object-fit: contain;
  transition: transform var(--neu-dur-3) var(--neu-ease-spring), opacity var(--neu-dur-2) var(--neu-ease);
}
.logo img.logo-image--theme-aware {
  width: min(12.5rem, 100%);
  max-height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.logo:hover img { transform: scale(1.03); }
.logo:active img { transform: scale(0.98); }

.sidebar {
  position: fixed;
  top: var(--app-topbar-h);
  left: 0;
  z-index: var(--neu-z-sidebar);
  width: var(--app-sidebar-w);
  height: calc(100% - var(--app-topbar-h));
  padding: var(--neu-sp-4) var(--neu-sp-3) var(--neu-sp-6);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background-color: var(--neu-surface);
  border-right: 1px solid var(--neu-line);
  transition: width var(--neu-dur-3) var(--neu-ease), background-color var(--neu-dur-3) var(--neu-ease);
}

.main {
  position: absolute;
  top: var(--app-topbar-h);
  left: var(--app-sidebar-w);
  z-index: 1;
  width: calc(100% - var(--app-sidebar-w));
  max-width: 84rem;
  padding: var(--neu-sp-7) var(--app-gutter) var(--neu-sp-10);
  font-size: var(--neu-text-md);
}

/* Admin pages built on .partner-admin-shell (partners, users, partner users,
   partner edit) declare it inline as a one-column grid without tracks. The
   implicit auto column then sizes to its widest table's min-content and pushes
   the header and forms past the viewport. One explicit shrinkable track keeps
   every section inside .main; wide tables scroll in .neu-table-wrap instead. */
.partner-admin-shell { grid-template-columns: minmax(0, 1fr); }

.cover {
  position: fixed;
  top: var(--app-topbar-h);
  width: 100%;
  height: 5rem;
  z-index: 1;
  background-color: var(--neu-surface);
}

/* Top-bar account cluster ---------------------------------------------------- */

.logout {
  position: relative;
  right: auto;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--neu-sp-2);
  margin-left: auto;
  padding: 0;
  font-size: var(--neu-text-sm);
  color: var(--neu-text-muted);
}
.logout a {
  padding: 0.35rem var(--neu-sp-3);
  border-radius: var(--neu-r-sm);
  color: var(--neu-text-muted);
  text-decoration: none;
  transition: color var(--neu-dur-2) var(--neu-ease), background-color var(--neu-dur-2) var(--neu-ease);
}
.logout a:hover { color: var(--neu-text-strong); background: var(--neu-accent-soft); }
.logout .material-icons {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  margin-left: var(--neu-sp-2);
  border-radius: var(--neu-r-circle);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  font-size: 1.25rem !important;
  color: var(--neu-text-muted);
}

.debug-dir,
.debug-name {
  margin: 0;
  padding: 0.2rem var(--neu-sp-3);
  border-radius: var(--neu-r-pill);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-xs);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-medium);
  letter-spacing: var(--neu-tracking-snug);
  color: var(--neu-text-subtle);
  opacity: 1;
}
.debug-name {
  max-width: min(18rem, 28vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SIDEBAR NAVIGATION
   -------------------------------------------------------------------------- */

.menu-container {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--neu-sp-2) var(--neu-sp-2) var(--neu-sp-4);
  min-height: 100%;
}

.menu-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--neu-sp-3);
  padding: 0.62rem var(--neu-sp-4);
  border-radius: var(--neu-r-md);
  color: var(--neu-text-muted);
  font-size: var(--neu-text-md);
  font-weight: var(--neu-weight-medium);
  letter-spacing: var(--neu-tracking-snug);
  text-decoration: none;
  transition: color var(--neu-dur-2) var(--neu-ease),
              background-color var(--neu-dur-2) var(--neu-ease),
              box-shadow var(--neu-dur-2) var(--neu-ease);
}
.menu-item .material-icons,
.menu-item .material-symbols-outlined {
  flex: 0 0 auto;
  width: 1.4rem;
  font-size: 1.3rem;
  opacity: 0.8;
  transition: opacity var(--neu-dur-2) var(--neu-ease), color var(--neu-dur-2) var(--neu-ease);
}
.menu-item .label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: var(--neu-leading-snug);
  font-weight: inherit;
  font-size: inherit;
}

/* Shared upload-step markup is embedded by several import routes. Never hide
   workflow text merely to preserve a three-column strip. */
.upload-step__copy,
.upload-step__copy strong,
.upload-step__copy small {
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 43.75rem) {
  .upload-steps { grid-template-columns: 1fr !important; }
  .upload-step__copy small { display: block !important; }
  .debug-name { max-width: 10rem; }
}
.menu-item:hover {
  color: var(--neu-text-strong);
  background-color: transparent;
  box-shadow: var(--neu-raise-xs);
}
.menu-item:hover .material-icons,
.menu-item:hover .material-symbols-outlined { opacity: 1; }
.menu-item.active {
  color: var(--neu-accent-text);
  background-color: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-sm);
}
.menu-item.active .material-icons,
.menu-item.active .material-symbols-outlined { opacity: 1; color: var(--neu-accent); }
.menu-item.active::before {
  content: '';
  position: absolute;
  left: 0.3rem; top: 50%;
  width: 3px; height: 1.05rem;
  border-radius: var(--neu-r-pill);
  background: var(--neu-accent);
  transform: translateY(-50%);
}
.menu-item .icon { width: 1.5rem; margin-right: var(--neu-sp-3); font-size: 1.1rem; text-align: center; }

.menu-separator {
  height: 1px;
  margin: var(--neu-sp-4) var(--neu-sp-3);
  background: linear-gradient(90deg, transparent, var(--neu-line-strong), transparent);
}

.menu { font-family: var(--neu-font-sans); height: 100%; overflow-y: auto; }

.menubt {
  position: relative;
  padding: 0.45rem 0;
  border-left: 3px solid transparent;
  box-sizing: border-box;
  transition: border-color var(--neu-dur-2) var(--neu-ease);
}
.menubt a {
  padding-left: var(--neu-sp-5);
  color: var(--neu-text-muted);
  text-decoration: none;
}
.menubt :hover { border-left-color: var(--neu-accent); color: var(--neu-text-strong); }

.menutitle {
  padding: var(--neu-sp-4) var(--neu-sp-5) var(--neu-sp-2);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--neu-tracking-caps);
  color: var(--neu-text-subtle);
}

.devine-link a {
  position: fixed;
  bottom: var(--neu-sp-3);
  left: var(--neu-sp-6);
  font-size: var(--neu-text-2xs);
  color: var(--neu-text-faint);
  text-decoration: none;
}
.devine-link a:hover { color: var(--neu-accent-text); }

/* Theme switch block at the foot of the sidebar ------------------------------ */

.theme-toggle-container {
  margin-top: auto;
  padding: var(--neu-sp-4) var(--neu-sp-2) var(--neu-sp-2);
}

.theme-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--neu-sp-3);
  width: 100%;
  padding: 0.6rem var(--neu-sp-4);
  border-radius: var(--neu-r-md);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  cursor: pointer;
  transition: box-shadow var(--neu-dur-2) var(--neu-ease);
}
.theme-switch:hover { box-shadow: var(--neu-raise-sm); }
.theme-switch:active { box-shadow: var(--neu-press-xs); }

.theme-labels { position: relative; flex: 1; height: 1.5rem; }
.theme-label {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  align-items: center;
  gap: var(--neu-sp-2);
  color: var(--neu-text-muted);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--neu-dur-3) var(--neu-ease), transform var(--neu-dur-3) var(--neu-ease);
}
.theme-label .material-icons { font-size: 1.15rem; }
.theme-label .label { font-size: var(--neu-text-sm); font-weight: var(--neu-weight-medium); }

:root[data-theme='light'] .light-theme,
:root[data-theme='dark'] .dark-theme { opacity: 1; transform: translateY(0); }

/* The real control: a soft-UI track + knob. */
.switch {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 3rem;
  height: 1.6rem;
}
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.switch .slider {
  position: absolute;
  inset: 0;
  border-radius: var(--neu-r-pill);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-sm);
  transition: background-color var(--neu-dur-3) var(--neu-ease);
}
.switch .slider::before {
  content: '';
  position: absolute;
  top: 0.2rem; left: 0.2rem;
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: var(--neu-surface-raised);
  box-shadow: var(--neu-raise-xs);
  transition: transform var(--neu-dur-3) var(--neu-ease-spring), background-color var(--neu-dur-3) var(--neu-ease);
}
.switch input:checked + .slider { background: var(--neu-accent-soft); }
.switch input:checked + .slider::before { transform: translateX(1.4rem); background: var(--neu-accent); }
.switch input:focus-visible + .slider { box-shadow: var(--neu-press-sm), var(--neu-ring); }

/* Floating theme button (used where there is no sidebar) --------------------- */
#theme-toggle:not([type='checkbox']) {
  position: fixed;
  right: var(--neu-sp-6);
  bottom: var(--neu-sp-6);
  z-index: var(--neu-z-sticky);
}
.theme-button {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0;
  border-radius: var(--neu-r-circle);
  background-color: var(--neu-surface);
  box-shadow: var(--neu-raise-sm);
  color: var(--neu-text-muted);
  cursor: pointer;
  transition: box-shadow var(--neu-dur-2) var(--neu-ease), color var(--neu-dur-2) var(--neu-ease);
}
.theme-button:hover { box-shadow: var(--neu-raise); color: var(--neu-text-strong); background-color: var(--neu-surface); }
.theme-button:active { box-shadow: var(--neu-press-sm); }

:root[data-theme='light'] .dark-icon,
:root[data-theme='dark'] .light-icon { display: none; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--neu-sp-2);
  min-height: 2.5rem;
  padding: 0.55rem var(--neu-sp-5);
  border: 0;
  border-radius: var(--neu-r-md);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-sm);
  color: var(--neu-text);
  font-family: inherit;
  font-size: var(--neu-text-md);
  font-weight: var(--neu-weight-medium);
  letter-spacing: var(--neu-tracking-snug);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow var(--neu-dur-2) var(--neu-ease),
              transform var(--neu-dur-1) var(--neu-ease),
              color var(--neu-dur-2) var(--neu-ease),
              background-color var(--neu-dur-2) var(--neu-ease);
}
button:hover,
.button:hover {
  background-color: var(--neu-surface);
  box-shadow: var(--neu-raise);
  color: var(--neu-text-strong);
  transform: translateY(-1px);
}
button:active,
.button:active {
  background-color: var(--neu-surface);
  box-shadow: var(--neu-press-sm);
  transform: translateY(0);
}
button:focus-visible,
.button:focus-visible { outline: none; box-shadow: var(--neu-raise-sm), var(--neu-ring); }
button:disabled,
.button:disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: var(--neu-press-xs);
  transform: none;
}
button .material-icons,
button .material-symbols-outlined,
.button .material-icons,
.button .material-symbols-outlined { font-size: 1.15em; line-height: 1; }

.button-primary {
  background-color: var(--neu-solid);
  color: var(--neu-solid-on);
}
.button-primary:hover { background-color: var(--neu-solid-hover); color: var(--neu-solid-on); }
.button-primary:active { background-color: var(--neu-solid-hover); color: var(--neu-solid-on); }

.button-secondary {
  background-color: var(--neu-surface);
  color: var(--neu-text);
  border: 0;
}

.button-danger,
.warn {
  background-color: var(--neu-surface);
  color: var(--neu-danger);
  border: 0;
}
.button-danger:hover,
.warn:hover { background-color: var(--neu-danger-soft); color: var(--neu-danger); }
.button-danger:active,
.warn:active { background-color: var(--neu-danger) !important; color: var(--neu-danger-on) !important; }

.button-icon {
  display: inline-grid;
  place-items: center;
  min-height: 2.25rem;
  width: 2.25rem;
  padding: 0;
  border-radius: var(--neu-r-sm);
  background: transparent;
  box-shadow: none;
  color: var(--neu-text-subtle);
}
.button-icon:hover {
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  color: var(--neu-text-strong);
  transform: none;
}
.button-icon:active { box-shadow: var(--neu-press-xs); }

.submit-bt { width: 100%; text-align: right; }

.bottomButs {
  display: flex;
  flex-flow: row wrap;
  gap: var(--neu-sp-3);
  justify-content: flex-start;
  width: 100%;
  margin-top: var(--neu-sp-8);
  padding: var(--neu-sp-5) 0 0;
  border-top: 1px solid var(--neu-line);
}

.edit-buttons { display: flex; flex-wrap: wrap; gap: var(--neu-sp-3); margin: var(--neu-sp-5) 0; }
.button-group { display: flex; flex-wrap: wrap; gap: var(--neu-sp-3); margin-top: var(--neu-sp-4); }
.header-actions { display: flex; flex-wrap: wrap; gap: var(--neu-sp-3); }
.add-roster-button { display: flex; align-items: center; gap: var(--neu-sp-4); }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--neu-sp-3);
  margin-top: var(--neu-sp-7);
}

.bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--neu-sp-3);
  margin-top: var(--neu-sp-9);
  padding-top: var(--neu-sp-6);
  border-top: 1px solid var(--neu-line);
}

@media all and (max-width: 30em) {
  button { display: flex; width: 100%; margin: var(--neu-sp-1) auto; }
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */

input[type='text'],
input[type='search'],
input[type='number'],
input[type='email'],
input[type='password'],
input[type='url'],
input[type='tel'],
input[type='date'],
input[type='datetime-local'],
input[type='time'],
select,
textarea {
  box-sizing: border-box;
  padding: 0.62rem var(--neu-sp-4);
  border: 0;
  border-radius: var(--neu-r-md);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-sm);
  color: var(--neu-text);
  font-family: inherit;
  font-size: var(--neu-text-md);
  font-weight: var(--neu-weight-normal);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow var(--neu-dur-2) var(--neu-ease);
}
input[type='text'] { width: 100%; max-width: 28rem; margin: var(--neu-sp-2) 0; }

textarea { min-height: 6rem; resize: vertical; line-height: var(--neu-leading-normal); }

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { box-shadow: var(--neu-press); }

input:focus,
select:focus,
textarea:focus { outline: none; box-shadow: var(--neu-press), var(--neu-ring); }

input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }

input::placeholder, textarea::placeholder { color: var(--neu-text-faint); }

select {
  padding-right: var(--neu-sp-8);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) calc(50% + 1px), calc(100% - 0.9rem) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select option { background: var(--neu-surface-raised); color: var(--neu-text); }

input[type='checkbox'],
input[type='radio'] {
  position: relative;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 0.35rem 0 0;
  border: 1px solid var(--neu-text-faint);
  border-radius: 0.375rem;
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-xs);
  cursor: pointer;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--neu-dur-2) var(--neu-ease), box-shadow var(--neu-dur-2) var(--neu-ease);
}
input[type='radio'] { border-radius: 50%; }
input[type='checkbox']:checked,
input[type='radio']:checked { background: var(--neu-accent); box-shadow: var(--neu-raise-xs); }
input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 0.38rem; top: 0.16rem;
  width: 0.28rem; height: 0.55rem;
  border: solid var(--neu-accent-on);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
input[type='radio']:checked::after {
  content: '';
  position: absolute;
  inset: 0.32rem;
  border-radius: 50%;
  background: var(--neu-accent-on);
}
input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible { outline: none; box-shadow: var(--neu-press-xs), var(--neu-ring); }

input[type='color'] {
  width: 3rem;
  height: 2.5rem;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--neu-r-sm);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  cursor: pointer;
}
input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
input[type='color']::-webkit-color-swatch { border: 0; border-radius: calc(var(--neu-r-sm) - 4px); }

input[type='file'] {
  padding: 0.45rem var(--neu-sp-3);
  border-radius: var(--neu-r-md);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-xs);
  color: var(--neu-text-muted);
  font-size: var(--neu-text-sm);
}
input[type='file']::file-selector-button {
  margin-right: var(--neu-sp-3);
  padding: 0.4rem var(--neu-sp-4);
  border: 0;
  border-radius: var(--neu-r-sm);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  color: var(--neu-text);
  font: inherit;
  font-size: var(--neu-text-sm);
  font-weight: var(--neu-weight-medium);
  cursor: pointer;
  transition: box-shadow var(--neu-dur-2) var(--neu-ease);
}
input[type='file']::file-selector-button:hover { box-shadow: var(--neu-raise-sm); }

input[type='submit' i] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem var(--neu-sp-5);
  border-radius: var(--neu-r-md);
  background: var(--neu-solid);
  box-shadow: var(--neu-raise-sm);
  color: var(--neu-solid-on);
  font-weight: var(--neu-weight-medium);
  cursor: pointer;
}
input[type='submit' i]:hover { box-shadow: var(--neu-raise); }
input[type='submit' i]:active { box-shadow: var(--neu-press-sm); }

input[type='range' i] {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
input[type='range' i]::-webkit-slider-runnable-track {
  height: 0.45rem;
  border-radius: var(--neu-r-pill);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-xs);
}
input[type='range' i]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: -0.35rem;
  border-radius: 50%;
  background: var(--neu-surface-raised);
  box-shadow: var(--neu-raise-xs);
  transition: transform var(--neu-dur-2) var(--neu-ease-spring);
}
input[type='range' i]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type='range' i]::-moz-range-track {
  height: 0.45rem; border-radius: var(--neu-r-pill);
  background: var(--neu-surface-sunken); box-shadow: var(--neu-press-xs);
}
input[type='range' i]::-moz-range-thumb {
  width: 1.15rem; height: 1.15rem; border: 0; border-radius: 50%;
  background: var(--neu-surface-raised); box-shadow: var(--neu-raise-xs);
}

label { font-size: var(--neu-text-md); color: var(--neu-text); }

.form-section { margin-bottom: var(--neu-sp-7); }

.form-group { margin-bottom: var(--neu-sp-5); }
.form-group label {
  display: block;
  margin-bottom: var(--neu-sp-2);
  color: var(--neu-text-subtle);
  font-size: var(--neu-text-xs);
  font-weight: var(--neu-weight-semi);
  letter-spacing: var(--neu-tracking-wide);
  text-transform: uppercase;
}
.form-group input[type='text'],
.form-group input[type='file'],
.form-group select,
.form-group textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.7rem var(--neu-sp-4);
  border: 0;
  border-radius: var(--neu-r-md);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-sm);
  color: var(--neu-text);
  font-family: inherit;
  font-size: var(--neu-text-md);
}
.form-group input[type='text']:focus,
.form-group textarea:focus { outline: none; box-shadow: var(--neu-press), var(--neu-ring); }

.description-container { display: flex; gap: var(--neu-sp-4); align-items: flex-start; }
.description-container textarea { flex: 1; }

.checkbox-group { display: flex; align-items: center; gap: var(--neu-sp-3); }
.checkbox-group input[type='checkbox'] { width: 1.2rem; height: 1.2rem; margin: 0; }

.section-divider {
  height: 1px;
  margin: var(--neu-sp-7) 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--neu-line-strong) 15%,
              var(--neu-line-strong) 85%, transparent);
}

.helper-text, .msg-text {
  color: var(--neu-text-subtle);
  font-size: var(--neu-text-sm);
  font-style: normal;
}
.msg-text { font-size: var(--neu-text-xs); }

.multi-select { width: 100%; max-width: 25rem; }
.image-input { width: 14rem !important; }
.sku-form { display: flex; gap: var(--neu-sp-2); align-items: center; }
.sku-form input { max-width: 12.5rem; margin: 0; }

.popup {
  padding: var(--neu-sp-5);
  border-radius: var(--neu-r-lg);
  background-color: var(--neu-surface);
  box-shadow: var(--neu-float);
}

/* --------------------------------------------------------------------------
   PAGE HEADER / FILTERS / SEARCH
   -------------------------------------------------------------------------- */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--neu-sp-4);
  margin-bottom: var(--neu-sp-7);
  padding-bottom: var(--neu-sp-5);
  border-bottom: 1px solid var(--neu-line);
}
.page-header h1 {
  margin: 0;
  font-size: var(--neu-text-2xl);
  font-weight: var(--neu-weight-bold);
  letter-spacing: var(--neu-tracking-tight);
  color: var(--neu-text-strong);
}
.page-header h2 { margin: 0; }

.section-header {
  margin-bottom: var(--neu-sp-6);
  color: var(--neu-text-strong);
}

.filters-section { margin-bottom: var(--neu-sp-7); }
.category-filters { margin-bottom: var(--neu-sp-5); }
.category-filters h3 {
  margin-bottom: var(--neu-sp-3);
  color: var(--neu-text-subtle);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-semi);
  letter-spacing: var(--neu-tracking-caps);
  text-transform: uppercase;
}
.category-buttons { display: flex; flex-wrap: wrap; gap: var(--neu-sp-2); }
.category-buttons button,
.category-buttons .button {
  min-height: 2.125rem;
  padding: 0.4rem var(--neu-sp-4);
  border-radius: var(--neu-r-pill);
  font-size: var(--neu-text-sm);
}

.search-box { margin-bottom: var(--neu-sp-7); }
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--neu-sp-2);
  max-width: 32rem;
  padding: 0.3rem 0.3rem 0.3rem var(--neu-sp-4);
  border: 0;
  border-radius: var(--neu-r-lg);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-sm);
  transition: box-shadow var(--neu-dur-2) var(--neu-ease);
}
.search-input-wrapper:focus-within { box-shadow: var(--neu-press), var(--neu-ring); }
.search-input-wrapper .material-icons { color: var(--neu-text-subtle); font-size: 1.25rem; }
.search-input-wrapper input {
  flex: 1;
  max-width: none;
  margin: 0;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--neu-text);
  font-family: inherit;
  font-size: var(--neu-text-md);
}
.search-input-wrapper input:hover,
.search-input-wrapper input:focus { outline: none; box-shadow: none; }
.search-input-wrapper button { min-height: 2.125rem; padding: 0.4rem var(--neu-sp-4); font-size: var(--neu-text-sm); }

/* --------------------------------------------------------------------------
   TABLES & LIST ROWS
   -------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--neu-r-lg);
  background-color: var(--neu-surface);
  box-shadow: var(--neu-raise-sm);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
th {
  padding: var(--neu-sp-4) var(--neu-sp-5);
  background-color: var(--neu-surface);
  border-bottom: 1px solid var(--neu-line-strong);
  color: var(--neu-text-subtle);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-semi);
  letter-spacing: var(--neu-tracking-caps);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
td {
  padding: var(--neu-sp-4) var(--neu-sp-5);
  border-bottom: 1px solid var(--neu-line);
  font-size: var(--neu-text-sm);
  color: var(--neu-text);
}
tbody tr { transition: background-color var(--neu-dur-2) var(--neu-ease); }
tbody tr:hover { background-color: var(--neu-accent-soft); }
tbody tr:last-child td { border-bottom: 0; }

/* Flex "table" used by the list pages */
.products-table {
  border-radius: var(--neu-r-lg);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-sm);
  overflow: hidden;
}
.table-header {
  display: flex;
  padding: var(--neu-sp-4) var(--neu-sp-5);
  background: var(--neu-surface);
  border-bottom: 1px solid var(--neu-line-strong);
  color: var(--neu-text-subtle);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-semi);
  letter-spacing: var(--neu-tracking-caps);
  text-transform: uppercase;
}
.table-row {
  display: flex;
  align-items: center;
  padding: var(--neu-sp-3) var(--neu-sp-5);
  border-bottom: 1px solid var(--neu-line);
  transition: background-color var(--neu-dur-2) var(--neu-ease);
}
.table-row:last-child { border-bottom: 0; }
.table-row:hover { background: var(--neu-accent-soft); }

.column { padding: 0 var(--neu-sp-2); }
.column.preview { width: 5rem; }
.column.title { flex: 1; min-width: 0; font-weight: var(--neu-weight-medium); color: var(--neu-text-strong); }
.column.sku { width: 9.5rem; color: var(--neu-text-muted); font-variant-numeric: tabular-nums; }
.column.actions { display: flex; gap: var(--neu-sp-2); width: 7.5rem; justify-content: flex-end; }

.product-preview {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: cover;
  border-radius: var(--neu-r-sm);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-xs);
}

/* Card-style rows used across the older admin lists */
.item-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--neu-sp-3);
  margin: var(--neu-sp-2) 0;
  padding: var(--neu-sp-3) var(--neu-sp-8) var(--neu-sp-3) var(--neu-sp-4);
  border-radius: var(--neu-r-md);
  background-color: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  cursor: pointer;
  transition: box-shadow var(--neu-dur-2) var(--neu-ease), transform var(--neu-dur-2) var(--neu-ease);
}
.item-row:hover { box-shadow: var(--neu-raise-sm); transform: translateY(-1px); }
.item-row:active { box-shadow: var(--neu-press-xs); transform: translateY(0); }
.item-row a { color: var(--neu-accent-text); text-decoration: none; }
.item-row a:hover { color: var(--neu-accent-hover); }

.item-row-top {
  display: flex;
  align-items: center;
  gap: var(--neu-sp-3);
  margin: var(--neu-sp-2) 0;
  padding: 0 var(--neu-sp-8) 0 var(--neu-sp-4);
  color: var(--neu-text-subtle);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-semi);
  letter-spacing: var(--neu-tracking-caps);
  text-transform: uppercase;
  line-height: 1.5;
}

.column-2 { width: 50%; position: relative; float: left; margin: auto; }
.column-3 { width: 33%; position: relative; float: left; margin: auto; }
.column-4 { width: 25%; position: relative; display: flex; align-items: center; gap: var(--neu-sp-2); min-width: 0; }
.column-5 { width: 20%; position: relative; float: left; margin: auto; }
.column-6 { width: 16%; position: relative; float: left; text-align: center; }
.column-7 { width: 14%; position: relative; float: left; margin: auto; }

.product-id-value {
  position: absolute;
  right: var(--neu-sp-4);
  top: 50%;
  transform: translateY(-50%);
  padding: 0.15rem var(--neu-sp-2);
  border-radius: var(--neu-r-xs);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-xs);
  color: var(--neu-text-subtle);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-semi);
  font-variant-numeric: tabular-nums;
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: var(--neu-sp-3);
  width: fit-content;
  margin: 0 0 var(--neu-sp-5);
  padding: var(--neu-sp-5);
  border: 0;
  border-radius: var(--neu-r-lg);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-sm);
}

/* --------------------------------------------------------------------------
   BADGES
   -------------------------------------------------------------------------- */

.status-badge,
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--neu-sp-1);
  padding: 0.22rem var(--neu-sp-3);
  border-radius: var(--neu-r-pill);
  background-color: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-xs);
  color: var(--neu-text-muted);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-semi);
  letter-spacing: var(--neu-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.status-active { background-color: var(--neu-success-soft); box-shadow: none; color: var(--neu-success); }
.status-inactive { background-color: var(--neu-surface-sunken); box-shadow: var(--neu-press-xs); color: var(--neu-text-subtle); }

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--neu-sp-3);
  max-width: none;
  margin: var(--neu-sp-8) auto 0;
  padding: 0;
}
.pagination a {
  display: inline-flex;
  align-items: center;
  gap: var(--neu-sp-2);
  min-height: 2.25rem;
  padding: 0.4rem var(--neu-sp-4);
  border-radius: var(--neu-r-md);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  color: var(--neu-text-muted);
  font-size: var(--neu-text-sm);
  font-weight: var(--neu-weight-medium);
  text-decoration: none;
  transition: box-shadow var(--neu-dur-2) var(--neu-ease), color var(--neu-dur-2) var(--neu-ease);
}
.pagination a:hover { box-shadow: var(--neu-raise-sm); color: var(--neu-text-strong); }
.pagination a:active { box-shadow: var(--neu-press-xs); }

/* --------------------------------------------------------------------------
   TILES, PREVIEWS & MEDIA
   -------------------------------------------------------------------------- */

.tile-list-view { display: flex; flex-wrap: wrap; gap: var(--neu-sp-4); }

.product-tile {
  width: 9.5rem;
  padding: var(--neu-sp-3);
  margin: 0;
  border-radius: var(--neu-r-lg);
  background-color: var(--neu-surface);
  box-shadow: var(--neu-raise-sm);
  cursor: pointer;
  transition: box-shadow var(--neu-dur-3) var(--neu-ease), transform var(--neu-dur-3) var(--neu-ease);
}
.product-tile:hover { transform: translateY(-3px); box-shadow: var(--neu-raise-lg); }
.product-tile:active { transform: translateY(0); box-shadow: var(--neu-press-sm); }
.product-tile h4 {
  margin: var(--neu-sp-3) 0 0;
  font-size: var(--neu-text-sm);
  font-weight: var(--neu-weight-semi);
  color: var(--neu-text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-tile-img {
  display: grid;
  place-items: center;
  width: 100%;
  height: 8rem;
  border-radius: var(--neu-r-md);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-xs);
  overflow: hidden;
}
.product-tile-img img { width: 100%; height: 100%; object-fit: contain; }

.list-preview {
  width: 3.25rem;
  border-radius: var(--neu-r-sm);
  background: var(--neu-surface-sunken);
}
.thumb-img {
  float: left;
  margin: var(--neu-sp-1);
  padding: var(--neu-sp-1);
  border: 0;
  border-radius: var(--neu-r-sm);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
}
.thumb-prev {
  width: 9.5rem;
  height: 9.5rem;
  margin: 0;
  object-fit: cover;
  border-radius: var(--neu-r-md);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-xs);
}
.map-preview {
  float: left;
  width: 2rem; height: 2rem;
  margin-top: var(--neu-sp-2);
  border-radius: var(--neu-r-xs);
  background-color: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-xs);
}

.image-chooser {
  position: fixed;
  left: 47.8rem;
  top: calc(var(--app-topbar-h) + var(--neu-sp-1));
  z-index: 10;
  width: calc(100% - 48.3rem);
  max-height: calc(100% - 5rem);
  overflow-y: auto;
  padding: var(--neu-sp-4);
  border-radius: var(--neu-r-lg);
  background: var(--neu-surface);
  box-shadow: var(--neu-float);
}

.svg-preview-bk {
  width: 49rem;
  max-width: 31.25rem;
  max-height: 31.25rem;
  margin-bottom: var(--neu-sp-5);
  border-radius: var(--neu-r-md);
  background: url('/imgs/trans_bg.png');
  box-shadow: var(--neu-press-xs);
}
.preview-holder { width: 62.5rem; height: 62.5rem; margin-bottom: var(--neu-sp-5); overflow: auto; }

.svg-preview-holder {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 62.5rem;
  height: 100%;
}
.svg-analysis {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  row-gap: var(--neu-sp-4);
  width: 19rem;
  padding: var(--neu-sp-5);
  border-radius: var(--neu-r-lg);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-sm);
}

.preview-card {
  display: flex;
  align-items: flex-start;
  gap: var(--neu-sp-6);
  padding: var(--neu-sp-6);
  border-radius: var(--neu-r-lg);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-sm);
}
.product-preview-section { margin-bottom: var(--neu-sp-7); }
.product-edit-container { max-width: 75rem; margin: 0 auto; }
.thumbnail-upload { flex: 1; }

.window3d {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 31.25rem;
  height: 31.25rem;
  padding: 0 var(--neu-sp-5) var(--neu-sp-5) var(--neu-sp-3);
}
.materialwindow3d {
  position: fixed;
  left: 15.8rem;
  z-index: 2;
  width: 31.25rem;
  height: 31.25rem;
  padding: 0 var(--neu-sp-5) var(--neu-sp-5) var(--neu-sp-3);
}
#container.window3d,
#container.materialwindow3d,
#container.textureBox,
#trinity_container.window3d {
  background: var(--neu-webgl-bg, #E7E7E4);
}
.parameter-column { position: absolute; top: 39.4rem; max-width: 31.25rem; }
.textureBox { min-width: 31.25rem; min-height: 31.25rem; padding-right: var(--neu-sp-5); padding-bottom: var(--neu-sp-5); }
.material-parameters { position: absolute; left: 34.4rem; width: 25rem; }
.model-select { position: fixed; z-index: 10; top: 36.4rem; width: 13.25rem; }
.model-select button { width: 2rem; height: 2rem; min-height: 0; padding: 0; }
.target-select { position: fixed; top: 40.6rem; }

.product-definitions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--neu-sp-5);
}
.product-definitions div { display: flex; flex-direction: column; gap: var(--neu-sp-2); width: auto; }

.design-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--neu-sp-3);
  width: 100%;
  max-width: 45rem;
  margin-bottom: var(--neu-sp-3);
  padding: var(--neu-sp-4);
  border-radius: var(--neu-r-lg);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
}
.design {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 7rem;
  margin: 0;
  padding: var(--neu-sp-3);
  border: 0;
  border-radius: var(--neu-r-md);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  cursor: pointer;
  transition: box-shadow var(--neu-dur-2) var(--neu-ease), transform var(--neu-dur-2) var(--neu-ease);
}
.design:hover { box-shadow: var(--neu-raise-sm); transform: translateY(-1px); }
.model {
  margin: var(--neu-sp-1);
  padding: var(--neu-sp-2) var(--neu-sp-3);
  border: 0;
  border-radius: var(--neu-r-sm);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  cursor: pointer;
  transition: box-shadow var(--neu-dur-2) var(--neu-ease);
}
.model:hover { box-shadow: var(--neu-raise-sm); }

.class-list-holder {
  position: absolute;
  left: 59rem;
  top: 9.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 18.75rem;
  height: 9.4rem;
}

.delete-bt {
  position: relative;
  top: -2.8rem;
  left: -0.6rem;
  display: none;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: var(--neu-r-circle);
  background-color: var(--neu-danger);
  box-shadow: var(--neu-raise-xs);
  color: var(--neu-danger-on);
  cursor: pointer;
}
.delete-bt span { margin: 0 !important; font-size: 1rem; }

.dragger.over { box-shadow: var(--neu-press-sm), 0 0 0 2px var(--neu-accent); border-radius: var(--neu-r-md); }
.draggable { cursor: move; }
.non-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   ROSTER / PLAYER LISTS
   -------------------------------------------------------------------------- */

.player-list { display: flex; flex-direction: column; gap: var(--neu-sp-2); }
.player-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--neu-sp-2);
  padding: var(--neu-sp-2);
  border-radius: var(--neu-r-md);
  transition: background-color var(--neu-dur-2) var(--neu-ease);
}
.player-item:hover { background: var(--neu-accent-soft); }
.player-item input { width: 8rem; height: auto; margin: 0; padding: 0.4rem var(--neu-sp-3); font-size: var(--neu-text-sm); }
.player-item button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 2rem;
  padding: 0.3rem var(--neu-sp-3);
  font-size: var(--neu-text-sm);
}
.roster-container { display: flex; flex-direction: column; gap: var(--neu-sp-3); width: 100%; max-width: 34rem; }

/* --------------------------------------------------------------------------
   STATS PANELS
   -------------------------------------------------------------------------- */

.stats { display: flex; flex-wrap: wrap; gap: var(--neu-sp-5); width: 100%; text-align: center; }
.stats-column {
  flex: 1 1 18rem;
  width: auto;
  margin: 0;
  padding: var(--neu-sp-5);
  border-radius: var(--neu-r-lg);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-sm);
}
.stats-content { text-align: left; }
.stats-item,
.stats-item-large {
  display: flex;
  align-items: center;
  gap: var(--neu-sp-3);
  padding: var(--neu-sp-2) var(--neu-sp-2);
  border-radius: var(--neu-r-sm);
  font-size: var(--neu-text-sm);
  transition: background-color var(--neu-dur-2) var(--neu-ease);
}
.stats-item:hover, .stats-item-large:hover { background: var(--neu-accent-soft); }
.stats-item img {
  width: 2.25rem; height: 2.25rem;
  margin-right: var(--neu-sp-3);
  border-radius: var(--neu-r-xs);
  object-fit: cover;
}
.stats-quantity { width: 4rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--neu-weight-semi); }
.stats-sku { width: 6.25rem; color: var(--neu-text-muted); font-variant-numeric: tabular-nums; }
.flags { width: 2.25rem !important; height: 1.5rem !important; border-radius: 3px; }
.stats-place { width: 6rem; font-size: var(--neu-text-2xs); color: var(--neu-text-subtle); }
.stats-timestamp { width: 18.75rem; text-align: end; color: var(--neu-text-subtle); font-size: var(--neu-text-xs); }
.stats-openDesign {
  margin-left: var(--neu-sp-4);
  color: var(--neu-accent-text);
  font-weight: var(--neu-weight-semi);
  cursor: pointer;
}
.stats-openDesign:hover { color: var(--neu-accent-hover); }

/* --------------------------------------------------------------------------
   INLINE HELP
   -------------------------------------------------------------------------- */

.help-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.05rem; height: 1.05rem;
  border: 0;
  border-radius: var(--neu-r-circle);
  background-color: var(--neu-accent);
  box-shadow: var(--neu-raise-xs);
  color: var(--neu-accent-on);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-bold);
  text-align: center;
  cursor: help;
  visibility: visible;
}
.help-pop-up {
  position: absolute;
  right: var(--neu-sp-3);
  z-index: var(--neu-z-tooltip);
  width: 18.75rem;
  padding: 0 var(--neu-sp-4) var(--neu-sp-4);
  border: 0;
  border-radius: var(--neu-r-lg);
  background-color: var(--neu-surface);
  box-shadow: var(--neu-float);
  color: var(--neu-text);
  font-size: var(--neu-text-sm);
}
.help-close { position: relative; right: var(--neu-sp-1); top: 0; text-align: right; cursor: pointer; }

/* --------------------------------------------------------------------------
   LOGIN / AUTH
   -------------------------------------------------------------------------- */

.login-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--neu-sp-7);
  background: transparent;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: var(--neu-sp-8);
  border-radius: var(--neu-r-xl);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xl);
  animation: neu-rise var(--neu-dur-5) var(--neu-ease-out) both;
}

.login-header { margin-bottom: var(--neu-sp-7); text-align: center; }
.login-header h1 {
  margin: 0;
  color: var(--neu-text-strong);
  font-size: var(--neu-text-2xl);
  font-weight: var(--neu-weight-bold);
  letter-spacing: var(--neu-tracking-tight);
  text-transform: capitalize;
}

.login-form { display: flex; flex-direction: column; gap: var(--neu-sp-5); }
.login-form .form-group { margin-bottom: 0; }

.login-form .input-with-icon input[type='text'],
.login-form .input-with-icon input[type='password'] {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.8rem var(--neu-sp-4) 0.8rem var(--neu-sp-9);
  border: 0;
  border-radius: var(--neu-r-md);
  background: var(--neu-surface-sunken);
  box-shadow: var(--neu-press-sm);
  color: var(--neu-text);
  font-family: inherit;
  font-size: var(--neu-text-base);
}
.login-form .input-with-icon input[type='text']:focus,
.login-form .input-with-icon input[type='password']:focus {
  outline: none;
  box-shadow: var(--neu-press), var(--neu-ring);
}

.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon .material-icons {
  position: absolute;
  left: var(--neu-sp-4);
  z-index: 1;
  color: var(--neu-text-subtle);
  font-size: 1.2rem;
  pointer-events: none;
  transition: color var(--neu-dur-2) var(--neu-ease);
}
.input-with-icon:focus-within .material-icons { color: var(--neu-accent); }
.input-with-icon input { width: 100%; padding: 0.8rem var(--neu-sp-4) 0.8rem var(--neu-sp-9); }

.login-form .form-actions { margin-top: var(--neu-sp-2); }
.login-form .form-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  padding: 0.8rem;
  border-radius: var(--neu-r-md);
  background: var(--neu-solid) !important;
  color: var(--neu-solid-on) !important;
  font-size: var(--neu-text-base);
  font-weight: var(--neu-weight-semi);
}
.login-form .form-actions button:hover { background: var(--neu-solid-hover) !important; }

.login-box {
  position: relative;
  left: 0;
  top: 0;
  width: fit-content;
  padding: var(--neu-sp-7);
  border-radius: var(--neu-r-xl);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-lg);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1100px) {
  :root { --app-sidebar-w: 15rem; --app-gutter: 1.5rem; }
}

@media only screen and (max-width: 860px) {
  .logo { width: 7rem; padding-inline: var(--neu-sp-4); overflow: hidden; }
  .logo img { max-width: 100%; }
  .topbar { padding-left: 4.5rem; }

  .sidebar {
    width: 0;
    padding-inline: 0;
    border-right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: var(--neu-z-overlay);
    box-shadow: var(--neu-float);
  }
  .sidebar.openmenu { width: var(--app-sidebar-w); padding-inline: var(--neu-sp-3); }
  .logo.openmenu { width: var(--app-sidebar-w); }

  .main {
    left: 0;
    width: 100%;
    padding: var(--neu-sp-5) var(--neu-sp-4) var(--neu-sp-9);
  }

  .openmenu { width: var(--app-sidebar-w); }

  .window3d { position: relative; left: 0; padding-right: 0; padding-bottom: 0; }
  .stats { display: block !important; width: 100%; }
  .stats-column { display: block; float: none; width: 100%; margin-bottom: var(--neu-sp-4); }
  .logout { right: auto; font-size: var(--neu-text-xs); }
  .debug-dir { display: none; }
}

@media only screen and (max-width: 600px) {
  .page-header { align-items: flex-start; flex-direction: column; }
  .table-header { display: none; }
  .table-row { flex-wrap: wrap; gap: var(--neu-sp-2); }
  .column.sku, .column.actions { width: auto; }
  .logout .debug-dir,
  .logout .debug-name { display: none; }
  .logout .neu-language-menu__trigger {
    width: 2.5rem;
    min-height: 2.5rem;
    justify-content: center;
    padding-inline: 0;
  }
  .logout .neu-language-menu__current,
  .logout .neu-language-menu__chevron { display: none; }
}

@media only screen and (max-width: 480px) {
  .logout { gap: var(--neu-sp-1); }
  .logout a {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: var(--neu-surface);
    box-shadow: var(--neu-raise-xs);
    font-size: 0;
  }
  .logout a::before {
    color: var(--neu-text-muted);
    font-family: 'Material Icons';
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 1;
  }
  .logout a[href='/login/change-password']::before { content: 'lock_reset'; }
  .logout a[href='/logout']::before { content: 'logout'; }
  .logout > .md-36 { display: none; }
}

/* --------------------------------------------------------------------------
   TOP BAR INTERNALS
   -------------------------------------------------------------------------- */

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--neu-sp-3);
  width: 100%;
  height: 100%;
  padding: 0 var(--neu-sp-6);
}

.topbar-menu-btn {
  display: none;
  place-items: center;
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: var(--neu-r-md);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-xs);
  color: var(--neu-text-muted);
}

.sidebar-close-btn {
  display: none;
}

.topbar-context { display: flex; align-items: center; gap: var(--neu-sp-3); min-width: 0; }
.global-search { margin-left: auto; flex: 0 0 auto; min-width: 0; }
.global-search__open { display: flex; align-items: center; gap: var(--neu-sp-2); min-height: 2.5rem; padding: 0 var(--neu-sp-3); }
.global-search__dialog { width: min(42rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--neu-line); border-radius: var(--neu-r-lg); color: var(--neu-text); background: var(--neu-surface); overflow-x: hidden; }
.global-search__dialog::backdrop { background: rgba(0, 0, 0, .55); }
.global-search__surface { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--neu-sp-3); padding: var(--neu-sp-5); min-width: 0; white-space: normal; }
.global-search__surface h2 { margin: 0; }
.global-search__surface input { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 3rem; padding: 0 var(--neu-sp-3); font-size: 1rem; }
.global-search__status { min-height: 1.25rem; margin: 0; color: var(--neu-text-muted); }
.global-search__surface ul { display: grid; gap: var(--neu-sp-2); max-height: min(50vh, 28rem); margin: 0; padding: 0; overflow: auto; list-style: none; }
.global-search__surface li[aria-selected='true'] { outline: var(--neu-focus-ring-w) solid var(--neu-focus); border-radius: var(--neu-r-md); }
.global-search__surface li a, .global-search__result { display: grid; gap: var(--neu-sp-1); width: 100%; min-width: 0; padding: var(--neu-sp-3); color: inherit; text-decoration: none; text-align: start; white-space: normal; overflow-wrap: anywhere; }
.global-search__result[data-busy='true'] { cursor: progress; background: var(--neu-surface-sunken); }
[data-global-search-results][aria-busy='true'] [aria-disabled='true'] { pointer-events: none; opacity: .55; }
.global-search__surface li small { color: var(--neu-text-muted); }
.global-search__surface li, .global-search__surface form { min-width: 0; margin: 0; }
.global-search__pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--neu-sp-2); }
.global-search__surface [hidden] { display: none; }
.global-search__pagination button, .global-search__surface > button { min-height: 2.75rem; }
.global-search__surface input::placeholder { color: var(--neu-text-muted); }
.topbar-actions { display: flex; align-items: center; margin-left: auto; min-width: 0; }

.topbar-title {
  font-size: var(--neu-text-md);
  font-weight: var(--neu-weight-semi);
  letter-spacing: var(--neu-tracking-tight);
  color: var(--neu-text-strong);
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media only screen and (max-width: 860px) {
  .topbar-menu-btn { display: grid; }
  .topbar-inner { padding: 0 var(--neu-sp-3); }
  .topbar-title { display: none; }
  .global-search__open span:last-child { display: none; }
  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--neu-sp-2);
    width: 100%;
    min-height: 2.75rem;
    margin: 0 0 var(--neu-sp-2);
    padding: 0 var(--neu-sp-3);
    border-radius: var(--neu-r-md);
    background: var(--neu-surface-raised);
    box-shadow: var(--neu-raise-xs);
    color: var(--neu-text-strong);
    font-size: var(--neu-text-sm);
    font-weight: var(--neu-weight-semi);
  }
}

/* Sidebar brand row + grouped nav ------------------------------------------- */

.menu-group-label {
  padding: var(--neu-sp-4) var(--neu-sp-4) var(--neu-sp-2);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-semi);
  letter-spacing: var(--neu-tracking-caps);
  text-transform: uppercase;
  color: var(--neu-text-faint);
  white-space: nowrap;
}
.menu-group-label:first-child { padding-top: var(--neu-sp-2); }

/* Staggered entrance for the main column */
.neu-shell-intro > * { animation: neu-rise var(--neu-dur-4) var(--neu-ease-out) both; }

/* --------------------------------------------------------------------------
   UPLOAD WORKFLOWS
   Legacy upload pages share this structure but no shared class. Attribute
   selectors let them inherit one tactile drop-surface without changing hooks.
   -------------------------------------------------------------------------- */

.main > form[enctype='multipart/form-data'] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--neu-sp-3);
  width: min(100%, 44rem);
  margin: var(--neu-sp-5) 0;
  padding: var(--neu-sp-5);
  border-radius: var(--neu-r-lg);
  background: var(--neu-surface);
  box-shadow: var(--neu-raise-sm);
}

.main > form[enctype='multipart/form-data'] input[type='file'] {
  flex: 1 1 22rem;
  min-width: 0;
}

.main > form[enctype='multipart/form-data'] input[type='text'] {
  flex: 1 1 16rem;
  margin: 0;
}

.main > form[enctype='multipart/form-data'] input[type='submit'] {
  flex: 0 0 auto;
  min-height: 2.625rem;
}

.main > form[enctype='multipart/form-data'] + #message {
  width: min(100%, 44rem);
  margin-top: var(--neu-sp-4);
  padding: var(--neu-sp-4) var(--neu-sp-5) !important;
  border-left: 3px solid var(--neu-info);
  border-radius: var(--neu-r-md);
  background: var(--neu-info-soft);
  color: var(--neu-text-muted);
}

.main > form[enctype='multipart/form-data'] + #message h4,
.main > form[enctype='multipart/form-data'] + #message p { margin: 0; }

.main > form[enctype='multipart/form-data'] + #message p + p { margin-top: var(--neu-sp-2); }

.merchant-menu .menubt,
.amorphic-menu .menubt { border-left: 0; padding: 0.62rem var(--neu-sp-4); }
.amorphic-menu .menu-item { cursor: pointer; }

@media (max-width: 640px) {
  .main > form[enctype='multipart/form-data'] { align-items: stretch; }
  .main > form[enctype='multipart/form-data'] input[type='submit'] { width: 100%; }
}

.upload-warning {
  display: block;
  margin-bottom: var(--neu-sp-3);
  padding: var(--neu-sp-3) var(--neu-sp-4);
  border-radius: var(--neu-r-md);
  background: var(--neu-danger-soft);
  color: var(--neu-danger);
}
.upload-warning h3 { margin: 0; color: inherit; font-size: var(--neu-text-md); }

.omsreply {
  margin: var(--neu-sp-4) 0 var(--neu-sp-6);
  padding: var(--neu-sp-4) var(--neu-sp-5);
  border-left: 3px solid var(--neu-info);
  border-radius: var(--neu-r-md);
  background: var(--neu-info-soft);
  color: var(--neu-info);
}

/* jQuery dropdown vendor theme ---------------------------------------------- */
.dropdown-main {
  padding: var(--neu-sp-2);
  border: 0 !important;
  border-radius: var(--neu-r-md) !important;
  background: var(--neu-surface) !important;
  box-shadow: var(--neu-float) !important;
  color: var(--neu-text) !important;
  font-family: var(--neu-font-sans) !important;
}
.dropdown-display,
.dropdown-search input {
  border: 0 !important;
  border-radius: var(--neu-r-sm) !important;
  background: var(--neu-surface-sunken) !important;
  box-shadow: var(--neu-press-xs) !important;
  color: var(--neu-text) !important;
}
.dropdown-option,
.dropdown-group,
.dropdown-display-label,
.dropdown-multiple-label { color: var(--neu-text-muted) !important; }
.dropdown-option { border-radius: var(--neu-r-xs); transition: background-color var(--neu-dur-1) var(--neu-ease), color var(--neu-dur-1) var(--neu-ease); }
.dropdown-option:hover,
.dropdown-option.dropdown-selected,
.dropdown-option.active {
  background: var(--neu-accent-soft) !important;
  color: var(--neu-text-strong) !important;
}
.dropdown-clear-all { color: var(--neu-danger) !important; }
.dropdown-maxItem-alert,
.dropdown-minItem-alert { color: var(--neu-warning) !important; }

/* --------------------------------------------------------------------------
   INCLUDED CORE-ADMIN MATERIAL REFINEMENT
   The shared main layout opts into this layer with .dt-admin-shell. The four
   purpose-built order/draft surfaces add .dt-admin-shell--visual-opt-out and
   retain their existing presentation. Designer uses a separate layout.
   -------------------------------------------------------------------------- */

:root:not([data-theme='dark']) body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out),
:root[data-theme='light'] body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) {
  --neu-line: rgba(23, 23, 21, 0.065);
  --neu-line-strong: rgba(23, 23, 21, 0.13);
  --neu-line-light: rgba(255, 255, 255, 0.82);
}

:root[data-theme='dark'] body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) {
  --neu-line: rgba(255, 255, 255, 0.035);
  --neu-line-strong: rgba(255, 255, 255, 0.075);
  --neu-line-light: rgba(255, 255, 255, 0.035);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) {
  --app-gutter: 1.5rem;
  --dt-admin-raise-control: inset 0 1px 0 var(--neu-edge-highlight),
    inset 0 -1px 0 var(--neu-edge-shadow), 0 2px 4px var(--neu-shadow-dark-soft);
  --dt-admin-raise-surface: inset 0 1px 0 var(--neu-edge-highlight),
    0 3px 8px var(--neu-shadow-dark-soft);
  --dt-admin-press-control: inset 0 0 0 1px var(--neu-line-strong),
    inset 0 2px 4px var(--neu-shadow-dark-soft);
  --dt-admin-motion: 140ms;
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .topbar {
  background: var(--neu-glass);
  border-bottom: 1px solid var(--neu-line);
  box-shadow: 0 4px 12px -12px var(--neu-shadow-cast);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .topbar::after {
  background: var(--neu-line-strong);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .topbar-inner {
  gap: var(--neu-sp-4);
  padding-inline: var(--neu-sp-5);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .topbar-title {
  font-size: var(--neu-text-sm);
  font-weight: var(--neu-weight-semi);
  letter-spacing: var(--neu-tracking-snug);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .logo:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 var(--neu-focus-ring-w) var(--neu-focus);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .sidebar {
  padding-top: var(--neu-sp-3);
  border-right-color: var(--neu-line);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .menu-container {
  gap: var(--neu-sp-1);
  padding-inline: var(--neu-sp-1);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .menu-group-label {
  padding: var(--neu-sp-4) var(--neu-sp-3) var(--neu-sp-1);
  font-size: var(--neu-text-2xs);
  font-weight: var(--neu-weight-semi);
  letter-spacing: 0.11em;
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .menu-item {
  align-items: center;
  gap: var(--neu-sp-3);
  min-height: 2.35rem;
  padding: var(--neu-sp-2) var(--neu-sp-3);
  border: 1px solid transparent;
  border-radius: var(--neu-r-sm);
  box-shadow: none;
  font-size: var(--neu-text-sm);
  font-weight: var(--neu-weight-semi);
  line-height: var(--neu-leading-snug);
  transition: color var(--dt-admin-motion) var(--neu-ease),
    background-color var(--dt-admin-motion) var(--neu-ease),
    box-shadow var(--dt-admin-motion) var(--neu-ease);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .menu-item:hover {
  border-color: var(--neu-line);
  background: var(--neu-surface-raised);
  box-shadow: var(--dt-admin-raise-control);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .menu-item.active {
  border-color: transparent;
  background: var(--neu-surface-sunken);
  box-shadow: var(--dt-admin-press-control);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .menu-item:focus-visible,
body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .topbar-menu-btn:focus-visible {
  outline: 0;
  box-shadow: var(--dt-admin-raise-control), var(--neu-ring);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .menu-item .material-icons,
body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .menu-item .material-symbols-outlined {
  width: 1.25rem;
  font-size: 1.15rem;
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .menu-separator,
body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__separator {
  background: var(--neu-line-strong);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main {
  max-width: 96rem;
  padding-top: var(--neu-sp-6);
  font-size: var(--neu-text-sm);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main :where(
  button:not(.role-home__button),
  .button,
  input[type='submit' i]
) {
  min-height: 2.35rem;
  border: 1px solid var(--neu-line);
  border-radius: var(--neu-r-sm);
  box-shadow: var(--dt-admin-raise-control);
  font-size: var(--neu-text-sm);
  font-weight: var(--neu-weight-semi);
  transition: color var(--dt-admin-motion) var(--neu-ease),
    background-color var(--dt-admin-motion) var(--neu-ease),
    box-shadow var(--dt-admin-motion) var(--neu-ease),
    transform var(--dt-admin-motion) var(--neu-ease);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main input[type='file']::file-selector-button {
  min-height: 2.25rem;
  border: 1px solid var(--neu-line);
  border-radius: var(--neu-r-sm);
  box-shadow: var(--dt-admin-raise-control);
  font-size: var(--neu-text-sm);
  font-weight: var(--neu-weight-semi);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main :where(button:not(.role-home__button), .button):hover {
  box-shadow: var(--dt-admin-raise-surface);
  transform: none;
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main :where(button:not(.role-home__button), .button):active {
  box-shadow: var(--dt-admin-press-control);
  transform: translateY(1px);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main :where(
  input[type='text'],
  input[type='search'],
  input[type='number'],
  input[type='email'],
  input[type='password'],
  input[type='url'],
  input[type='tel'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='time'],
  select,
  textarea
) {
  min-height: 2.4rem;
  border: 0;
  border-radius: var(--neu-r-sm);
  background-color: var(--neu-surface-sunken);
  box-shadow: var(--dt-admin-press-control);
  font-size: var(--neu-text-sm);
  transition: box-shadow var(--dt-admin-motion) var(--neu-ease),
    background-color var(--dt-admin-motion) var(--neu-ease);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main :where(
  input[type='text'],
  input[type='search'],
  input[type='number'],
  input[type='email'],
  input[type='password'],
  input[type='url'],
  input[type='tel'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='time'],
  select,
  textarea
):focus-visible {
  outline: 0;
  background-color: var(--neu-surface);
  box-shadow: var(--dt-admin-press-control), var(--neu-ring);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main :where(
  [role='tab'],
  .tab-button,
  .tabs > button,
  .category-buttons > a,
  .category-buttons > button
) {
  border: 1px solid var(--neu-line);
  border-radius: var(--neu-r-sm);
  box-shadow: var(--dt-admin-raise-control);
  font-size: var(--neu-text-sm);
  font-weight: var(--neu-weight-semi);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main :where(
  [role='tab'][aria-selected='true'],
  .tab-button.active,
  .tabs > button.active,
  .category-buttons > a[aria-current='page']
) {
  background: var(--neu-surface-sunken);
  box-shadow: var(--dt-admin-press-control);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main :where(
  .neu-panel,
  .preview-card,
  .settings-panel,
  .material-parameters
) {
  border-color: var(--neu-line);
  box-shadow: var(--dt-admin-raise-surface);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main :where(
  .item-row-top,
  .table-header,
  .nimbus-list-head
) {
  border-color: var(--neu-line-strong);
  box-shadow: var(--dt-admin-press-control);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main :where(
  .item-row,
  .table-row,
  .nimbus-list-row
) {
  border-color: var(--neu-line);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main a:focus-visible,
body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main [tabindex]:not([tabindex='-1']):not(button):not(input):not(select):not(textarea):focus-visible {
  outline: 0;
  box-shadow: var(--neu-ring);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__trigger {
  min-height: 2.75rem;
  padding: var(--neu-sp-1) var(--neu-sp-2);
  border: 1px solid transparent;
  border-radius: var(--neu-r-md);
  background: transparent;
  box-shadow: none;
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu[data-open='true'] .account-menu__trigger,
body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__trigger:active {
  background: var(--neu-surface-sunken);
  box-shadow: var(--dt-admin-press-control);
  transform: translateY(1px);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__panel {
  border-color: var(--neu-line);
  border-radius: var(--neu-r-lg);
  box-shadow: var(--neu-float);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__identity,
body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__workspace.is-current,
body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__language .account-menu__item[aria-checked='true'] {
  box-shadow: var(--dt-admin-press-control);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__item {
  min-height: 44px;
  border-radius: var(--neu-r-sm);
  font-size: var(--neu-text-sm);
  font-weight: var(--neu-weight-semi);
}

body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__item:focus-visible,
body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__trigger:focus-visible {
  outline: 0;
  box-shadow: var(--neu-ring);
}

@media (max-width: 56rem) {
  body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .account-menu__trigger {
    width: 2.75rem;
    max-width: 2.75rem;
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 860px) {
  body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) {
    --app-gutter: 1rem;
  }

  body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .topbar-inner {
    gap: var(--neu-sp-2);
    padding-inline: var(--neu-sp-3);
  }

  body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .main {
    padding: var(--neu-sp-4) var(--app-gutter) var(--neu-sp-8);
  }

  body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .sidebar.openmenu {
    border-right: 1px solid var(--neu-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) .neu-shell-intro > * {
    animation: none !important;
  }

  body.dt-admin-shell:not(.dt-admin-shell--visual-opt-out) :where(
    .menu-item,
    .topbar,
    .sidebar,
    .logo,
    .account-menu__trigger,
    .account-menu__panel,
    .account-menu__item,
    button,
    .button,
    input,
    select,
    textarea
  ) {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}