/* Brand typefaces, self-hosted.
 *
 * These were declared in --admin-serif / --admin-sans from the start but never delivered: there was
 * no @font-face, no stylesheet link and no font files, so every rule silently fell through to
 * Georgia and Arial. The whole admin site rendered in fallbacks, and serif and sans landed on two
 * faces that were never meant to sit together.
 *
 * Self-hosted rather than linked from Google: this is an internal tool behind a login, and a
 * third-party request on every page load buys nothing here. Both files are the latin subset only
 * (~64KB total). Both families are SIL OFL — see fonts/OFL.txt.
 *
 * One @font-face per weight, mirroring exactly what the Google CSS API serves. The files are
 * variable, so several weights share one URL and the browser downloads each file once; pinning each
 * block to a single weight is what makes it pick a real weight off the axis rather than synthesising
 * a faux bold. font-display: swap so text is readable before the font arrives. */

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/jost-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/jost-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/jost-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/cormorant-garamond-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/cormorant-garamond-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --admin-navy: #001a3d;
    --admin-navy-soft: #123058;
    --admin-gold: #d1b371;
    --admin-gold-light: #fcd68b;
    --admin-slate: #728aa5;
    --admin-gray: #544f53;
    --admin-cream: #e9e5e1;
    --admin-paper: #f7f3ed;
    --admin-white: #fffdf9;
    --admin-ui-gold: #c9a96e;
    --admin-ui-gold-hover: #e8d5b0;
    --admin-ui-text: #2a2015;
    --admin-ui-muted: #9a8c78;
    --admin-ui-border: #ede5d8;
    --admin-ui-field: #f7f3ec;
    --admin-shadow: none;
    --admin-border: rgba(0, 26, 61, 0.1);
    --admin-serif: "Cormorant Garamond", Georgia, serif;
    --admin-sans: "Jost", Arial, sans-serif;
}

html {
    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.login-body,
.login-body *,
.login-body *::before,
.login-body *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--admin-sans);
}

.login-body a {
    text-decoration: none;
}

.login-body {
    background: #f7f3ec;
    min-height: 100vh;
}

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 480px;
    background: #1e2438;
    padding: 56px 48px 40px;
}

.login-logo {
    display: block;
    height: 28px;
    width: auto;
    margin: 0 auto 28px;
    filter: brightness(0) invert(1);
}

.login-eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c9a96e;
    margin-bottom: 12px;
}

.login-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 40px;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-field {
    margin-bottom: 24px;
}

.login-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 10px;
}

.login-field input[type="email"],
.login-field input[type="password"],
.login-field input[type="text"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px 16px;
    font-family: var(--admin-sans);
    font-size: 14px;
    color: #ffffff;
    outline: none;
    transition: border-color 0.2s;
}

.login-field input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.login-field input:focus {
    border-color: #c9a96e;
}

.login-password-wrap {
    position: relative;
}

.login-password-wrap input {
    padding-right: 48px;
}

.login-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.login-password-toggle:hover,
.login-password-toggle.active {
    color: rgba(255, 255, 255, 0.6);
}

.login-forgot {
    font-size: 13px;
    color: #c9a96e;
    text-decoration: none;
    margin-bottom: 32px;
    align-self: flex-start;
}

.login-forgot:hover {
    text-decoration: underline;
}

.login-submit {
    width: 100%;
    background: #c9a96e;
    border: none;
    padding: 18px;
    font-family: var(--admin-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1e2438;
    cursor: pointer;
    transition: background 0.2s;
}

.login-submit:hover {
    background: #b8963e;
}

.login-submit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
}

.login-success-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 20px;
    padding: 20px 22px;
    background: rgba(201, 169, 110, 0.12);
    border: 1px solid rgba(201, 169, 110, 0.35);
}

.login-success-message {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
}

.login-encryption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
}

.admin-shell {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f7f3ec;
    color: var(--admin-ui-text);
    font-family: var(--admin-sans);
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #ffffff;
    border-bottom: 1px solid var(--admin-ui-border);
    padding: 0;
}

.admin-topbar .container {
    position: relative;
    max-width: none;
    width: 100%;
    padding: 0 32px;
}

.admin-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 64px;
    padding: 0;
}

.admin-topbar__left {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 10px;
}

.admin-topbar__right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: 10px;
}

.admin-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid var(--admin-ui-border);
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.18s ease;
}
.admin-sidebar.collapsed { width: 64px; }
.admin-sidebar .sidebar-toggle {
    align-self: flex-end;
    margin: 0 14px 6px;
    background: none;
    border: 1px solid transparent;
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--admin-ui-muted);
    border-radius: 4px;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.2s;
    flex-shrink: 0;
}
.admin-sidebar .sidebar-toggle:hover {
    background: #f7f3ec;
    color: #a07840;
    border-color: var(--admin-ui-border);
}
.admin-sidebar .sidebar-toggle svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2;
}
.admin-sidebar.collapsed .sidebar-toggle {
    align-self: center;
    margin: 0 auto 6px;
    transform: rotate(180deg);
}
.admin-sidebar .sidebar-divider {
    border: none;
    border-top: 1px solid var(--admin-ui-border);
    margin: 12px 20px;
    height: 0;
}
.admin-sidebar.collapsed .sidebar-divider {
    margin: 10px 12px;
}
.admin-sidebar .sidebar-section {
    padding: 0 14px;
}
.admin-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 400;
    color: #5a4e3a;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
}
.admin-sidebar .sidebar-link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    flex-shrink: 0;
}
.admin-sidebar .sidebar-link-label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-sidebar .sidebar-link.active,
.admin-sidebar .sidebar-link:hover {
    background: #f7f3ec;
    color: #a07840;
}
.admin-sidebar.collapsed .sidebar-section {
    padding: 0 8px;
}
.admin-sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 9px 0;
}
.admin-sidebar.collapsed .sidebar-link .sidebar-link-label {
    display: none;
}

.admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.admin-brand__logo {
    display: block;
    width: 112px;
    height: auto;
}

.admin-brand__wordmark {
    color: #a07840;
    font-family: var(--admin-serif);
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
}

.admin-brand__tag {
    color: var(--admin-ui-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-session {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.admin-session__meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-session__email {
    color: #5a4e3a;
    font-size: 12px;
}

.admin-session__signout {
    color: var(--admin-ui-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.admin-session__signout:hover {
    color: var(--admin-ui-text);
}

.admin-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 32px 32px 40px;
    overflow-x: hidden;
}

.admin-surface,
.admin-shell .card {
    background: #ffffff;
    border: 1px solid var(--admin-ui-border);
    border-radius: 0;
    box-shadow: var(--admin-shadow);
    overflow: hidden;
}

.admin-kicker {
    margin-bottom: 16px;
    color: var(--admin-ui-gold);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.admin-page-title,
.admin-tile__title,
.admin-shell h2,
.admin-shell h3 {
    margin: 0;
    color: var(--admin-ui-text);
    font-family: var(--admin-serif);
    font-weight: 400;
    letter-spacing: 0;
}

.admin-page-copy,
.admin-tile__text {
    margin: 0;
    color: #5a4e3a;
    font-size: 14px;
    line-height: 1.65;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
}

/* Groups the right-hand modules so they stack in that column. Without it the grid auto-places
   each article in turn, and a third one wraps to the left column under Catalog rather than
   continuing down the right — which is the layout, not a styling detail. */
.admin-dashboard-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.admin-module {
    padding: 12px 32px 32px;
}

.admin-module__items {
    display: flex;
    flex-direction: column;
    gap: 52px;
}

.admin-module__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-module__item:last-child {
    padding-bottom: 0;
}

.admin-module__copy {
    min-width: 0;
    flex: 1 1 auto;
}

.admin-module__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--admin-ui-border);
}

.admin-module__title {
    margin: 0;
    color: var(--admin-ui-text);
    font-family: var(--admin-serif);
    /* 22px to match Rempla.Web's .dash-section-title, the same role on the customer side. It was
       26px, which is the size the app reserves for a whole-page title — at Cormorant's low
       x-height those four pixels read as a different treatment, not a bigger one. */
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
}

.admin-module__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
}

.admin-module__actions--grouped {
    flex-wrap: wrap;
}

.admin-module__meta {
    padding-top: 0;
}

.admin-module__meta .admin-note {
    margin: 0;
}

.admin-note--block {
    margin-top: 12px;
}

.admin-tile {
    padding: 32px;
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

.admin-tile__title {
    font-size: 26px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--admin-ui-border);
}

.admin-tile__text {
    margin-bottom: 24px;
}

.admin-tile--muted {
    background: #fcfaf6;
}

/* Sentence case, matching the customer app. Both sites uppercase buttons and the small eyebrow
   labels above a section — but the app leaves descriptive text alone, and this class carries whole
   sentences ("1 active product(s) cannot be sold — no vendor offer is selected and available"),
   which set in caps are shouted rather than read. Size and weight follow .gift-category-blurb. */
.admin-note,
.admin-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--admin-ui-muted);
    font-size: 12.5px;
    font-weight: 400;
    text-decoration: none;
}

.admin-inline-link:hover {
    color: var(--admin-ui-text);
}

.admin-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.admin-page-title {
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    line-height: 0.98;
    margin-bottom: 6px;
}

.admin-page-copy {
    max-width: 780px;
}

.admin-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.admin-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-detail-actions form {
    margin: 0;
}

.admin-detail-note {
    margin-bottom: 20px;
}

.admin-breadcrumb {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.admin-breadcrumb__link,
.admin-breadcrumb__current {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.admin-breadcrumb__link {
    color: var(--admin-ui-muted);
    text-decoration: none;
}

.admin-breadcrumb__link:hover {
    color: var(--admin-ui-text);
}

.admin-breadcrumb__current {
    color: var(--admin-ui-gold);
}

.admin-breadcrumb__divider {
    display: inline-block;
    color: var(--admin-ui-muted);
    font-size: 12px;
    line-height: 1;
    transform: translateY(-0.02em);
}

.admin-password-form {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.admin-password-form__field {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-password-form__actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 auto;
}

.admin-password-form__actions .btn {
    white-space: nowrap;
}

.admin-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.admin-invite-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-invite-btn {
    padding: 0.9rem 1.35rem;
    box-shadow: 0 10px 20px rgba(201, 169, 110, 0.18);
}

.admin-invite-btn:hover,
.admin-invite-btn:focus {
    box-shadow: 0 12px 22px rgba(201, 169, 110, 0.22);
}

.admin-invite-btn--active {
    background: #b8963e !important;
    border-color: #b8963e !important;
}

.admin-directory-switcher {
    gap: 10px;
    margin-bottom: 0;
}

.admin-directory-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.admin-directory-toggle__links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.6rem 0.95rem;
    background: #ffffff;
    border: 1px solid var(--admin-ui-border);
    border-radius: 999px;
}

.admin-directory-toggle__link {
    color: #5a4e3a;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    text-underline-offset: 0.35rem;
}

.admin-directory-toggle__link:hover {
    color: var(--admin-ui-text);
}

.admin-directory-toggle__link.is-active {
    color: var(--admin-ui-text);
    text-decoration: underline;
    text-decoration-color: var(--admin-ui-gold);
    text-decoration-thickness: 2px;
}

.admin-directory-toggle__divider {
    width: 1px;
    height: 14px;
    background: var(--admin-ui-border);
}

.admin-shell .nav-pills .nav-link {
    border-radius: 999px;
    border: 1px solid var(--admin-ui-border);
    background: #ffffff;
    color: #5a4e3a;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 0.56rem 0.95rem;
    text-transform: uppercase;
}

.admin-shell .nav-pills .nav-link.active,
.admin-shell .nav-pills .show > .nav-link {
    background: var(--admin-ui-gold);
    border-color: var(--admin-ui-gold);
    color: #111827;
}

.admin-alert {
    border-radius: 4px;
    padding: 14px 18px;
    box-shadow: none;
}

.admin-toolbar {
    align-items: center;
}

.admin-toolbar .nav {
    flex-wrap: wrap;
    gap: 10px;
}

/* Thumbnail + text, used by the vendor catalog grid and the offer editor's bind picker. */
.admin-media {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Without this a long vendor product name pushes the row's action off the end. */
.admin-media__body {
    min-width: 0;
}

.admin-media__body > * {
    overflow-wrap: anywhere;
}

.admin-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Holds the space when a product has no image, so rows stay aligned. Vendor images arrive only
   with a catalog refresh, so every row looks like this until one runs. */
/* A managed image slot on the product editor: the type as a header, then the picture beside its
   two acquisition controls. */
/* A labelled rule between two alternative actions — upload a file, or pull one from the vendor.
   The label sits in a span so the rules can be ::before/::after and stay centred whatever the
   label says. Uppercase follows the same rule as .admin-kicker: small labels are set in caps,
   sentences are not. */
.admin-or {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--admin-ui-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-or::before,
.admin-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--admin-ui-border);
}

.admin-image-slot + .admin-image-slot {
    border-top: 1px solid var(--admin-hairline, #e6e0d5);
    margin-top: 16px;
    padding-top: 16px;
}

/* Uniform width so Upload and Pull line up on both edges rather than only the right. Remove is no
   longer one of them — it moved under the image and stopped being a button of this weight. */
.admin-shell .admin-image-slot__btn {
    min-width: 96px;
}

/* Deliberately quiet. Removing an image is recoverable — the file stays on disk and the slot can be
   refilled by upload or pull — so it should not compete with the two actions that add one. */
.admin-shell .admin-image-slot__remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--admin-ui-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-shell .admin-image-slot__remove:hover:not(:disabled),
.admin-shell .admin-image-slot__remove:focus-visible:not(:disabled) {
    color: var(--admin-ui-text);
    text-decoration: underline;
}

/* Present but plainly unusable: an empty slot has nothing to remove. Kept in place rather than
   hidden so the row does not reflow as images come and go. */
.admin-shell .admin-image-slot__remove:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* The vendor offers table sits inside the product editor, where an unstyled link and a full-size
   price read as two different type systems from the badges and muted cells around them — the row
   looked like three fonts rather than one. These pull every cell onto one scale. The link keeps the
   default anchor behaviour but not the default anchor colour: the arrow at the end of the row is the
   affordance that says "this goes somewhere", so the vendor name does not need to shout it too. */
.admin-shell .admin-offer-vendor {
    color: var(--admin-ui-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.admin-shell .admin-offer-vendor:hover,
.admin-shell .admin-offer-vendor:focus-visible {
    color: var(--admin-ui-text);
    text-decoration: underline;
}

/* Our SKU as a second line under the row's name — under the vendor in the offers table, under the
   product in the products grid. Quiet because it is an identifier one reads when looking for it, not
   a value one scans down the table. Shared so the two tables cannot drift apart visually. */
.admin-shell .admin-sku-line {
    color: var(--admin-ui-muted);
    font-size: 12px;
    margin-top: 0.15rem;
}

/* Regular weight, not the 500 the vendor name carries: Jost's Medium reads as bold at this size, and
   digits sit at full lining height, so a price set to match the row's identity out-shouts it. The
   vendor is what identifies the row; the price is a value you read off it.
   Tabular figures so prices align down the column when there is more than one offer. */
.admin-shell .admin-offer-price {
    font-size: 13px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* The margin suggestion under List price. Quiet: it is advice about a field, not a second field, and
   it sits directly beneath the input it refers to. */
.admin-shell .admin-margin-hint {
    color: var(--admin-ui-muted);
    font-size: 12px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-shell .admin-margin-hint strong {
    color: var(--admin-ui-text);
    font-weight: 500;
}

/* Same quiet text-action treatment as the image slot's Remove: applying a suggestion is trivially
   reversible — the operator can retype the price — so it should not carry a button's weight. */
.admin-shell .admin-margin-hint__apply {
    padding: 0;
    border: 0;
    background: none;
    color: var(--admin-ui-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-shell .admin-margin-hint__apply:hover,
.admin-shell .admin-margin-hint__apply:focus-visible {
    color: var(--admin-ui-text);
    text-decoration: underline;
}

/* Warns rather than merely reports: a price off policy is the thing this hint exists to surface. */
.admin-shell .admin-margin-hint__actual:not(:empty) {
    color: #9a6b1f;
}

.admin-thumb--lg {
    width: 64px;
    height: 64px;
}

.admin-thumb--empty {
    display: inline-block;
    border: 1px dashed var(--admin-hairline, #e6e0d5);
    background: #faf8f4;
}

/* Vendor-product bind picker on the offer editor. A dropdown rather than a <select>, because the
   options carry thumbnails and a native <option> cannot hold an image. */
/* The toggle displays a chosen value, not a label, so it opts out of the admin button typography
   (uppercase, tracked, semibold) and reads like the form control it stands in for. The .btn in the
   selector is for specificity: `.admin-shell .btn` is defined later in this file and would
   otherwise win the tie on source order. */
.admin-shell .admin-bind-picker__toggle.btn {
    /* Deliberately mirrors `.admin-shell .form-control` — border, radius, field background, font —
       so it lines up with the inputs beside it. Vertical padding is trimmed to offset the
       thumbnail, which is taller than a line of text; the pair lands on the same height. */
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--admin-ui-border);
    border-radius: 4px;
    background: var(--admin-ui-field);
    color: var(--admin-ui-text);
    font-family: var(--admin-sans);
    font-size: 0.82rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.45rem 0.9rem;
    /* `.form-control`'s own height, in its own terms: one line box + its 0.7rem vertical padding
       + borders. Stated this way so the two stay equal if those values are ever retuned, and so
       the empty and chosen states are the same height as each other. */
    min-height: calc(1.5em + 1.4rem + 2px);
}

/* The closed state is an identity, not a listing: thumbnail and title only. SKU, category and
   price stay in the open menu, where they are what you choose between. */
.admin-bind-picker__toggle .admin-thumb {
    width: 26px;
    height: 26px;
}

.admin-bind-picker__toggle .admin-media {
    gap: 8px;
}

/* Dropdown items are values too. */
.admin-shell .admin-bind-picker__menu .dropdown-item {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    font-weight: 400;
}

.admin-bind-picker__menu {
    width: 100%;
    padding: 0;
}

/* The list scrolls, not the menu — otherwise the filter box scrolls away with the results it
   filters. The menu is now just the frame around a pinned header and a scrolling body. */
.admin-bind-picker__list {
    max-height: 360px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-bind-picker__search {
    padding: 8px;
    border-bottom: 1px solid var(--admin-hairline, #e6e0d5);
}

.admin-bind-picker__menu .dropdown-item {
    padding: 8px 12px;
    white-space: normal;
}

.admin-bind-picker__menu .dropdown-item + .dropdown-item,
.admin-bind-picker__menu li + li .dropdown-item {
    border-top: 1px solid var(--admin-hairline, #e6e0d5);
}

/* The row this offer is currently bound to. Marked by style rather than a caption: from inside the
   editor it is not "taken", it is the answer. The left edge carries it so the marker survives a
   long product name wrapping. */
.admin-shell .admin-bind-picker__menu .dropdown-item.admin-bind-picker__item--current {
    background: #f3efe6;
    box-shadow: inset 3px 0 0 var(--admin-gold, #d1b371);
    font-weight: 600;
}

/* A disabled row still has to be readable — it is explaining which offer already holds the item. */
.admin-bind-picker__menu .dropdown-item:disabled {
    opacity: 1;
    background: #faf8f4;
}

/* "On REM-000100" is a fixed fact about the row; it must not wrap into the product name. */
.admin-bind-picker__menu .dropdown-item > .ms-auto {
    flex-shrink: 0;
    white-space: nowrap;
    padding-left: 12px;
}

/* Paired with .col, which does the growing — this only sets the floor where the search stops
   being usable, at which point the toolbar wraps instead of squeezing further. Don't set `flex`
   here: a basis of `auto` would resolve against the `width: 100%` that .row gives every column,
   and the search would take the whole row. */
.admin-toolbar__search {
    min-width: 220px;
}

.admin-shell .card-body {
    padding: 32px;
}

.admin-shell .card-body > .h5 {
    font-family: var(--admin-serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--admin-ui-text);
    margin-bottom: 24px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--admin-ui-border);
}

.admin-shell .btn {
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.78rem 1.2rem;
    text-transform: uppercase;
    box-shadow: none;
}

.admin-shell .btn-sm {
    padding: 0.62rem 0.95rem;
}

.admin-shell .btn-dark,
.admin-shell .btn-success,
.admin-shell .btn-warning {
    background: var(--admin-ui-gold);
    border-color: var(--admin-ui-gold);
    color: #111827;
}

.admin-shell .btn-dark:hover,
.admin-shell .btn-success:hover,
.admin-shell .btn-warning:hover,
.admin-shell .btn-dark:focus,
.admin-shell .btn-success:focus,
.admin-shell .btn-warning:focus {
    background: var(--admin-ui-gold-hover);
    border-color: var(--admin-ui-gold-hover);
    color: #111827;
}

.admin-shell .btn-outline-dark,
.admin-shell .btn-outline-secondary,
.admin-shell .btn-outline-warning,
.admin-shell .btn-outline-danger,
.admin-shell .btn-outline-success {
    background: transparent;
    color: var(--admin-ui-muted);
    border-color: var(--admin-ui-border);
}

.admin-shell .btn-outline-danger {
    color: #8a2c1e;
    border-color: rgba(138, 44, 30, 0.18);
}

.admin-shell .btn-outline-dark:hover,
.admin-shell .btn-outline-secondary:hover,
.admin-shell .btn-outline-warning:hover,
.admin-shell .btn-outline-danger:hover,
.admin-shell .btn-outline-success:hover,
.admin-shell .btn-link:hover {
    background: var(--admin-ui-field);
    color: var(--admin-ui-text);
}

.admin-shell .btn-link {
    color: var(--admin-ui-muted);
    text-decoration: none;
}

.admin-shell .form-control,
.admin-shell .form-select {
    border: 1px solid var(--admin-ui-border);
    border-radius: 4px;
    padding: 0.7rem 0.9rem;
    background: var(--admin-ui-field);
    color: var(--admin-ui-text);
    font-family: var(--admin-sans);
    font-size: 0.82rem;
}

.admin-shell .form-control:focus,
.admin-shell .form-select:focus {
    border-color: var(--admin-ui-gold);
    box-shadow: 0 0 0 0.22rem rgba(201, 169, 110, 0.12);
}

.admin-toolbar .form-control,
.admin-toolbar .form-select {
    background: #ffffff;
}

.admin-shell .form-label,
.admin-shell .form-check-label {
    color: var(--admin-ui-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.admin-shell .form-check-input:checked {
    background-color: var(--admin-navy);
    border-color: var(--admin-navy);
}

.admin-shell code {
    color: #5a4e3a;
    background: var(--admin-ui-field);
    border-radius: 4px;
    padding: 0.18rem 0.35rem;
}

.admin-surface--table .table-responsive {
    padding: 0;
}

.admin-shell .table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: #fcfaf6;
}

.admin-shell .table > :not(caption) > * > * {
    border-bottom-color: var(--admin-ui-border);
    padding: 1rem 1.1rem;
    vertical-align: middle;
}

.admin-shell .table thead th {
    background: #ffffff;
    color: var(--admin-ui-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-table-open-col {
    width: 1%;
    white-space: nowrap;
}

.admin-shell .badge {
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 0.42rem 0.68rem;
    text-transform: uppercase;
}

.admin-shell .text-bg-success {
    background: rgba(58, 138, 58, 0.1) !important;
    color: #3a8a3a !important;
}

.admin-shell .text-bg-warning {
    background: rgba(201, 169, 110, 0.14) !important;
    color: #8d6b35 !important;
}

.admin-shell .text-bg-secondary {
    background: rgba(154, 140, 120, 0.14) !important;
    color: var(--admin-ui-muted) !important;
}

.admin-empty-state,
.admin-total {
    color: rgba(0, 26, 61, 0.54) !important;
}

.admin-row-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid var(--admin-ui-border);
    border-radius: 4px;
    color: var(--admin-ui-text);
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.admin-row-open:hover {
    background: var(--admin-ui-field);
    border-color: var(--admin-ui-border);
    color: var(--admin-ui-text);
}

.admin-row-open svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
}

.admin-shell .pagination .page-link {
    border-radius: 4px;
    border-color: var(--admin-ui-border);
    color: var(--admin-ui-text);
    margin-right: 8px;
}

.admin-shell .pagination .disabled .page-link {
    background: #ffffff;
    color: var(--admin-ui-muted);
}

.admin-shell .pagination .admin-pagination__status .page-link {
    background: #ffffff;
    border-color: var(--admin-ui-border);
    color: var(--admin-ui-muted);
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.admin-footer {
    flex-shrink: 0;
    padding: 16px 32px;
    text-align: center;
    border-top: 1px solid var(--admin-ui-border);
    background: #ffffff;
}

.admin-footer p {
    margin: 0;
    color: var(--admin-ui-muted);
    font-size: 12px;
}

@media (max-width: 991px) {
    .admin-topbar__inner,
    .admin-session,
    .admin-session__meta,
    .admin-page-header,
    .admin-list-header,
    .admin-detail-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-session {
        width: 100%;
    }

    .admin-session__meta {
        flex-wrap: wrap;
    }

    .admin-detail-actions {
        justify-content: flex-start;
    }

    .admin-invite-actions {
        justify-content: flex-start;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .login-card {
        padding: 42px 28px 30px;
    }

    .admin-module__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-module__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .admin-topbar__inner,
    .admin-shell .card-body,
    .admin-tile {
        padding: 22px;
    }

    .admin-toolbar .nav {
        justify-content: flex-start !important;
    }

    .admin-directory-toggle {
        justify-content: flex-start;
    }

    .admin-password-form {
        flex-direction: column;
    }

    .admin-password-form__actions {
        width: 100%;
    }

    .admin-password-form__actions .btn {
        flex: 1 1 0;
    }

    .admin-shell .table > :not(caption) > * > * {
        padding: 0.8rem 0.7rem;
    }
}