/*
 * Nokato Seller Portal styling, inheriting the Admin Portal design tokens
 * and shell patterns.
 *
 * `--nokato-*` custom properties are the semantic authoring source (see
 * nokatohq/docs/admin_portal/design.md). Each one maps one-way onto the
 * Bootstrap 5.3 `--bs-*` variable it customizes, so Bootstrap's own component
 * CSS renders with Nokato values without a second parallel style system.
 *
 * Bootstrap 5.3 declares most component variables (`--bs-btn-*`,
 * `--bs-card-*`, `--bs-table-*`, `--bs-modal-*`, and so on) on the component
 * selector itself. A root-level `--bs-*` override therefore never reaches
 * them, so this file sets those variables on the component selector, as
 * design.md's Bootstrap compatibility contract requires. The loading order
 * matters: this file follows bootstrap.min.css, so an equal-specificity rule
 * here wins.
 *
 * The CSP forbids inline styles, so every visual value lives in this file.
 * Never add an `@import` or an external `url()` here: style-src and img-src
 * allow only the pinned CDN origins and `data:` images.
 */

:root,
[data-bs-theme="light"] {
  color-scheme: light;

  --nokato-primary: #2b58f2;
  --nokato-on-primary: #ffffff;
  --nokato-primary-deep: #1e40ba;
  --nokato-secondary: #56636b;
  --nokato-success: #1f6b59;
  --nokato-warning: #8b4f12;
  --nokato-danger: #b7353d;
  --nokato-info: #2b58f2;
  --nokato-background: #eef2f3;
  --nokato-surface: #f9fbfb;
  --nokato-surface-raised: #ffffff;
  --nokato-surface-muted: #e7edef;
  --nokato-ink: #13202a;
  --nokato-ink-soft: #56636b;
  --nokato-ink-faint: #66737b;
  --nokato-id-ink: #b23e82;
  --nokato-border: #d8e0e2;
  --nokato-border-strong: #c7d2d5;
  --nokato-navigation: #111d25;
  --nokato-navigation-soft: #1c2a34;
  --nokato-navigation-ink: #dce8eb;
  --nokato-navigation-muted: #8fa2aa;
  --nokato-accent-lime: #d7f35f;
  --nokato-accent-lime-hover: #e4fa89;
  --nokato-on-accent-lime: #1d2c1a;
  --nokato-brand-wash: #e8eeff;
  --nokato-brand-ink: #1e40ba;
  --nokato-review-wash: #fff1dd;
  --nokato-review-ink: #8b4f12;
  --nokato-failure-wash: #fde8e9;
  --nokato-failure-ink: #b7353d;
  --nokato-ready-wash: #e3f5ef;
  --nokato-ready-ink: #1f6b59;
  --nokato-focus-ring: rgba(43, 88, 242, 0.25);
  --nokato-shadow-sm: 0 1px 2px rgba(17, 29, 37, 0.06), 0 1px 1px rgba(17, 29, 37, 0.04);

  --nokato-radius-control: 0.5625rem;
  --nokato-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nokato-duration-fast: 150ms;
  --nokato-duration-toast: 180ms;
  --nokato-sidebar-width: 15.25rem;
  --nokato-topbar-height: 4.5rem;
  /* The content column is left-aligned and capped. The Admin Support pages
     hold the widest grid, so only that surface uses the wider cap. */
  --nokato-page-max: 92.5rem;
  --nokato-page-max-wide: 120rem;
  --nokato-page-padding: 2.375rem;
  --nokato-section-gap: 1.625rem;

  /* Bootstrap color-mode adapter: getbootstrap.com/docs/5.3/customize/css-variables */
  --bs-primary: var(--nokato-primary);
  --bs-primary-rgb: 43, 88, 242;
  --bs-secondary: var(--nokato-secondary);
  --bs-secondary-rgb: 86, 99, 107;
  --bs-success: var(--nokato-success);
  --bs-success-rgb: 31, 107, 89;
  --bs-warning: var(--nokato-warning);
  --bs-warning-rgb: 139, 79, 18;
  --bs-danger: var(--nokato-danger);
  --bs-danger-rgb: 183, 53, 61;
  --bs-info: var(--nokato-info);
  --bs-info-rgb: 43, 88, 242;
  --bs-light: var(--nokato-surface);
  --bs-light-rgb: 249, 251, 251;
  --bs-dark: var(--nokato-navigation);
  --bs-dark-rgb: 17, 29, 37;
  --bs-body-bg: var(--nokato-background);
  --bs-body-bg-rgb: 238, 242, 243;
  --bs-body-color: var(--nokato-ink);
  --bs-body-color-rgb: 19, 32, 42;
  --bs-body-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-body-font-size: 0.875rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.45;
  --bs-font-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-border-color: var(--nokato-border);
  --bs-border-color-translucent: var(--nokato-border);
  --bs-border-radius: 0.75rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1.125rem;
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow-sm: var(--nokato-shadow-sm);
  --bs-link-color: var(--nokato-primary);
  --bs-link-color-rgb: 43, 88, 242;
  --bs-link-hover-color: var(--nokato-primary-deep);
  --bs-link-hover-color-rgb: 30, 64, 186;
  --bs-focus-ring-color: var(--nokato-focus-ring);
  --bs-emphasis-color: var(--nokato-ink);
  --bs-emphasis-color-rgb: 19, 32, 42;
  --bs-secondary-color: var(--nokato-ink-soft);
  --bs-secondary-color-rgb: 86, 99, 107;
  --bs-tertiary-color: var(--nokato-ink-faint);
  --bs-tertiary-bg: var(--nokato-surface-muted);
  --bs-secondary-bg: var(--nokato-surface-muted);
  --bs-code-color: var(--nokato-id-ink);
  --bs-form-control-bg: var(--nokato-surface-raised);

  /* Semantic feedback: alerts read these subtle/emphasis roles. */
  --bs-info-bg-subtle: var(--nokato-brand-wash);
  --bs-info-border-subtle: var(--nokato-primary);
  --bs-info-text-emphasis: var(--nokato-brand-ink);
  --bs-success-bg-subtle: var(--nokato-ready-wash);
  --bs-success-border-subtle: var(--nokato-success);
  --bs-success-text-emphasis: var(--nokato-ready-ink);
  --bs-warning-bg-subtle: var(--nokato-review-wash);
  --bs-warning-border-subtle: var(--nokato-warning);
  --bs-warning-text-emphasis: var(--nokato-review-ink);
  --bs-danger-bg-subtle: var(--nokato-failure-wash);
  --bs-danger-border-subtle: var(--nokato-danger);
  --bs-danger-text-emphasis: var(--nokato-failure-ink);
}

/* Dark mode remaps the semantic roles rather than inverting the palette. The
   selector sits on the document root (design.md, Colors). Every Bootstrap
   variable set in the light block above is set again here, because that block
   also matches the root element and would otherwise override Bootstrap's own
   dark values. */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --nokato-background: #0d161c;
  --nokato-surface: #14212a;
  --nokato-surface-raised: #192934;
  --nokato-surface-muted: #22343e;
  --nokato-ink: #eff6f7;
  --nokato-ink-soft: #a6b9c0;
  --nokato-ink-faint: #7d929a;
  --nokato-id-ink: #e685b5;
  --nokato-border: #2d424c;
  --nokato-border-strong: #405762;
  --nokato-brand-wash: #1e2e6b;
  --nokato-brand-ink: #b7c6ff;
  --nokato-review-wash: #4d341a;
  --nokato-review-ink: #f5c277;
  --nokato-failure-wash: #4c2428;
  --nokato-failure-ink: #ff9da2;
  --nokato-ready-wash: #183e34;
  --nokato-ready-ink: #7de0c0;
  --bs-link-color: var(--nokato-brand-ink);
  --bs-link-color-rgb: 183, 198, 255;
  --bs-link-hover-color: var(--nokato-ink);
  --bs-link-hover-color-rgb: 239, 246, 247;
  --nokato-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 1px rgba(0, 0, 0, 0.2);

  --bs-body-bg: var(--nokato-background);
  --bs-body-bg-rgb: 13, 22, 28;
  --bs-body-color: var(--nokato-ink);
  --bs-body-color-rgb: 239, 246, 247;
  --bs-border-color: var(--nokato-border);
  --bs-border-color-translucent: var(--nokato-border);
  --bs-emphasis-color: var(--nokato-ink);
  --bs-emphasis-color-rgb: 239, 246, 247;
  --bs-secondary-color: var(--nokato-ink-soft);
  --bs-secondary-color-rgb: 166, 185, 192;
  --bs-tertiary-color: var(--nokato-ink-faint);
  --bs-tertiary-bg: var(--nokato-surface-muted);
  --bs-secondary-bg: var(--nokato-surface-muted);
  --bs-form-control-bg: var(--nokato-surface-raised);
  --bs-code-color: var(--nokato-id-ink);
}

html {
  min-width: 320px;
}

body {
  background-color: var(--nokato-background);
}

/* Links are quiet at rest and underline on interaction (design.md, Colors).
   Bootstrap 5.3 hard-codes `text-decoration: underline` on every `a`, so the
   `--bs-link-decoration` variable alone does not change it. */
a {
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

.btn:not(.btn-link):hover,
.nav-link:hover,
.page-link:hover,
.dropdown-item:hover,
a.btn:not(.btn-link):focus-visible {
  text-decoration: none;
}

/* Headings use the restrained weight range (design.md, Typography): 600 for
   panel titles, 650 only for the page title and metric values. */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 600;
  letter-spacing: 0;
}

h4,
.h4 {
  font-size: 1.125rem;
}

h5,
.h5 {
  font-size: 1rem;
}

h6,
.h6 {
  font-size: 0.875rem;
}

/* Section heading between groups of panels, such as Telemetry. */
.portal-section-title {
  font-size: 1.375rem;
  font-weight: 600;
}

strong,
b {
  font-weight: 600;
}

hr {
  color: var(--nokato-border);
  opacity: 1;
}

/* Bootstrap's `code` rule sets font-size in `em`; identifiers use the
   typography.mono size, colored by --bs-code-color (colors.id-ink). Table
   cells keep an identifier on one line so it stays whole and copyable. */
code {
  font-size: 0.75rem;
}

.table code,
.table time {
  white-space: nowrap;
}

/* Nokato ink-hierarchy text utilities: the three-step reading hierarchy from
   design.md (colors.ink, colors.ink-soft, colors.ink-faint), used instead of
   an inline style attribute the Administrator CSP's style-src blocks. */
.text-nokato-ink-soft {
  color: var(--nokato-ink-soft);
}

.text-nokato-ink-faint {
  color: var(--nokato-ink-faint);
}

.portal-id {
  color: var(--nokato-id-ink);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
}

/* Explanatory copy under the page title. */
.portal-intro {
  margin-bottom: 1.25rem;
  color: var(--nokato-ink-soft);
}

.portal-inline-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

/* Keyboard focus is always visible and uses colors.focus-ring. Bootstrap's own
   :focus rules on form controls set a stock blue, so the controls are named
   with the same specificity and follow it in the cascade. */
a:focus-visible,
button:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible,
.page-link:focus-visible,
.form-check-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem var(--nokato-focus-ring);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--nokato-primary);
  outline: none;
  box-shadow: 0 0 0 0.25rem var(--nokato-focus-ring);
}

/* A checkbox or radio is its own boundary, so it takes a raised fill and
   colors.border-strong; Bootstrap would give it the canvas fill and the
   default hairline, which disappears on the work surface. */
.form-check-input {
  --bs-form-check-bg: var(--nokato-surface-raised);
  border-color: var(--nokato-border-strong);
}

.form-check-input:checked {
  background-color: var(--nokato-primary);
  border-color: var(--nokato-primary);
}

/* Handoff switches are 36 by 20 pixels with a filled gray track when off. */
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  width: 2.25rem;
  height: 1.25rem;
  flex: none;
  border-color: var(--nokato-border-strong);
  background-color: var(--nokato-border-strong);
}

.form-switch .form-check-input:checked {
  border-color: var(--nokato-primary);
  background-color: var(--nokato-primary);
}

/* The dialog close control is a 32px target with a 14px glyph. */
.modal-header .btn-close {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0.625rem;
  margin: 0;
}

/* Input-group icon actions follow the 38px field height. */
.input-group > .btn {
  --bs-btn-padding-x: 0.875rem;
  --bs-btn-padding-y: 0;
  min-height: 0;
}

/* ---- Buttons (design.md, Buttons and actions) ---------------------------- */

.btn {
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.2;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-border-radius: var(--nokato-radius-control);
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--nokato-focus-ring);
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  letter-spacing: 0;
}

.btn-sm {
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-border-radius: var(--nokato-radius-control);
  min-height: 2rem;
}

.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--nokato-primary);
  --bs-btn-border-color: var(--nokato-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--nokato-primary-deep);
  --bs-btn-hover-border-color: var(--nokato-primary-deep);
  --bs-btn-focus-shadow-rgb: 43, 88, 242;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--nokato-primary-deep);
  --bs-btn-active-border-color: var(--nokato-primary-deep);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--nokato-primary);
  --bs-btn-disabled-border-color: var(--nokato-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--nokato-ink);
  --bs-btn-bg: var(--nokato-surface-raised);
  --bs-btn-border-color: var(--nokato-border);
  --bs-btn-hover-color: var(--nokato-ink);
  --bs-btn-hover-bg: var(--nokato-surface-muted);
  --bs-btn-hover-border-color: var(--nokato-border-strong);
  --bs-btn-focus-shadow-rgb: 43, 88, 242;
  --bs-btn-active-color: var(--nokato-ink);
  --bs-btn-active-bg: var(--nokato-surface-muted);
  --bs-btn-active-border-color: var(--nokato-border-strong);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--nokato-ink-faint);
  --bs-btn-disabled-bg: var(--nokato-surface-raised);
  --bs-btn-disabled-border-color: var(--nokato-border);
}

.btn-outline-danger {
  --bs-btn-color: var(--nokato-failure-ink);
  --bs-btn-bg: var(--nokato-surface-raised);
  --bs-btn-border-color: var(--nokato-danger);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--nokato-danger);
  --bs-btn-hover-border-color: var(--nokato-danger);
  --bs-btn-focus-shadow-rgb: 183, 53, 61;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--nokato-danger);
  --bs-btn-active-border-color: var(--nokato-danger);
  --bs-btn-disabled-color: var(--nokato-ink-faint);
  --bs-btn-disabled-border-color: var(--nokato-border);
}

.btn-danger {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--nokato-danger);
  --bs-btn-border-color: var(--nokato-danger);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #9a2b32;
  --bs-btn-hover-border-color: #9a2b32;
  --bs-btn-focus-shadow-rgb: 183, 53, 61;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #9a2b32;
  --bs-btn-active-border-color: #9a2b32;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--nokato-danger);
  --bs-btn-disabled-border-color: var(--nokato-danger);
}

/* The one "evidence, on demand" action, such as Download JSON: colors.accent-
   lime appears only where the Administrator can trust or export platform data. */
.btn-accent {
  --bs-btn-color: var(--nokato-on-accent-lime);
  --bs-btn-bg: var(--nokato-accent-lime);
  --bs-btn-border-color: var(--nokato-accent-lime);
  --bs-btn-hover-color: var(--nokato-on-accent-lime);
  --bs-btn-hover-bg: var(--nokato-accent-lime-hover);
  --bs-btn-hover-border-color: var(--nokato-accent-lime-hover);
  --bs-btn-focus-shadow-rgb: 215, 243, 95;
  --bs-btn-active-color: var(--nokato-on-accent-lime);
  --bs-btn-active-bg: var(--nokato-accent-lime-hover);
  --bs-btn-active-border-color: var(--nokato-accent-lime-hover);
  --bs-btn-active-shadow: none;
}

/* Ghost action: the theme link foreground without a surrounding container, such as
   Decide, Retry, or Open in a table row. */
.btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-disabled-color: var(--nokato-ink-faint);
  --bs-btn-focus-shadow-rgb: 43, 88, 242;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

.btn .portal-inline-icon {
  flex: none;
}

/* ---- Forms (design.md, Forms and overlays) ------------------------------- */

.form-label {
  margin-bottom: 0.375rem;
  color: var(--nokato-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
}

.form-control,
.form-select {
  min-height: 2.375rem;
  border-color: var(--nokato-border);
  border-radius: var(--nokato-radius-control);
  background-color: var(--nokato-surface-raised);
  color: var(--nokato-ink);
  font-size: 0.875rem;
  line-height: 1.45;
}

.form-control {
  padding: 0.4375rem 0.75rem;
}

.form-select {
  padding-top: 0.4375rem;
  padding-bottom: 0.4375rem;
}

.form-control::placeholder {
  color: var(--nokato-ink-faint);
}

/* A field the administrator has touched, or that a refused submit named, shows as
   invalid. :user-invalid waits for that interaction, so an empty form does not
   open in error. */
.form-control:user-invalid,
.form-select:user-invalid {
  border-color: var(--nokato-danger);
}

.form-control:user-invalid:focus,
.form-select:user-invalid:focus {
  border-color: var(--nokato-danger);
  box-shadow: 0 0 0 0.25rem rgba(183, 53, 61, 0.25);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--nokato-surface-muted);
}

.form-text {
  color: var(--nokato-ink-soft);
  font-size: 0.75rem;
}

textarea.form-control {
  resize: none;
}

/* ---- Panels (design.md, Elevation & Depth) ------------------------------- */

/* Grouped panels are bordered and unshadowed; only genuinely raised surfaces
   (metric tiles, the profile popover, toasts) carry .shadow-sm. */
.card {
  --bs-card-bg: var(--nokato-surface-raised);
  --bs-card-color: var(--nokato-ink);
  --bs-card-border-color: var(--nokato-border);
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 1.5rem;
  --bs-card-cap-bg: var(--nokato-surface-muted);
  box-shadow: none;
}

/* ---- Tables (design.md, Navigation and data display) --------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--nokato-ink);
  --bs-table-border-color: var(--nokato-border);
  --bs-table-hover-bg: var(--nokato-surface);
  --bs-table-hover-color: var(--nokato-ink);
  --bs-table-striped-bg: transparent;
}

.table > :not(caption) > * > * {
  padding: 0.75rem;
}

.table > thead > tr > th {
  color: var(--nokato-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Row headers hold identifiers, not emphasis. */
.table > tbody > tr > th[scope="row"] {
  font-weight: 400;
}

/* Linked identifiers keep the pink ID ink instead of the link blue. */
a > code {
  color: var(--nokato-id-ink);
}

/* Data-grid row actions are 32px, like the handoff grid buttons. */
.table .portal-icon-btn {
  width: 2rem;
  min-height: 2rem;
  height: 2rem;
}

/* A count pill is a plain number without a status dot. */
.badge.portal-count {
  padding: 0.25rem 0.625rem;
  background: var(--nokato-surface-muted);
  color: var(--nokato-ink-soft);
}

/* Absolutely positioned cell content, such as a .visually-hidden label,
   would otherwise escape the scroll container and widen the whole page. */
.table-responsive {
  position: relative;
}

/* A prose column, such as a metric definition, keeps a readable measure; the
   table scrolls inside its .table-responsive wrapper instead of squeezing it. */
.portal-col-wide {
  min-width: 22rem;
}

.portal-col-medium {
  min-width: 14rem;
}

.table-sm > :not(caption) > * > * {
  padding: 0.5rem 0.75rem;
}

/* ---- Status badges (design.md, Colors) ----------------------------------- */

/* A status pairs semantic color with text and a leading dot, so color never
   carries the meaning alone. */
.badge {
  --bs-badge-padding-x: 0.625rem;
  --bs-badge-padding-y: 0.3125rem;
  --bs-badge-font-size: 0.6875rem;
  --bs-badge-font-weight: 600;
  --bs-badge-border-radius: var(--bs-border-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  line-height: 1.2;
  white-space: nowrap;
}

.badge[class*="status-"]::before {
  width: 0.375rem;
  height: 0.375rem;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.badge.status-review {
  background: var(--nokato-review-wash);
  color: var(--nokato-review-ink);
}

.badge.status-failure {
  background: var(--nokato-failure-wash);
  color: var(--nokato-failure-ink);
}

.badge.status-ready {
  background: var(--nokato-ready-wash);
  color: var(--nokato-ready-ink);
}

.badge.status-neutral {
  background: var(--nokato-surface-muted);
  color: var(--nokato-ink-soft);
}

/* ---- Feedback: alerts, toasts, modals ------------------------------------ */

/* Alerts read the *-subtle / *-text-emphasis roles set on the root above. */
.alert {
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 0.75rem;
  --bs-alert-border-radius: var(--bs-border-radius-sm);
  border-width: 0 0 0 3px;
}

.toast {
  --bs-toast-bg: var(--nokato-surface-raised);
  --bs-toast-color: var(--nokato-ink);
  --bs-toast-font-size: 0.8125rem;
  --bs-toast-padding-x: 1rem;
  --bs-toast-padding-y: 0.75rem;
  --bs-toast-border-color: var(--nokato-border);
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-box-shadow: var(--nokato-shadow-sm);
}

.toast.fade {
  transition: opacity var(--nokato-duration-toast) var(--nokato-ease-out);
}

/* Toasts acknowledge success and information with a semantic tone dot. */
.portal-toast .toast-body {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 0.625rem;
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
}

.portal-toast .toast-body::before {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  margin-top: 0.3125rem;
  border-radius: 50%;
  background: var(--nokato-primary);
  content: "";
}

/* Dialogs follow the design system Dialog: 26rem wide, radius lg, shadow-sm
   and no border. The title and description share the header; the body holds
   only extra fields; the actions sit bottom-right with no divider. */
.modal {
  --bs-modal-width: 26rem;
  --bs-modal-bg: var(--nokato-surface-raised);
  --bs-modal-color: var(--nokato-ink);
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-inner-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: var(--nokato-shadow-sm);
  --bs-modal-header-padding: 1.25rem 1.5rem;
  --bs-modal-header-border-width: 1px;
  --bs-modal-padding: 1.5rem;
  --bs-modal-footer-border-width: 1px;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-title-line-height: 1.3;
}

.modal-content {
  box-shadow: var(--bs-modal-box-shadow);
}

.modal-header {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.modal-header:has(> .btn-close) {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 650;
}

/* Bootstrap gives each footer action a half-gap margin, so the padding is
   a quarter rem short of the 1.5rem dialog edge. */
.modal-footer {
  background: var(--nokato-surface);
  padding: 0.625rem 1.25rem;
}

.modal-backdrop {
  --bs-backdrop-bg: #111d25;
  --bs-backdrop-opacity: 0.45;
}

/* ---- Pagination (design.md, Page navigation) ----------------------------- */

.pagination {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0;
  --bs-pagination-font-size: 0.75rem;
  --bs-pagination-color: var(--nokato-ink);
  --bs-pagination-bg: var(--nokato-surface-raised);
  --bs-pagination-border-color: var(--nokato-border);
  --bs-pagination-border-radius: var(--bs-border-radius-sm);
  --bs-pagination-hover-color: var(--nokato-ink);
  --bs-pagination-hover-bg: var(--nokato-surface-muted);
  --bs-pagination-hover-border-color: var(--nokato-border-strong);
  --bs-pagination-focus-color: var(--nokato-ink);
  --bs-pagination-focus-bg: var(--nokato-surface-muted);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--nokato-focus-ring);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: var(--nokato-primary);
  --bs-pagination-active-border-color: var(--nokato-primary);
  --bs-pagination-disabled-color: var(--nokato-ink-faint);
  --bs-pagination-disabled-bg: var(--nokato-surface-raised);
  --bs-pagination-disabled-border-color: var(--nokato-border);
  gap: 0.25rem;
}

.pagination .page-link {
  display: grid;
  min-width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--bs-pagination-border-radius);
}

.pagination .page-item:not(:first-child) .page-link {
  margin-left: 0;
}

/* The pager row under a grid: the row summary on the left, the buttons on the
   right. It wraps, so a narrow card stacks the buttons under the summary. */
.portal-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
}

.portal-pager-summary {
  margin: 0;
  color: var(--nokato-ink-soft);
  font-size: 0.8125rem;
}

/* ---- Section tabs, such as Failures and Work & Notifications ------------- */

.portal-tabs {
  --bs-nav-link-padding-x: 0.875rem;
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-font-size: 0.8125rem;
  --bs-nav-link-font-weight: 600;
  --bs-nav-link-color: var(--nokato-primary);
  --bs-nav-link-hover-color: var(--nokato-primary-deep);
  gap: 0.5rem;
}

.portal-tabs .nav-link {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--nokato-radius-control);
}

.portal-tabs .nav-link[aria-current="page"] {
  border-color: var(--nokato-border-strong);
  background: var(--nokato-surface-raised);
  color: var(--nokato-ink);
}

/* ---- Command rail --------------------------------------------------------- */

/* A persistent dark surface at lg and above, an offcanvas below it; both
   share this markup (design.md, Layout). Bootstrap's `.offcanvas-lg` and its
   body set `background-color: transparent !important` at lg, so the rail
   restates its surface with !important as well. */
.portal-rail {
  --bs-offcanvas-width: var(--nokato-sidebar-width);
  --bs-offcanvas-bg: var(--nokato-navigation);
  --bs-offcanvas-color: var(--nokato-navigation-ink);
  --bs-offcanvas-border-width: 0;
  color: var(--nokato-navigation-ink);
}

@media (min-width: 992px) {
  .portal-rail {
    position: sticky;
    top: 0;
    display: flex;
    flex: none;
    flex-direction: column;
    width: var(--nokato-sidebar-width);
    height: 100vh;
    overflow-y: auto;
    background-color: var(--nokato-navigation) !important;
  }

  /* Bootstrap sets flex-grow: 0 on the lg offcanvas body, which would leave
     the profile row directly under the navigation instead of pinned to the
     bottom of the rail. */
  .portal-rail .offcanvas-body {
    flex: 1 1 auto;
    gap: 1.5rem;
    background-color: var(--nokato-navigation) !important;
  }
}

.portal-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.portal-brand-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border-radius: var(--bs-border-radius-sm);
  background: var(--nokato-accent-lime);
  color: var(--nokato-on-accent-lime);
  font-weight: 600;
}

.seller-rail-brand {
  padding: 0.5rem;
  line-height: 1.2;
}

.portal-brand-caption {
  color: var(--nokato-navigation-muted);
  font-size: 0.8125rem;
}

.portal-nav-label {
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
  color: var(--nokato-navigation-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Nav groups sit 1.5rem apart, the same gap as the brand and the profile. */
.portal-nav .nav + .portal-nav-label {
  margin-top: 1.5rem;
}

.portal-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.3125rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--nokato-radius-control);
  color: var(--nokato-navigation-muted);
  font-size: 0.875rem;
  line-height: 1.2;
  transition: background var(--nokato-duration-fast) var(--nokato-ease-out),
    color var(--nokato-duration-fast) var(--nokato-ease-out);
}

.portal-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--nokato-navigation-ink);
}

.portal-nav .nav-link[aria-current="page"] {
  background: var(--nokato-navigation-soft);
  color: var(--nokato-navigation-ink);
  font-weight: 600;
}

.portal-nav .nav-link.disabled {
  color: var(--nokato-navigation-muted);
  opacity: 0.55;
  pointer-events: none;
}

.portal-nav-icon {
  display: grid;
  width: 1.0625rem;
  height: 1.0625rem;
  flex: none;
  place-items: center;
}

.portal-nav-icon svg {
  width: 1.0625rem;
  height: 1.0625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The cue that an item opens outside the console, in a new tab. */
.portal-nav-external {
  display: grid;
  margin-left: auto;
  place-items: center;
  opacity: 0.7;
}

.portal-nav-external svg {
  width: 0.875rem;
  height: 0.875rem;
}

.portal-nav-count {
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0 0.375rem;
  border-radius: var(--bs-border-radius-pill);
  background: var(--nokato-primary);
  color: #ffffff;
  font-size: 0.6875rem;
  font-product-variant-numeric: tabular-nums;
  font-weight: 600;
}

.portal-nav-status {
  flex: none;
  margin-left: auto;
  font-size: 0.625rem;
  white-space: nowrap;
}

/* A compact rail retains the status name for assistive technology. */
.portal-rail[data-collapsed="true"] .portal-nav-status-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.portal-rail[data-collapsed="true"] .portal-nav-status {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
}

/* Account controls live in the rail footer (design.md, Navigation and page
   inventory), not the top bar. */
.portal-profile-dropdown {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.portal-profile-toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--nokato-radius-control);
  background: transparent;
  color: var(--nokato-navigation-ink);
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.2;
  transition: background var(--nokato-duration-fast) var(--nokato-ease-out),
    border-color var(--nokato-duration-fast) var(--nokato-ease-out);
}

.portal-profile-toggle:hover,
.portal-profile-toggle.show {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--nokato-navigation-soft);
  color: var(--nokato-navigation-ink);
}

.portal-profile-avatar {
  display: grid;
  width: 1.875rem;
  height: 1.875rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--nokato-surface-muted);
  color: var(--nokato-ink);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.portal-profile-role {
  color: var(--nokato-navigation-muted);
  font-size: 0.6875rem;
}

@keyframes ot-slide-up {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-menu.portal-profile-menu {
  --bs-dropdown-bg: var(--nokato-navigation-soft);
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.12);
  --bs-dropdown-border-radius: var(--bs-border-radius);
  --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - 1px);
  --bs-dropdown-color: var(--nokato-navigation-ink);
  --bs-dropdown-font-size: 0.8125rem;
  --bs-dropdown-link-color: var(--nokato-navigation-ink);
  --bs-dropdown-link-hover-color: var(--nokato-navigation-ink);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-dropdown-divider-bg: rgba(255, 255, 255, 0.12);
  --bs-dropdown-divider-margin-y: 0.125rem;
  --bs-dropdown-box-shadow: var(--nokato-shadow-sm);
  width: 100%;
  min-width: 0;
  padding: 0.375rem;
  animation: ot-slide-up var(--nokato-duration-fast) var(--nokato-ease-out);
}

.portal-profile-menu .dropdown-item {
  padding: 0.5rem 0.625rem;
  border-radius: var(--bs-border-radius-sm);
}

/* ---- Top bar and content -------------------------------------------------- */

/* Flex children default to min-width: auto, so a wide table would otherwise
   stretch the whole column past the viewport instead of scrolling inside its
   own .table-responsive wrapper. */
.portal-main {
  min-width: 0;
  min-height: 100vh;
}

.portal-topbar {
  display: flex;
  min-height: var(--nokato-topbar-height);
  align-items: center;
  gap: 0.75rem;
  padding-inline: 1.5rem;
  background: var(--nokato-surface);
  border-bottom: 1px solid var(--nokato-border);
}

/* A long page title wraps inside the breadcrumb instead of pushing the theme
   selector off a narrow screen. */
.seller-topbar-crumbs {
  min-width: 0;
  flex: 1;
}

.portal-topbar .portal-theme-switch {
  flex: none;
}

/* Below lg the bar keeps the menu button, the brand, and the theme buttons
   on its first row, and the breadcrumb takes its own full-width strip. */
@media (max-width: 991.98px) {
  .portal-topbar {
    display: grid;
    grid-template-areas:
      "menu brand theme"
      "crumbs crumbs crumbs";
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: var(--nokato-topbar-height) auto;
    gap: 0 0.75rem;
    padding-inline: 0;
  }

  .seller-menu-btn {
    grid-area: menu;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    margin-left: 1rem;
  }

  .seller-topbar-brand {
    grid-area: brand;
    min-width: 0;
    gap: 0.5rem;
    color: var(--nokato-ink);
    font-weight: 600;
  }

  .seller-topbar-brand .portal-brand-mark {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8125rem;
  }

  .portal-topbar .portal-theme-switch {
    grid-area: theme;
    margin-right: 1rem;
  }

  .seller-topbar-crumbs {
    grid-area: crumbs;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--nokato-border);
  }

  .portal-breadcrumb {
    row-gap: 0.25rem;
  }
}

.portal-breadcrumb {
  --bs-breadcrumb-divider-color: var(--nokato-border-strong);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: var(--nokato-ink);
  color: var(--nokato-ink-faint);
  font-size: 0.75rem;
}

.portal-breadcrumb .breadcrumb-item a {
  color: inherit;
}

.portal-breadcrumb .breadcrumb-item a:hover {
  color: var(--nokato-ink);
}

.portal-breadcrumb .breadcrumb-item.active {
  font-weight: 600;
}

/* Theme selector: three separate icon buttons, the selected one tinted. */
.portal-theme-switch {
  display: flex;
  gap: 0.5rem;
}

.portal-icon-btn {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: 2.25rem;
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

.portal-icon-btn[aria-pressed="true"] {
  background: var(--nokato-surface-muted);
}

.portal-content {
  max-width: var(--nokato-page-max);
  padding: var(--nokato-page-padding) var(--nokato-page-padding) 3.5rem;
}

@media (max-width: 767.98px) {
  .portal-content {
    padding-inline: 1rem;
  }
}

/* Nokato token map of typography.heading (design.md): the page title on
   every authenticated page, in place of Bootstrap's h1 defaults. */
.portal-page-title {
  margin-bottom: 1.25rem;
  font-size: 2.5rem;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Explanatory copy with one page-level action beside it, such as
   Register a Seller. */
.portal-intro-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.portal-intro-row .portal-intro {
  margin-bottom: 0;
}

.portal-intro-row .btn {
  flex: none;
}

/* A filter row wraps naturally: fields take a comfortable width, and the
   action stays beside the last field until the row runs out of room. */
.portal-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}

.portal-field {
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 14rem;
}

.portal-field-wide {
  flex-basis: 13rem;
  max-width: 18rem;
}

/* A date and time field needs room for the value and the picker icon. */
.portal-field-datetime {
  flex-basis: 13.5rem;
  max-width: 17rem;
}

.portal-field-narrow {
  flex: 0 0 5.5rem;
}

.portal-filter-action {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.375rem;
}

/* Clear filters is a link-style button, not a full-height control. */
.portal-filter-action .btn-link {
  min-height: 0;
  padding: 0 0.25rem;
}

@media (max-width: 575.98px) {
  .portal-field-wide {
    flex-basis: 100%;
    max-width: none;
  }

  .portal-field-narrow {
    flex-basis: 5.5rem;
  }
}

/* Filter controls collapse behind a Filters button below lg and stay expanded
   at lg and above. */
.portal-filters-toggle {
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .portal-filters.collapse {
    display: block;
  }
}

/* Wish Matches keeps the Wish as the scanning unit and its products as
   subordinate lines. At phone width each row group becomes a compact card. */
.wish-match-bulk { display: flex; align-items: center; gap: .75rem; padding-block: .75rem; flex-wrap: wrap; }
.wish-match-bulk[hidden] { display: none; }
.wish-match-table .wish-match-check { width: 4rem; white-space: nowrap; }
.wish-match-main .wish-match-check .form-check-input { margin-left: .5rem; vertical-align: middle; }
.wish-match-main th[scope="row"] { max-width: 15rem; overflow-wrap: anywhere; }
.wish-match-main:has(+ .wish-match-product-row .collapse.show) > * { --bs-table-bg-state: var(--nokato-surface); }
.wish-match-relative { display: block; color: var(--nokato-ink-soft); font-size: .75rem; }
.wish-match-count-toggle { display: none; }
.wish-match-product-name span { display: block; color: var(--nokato-ink-soft); font-size: .75rem; }
.wish-match-product-name strong { font-weight: 600; }
.wish-match-product-row > td { padding: 0; border-bottom: 0; }
/* The expanded list is an inset surface aligned with the Wish ID column. */
.wish-match-products { margin: 0 .75rem .875rem 4.875rem; overflow: hidden; border: 1px solid var(--nokato-border); border-radius: var(--bs-border-radius); background: var(--nokato-surface); }
.wish-match-product { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; }
.wish-match-product + .wish-match-product { border-top: 1px solid var(--nokato-border); }
.wish-match-products > a { display: block; padding: .625rem .875rem; border-top: 1px solid var(--nokato-border); }
.wish-match-product-name { flex: 1; min-width: 0; }
.wish-match-price { color: var(--nokato-ink-soft); white-space: nowrap; }
.wish-match-image { width: 36px; height: 36px; object-fit: cover; flex: none; border-radius: var(--bs-border-radius-sm); background: var(--nokato-surface-raised); }
.portal-product-image-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--nokato-surface); border: 1px solid var(--nokato-border); color: var(--nokato-ink-soft); }
.portal-product-image-fallback svg { width: 1rem; height: 1rem; }
.wish-match-image.portal-product-image-fallback { background: var(--nokato-surface-raised); }
.wish-products-toggle[aria-expanded="true"] svg, [aria-expanded="true"] > .wish-match-count-toggle svg { transform: rotate(90deg); }
.wish-products-toggle svg, .wish-match-count-toggle svg { transition: transform var(--nokato-duration-fast) ease-out; }
.wish-match-count-toggle svg { width: .875rem; height: .875rem; }

.portal-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: var(--nokato-section-gap);
}

@media (min-width: 768px) {
  .portal-metrics {
    grid-template-columns: repeat(3, minmax(0, 17.5rem));
  }

  .seller-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .seller-overview-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.portal-metric {
  --bs-card-spacer-x: 1.125rem;
  --bs-card-spacer-y: 1.125rem;
  border-radius: var(--bs-border-radius);
  box-shadow: var(--nokato-shadow-sm);
}

/* Handoff metric type: 13px/600 label, 31px/650 value, 13px detail and link. */
.portal-metric-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  color: var(--nokato-ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}

.portal-metric-value {
  margin-bottom: 0.25rem;
  font-size: 1.9375rem;
  font-weight: 650;
  line-height: 1.2;
  font-product-variant-numeric: tabular-nums;
}

.portal-metric-detail {
  margin-bottom: 0;
  color: var(--nokato-ink-soft);
  font-size: 0.8125rem;
}

.portal-metric-link {
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Icon chip with a tinted semantic surface (design.md, Shapes). */
.portal-chip {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  place-items: center;
  border-radius: var(--bs-border-radius-sm);
  background: var(--nokato-brand-wash);
  color: var(--nokato-brand-ink);
}

.portal-chip .portal-inline-icon {
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: 0;
}

.portal-chip-lg {
  width: 1.875rem;
  height: 1.875rem;
}

.portal-chip-lg .portal-inline-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

.portal-chip-failure {
  background: var(--nokato-failure-wash);
  color: var(--nokato-failure-ink);
}

.portal-chip-review {
  background: var(--nokato-review-wash);
  color: var(--nokato-review-ink);
}

.portal-chip-ready {
  background: var(--nokato-ready-wash);
  color: var(--nokato-ready-ink);
}

/* Detail pages put every section in one card (design.md, Layout). A divider
   separates the sections, and the last block in a card or section drops its
   bottom margin so the padding, not a stray paragraph margin, sets the edge. */
.portal-section + .portal-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nokato-border);
}

.card-body > :last-child,
.portal-section > :last-child {
  margin-bottom: 0;
}

/* A form-only page, such as Account, keeps its card to a readable measure
   instead of stretching a single field across the whole work area. */
.portal-card-narrow {
  max-width: 32rem;
}

/* Pricing policy form: field, worked-example panel, and the Automatic offers
   switch row, as in the handoff dialog. */
.seller-pricing-policy-label {
  margin-bottom: 0.5625rem;
  color: var(--nokato-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

.seller-pricing-policy-help,
.seller-pricing-policy-section .form-text {
  margin-top: 0.5rem;
  color: var(--nokato-ink-soft);
  font-size: 0.8125rem;
}

.seller-pricing-policy-percent {
  max-width: 12rem;
}

.seller-pricing-policy-percent .input-group-text {
  border-color: var(--nokato-border);
  border-radius: 0 var(--nokato-radius-control) var(--nokato-radius-control) 0;
  background-color: var(--nokato-surface-muted);
  color: var(--nokato-ink-soft);
  font-size: 0.875rem;
}

.seller-pricing-policy-error {
  color: var(--nokato-failure-ink);
}

.seller-pricing-policy-example {
  margin-block: 1.0625rem 1.125rem;
  padding: 1rem;
  border: 1px solid var(--nokato-border);
  border-radius: var(--bs-border-radius);
  background-color: var(--nokato-surface);
  font-size: 0.8125rem;
}

.seller-pricing-policy-eyebrow {
  margin-bottom: 0.625rem;
  color: var(--nokato-ink-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-transform: uppercase;
}

.seller-pricing-policy-rule {
  margin-bottom: 0.625rem;
  color: var(--nokato-ink-soft);
}

.seller-pricing-policy-example-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.375rem 0;
  margin: 0;
}

.seller-pricing-policy-example-rows dt {
  font-weight: 400;
}

.seller-pricing-policy-example-rows dd {
  margin: 0;
  padding-left: 1rem;
  text-align: right;
  white-space: nowrap;
}

.seller-pricing-policy-example-rows .seller-pricing-policy-example-result {
  padding-top: 0.375rem;
  border-top: 1px solid var(--nokato-border);
  font-weight: 600;
}

.seller-pricing-policy-automatic-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-top: 0.6875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--nokato-border);
  border-radius: var(--bs-border-radius);
  transition: border-color var(--nokato-duration-fast) ease-out;
}

.seller-pricing-policy-automatic-row:has(:checked) {
  border-color: var(--nokato-primary);
}

.seller-pricing-policy-automatic-row .form-check-input {
  float: none;
  margin: 0;
}

.seller-pricing-policy-automatic-row .form-check-label {
  font-weight: 600;
  cursor: pointer;
}

.seller-pricing-policy-automatic-row .seller-pricing-policy-help {
  margin-top: 0.3125rem;
}

.seller-pricing-policy-fine-print {
  margin: 0.625rem 0 0;
  color: var(--nokato-ink-soft);
  font-size: 0.75rem;
}

/* The full-page fallback keeps the same order with a gap between groups. */
.portal-card-narrow .seller-pricing-policy-section + .seller-pricing-policy-example,
.portal-card-narrow .seller-pricing-policy-example + .seller-pricing-policy-section {
  margin-top: 1.25rem;
}

.modal-subtitle {
  margin: 0.375rem 0 0;
  color: var(--nokato-ink-soft);
  font-size: 0.8125rem;
}

/* Ordered attention items (design.md, Layout): a tinted icon chip, a title
   with its severity as text, safe detail, and time with the correlation
   identifier. A list wraps naturally where a wide table would scroll. */
.portal-attention {
  padding: 0;
  margin: 0;
  list-style: none;
}

.portal-attention-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--nokato-border);
}

.portal-attention-item:first-child {
  padding-top: 0.25rem;
  border-top: 0;
}

.portal-attention-item:last-child {
  padding-bottom: 0;
}

.portal-attention-copy {
  min-width: 0;
  flex: 1;
}

.portal-attention-title {
  color: var(--nokato-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.portal-attention-title .badge {
  margin-left: 0.25rem;
  vertical-align: 0.0625rem;
}

.portal-attention-detail {
  margin-top: 0.1875rem;
  color: var(--nokato-ink-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.portal-attention-meta {
  margin-top: 0.3125rem;
  color: var(--nokato-ink-faint);
  font-size: 0.75rem;
}

.portal-attention-meta code {
  overflow-wrap: anywhere;
}

/* ---- Authentication pages, outside the rail ------------------------------ */

/* Sign-in and recovery pages carry no privileged navigation: the brand pins
   top-left and the theme selector top-right, independent of the centered
   card. */
.portal-auth-shell {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  /* The top padding clears the pinned brand and theme selector when the card
     is taller than the viewport, such as on a phone. */
  padding: 5rem 1rem var(--nokato-page-padding);
}

.portal-auth-brand {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  max-width: calc(100% - 10.5rem);
}

.portal-auth-theme {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

.portal-auth-card {
  width: 100%;
  max-width: 26rem;
}

.portal-auth-card.seller-auth-card-wide {
  max-width: 32rem;
}

.portal-auth-title {
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ---- Onboarding steps (design.md, Onboarding steps) --------------------- */

/* The progress list sits above the card title in place of the breadcrumb.
   Arrows separate the steps, and the list wraps at phone width instead of
   scrolling sideways. */
.onboarding-progress {
  margin-bottom: 1rem;
}

.onboarding-progress ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  color: var(--nokato-ink);
}

.seller-auth-centered .onboarding-progress ol {
  justify-content: center;
}

.onboarding-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.onboarding-progress-current {
  color: var(--nokato-primary);
  font-weight: 600;
}

.onboarding-progress-later {
  color: var(--nokato-ink-faint);
}

.onboarding-progress-arrow {
  display: inline-flex;
  margin-left: 0.125rem;
  color: var(--nokato-ink-faint);
  font-weight: 400;
}

.onboarding-progress-arrow .portal-inline-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Six single-digit code boxes shrink together on a narrow phone. */
.onboarding-code {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 3rem));
  justify-content: center;
  gap: 0.5rem;
}

.onboarding-code-digit.form-control {
  height: 3.25rem;
  padding: 0;
  font-size: 1.375rem;
  font-weight: 600;
  text-align: center;
  font-product-variant-numeric: tabular-nums;
}

.onboarding-code-digit.form-control.is-invalid {
  padding-right: 0;
  background-image: none;
}

/* An action inside running text, such as Resend code, keeps the text's size
   and line instead of a button box. */
.btn.onboarding-inline-action {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: inherit;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: inherit;
  display: inline;
  border: 0;
  vertical-align: baseline;
}

/* Save or Change sits beside the domain field, and below it at full width on
   a phone, so the field keeps the width that the domain needs. */
.onboarding-domain {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.onboarding-domain .input-group {
  flex: 1 1 auto;
  min-width: 0;
}

/* The suffix matches the field's type size, so both share one height. */
.onboarding-domain .input-group-text {
  font-size: 0.875rem;
}

@media (max-width: 575.98px) {
  .onboarding-domain {
    flex-direction: column;
    align-items: stretch;
  }
}

.onboarding-api-key {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nokato-border);
}

.onboarding-api-key:focus {
  outline: none;
}

/* Two actions share a row when they fit and stack full width when they do
   not, so a long Shopify domain in a button label never widens the card. */
.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.onboarding-actions > * {
  flex: 1 1 auto;
}

.onboarding-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  overflow-wrap: anywhere;
}

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

/* The navigation rail and product actions need room beside the summary. */
.wish-detail-layout {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.wish-detail-summary,
.wish-detail-products {
  min-width: 0;
}

.wish-detail-summary code {
  overflow-wrap: anywhere;
}

.wish-detail-image {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--bs-border-radius);
}

@media (min-width: 1400px) {
  .wish-detail-layout {
    grid-template-columns: 26rem minmax(0, 1fr);
    gap: 1.25rem;
  }
}

.wish-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.wish-summary-facts {
  padding-top: 1rem;
  border-top: 1px solid var(--nokato-border);
}

.wish-summary-facts code {
  font-size: 0.75rem;
}

/* A Product card: thumbnail, facts, and actions on the right at lg. */
.wish-product {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
}

.wish-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-column: 1 / -1;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .wish-product {
    grid-template-columns: 4rem minmax(0, 1fr) auto;
  }

  .wish-product-actions {
    grid-column: auto;
    margin-top: 0;
  }
}

.wish-product-title {
  margin-bottom: 0.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.wish-product-title a {
  color: var(--nokato-ink);
}

.wish-product-title a:hover {
  color: var(--nokato-primary);
}

.wish-product-title .portal-inline-icon {
  color: var(--nokato-primary);
}

.wish-product-meta {
  margin-bottom: 0;
  color: var(--nokato-ink-soft);
  font-size: 0.8125rem;
}

.wish-product-offer {
  margin: 0.75rem 0 0;
}

/* Seller handoff compositions consume the existing semantic token adapter. */
.portal-page-heading { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.portal-page-heading .portal-page-title { margin-bottom: 0; }
.portal-page-heading:has(+ .portal-page-subtitle) { margin-bottom: .5rem; }
.portal-page-subtitle { margin-bottom: 1.25rem; color: var(--nokato-ink-soft); }
.portal-nav-label { margin-bottom: .5rem; }
.portal-store-dot { width: .5rem; height: .5rem; border-radius: 50%; margin-left: auto; background: var(--nokato-ready-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nokato-ready-ink) 25%, transparent); }
.portal-store-dot-review { background: var(--nokato-review-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nokato-review-ink) 25%, transparent); }
.portal-store-dot-failure { background: var(--nokato-failure-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nokato-failure-ink) 25%, transparent); }
.seller-overview-charts { margin-bottom: 1.25rem; }
.seller-overview-tiles { margin-bottom: 1.25rem; }
.overview-chart { display: block; width: 100%; height: 140px; overflow: visible; margin-top: 1.125rem; }
/* The handoff line has no visible markers; each transparent dot keeps its week's tooltip as a hover target. */
.chart-dot { fill: none; stroke: transparent; stroke-width: 12; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.chart-grid { fill: none; stroke: var(--nokato-border); stroke-dasharray: 3 4; }
.chart-baseline { fill: none; stroke: var(--nokato-border); }
.chart-bar { fill: var(--nokato-primary); }
.chart-line { fill: none; stroke: var(--nokato-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-area { fill: var(--nokato-brand-wash); }
.chart-labels { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); text-align: center; margin-top: .375rem; font-size: .6875rem; color: var(--nokato-ink-faint); }
.portal-empty { padding: 1.25rem 0; text-align: center; }
.portal-empty p { max-width: 28rem; margin-inline: auto; }
.portal-empty .h5 { font-size: .9375rem; }
.portal-offer-tabs { display: inline-flex; padding: .375rem; gap: .25rem; background: var(--nokato-surface-muted); border-radius: var(--bs-border-radius); }
.portal-offer-tabs .nav-link { color: var(--nokato-ink-soft); border-radius: var(--nokato-radius-control); font-size: .8125rem; font-weight: 600; }
.portal-offer-tabs .nav-link.active { background: var(--nokato-surface-raised); color: var(--nokato-ink); box-shadow: var(--nokato-shadow-sm); }
.portal-offer-tabs .badge { color: var(--nokato-primary); background: var(--nokato-brand-wash); }
.portal-offer-table td { overflow-wrap: anywhere; }
.store-identity { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; }
.store-connection { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.seller-pricing-policy-modal { --bs-modal-width: 36rem; }
.wish-summary-facts { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .5rem 1rem; }
.wish-summary-facts dt { font-weight: 400; color: var(--nokato-ink-soft); }
.wish-summary-facts dd { margin: 0; }
.wish-text { font-size: .9375rem; margin-bottom: 1.125rem; }
.wish-product-prices { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .625rem 0 .75rem; }
.wish-product-prices span { display: block; color: var(--nokato-ink-soft); font-size: .75rem; }
.wish-product-prices p { margin: 0; }
.wish-product-prices strong { display: block; font-weight: 600; }
.modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.modal-content > .wish-offer-form { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.wish-offer-form .modal-body { flex: 1 1 auto; }
@media (max-width: 991.98px) {
 .portal-page-title { font-size: 1.75rem; }
 .portal-content { padding: 1rem; }
 .portal-offer-tabs { background: transparent; padding: 0; gap: .5rem; display: flex; flex-wrap: wrap; }
 .portal-offer-tabs .nav-link { background: var(--nokato-surface-raised); border: 1px solid var(--nokato-border); border-radius: var(--bs-border-radius-pill); }
 .portal-offer-tabs .nav-link.active { background: var(--nokato-primary); color: var(--nokato-surface-raised); border-color: var(--nokato-primary); }
 .portal-offer-tabs .active .badge { background: var(--nokato-surface-raised); }
}
@media (max-width: 575.98px) {
 .chart-labels span:not(:first-child):not(:nth-child(4)):not(:last-child) { visibility: hidden; }
 .store-identity { flex-direction: column; gap: 1rem; }
 .store-connection { align-items: flex-start; }
 .modal { --bs-modal-margin: 1rem; }
 .modal-header, .modal-body { padding: 1rem; }
 .modal-footer { padding: .75rem; }
}
* { scrollbar-color: var(--nokato-border-strong) var(--nokato-surface); scrollbar-width: auto; }
::-webkit-scrollbar { width: .75rem; height: .75rem; }
::-webkit-scrollbar-thumb { background: var(--nokato-border-strong); border: 3px solid var(--nokato-surface); border-radius: var(--bs-border-radius-pill); }
::-webkit-scrollbar-track { background: var(--nokato-surface); }
@media (forced-colors: active) { * { scrollbar-color: auto; } }

[data-bs-theme="dark"] .portal-nav { --nokato-ready-ink: #7de0c0; }

.portal-store-dot-neutral { background: var(--nokato-ink-faint); box-shadow: none; }
.portal-toast { --bs-toast-bg: #142028; --bs-toast-color: #fff; --bs-toast-border-color: #24323a; }
.portal-toast .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.store-cards { display: grid; gap: 1rem; max-width: 64rem; }
.store-facts { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: .625rem 1.5rem; margin-bottom: 0; align-items: baseline; }
.store-facts dt { font-weight: 600; }
.store-facts dd { margin: 0; overflow-wrap: anywhere; }
.store-identity h2 { overflow-wrap: anywhere; font-weight: 600; }
.store-cards .form-switch { display: flex; align-items: center; gap: .75rem; padding-left: 0; }
.store-cards .form-switch .form-check-input { float: none; margin-left: 0; flex-shrink: 0; }
.store-cards .form-check-label { font-weight: 500; }
.store-cards .form-check-label > span { font-size: .8125rem; font-weight: 400; }
.store-cards .card-body > h2.h5, .store-cards .card-body h2.h5 { line-height: 1.45; }
.store-cards #store-api-key-help { font-size: .8125rem; }
.store-cards #store-enabled-help { display: none; }
@media (max-width: 991.98px) { .card { --bs-card-spacer-x: 1rem; --bs-card-spacer-y: 1rem; } .store-facts { grid-template-columns: minmax(0, 66%) minmax(0, 1fr); gap: .75rem .5rem; } }

@media (max-width: 575.98px) {
 .store-cards #store-seller-pricing-policy-heading { font-size: 1rem; white-space: nowrap; }
 #store-seller-pricing-policy-edit { font-size: .75rem; padding: .375rem .625rem; white-space: nowrap; }
}

.portal-offer-tabs .nav-link:not(.active) .badge { background: var(--nokato-surface-muted); color: var(--nokato-ink-soft); }

.table .wish-products-toggle { width: 1.75rem; min-height: 1.75rem; height: 1.75rem; border-radius: var(--bs-border-radius-sm); color: var(--nokato-ink-soft); }

/* Make offer dialog: Product header, bordered price summary, and expiry range. */
.offer-modal { --bs-modal-width: 34rem; }
.offer-product { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.125rem; }
.offer-product-image { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: var(--bs-border-radius); }
.offer-product-variant { display: block; color: var(--nokato-ink-soft); font-size: .8125rem; }
.offer-summary { margin-bottom: 1.125rem; border: 1px solid var(--nokato-border); border-radius: var(--bs-border-radius); }
.offer-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .625rem .875rem; }
.offer-summary > div + div { border-top: 1px solid var(--nokato-border); }
.offer-summary dt { color: var(--nokato-ink-soft); font-weight: 400; }
.offer-summary dd { margin: 0; font-weight: 600; white-space: nowrap; }
.offer-feedback { margin: .375rem 0 0; color: var(--nokato-ink-soft); font-size: .8125rem; }
.offer-expiry { margin-top: 1.125rem; }
.offer-expiry-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .5rem; }
.offer-expiry-label { font-weight: 600; }
.offer-expiry-value { color: var(--nokato-ink-soft); font-size: .8125rem; }
.offer-expiry-value strong { color: var(--nokato-ink); font-weight: 600; }
.offer-expiry-bounds { display: flex; justify-content: space-between; margin-top: .375rem; color: var(--nokato-ink-faint); font-size: .75rem; }
.offer-expiry .form-range { --offer-range-fill: 100%; height: 1.25rem; }
.offer-expiry .form-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--nokato-primary) var(--offer-range-fill), var(--nokato-surface-muted) var(--offer-range-fill)); }
.offer-expiry .form-range::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--nokato-primary) var(--offer-range-fill), var(--nokato-surface-muted) var(--offer-range-fill)); }
.offer-expiry .form-range::-webkit-slider-thumb { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; border: 3px solid var(--nokato-surface-raised); background: var(--nokato-primary); box-shadow: var(--nokato-shadow-sm); }
.offer-expiry .form-range::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border: 3px solid var(--nokato-surface-raised); background: var(--nokato-primary); box-shadow: var(--nokato-shadow-sm); }

/* Offer and Sale details dialogs: Product head, then a 13rem label column. */
.portal-detail-modal { --bs-modal-width: 38rem; }
.portal-detail-modal-wide { --bs-modal-width: 40rem; }
.portal-detail-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.125rem; }
.portal-detail-image { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: var(--bs-border-radius); }
.portal-detail-title { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.portal-detail-product-variant { margin: .125rem 0 0; color: var(--nokato-ink-soft); font-size: .8125rem; }
.portal-detail-ids { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: .5rem 0 0; }
.portal-detail-facts { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: .625rem 1.25rem; margin: 0; }
.portal-detail-facts dt { color: var(--nokato-ink-soft); font-weight: 400; }
.portal-detail-facts dd { margin: 0; }
.portal-detail-facts strong { font-weight: 600; }
.portal-detail-section { margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid var(--nokato-border); }
.portal-detail-section-title { margin-bottom: .25rem; font-size: .875rem; font-weight: 600; }
.portal-detail-section p:last-child { margin-bottom: 0; }
.portal-detail-note { margin: 1rem 0 0; color: var(--nokato-ink-soft); font-size: .75rem; }
@media (max-width: 575.98px) { .portal-detail-facts { grid-template-columns: minmax(0, 1fr); gap: .125rem; } .portal-detail-facts dd { margin-bottom: .5rem; } }
.portal-product-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; color: var(--nokato-ink-soft); font-size: .75rem; }
.portal-offer-table strong { font-weight: 600; }

/* Seller data grids mirror the Admin Wish Market directory grid
   (admin_portal/design.md): one card per grid, filters behind Show filters at
   1024px and below, explicit Apply filters, a stronger header rule, canvas row
   hover, sort arrows, and stacked label-value cards at 760px and below. */
.portal-grid-table { margin: 0; }
.portal-grid-table > :not(caption) > * > * { padding: .625rem .75rem; }
.portal-grid-table > thead > tr > th { border-bottom-color: var(--nokato-border-strong); }
.portal-grid-table > tbody > tr > * { transition: box-shadow var(--nokato-duration-fast) ease-out; }
.portal-grid-table > tbody > tr:hover > * { --bs-table-bg-state: var(--nokato-background); }
.portal-grid-table > tbody > tr:has([data-select-row]:checked) > * { --bs-table-bg-state: var(--nokato-brand-wash); }
.portal-grid-filters ~ .table-responsive, .portal-grid-filters ~ .portal-empty { margin-top: 1rem; }
.portal-sort { display: inline-flex; align-items: center; gap: .375rem; color: inherit; }
.portal-sort:hover { color: inherit; text-decoration: none; }
.portal-sort .portal-inline-icon { width: .8125rem; height: .8125rem; color: var(--nokato-ink-faint); vertical-align: 0; }
.portal-sort-active .portal-inline-icon { color: var(--nokato-primary); }
.portal-grid-filters-toggle { display: none; align-self: flex-start; min-height: 2.75rem; margin-bottom: 1rem; }
.portal-grid-filters-toggle > span { display: inline-flex; align-items: center; gap: .5rem; }
.portal-grid-filters-toggle .portal-toggle-open, .portal-grid-filters-toggle[aria-expanded="true"] .portal-toggle-closed { display: none; }
.portal-grid-filters-toggle[aria-expanded="true"] .portal-toggle-open { display: inline-flex; }
.portal-grid-filters.collapse { display: block; }
.portal-grid-filters .portal-field { flex: 0 1 auto; max-width: none; }
.portal-grid-filters .portal-field-wide { width: 13.5rem; }
.portal-grid-filters .form-select { width: auto; max-width: 100%; }
.portal-grid-filters .portal-filter-action .btn-outline-secondary { min-height: 0; }
.portal-grid-filters [data-filter-clear][hidden] { display: none; }
.portal-grid-sort { display: none; }
@media (max-width: 1024px) {
 html.seller-js .portal-grid-filters-toggle { display: inline-flex; }
 html.seller-js .portal-grid-filters.collapse:not(.show) { display: none; }
}
@media (max-width: 760px) {
 .portal-grid-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .portal-grid-table, .portal-grid-table tbody, .portal-grid-table tr, .portal-grid-table td, .portal-grid-table th { display: block; width: 100%; max-width: none; }
 .portal-offer-table > tbody > tr, .wish-match-group { padding: .5rem; margin-bottom: .75rem; border: 1px solid var(--nokato-border); border-radius: var(--bs-border-radius); }
 .portal-grid-table > tbody > tr > td, .portal-grid-table > tbody > tr > th { border: 0; overflow-wrap: anywhere; text-align: right; }
 .portal-grid-table > tbody > tr > [data-label]::before { float: left; margin-right: .75rem; color: var(--nokato-ink-soft); font-weight: 400; content: attr(data-label); }
 .portal-grid-table > tbody > tr:hover > * { --bs-table-bg-state: transparent; }
 .portal-grid-table .portal-product-sub { justify-content: flex-end; }
 .portal-grid-filters .portal-field, .portal-grid-filters .portal-field-wide, .portal-grid-filters .form-select { width: 100%; }
 .portal-grid-sort { display: block; }
 .wish-match-group > .wish-match-main > * { --bs-table-bg-state: transparent; }
 .wish-match-main th[scope="row"] { max-width: none; }
 .wish-match-main .wish-products-toggle { display: none; }
 .wish-match-main .wish-match-check:not(:has(input)) { display: none; }
 .wish-match-main td[data-label="Products"] .portal-count { display: none; }
 .wish-match-count-toggle { display: inline-flex; align-items: center; gap: .375rem; }
 .wish-match-relative { display: inline; margin-left: .375rem; }
 .wish-match-product-row > td { padding: 0; }
 .wish-match-products { margin: .25rem .75rem .5rem; }
 .wish-match-product { flex-wrap: wrap; row-gap: .25rem; text-align: left; }
 .wish-match-product .wish-match-image { display: none; }
 .wish-match-product-name { flex-basis: 100%; }
 .wish-match-price { flex: 1; color: var(--nokato-ink); }
}