:root {
    --staff-black: #111111;
    --staff-charcoal: #202020;
    --staff-red: #c63a23;
    --staff-red-dark: #982b19;
    --staff-cream: #f2e5c7;
    --staff-bg: #f3f4f5;
    --staff-card: #ffffff;
    --staff-border: #dfe2e5;
    --staff-text: #1d2329;
    --staff-muted: #69727b;
    --staff-green: #20744a;
    --staff-yellow: #8a6500;
    --staff-blue: #205e8f;
    --staff-radius: 14px;
    --staff-shadow: 0 10px 30px rgba(17, 17, 17, .07);
    --staff-max: 1440px;
}

* { box-sizing: border-box; }
html { background: var(--staff-bg); }
body.staff-app { margin: 0; color: var(--staff-text); background: var(--staff-bg); font-family: "Source Sans 3", Arial, sans-serif; font-size: 16px; line-height: 1.5; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.staff-topbar { position: sticky; top: 0; z-index: 40; min-height: 72px; display: grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr) minmax(280px, .8fr); align-items: center; gap: 20px; padding: 10px clamp(18px, 3vw, 42px); color: #fff; background: rgba(17,17,17,.98); border-bottom: 1px solid #303030; }
.staff-brand { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.staff-brand img { width: 190px; max-height: 48px; object-fit: contain; object-position: left center; }
.staff-brand span { padding-left: 14px; border-left: 1px solid #4b4b4b; color: #d8d8d8; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.staff-main-nav { display: flex; justify-content: center; gap: 8px; }
.staff-main-nav a, .staff-nav-disabled { padding: 10px 14px; border-radius: 8px; color: #c9c9c9; font-size: 14px; font-weight: 800; text-decoration: none; }
.staff-main-nav a:hover, .staff-main-nav a.active { color: #fff; background: #2b2b2b; }
.staff-nav-disabled { opacity: .45; cursor: default; }
.staff-user-menu { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.staff-user-menu > div { display: grid; line-height: 1.1; text-align: right; }
.staff-user-menu small { margin-top: 4px; color: #9fa4a8; font-size: 12px; text-transform: uppercase; }
.staff-user-menu a, .staff-user-menu button { padding: 7px 9px; color: #dadada; border: 0; background: transparent; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.staff-user-menu a:hover, .staff-user-menu button:hover { color: #fff; }
.staff-user-menu form { margin: 0; }

.staff-main { width: min(calc(100% - 36px), var(--staff-max)); margin: 0 auto; padding: 36px 0 70px; }
.staff-flash { margin-bottom: 22px; padding: 13px 16px; color: #164d31; border: 1px solid #abd4bd; border-radius: 10px; background: #e8f7ee; font-weight: 700; }
.staff-page-heading { margin-bottom: 28px; }
.staff-page-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.staff-page-heading h1 { margin: 3px 0 6px; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -.035em; }
.staff-page-heading p { margin: 0; color: var(--staff-muted); font-size: 18px; }
.staff-eyebrow { margin: 0 0 5px !important; color: var(--staff-red) !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .12em; text-transform: uppercase; }

.staff-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; border: 1px solid transparent; border-radius: 8px; font-weight: 800; text-decoration: none; cursor: pointer; }
.staff-button-primary { color: #fff; background: var(--staff-red); }
.staff-button-primary:hover { background: var(--staff-red-dark); }
.staff-button-secondary { color: var(--staff-text); border-color: #aeb4b9; background: #fff; }
.staff-button-secondary:hover { border-color: var(--staff-black); }

.staff-card { padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--staff-border); border-radius: var(--staff-radius); background: var(--staff-card); box-shadow: var(--staff-shadow); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.metric-card { display: grid; min-height: 145px; padding: 22px; color: var(--staff-text); border: 1px solid var(--staff-border); border-radius: var(--staff-radius); background: #fff; box-shadow: var(--staff-shadow); text-decoration: none; }
.metric-card:hover { transform: translateY(-1px); border-color: #b9bec2; }
.metric-card span { color: var(--staff-muted); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.metric-card strong { margin: 8px 0 0; font-size: 40px; line-height: 1; }
.metric-card small { align-self: end; color: var(--staff-muted); }

.staff-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.staff-app-card { min-height: 230px; display: grid; grid-template-columns: 58px 1fr; grid-template-rows: 1fr auto; gap: 18px; padding: 26px; border: 1px solid var(--staff-border); border-left: 6px solid #8c9297; border-radius: var(--staff-radius); background: #fff; box-shadow: var(--staff-shadow); }
.staff-app-card-live { border-left-color: var(--staff-red); }
.staff-app-icon { width: 52px; height: 52px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: var(--staff-black); font-weight: 900; }
.staff-app-card h2 { margin: 6px 0 5px; font-size: 27px; }
.staff-app-card p { margin: 0; color: var(--staff-muted); }
.staff-app-card > a, .app-link-disabled { grid-column: 2; color: var(--staff-red); font-weight: 900; text-decoration: none; }
.app-link-disabled { color: #8c9297; }
.app-status { display: inline-block; padding: 3px 7px; color: #60686e; border-radius: 999px; background: #eceeef; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.app-status.live { color: #155534; background: #dff3e7; }

.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-title-row h2 { margin: 0; font-size: 27px; }
.section-title-row > a { color: var(--staff-red); font-weight: 900; text-decoration: none; }
.recent-quote-list { display: grid; margin-top: 20px; }
.recent-quote-list > a { display: grid; grid-template-columns: minmax(250px, 1.2fr) minmax(360px, 1fr) auto; align-items: center; gap: 22px; padding: 16px 4px; border-top: 1px solid #eceeef; text-decoration: none; }
.recent-quote-list > a:hover { background: #fafafa; }
.recent-quote-list > a > div:first-child { display: grid; }
.recent-quote-list > a > div:first-child span { color: var(--staff-muted); }
.recent-quote-meta { display: flex; gap: 12px; color: var(--staff-muted); font-size: 14px; }

.status-pill { width: max-content; display: inline-block; margin-top: 5px; padding: 4px 8px; border-radius: 999px; color: #51565a; background: #e9ecee; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.status-new { color: #765500; background: #fff0b3; }
.status-reviewing { color: #164d75; background: #dcecf9; }
.status-waiting_on_customer { color: #734919; background: #f7e4cf; }
.status-quoted { color: #514784; background: #ebe8fa; }
.status-approved { color: #145932; background: #daf1e3; }
.status-declined { color: #7d2525; background: #f7dddd; }
.status-archived { color: #565c60; background: #e6e9eb; }

.filter-card { margin-bottom: 18px; padding: 18px 20px; }
.quote-filter-form { display: grid; grid-template-columns: minmax(280px, 1.6fr) minmax(170px, .65fr) minmax(190px, .75fr) auto auto; align-items: end; gap: 12px; }
.quote-filter-form label, .staff-form label, .status-form label { display: grid; gap: 6px; color: #4d555b; font-size: 13px; font-weight: 800; }
.quote-filter-form input, .quote-filter-form select, .staff-form input, .staff-form select, .staff-form textarea, .status-form select, .note-form textarea { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--staff-text); border: 1px solid #bcc2c7; border-radius: 8px; background: #fff; outline: none; }
.quote-filter-form input:focus, .quote-filter-form select:focus, .staff-form input:focus, .staff-form textarea:focus, .status-form select:focus, .note-form textarea:focus { border-color: var(--staff-red); box-shadow: 0 0 0 3px rgba(198,58,35,.1); }
.clear-filters { align-self: center; padding: 8px; color: var(--staff-red); font-weight: 800; }
.table-card { padding: 0; overflow: hidden; }
.responsive-table { overflow-x: auto; }
.staff-data-table { width: 100%; min-width: 970px; border-collapse: collapse; }
.staff-data-table th, .staff-data-table td { padding: 15px 17px; border-bottom: 1px solid #e8eaec; text-align: left; vertical-align: top; }
.staff-data-table th { color: var(--staff-muted); background: #fafbfb; font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.staff-data-table td strong, .staff-data-table td small { display: block; }
.staff-data-table td small { margin-top: 2px; color: var(--staff-muted); }
.table-open { color: var(--staff-red); font-weight: 900; text-decoration: none; white-space: nowrap; }
.staff-pagination { padding: 18px 20px; }
.staff-pagination nav > div:first-child { display: none; }
.staff-pagination nav > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.staff-pagination svg { width: 18px; }

.quote-detail-heading { align-items: flex-start; }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--staff-muted); font-weight: 800; text-decoration: none; }
.status-form { display: flex; align-items: flex-end; gap: 10px; padding-top: 36px; }
.status-form select { min-width: 210px; }
.quote-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.quote-detail-main { display: grid; gap: 18px; }
.quote-detail-side { position: sticky; top: 94px; display: grid; gap: 18px; }
.detail-card h2 { margin: 0 0 18px; font-size: 27px; }
.detail-card h3 { margin: 22px 0 10px; font-size: 18px; }
.contact-actions { display: flex; gap: 8px; }
.contact-actions a { padding: 7px 11px; color: var(--staff-red); border: 1px solid #e3b5aa; border-radius: 7px; font-weight: 800; text-decoration: none; }
.detail-list-staff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.detail-list-staff div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid #eceeef; }
.detail-list-staff div:nth-last-child(-n+2) { border-bottom: 0; }
.detail-list-staff dt, .compact-dl dt, .side-detail-list dt { color: var(--staff-muted); font-weight: 700; }
.detail-list-staff dd, .compact-dl dd, .side-detail-list dd { margin: 0; font-weight: 600; }
.detail-copy { margin: 0; color: #3f474d; }
.preserve-lines { white-space: pre-line; }
.detail-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.data-chip-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.data-chip-grid span { display: inline-flex; gap: 8px; padding: 6px 9px; color: #fff; border-radius: 999px; background: var(--staff-charcoal); }
.data-chip-grid strong { color: #f5d270; }
.compact-dl { display: grid; margin: 0; }
.compact-dl div { display: flex; justify-content: space-between; gap: 15px; padding: 8px 0; border-bottom: 1px solid #eceeef; }
.muted { color: var(--staff-muted); }

.artwork-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.artwork-item { overflow: hidden; border: 1px solid #dfe2e5; border-radius: 11px; background: #fff; }
.artwork-preview { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: #eef0f2; }
.artwork-preview > a { width: 100%; height: 100%; display: grid; place-items: center; text-decoration: none; }
.artwork-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pdf-preview, .file-preview-generic { display: grid; place-items: center; align-content: center; gap: 4px; color: var(--staff-text); text-align: center; }
.pdf-preview strong, .file-preview-generic strong { font-size: 32px; }
.pdf-preview span, .file-preview-generic span { color: var(--staff-muted); font-size: 13px; }
.artwork-meta { display: grid; padding: 12px; }
.artwork-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artwork-meta span { margin: 3px 0 9px; color: var(--staff-muted); font-size: 12px; }
.artwork-meta a { color: var(--staff-red); font-weight: 900; text-decoration: none; }

.note-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.note-form label { display: block; }
.note-form textarea { min-height: 92px; resize: vertical; }
.note-timeline { display: grid; gap: 10px; margin-top: 20px; }
.note-item { padding: 15px 16px; border-left: 3px solid var(--staff-red); border-radius: 0 9px 9px 0; background: #f7f8f9; }
.note-item.system-note { border-left-color: #90979d; background: #f1f3f4; }
.note-item > div { display: flex; justify-content: space-between; gap: 20px; }
.note-item time { color: var(--staff-muted); font-size: 12px; }
.note-item p { margin: 7px 0 0; }

.side-card { padding: 20px; }
.side-detail-list { display: grid; margin: 0; }
.side-detail-list div { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid #eceeef; }
.side-detail-list div:last-child { border-bottom: 0; }
.side-detail-list dd { overflow-wrap: anywhere; }
.side-detail-list small { display: block; color: var(--staff-muted); }
.delivery-status { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid #eceeef; }
.delivery-status span { color: var(--staff-muted); font-size: 13px; }
.delivery-status strong { width: max-content; padding: 3px 7px; border-radius: 999px; background: #eceeef; font-size: 12px; }
.delivery-sent { color: var(--staff-green); background: #dff3e7 !important; }
.delivery-failed { color: #8d2828; background: #f8dddd !important; }
.delivery-pending { color: var(--staff-yellow); background: #fff1bf !important; }
.delivery-error { color: #8d2828; font-size: 13px; }
.privacy-card p:last-child { margin-bottom: 0; color: var(--staff-muted); font-size: 14px; }

.staff-empty { display: grid; gap: 5px; padding: 34px; color: var(--staff-muted); text-align: center; }
.staff-empty strong { color: var(--staff-text); font-size: 18px; }
.staff-empty.compact { padding: 14px; }
.form-error { margin-bottom: 18px; padding: 12px 14px; color: #7f2424; border: 1px solid #e6b4b4; border-radius: 8px; background: #fdecec; font-weight: 700; }
.staff-page-error { margin-top: -12px; }

.auth-shell { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 40px 0; }
.auth-panel { width: min(100%, 470px); padding: clamp(26px, 5vw, 42px); border: 1px solid var(--staff-border); border-radius: 18px; background: #fff; box-shadow: var(--staff-shadow); }
.auth-panel h1 { margin: 0 0 10px; font-size: 42px; letter-spacing: -.035em; }
.auth-lede { margin: 0 0 24px; color: var(--staff-muted); }
.staff-form { display: grid; gap: 17px; }
.staff-form label > span { color: #4d555b; font-size: 13px; font-weight: 800; }
.staff-form label small { color: var(--staff-muted); font-weight: 400; }
.staff-form .check-row { display: flex; align-items: center; gap: 8px; }
.staff-form .check-row input { width: auto; min-height: 0; }
.auth-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; font-size: 14px; }
.auth-links a { color: var(--staff-red); font-weight: 800; }
.narrow-card { width: min(100%, 650px); }
.staff-form-card { margin-top: 20px; }

@media (max-width: 1100px) {
    .staff-topbar { grid-template-columns: 1fr auto; }
    .staff-main-nav { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; }
    .staff-user-menu { grid-column: 2; grid-row: 1; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-detail-layout { grid-template-columns: 1fr; }
    .quote-detail-side { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .artwork-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .staff-brand span { display: none; }
    .staff-brand img { width: 160px; }
    .staff-user-menu > div { display: none; }
    .staff-page-heading-row { align-items: flex-start; flex-direction: column; }
    .staff-app-grid, .detail-two-col { grid-template-columns: 1fr; }
    .recent-quote-list > a { grid-template-columns: 1fr auto; gap: 8px 15px; }
    .recent-quote-meta { grid-column: 1; grid-row: 2; flex-wrap: wrap; }
    .recent-quote-list > a > .status-pill { grid-column: 2; grid-row: 1; }
    .quote-filter-form { grid-template-columns: 1fr 1fr; }
    .filter-search { grid-column: 1 / -1; }
    .quote-detail-side { grid-template-columns: 1fr; }
    .detail-list-staff { grid-template-columns: 1fr; }
    .detail-list-staff div:nth-last-child(-n+2) { border-bottom: 1px solid #eceeef; }
    .detail-list-staff div:last-child { border-bottom: 0; }
    .status-form { padding-top: 0; }
}

@media (max-width: 560px) {
    .staff-main { width: min(calc(100% - 22px), var(--staff-max)); padding-top: 22px; }
    .staff-topbar { padding-inline: 12px; gap: 8px; }
    .staff-user-menu { gap: 2px; }
    .staff-user-menu a { display: none; }
    .metric-grid, .quote-filter-form, .artwork-grid { grid-template-columns: 1fr; }
    .quote-filter-form .filter-search { grid-column: auto; }
    .staff-app-card { grid-template-columns: 48px 1fr; padding: 20px; }
    .staff-app-icon { width: 44px; height: 44px; }
    .recent-quote-list > a { grid-template-columns: 1fr; }
    .recent-quote-list > a > .status-pill { grid-column: 1; grid-row: auto; }
    .status-form { width: 100%; align-items: stretch; flex-direction: column; }
    .status-form label, .status-form select { width: 100%; }
    .note-form { grid-template-columns: 1fr; }
    .note-item > div { flex-direction: column; gap: 3px; }
    .auth-links { flex-direction: column; }
}

/* Staff management v1.1.0 */
.staff-team-title-row { padding: 20px 22px; border-bottom: 1px solid #e8eaec; }
.staff-team-title-row p { margin: 2px 0 0; color: var(--staff-muted); }
.staff-team-table { min-width: 1040px; }
.staff-account-pill { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.staff-account-active { color: #145932; background: #daf1e3; }
.staff-account-invited { color: #765500; background: #fff0b3; }
.staff-account-disabled { color: #7d2525; background: #f7dddd; }
.staff-row-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.staff-row-actions form { margin: 0; }
.staff-link-button { padding: 0; color: var(--staff-red); border: 0; background: transparent; font-weight: 900; cursor: pointer; }
.staff-link-button:hover { text-decoration: underline; }
.staff-link-button.danger { color: #8b2a2a; }
.staff-invite-dialog { width: min(calc(100% - 28px), 560px); padding: 0; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 24px 80px rgba(17,17,17,.3); }
.staff-invite-dialog::backdrop { background: rgba(17,17,17,.62); backdrop-filter: blur(2px); }
.staff-invite-form { display: grid; gap: 20px; padding: 28px; }
.staff-invite-form > label { display: grid; gap: 7px; color: #4d555b; font-size: 13px; font-weight: 800; }
.staff-invite-form input { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--staff-text); border: 1px solid #bcc2c7; border-radius: 8px; background: #fff; outline: none; }
.staff-invite-form input:focus { border-color: var(--staff-red); box-shadow: 0 0 0 3px rgba(198,58,35,.1); }
.staff-dialog-heading { display: grid; grid-template-columns: 1fr auto; gap: 22px; }
.staff-dialog-heading h2 { margin: 0 0 7px; font-size: 34px; letter-spacing: -.025em; }
.staff-dialog-heading p:not(.staff-eyebrow) { margin: 0; color: var(--staff-muted); }
.staff-dialog-close { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: #555; border: 1px solid #d7dadd; border-radius: 50%; background: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.staff-dialog-close:hover { color: #111; border-color: #111; }
.staff-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 560px) {
    .staff-dialog-actions { flex-direction: column-reverse; }
    .staff-dialog-actions .staff-button { width: 100%; }
    .staff-invite-form { padding: 22px; }
}

/* Supply Vault v1.2.2 — compact 80% list rows + linked product entry points */
.supply-vault-page-heading { margin-bottom: 18px; }
.supply-workspace { display: grid; grid-template-columns: minmax(285px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.supply-add-panel { position: sticky; top: 88px; padding: 22px; }
.supply-section-heading h2, .supply-list-heading h2 { margin: 0; font-size: clamp(27px, 2.3vw, 34px); line-height: 1; letter-spacing: -.025em; }
.supply-section-heading p, .supply-list-heading p { margin: 7px 0 0; color: var(--staff-muted); }
.supply-inline-form { margin-top: 20px; }
.supply-inline-form .supply-form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; }
.supply-inline-form .supply-form-grid label { display: grid; gap: 6px; color: #4d555b; font-size: 13px; font-weight: 800; }
.supply-inline-form .supply-form-grid label > small:not(.field-error) { color: var(--staff-muted); font-size: 12px; font-weight: 400; line-height: 1.35; }
.supply-inline-form input, .supply-inline-form select, .supply-inline-form textarea,
.supply-search-form input, .supply-search-form select,
.supply-form-grid input, .supply-form-grid select, .supply-form-grid textarea { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--staff-text); border: 1px solid #bcc2c7; border-radius: 8px; background: #fff; outline: none; }
.supply-inline-form textarea, .supply-form-grid textarea { min-height: 92px; resize: vertical; }
.supply-inline-form input:focus, .supply-inline-form select:focus, .supply-inline-form textarea:focus,
.supply-search-form input:focus, .supply-search-form select:focus,
.supply-form-grid input:focus, .supply-form-grid select:focus, .supply-form-grid textarea:focus { border-color: var(--staff-red); box-shadow: 0 0 0 3px rgba(198,58,35,.1); }
.supply-add-submit { width: 100%; margin-top: 14px; }
.supply-form-error { margin: 16px 0 0; }
.field-error { color: #a32727 !important; font-weight: 700 !important; }
.supply-list-column { min-width: 0; }
.supply-list-heading { min-height: 57px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 2px 2px 12px; }
.supply-list-heading form { margin: 0; }
.supply-search-panel { padding: 12px; margin-bottom: 12px; box-shadow: none; }
.supply-search-form { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(170px, 220px) auto auto; align-items: center; gap: 9px; }
.supply-search-form .staff-button { min-height: 42px; }
.supply-search-form .clear-filters { padding: 8px 6px; white-space: nowrap; }
.supply-list { width: min(80%, 980px); display: grid; gap: 10px; margin-inline: auto; }
.supply-list-item { min-width: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 18px; border: 1px solid var(--staff-border); border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(17,17,17,.045); }
.supply-list-image { width: 112px; height: 112px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e1e4e6; border-radius: 12px; background: #f6f6f4; }
.supply-product-media-link { text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.supply-product-media-link:hover, .supply-product-media-link:focus-visible { border-color: var(--staff-red); box-shadow: 0 0 0 3px rgba(198,58,35,.09); transform: translateY(-1px); outline: none; }
.supply-list-image img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.supply-image-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; background: var(--staff-black); font-size: 20px; font-weight: 900; letter-spacing: .04em; }
.supply-list-content { min-width: 0; padding: 2px 4px 2px 0; }
.supply-list-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.supply-name-line { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.supply-name-line h3 { min-width: 0; margin: 0; font-size: 19px; line-height: 1.18; overflow-wrap: anywhere; }
.supply-name-link { color: var(--staff-text); text-decoration: none; }
.supply-name-link:hover, .supply-name-link:focus-visible { color: var(--staff-red); text-decoration: underline; text-underline-offset: 2px; outline: none; }
.supply-category { display: inline-flex; flex: 0 0 auto; padding: 3px 8px; color: #5c2319; border: 1px solid #e0aaa0; border-radius: 999px; background: #fff3f0; font-size: 10px; font-weight: 900; line-height: 1.2; text-transform: uppercase; letter-spacing: .035em; }
.supply-product-link { flex: 0 0 auto; color: var(--staff-red); font-size: 13px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.supply-product-link:hover { text-decoration: underline; }
.supply-vendor { margin-top: 8px; color: var(--staff-red); font-size: 15px; font-weight: 900; }
.supply-detail-line { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; color: var(--staff-muted); font-size: 13px; }
.supply-detail-line strong { color: var(--staff-text); }
.supply-list-notes { margin: 11px 0 0; color: #454d53; font-size: 14px; line-height: 1.4; }
.supply-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; margin-top: 13px; }
.supply-inline-actions a, .supply-inline-actions button { padding: 0; color: var(--staff-red); border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 900; text-decoration: none; cursor: pointer; }
.supply-inline-actions a:hover, .supply-inline-actions button:hover { text-decoration: underline; }
.supply-inline-actions form { margin: 0; }
.supply-inline-actions .danger { color: #8b2a2a; }
.supply-pagination { width: min(80%, 980px); margin: 16px auto 0; }
.supply-empty { margin-top: 0; }

/* Reused edit/import Supply Vault styles */
.supply-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 22px; }
.supply-form-grid label { display: grid; align-content: start; gap: 6px; color: #4d555b; font-size: 13px; font-weight: 800; }
.supply-form-grid label > small:not(.field-error) { color: var(--staff-muted); font-weight: 400; }
.supply-field-wide { grid-column: 1 / -1; }
.supply-edit-card { max-width: 840px; }
.supply-edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.supply-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #e4e6e8; }
.supply-danger-zone > div { display: grid; gap: 2px; }
.supply-danger-zone span { color: var(--staff-muted); font-size: 14px; }
.supply-delete-button { color: #8b2424; border-color: #d7a4a4; background: #fff; }
.supply-delete-button:hover { color: #fff; background: #a62c2c; border-color: #a62c2c; }
.supply-import-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 18px; align-items: start; }
.supply-import-steps { display: grid; gap: 18px; margin-bottom: 28px; }
.supply-import-steps > div { display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: start; }
.supply-import-steps > div > span { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--staff-black); font-weight: 900; }
.supply-import-steps strong { font-size: 18px; }
.supply-import-steps p { margin: 3px 0 0; color: var(--staff-muted); }
.supply-import-form { display: grid; gap: 14px; }
.supply-file-drop { position: relative; min-height: 145px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 24px; text-align: center; border: 2px dashed #b9bec2; border-radius: 12px; background: #fafafa; cursor: pointer; }
.supply-file-drop:hover { border-color: var(--staff-red); background: #fffafa; }
.supply-file-drop span { color: var(--staff-muted); font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.supply-file-drop strong { font-size: 19px; }
.supply-file-drop small { color: var(--staff-muted); }
.supply-file-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.supply-import-safety h2 { margin: 5px 0 9px; font-size: 25px; }
.supply-import-safety p, .supply-import-safety li { color: var(--staff-muted); }
.supply-import-safety ul { margin: 18px 0 0; padding-left: 20px; }
.supply-import-history { margin-top: 18px; }
.supply-import-table { min-width: 820px; margin-top: 17px; }

@media (max-width: 1050px) {
    .supply-workspace { grid-template-columns: minmax(250px, 305px) minmax(0, 1fr); }
    .supply-list, .supply-pagination { width: 90%; }
    .supply-search-form { grid-template-columns: 1fr minmax(150px, 190px) auto; }
    .supply-search-form .clear-filters { grid-column: 1 / -1; }
    .supply-import-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .supply-workspace { grid-template-columns: 1fr; }
    .supply-list, .supply-pagination { width: 100%; }
    .supply-add-panel { position: static; }
    .supply-search-form { grid-template-columns: 1fr; }
    .supply-search-form .clear-filters { grid-column: auto; }
    .supply-list-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
    .supply-list-item { grid-template-columns: 82px minmax(0, 1fr); gap: 11px; padding: 11px; }
    .supply-list-image { width: 82px; height: 82px; }
    .supply-list-title-row { flex-direction: column; gap: 5px; }
    .supply-product-link { white-space: normal; }
    .supply-form-grid { grid-template-columns: 1fr; }
    .supply-field-wide { grid-column: auto; }
    .supply-danger-zone { align-items: flex-start; flex-direction: column; }
}

/* Locker Stock v1.3.0 */
.locker-stock-heading { align-items: flex-start; }
.locker-stock-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.locker-low-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -6px 0 20px; padding: 13px 16px; color: #7d2525; border: 1px solid #e3b5b5; border-radius: 10px; background: #fdeaea; }
.locker-low-banner a { color: #7d2525; font-weight: 900; text-decoration: none; }
.locker-product-stack { display: grid; gap: 18px; }
.locker-product-card, .locker-entry-card, .locker-manage-product { padding: 0; overflow: hidden; }
.locker-product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 21px 24px 17px; border-bottom: 1px solid #e9ebed; }
.locker-product-title-row h2 { margin: 0; font-size: 28px; line-height: 1.05; letter-spacing: -.025em; }
.locker-product-title-row > div > span { display: block; margin-top: 5px; color: var(--staff-muted); font-size: 13px; font-weight: 700; }
.locker-product-title-row > strong { color: var(--staff-red); font-size: 18px; white-space: nowrap; }
.locker-matrix-wrap { width: 100%; }
.locker-matrix { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.locker-matrix th, .locker-matrix td { padding: 13px 10px; border-bottom: 1px solid #eceeef; text-align: center; vertical-align: middle; }
.locker-matrix thead th { color: var(--staff-muted); background: #fafbfb; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.locker-matrix thead th:first-child { width: 130px; text-align: left; padding-left: 22px; }
.locker-matrix tbody th { text-align: left; padding-left: 22px; white-space: nowrap; }
.locker-matrix tbody td strong { display: block; font-size: 22px; line-height: 1; }
.locker-matrix tbody td small { display: block; margin-top: 4px; color: var(--staff-muted); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.locker-low-cell { background: #fff0f0; }
.locker-low-cell strong, .locker-low-cell small { color: #9c2727 !important; }
.locker-total-cell { color: var(--staff-red); background: #fffafa; font-weight: 900; }
.locker-na { color: #b6bbc0; }
.locker-color-dot { width: 11px; height: 11px; display: inline-block; margin-right: 8px; border: 1px solid #9da3a8; border-radius: 50%; vertical-align: -1px; }
.locker-color-black { background: #111; border-color: #111; }
.locker-color-white { background: #fff; }
.locker-color-navy { background: #1d2d4c; border-color: #1d2d4c; }
.locker-activity-card { margin-top: 18px; }
.locker-activity-list { display: grid; margin-top: 18px; }
.locker-activity-list > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid #eceeef; }
.locker-activity-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #737b82; font-size: 18px; font-weight: 900; }
.locker-activity-icon.usage { background: #a62f2f; }
.locker-activity-icon.receive { background: #20744a; }
.locker-activity-list > div > div:nth-child(2) { display: grid; }
.locker-activity-list > div > div:nth-child(2) span { color: var(--staff-muted); font-size: 13px; }
.locker-activity-balance { display: grid; text-align: right; }
.locker-activity-balance strong { font-size: 20px; }
.locker-activity-balance span { color: var(--staff-muted); font-size: 12px; }
.locker-reference-card { margin-bottom: 18px; padding: 18px 20px; }
.locker-reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.locker-reference-grid label { display: grid; gap: 6px; color: #4d555b; font-size: 13px; font-weight: 800; }
.locker-reference-grid input, .locker-entry-matrix input, .locker-count-input { width: 100%; min-height: 40px; padding: 7px 9px; color: var(--staff-text); border: 1px solid #bcc2c7; border-radius: 7px; background: #fff; outline: none; }
.locker-reference-grid input:focus, .locker-entry-matrix input:focus, .locker-count-input:focus { border-color: var(--staff-red); box-shadow: 0 0 0 3px rgba(198,58,35,.1); }
.locker-entry-matrix td { padding: 10px 8px; }
.locker-entry-matrix td small { margin: 0 0 5px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.locker-entry-matrix input { max-width: 78px; min-height: 38px; margin: 0 auto; text-align: center; font-weight: 800; }
.locker-form-footer { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding: 14px 18px; border: 1px solid var(--staff-border); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 -4px 18px rgba(17,17,17,.06); backdrop-filter: blur(5px); }
.locker-manage-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.locker-settings-form { margin-top: 20px; }
.locker-toggle-row { display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: 10px !important; padding: 11px 12px; border: 1px solid #e2e4e6; border-radius: 8px; background: #fafafa; }
.locker-toggle-row input { width: auto !important; min-height: 0 !important; margin-top: 3px; }
.locker-toggle-row span { color: var(--staff-text) !important; font-size: 14px !important; font-weight: 700 !important; }
.locker-test-actions { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e7e9eb; }
.locker-manage-products { margin-top: 18px; }
.locker-manage-table { min-width: 760px; }
.locker-manage-table td { vertical-align: middle; }
.locker-manage-table .locker-count-input { width: 100px; min-height: 38px; }
.locker-color-label { display: inline !important; }
.locker-status-low, .locker-status-ok { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .05em; }
.locker-status-low { color: #8c2323; background: #f8dddd; }
.locker-status-ok { color: #145932; background: #daf1e3; }
.locker-manage-save { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; background: #fafbfb; }
.locker-manage-save small { color: var(--staff-muted); }
.locker-report-history { margin-top: 18px; }
.locker-history-table { min-width: 1120px; }
.locker-positive { color: var(--staff-green); }
.locker-negative { color: #9a2929; }
.locker-empty-state .staff-empty .staff-button { margin: 12px auto 0; }

@media (max-width: 1000px) {
    .locker-stock-actions { justify-content: flex-start; }
    .locker-manage-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .locker-reference-grid { grid-template-columns: 1fr; }
    .locker-product-title-row { flex-direction: column; }
    .locker-form-footer { flex-direction: column-reverse; }
    .locker-form-footer .staff-button { width: 100%; }
    .locker-manage-save { align-items: stretch; flex-direction: column; }
    .locker-low-banner { align-items: flex-start; flex-direction: column; }
}

/* Locker Stock v1.3.1 — case replenishment + compact shirt/color rows */
.locker-line-stack { display: grid; gap: 12px; }
.locker-line-item { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(0, 4fr) minmax(130px, .8fr); align-items: center; gap: 16px; padding: 16px 18px; overflow: visible; }
.locker-line-title { display: grid; gap: 4px; min-width: 0; }
.locker-line-title strong { font-size: 17px; line-height: 1.15; }
.locker-line-title span { color: var(--staff-muted); font-size: 12px; font-weight: 700; }
.locker-line-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 8px; min-width: 0; }
.locker-line-size { position: relative; display: grid; justify-items: center; align-content: start; min-height: 104px; padding: 8px 7px 7px; border: 1px solid #dfe3e6; border-radius: 9px; background: #fff; text-align: center; }
.locker-line-size.is-low { border-color: #e6b1b1; background: #fff5f5; }
.locker-line-size.has-order { border-color: #a8c6b4; background: #f3fbf6; }
.locker-line-size-label { color: #535b61; font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.locker-line-size > strong { margin-top: 3px; font-size: 28px; line-height: 1; }
.locker-line-size > small { margin-top: 2px; color: var(--staff-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.locker-line-low { margin-top: 5px; color: #a12626; font-size: 10px; font-weight: 900; letter-spacing: .07em; }
.locker-on-order { margin-top: 5px; color: #17663d; font-size: 11px; font-weight: 900; }
.locker-line-size-meta { margin-top: auto; padding-top: 5px; color: #798087; font-size: 9px; font-weight: 700; white-space: nowrap; }
.locker-receive-order-form { margin-top: 4px; }
.locker-receive-order-form button { padding: 3px 7px; color: #145932; border: 1px solid #9bc3aa; border-radius: 999px; background: #fff; cursor: pointer; font: inherit; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.locker-receive-order-form button:hover { background: #e8f6ed; }
.locker-line-action { display: grid; justify-items: stretch; gap: 8px; }
.locker-line-action > span { color: var(--staff-muted); font-size: 11px; font-weight: 800; text-align: center; }
.locker-use-line-button { width: 100%; min-width: 118px; }

.locker-use-dialog { width: min(760px, calc(100vw - 30px)); max-height: calc(100vh - 36px); padding: 0; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.locker-use-dialog::backdrop { background: rgba(20,24,27,.58); backdrop-filter: blur(2px); }
.locker-use-dialog-form { padding: 22px; }
.locker-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid #e7e9eb; }
.locker-dialog-header h2 { margin: 2px 0 0; font-size: 26px; }
.locker-dialog-header > div > span { color: var(--staff-muted); font-size: 13px; }
.locker-dialog-close { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: #555; border: 1px solid #d5d9dc; border-radius: 50%; background: #fff; cursor: pointer; font-size: 25px; line-height: 1; }
.locker-dialog-reference { display: grid; gap: 6px; margin-top: 16px; color: #4d555b; font-size: 13px; font-weight: 800; }
.locker-dialog-reference input { width: 100%; min-height: 42px; padding: 8px 10px; color: var(--staff-text); border: 1px solid #bcc2c7; border-radius: 8px; background: #fff; outline: none; }
.locker-dialog-reference input:focus { border-color: var(--staff-red); box-shadow: 0 0 0 3px rgba(198,58,35,.1); }
.locker-dialog-size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; margin-top: 17px; }
.locker-dialog-size { display: grid; gap: 5px; padding: 11px; border: 1px solid #dfe3e6; border-radius: 9px; background: #fafbfb; }
.locker-dialog-size.is-low { border-color: #e6b1b1; background: #fff5f5; }
.locker-dialog-size > span { font-size: 14px; font-weight: 900; }
.locker-dialog-size > small { color: var(--staff-muted); font-size: 11px; }
.locker-dialog-size input { width: 100%; min-height: 42px; padding: 6px; border: 1px solid #bcc2c7; border-radius: 7px; background: #fff; text-align: center; font-size: 18px; font-weight: 900; }
.locker-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e7e9eb; }

.locker-case-explainer { display: grid; gap: 5px; margin-bottom: 18px; padding: 15px 18px; border-left: 4px solid var(--staff-red); }
.locker-case-explainer > span { color: var(--staff-muted); line-height: 1.45; }
.locker-manage-table { min-width: 980px; }
.locker-manage-table td small { display: block; margin-top: 3px; color: var(--staff-muted); font-size: 10px; }
.locker-pending-count { color: #17663d; }
.locker-status-order { display: inline-flex; padding: 3px 8px; color: #17663d; border-radius: 999px; background: #ddf3e5; font-size: 10px; font-weight: 900; letter-spacing: .05em; }

@media (max-width: 1120px) {
    .locker-line-item { grid-template-columns: minmax(170px, .9fr) minmax(0, 3fr); }
    .locker-line-action { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; }
    .locker-use-line-button { width: auto; }
}

@media (max-width: 760px) {
    .locker-line-item { grid-template-columns: 1fr; }
    .locker-line-sizes { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
    .locker-line-action { grid-column: auto; justify-content: stretch; }
    .locker-line-action > span { text-align: left; }
    .locker-use-line-button { width: 100%; }
    .locker-dialog-actions { flex-direction: column-reverse; }
    .locker-dialog-actions .staff-button { width: 100%; }
}

/* Locker Stock v1.3.2 — true one-row-per-style/color inventory layout */
.locker-sku-list {
    width: min(100%, 1220px);
    display: grid;
    gap: 12px;
    margin-inline: auto;
}

.locker-sku-row {
    display: grid;
    grid-template-columns: minmax(210px, 1.15fr) minmax(460px, 4fr) 104px 145px;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    overflow: visible;
}

.locker-sku-identity {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.locker-sku-identity strong {
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -.012em;
}

.locker-sku-identity span {
    color: var(--staff-muted);
    font-size: 12px;
    font-weight: 700;
}

.locker-sku-sizes {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 5px;
    scrollbar-width: thin;
}

.locker-sku-size {
    flex: 0 0 76px;
    display: grid;
    justify-items: center;
    align-content: start;
    min-height: 116px;
    text-align: center;
}

.locker-sku-size-label {
    margin-bottom: 5px;
    color: #343a3f;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
}

.locker-sku-qty {
    width: 68px;
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: 4px;
    color: var(--staff-text);
    border: 2px solid #c8cdd1;
    border-radius: 8px;
    background: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.locker-sku-size.is-low .locker-sku-qty {
    color: #9e2626;
    border-color: #d77e7e;
    background: #fff4f4;
}

.locker-sku-size.has-order .locker-sku-qty {
    border-color: #83b395;
    background: #f3fbf6;
}

.locker-sku-onhand-label {
    margin-top: 4px;
    color: var(--staff-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.locker-sku-low {
    margin-top: 5px;
    color: #a12626;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .07em;
}

.locker-sku-on-order {
    margin-top: 5px;
    color: #17663d;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
}

.locker-sku-state-spacer {
    min-height: 20px;
    margin-top: 5px;
    font-size: 10px;
}

.locker-sku-received-form {
    margin-top: 4px;
}

.locker-sku-received-form button {
    padding: 3px 7px;
    color: #145932;
    border: 1px solid #9bc3aa;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.locker-sku-received-form button:hover {
    background: #e8f6ed;
}

.locker-sku-reorder {
    display: grid;
    justify-items: center;
    gap: 6px;
    align-self: center;
}

.locker-sku-reorder span {
    color: #4c545a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.locker-sku-reorder strong {
    width: 82px;
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: 5px;
    border: 2px solid #c8cdd1;
    border-radius: 8px;
    background: #fff;
    font-size: 19px;
    line-height: 1;
}

.locker-sku-action {
    align-self: center;
}

.locker-sku-action .staff-button {
    width: 100%;
    min-width: 132px;
    justify-content: center;
}

.locker-activity-after-lines {
    margin-top: 22px;
}

@media (max-width: 1180px) {
    .locker-sku-row {
        grid-template-columns: minmax(190px, .9fr) minmax(0, 3fr) 100px;
    }

    .locker-sku-action {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
    }

    .locker-sku-action .staff-button {
        width: auto;
    }
}

@media (max-width: 820px) {
    .locker-sku-row {
        grid-template-columns: 1fr auto;
        gap: 14px;
    }

    .locker-sku-identity {
        grid-column: 1;
    }

    .locker-sku-reorder {
        grid-column: 2;
        grid-row: 1;
    }

    .locker-sku-sizes {
        grid-column: 1 / -1;
        width: 100%;
    }

    .locker-sku-action {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .locker-sku-action .staff-button {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .locker-sku-row {
        padding: 14px;
    }

    .locker-sku-size {
        flex-basis: 70px;
    }

    .locker-sku-qty {
        width: 62px;
        min-height: 46px;
        font-size: 22px;
    }
}

/* Locker Stock v1.3.3 — configurable style/color/size controls */
.locker-style-config {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 18px 20px;
    border-top: 1px solid var(--staff-border);
    border-bottom: 1px solid var(--staff-border);
    background: #fbfcfc;
}
.locker-style-config-column {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    background: #fff;
}
.locker-style-config-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}
.locker-style-config-heading > div { display: grid; gap: 2px; }
.locker-style-config-heading > div > strong { font-size: 15px; color: var(--staff-text); }
.locker-style-config-heading > div > span { font-size: 12px; color: var(--staff-muted); }
.locker-inline-add-form { display: flex; align-items: center; gap: 8px; }
.locker-inline-add-form input {
    width: 170px;
    min-height: 38px;
    border: 1px solid var(--staff-border-strong, #bcc4ca);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    background: #fff;
}
.locker-inline-add-form .staff-button { min-height: 38px; padding: 8px 12px; white-space: nowrap; }
.locker-config-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.locker-config-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 8px 6px 10px;
    border: 1px solid #d5dbdf;
    border-radius: 999px;
    background: #f7f9fa;
    font-size: 12px;
}
.locker-config-pill form { display: inline; margin: 0; }
.locker-config-pill button {
    border: 0;
    background: transparent;
    color: #a02a20;
    padding: 2px 5px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.locker-config-pill button:hover { text-decoration: underline; }
.locker-config-pill .locker-color-dot { margin-right: 0; }
@media (max-width: 900px) {
    .locker-style-config { grid-template-columns: 1fr; }
    .locker-style-config-heading { align-items: stretch; flex-direction: column; }
    .locker-inline-add-form input { width: 100%; }
}
@media (max-width: 560px) {
    .locker-inline-add-form { align-items: stretch; flex-direction: column; }
    .locker-inline-add-form .staff-button { width: 100%; }
}

/* MPH Spirit Stores v1.4.0 */
.spirit-heading-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; }
.spirit-heading-actions form { margin:0; }
.spirit-store-list { display:grid; gap:14px; }
.spirit-store-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; padding:22px 24px; }
.spirit-store-row-main { min-width:0; display:flex; align-items:flex-start; gap:16px; }
.spirit-store-row h2 { margin:0 0 4px; font-size:27px; }
.spirit-store-row p { margin:0; color:var(--staff-muted); }
.spirit-store-badge { flex:0 0 auto; min-width:82px; padding:6px 9px; border-radius:999px; text-align:center; font-size:11px; font-weight:900; letter-spacing:.06em; }
.spirit-store-badge.status-open { color:#145932; background:#daf1e3; }
.spirit-store-badge.status-scheduled { color:#164d75; background:#dcecf9; }
.spirit-store-badge.status-draft { color:#765500; background:#fff0b3; }
.spirit-store-badge.status-closed { color:#565c60; background:#e6e9eb; }
.spirit-store-meta { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:12px; color:var(--staff-muted); font-size:13px; }
.spirit-store-meta strong { color:var(--staff-text); }
.spirit-store-row-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 15px; }
.spirit-store-row-actions > a:not(.staff-button) { color:var(--staff-red); font-weight:900; text-decoration:none; white-space:nowrap; }
.spirit-empty-launch { min-height:390px; display:grid; place-items:center; align-content:center; gap:10px; text-align:center; }
.spirit-empty-launch h2 { margin:6px 0 0; font-size:34px; }
.spirit-empty-launch p { max-width:600px; margin:0 0 12px; color:var(--staff-muted); }
.spirit-empty-icon { width:72px; height:72px; display:grid; place-items:center; border-radius:16px; color:#fff; background:var(--staff-black); font-size:24px; font-weight:900; }

.spirit-wizard { max-width:1040px; margin-inline:auto; padding:0; overflow:hidden; }
.spirit-wizard-progress { display:grid; grid-template-columns:repeat(5,1fr); border-bottom:1px solid var(--staff-border); background:#fafafa; }
.spirit-wizard-progress button { min-height:68px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:0; border-right:1px solid var(--staff-border); color:var(--staff-muted); background:transparent; font-weight:800; cursor:pointer; }
.spirit-wizard-progress button:last-child { border-right:0; }
.spirit-wizard-progress button span { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#9ba1a6; font-size:12px; }
.spirit-wizard-progress button.active { color:var(--staff-text); background:#fff; }
.spirit-wizard-progress button.active span { background:var(--staff-red); }
.spirit-wizard-step { display:none; min-height:430px; padding:42px clamp(26px,5vw,60px); }
.spirit-wizard-step.active { display:block; }
.spirit-wizard-step h2 { margin:0 0 8px; font-size:38px; line-height:1.05; }
.spirit-step-lede { margin:0 0 28px; color:var(--staff-muted); font-size:18px; }
.spirit-form-grid { display:grid; gap:16px; }
.spirit-form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.spirit-form-grid label, .spirit-full-label { display:grid; gap:6px; color:#4d555b; font-size:13px; font-weight:800; }
.spirit-form-grid input, .spirit-form-grid select, .spirit-form-grid textarea, .spirit-full-label textarea { width:100%; min-height:44px; padding:10px 12px; border:1px solid #bcc2c7; border-radius:8px; color:var(--staff-text); background:#fff; outline:none; }
.spirit-form-grid textarea, .spirit-full-label textarea { resize:vertical; }
.spirit-form-grid input:focus, .spirit-form-grid select:focus, .spirit-form-grid textarea:focus, .spirit-full-label textarea:focus { border-color:var(--staff-red); box-shadow:0 0 0 3px rgba(198,58,35,.1); }
.spirit-form-grid small { color:var(--staff-muted); font-weight:400; }
.span-two { grid-column:1 / -1; }
.spirit-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:24px; }
.spirit-choice { position:relative; min-height:160px; display:grid; align-content:center; gap:5px; padding:24px 24px 24px 58px; border:2px solid #d7dadd; border-radius:14px; background:#fff; cursor:pointer; }
.spirit-choice:hover { border-color:#b1b6ba; }
.spirit-choice:has(input:checked) { border-color:var(--staff-red); background:#fff8f6; box-shadow:0 0 0 3px rgba(198,58,35,.07); }
.spirit-choice input { position:absolute; top:28px; left:24px; width:20px; height:20px; accent-color:var(--staff-red); }
.spirit-choice strong { font-size:22px; }
.spirit-choice span { color:var(--staff-muted); font-weight:400; }
.spirit-bulk-fields { margin-top:22px; padding:22px; border:1px solid #e0e3e5; border-radius:12px; background:#fafafa; }
.spirit-individual-note { margin-top:22px; display:grid; gap:3px; padding:22px; border-left:5px solid var(--staff-red); background:#faf4ed; }
.spirit-individual-note span, .spirit-individual-note small { color:var(--staff-muted); }
.spirit-review-note { margin-top:24px; padding:18px 20px; border-radius:10px; color:#4f4027; background:#fff2cf; }
.spirit-wizard-actions { display:flex; justify-content:space-between; gap:12px; padding:20px 28px; border-top:1px solid var(--staff-border); background:#fafafa; }

.spirit-manage-grid { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:20px; align-items:start; }
.spirit-manage-main { display:grid; gap:20px; }
.spirit-manage-side { position:sticky; top:92px; display:grid; gap:20px; }
.spirit-product-list { display:grid; gap:10px; margin-top:20px; }
.spirit-product-admin-row { display:grid; grid-template-columns:82px minmax(0,1fr) auto auto; align-items:center; gap:16px; padding:14px; border:1px solid #e3e5e7; border-radius:12px; background:#fafbfb; }
.spirit-product-thumb { width:82px; height:82px; display:grid; place-items:center; overflow:hidden; border:1px solid #e0e2e4; border-radius:9px; background:#fff; color:#fff; font-weight:900; }
.spirit-product-thumb img { width:100%; height:100%; object-fit:contain; }
.spirit-product-thumb span { width:100%; height:100%; display:grid; place-items:center; background:#202020; }
.spirit-product-copy h3 { margin:0 0 3px; font-size:20px; }
.spirit-product-copy p { margin:0; color:var(--staff-muted); }
.spirit-product-copy small { display:block; margin-top:5px; color:#8a9298; }
.spirit-product-prices { display:grid; gap:3px; min-width:145px; color:var(--staff-muted); font-size:13px; }
.spirit-product-prices span { display:flex; justify-content:space-between; gap:12px; }
.spirit-product-prices strong { color:var(--staff-text); }
.spirit-product-actions { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.spirit-product-actions form { margin:0; }
.spirit-add-product-card > div:first-child h2 { margin:0; font-size:30px; }
.spirit-add-product-card > div:first-child > p:last-child { margin:5px 0 0; color:var(--staff-muted); }
.spirit-product-form { margin-top:22px; }
.money-input { display:grid; grid-template-columns:38px 1fr; border:1px solid #bcc2c7; border-radius:8px; overflow:hidden; background:#fff; }
.money-input > span { display:grid; place-items:center; color:var(--staff-muted); background:#f3f4f5; font-weight:900; }
.money-input input { min-height:42px; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
.spirit-upcharge-box { padding:14px 16px; border:1px solid #e0e3e5; border-radius:10px; background:#fafafa; }
.spirit-upcharge-box summary { font-weight:900; cursor:pointer; }
.spirit-upcharge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.spirit-upcharge-grid label { display:grid; gap:5px; font-size:12px; font-weight:800; }
.spirit-upcharge-grid input { width:100%; min-height:40px; padding:8px; border:1px solid #bcc2c7; border-radius:7px; }
.spirit-side-links { display:grid; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid #eceeef; }
.spirit-side-links a { color:var(--staff-red); font-weight:900; text-decoration:none; }
.spirit-status-card h2 { margin:0 0 12px; font-size:34px; }
.spirit-settings-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:20px; align-items:start; }
.spirit-square-status h2 { font-size:38px; margin:0 0 12px; }
.spirit-connection-pill { width:max-content; padding:6px 10px; border-radius:999px; color:#7d2525; background:#f7dddd; font-size:12px; font-weight:900; text-transform:uppercase; }
.spirit-connection-pill.connected { color:#145932; background:#daf1e3; }
.spirit-square-status p { color:var(--staff-muted); }
.spirit-payment-pill { display:inline-flex; width:max-content; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.04em; }
.payment-paid { color:#145932; background:#daf1e3; }
.payment-pending { color:#765500; background:#fff0b3; }
.payment-failed, .payment-canceled { color:#7d2525; background:#f7dddd; }
.spirit-orders-table { min-width:900px; }
.spirit-order-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
.spirit-order-item-list { display:grid; margin-top:16px; }
.spirit-order-item-list > div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:18px; padding:14px 0; border-bottom:1px solid #eceeef; }
.spirit-order-item-list > div > div { display:grid; }
.spirit-order-item-list span { color:var(--staff-muted); }
.spirit-order-totals { width:min(100%,420px); display:grid; gap:7px; margin:20px 0 0 auto; }
.spirit-order-totals > span { display:flex; justify-content:space-between; gap:20px; }
.spirit-order-totals .grand { padding-top:9px; border-top:2px solid #222; font-size:20px; }
.spirit-total-produce { display:inline-grid; min-width:42px; place-items:center; padding:6px 8px; border-radius:8px; color:#fff; background:var(--staff-red); font-size:19px; }
.spirit-packing-section { margin-top:20px; }
.spirit-packing-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.spirit-packing-list article { padding:16px; border:1px solid #e3e5e7; border-radius:10px; }
.spirit-packing-list article > div { display:flex; justify-content:space-between; gap:12px; }
.spirit-packing-list article span { color:var(--staff-muted); font-size:13px; }
.spirit-packing-list ul { margin:10px 0 0; padding-left:18px; }
.spirit-settlement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.spirit-settlement-grid h2 { margin:0 0 18px; font-size:31px; }
.spirit-settlement-lines { display:grid; gap:10px; }
.spirit-settlement-lines > div { display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid #eceeef; }
.spirit-settlement-lines .highlight { margin-top:8px; padding:16px; border:0; border-radius:10px; color:#145932; background:#e5f5eb; font-size:20px; }
.spirit-settlement-lines .muted-line { color:var(--staff-muted); font-size:13px; }
.spirit-extra-form { margin-bottom:18px; }
.spirit-extra-list { display:grid; }
.spirit-extra-list > div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; padding:11px 0; border-top:1px solid #eceeef; }
.spirit-extra-list form { margin:0; }
.spirit-net-settlement { text-align:center; border-width:2px; }
.spirit-net-settlement.positive { border-color:#9fd0b4; background:#f1fbf5; }
.spirit-net-settlement.negative { border-color:#e5aaa2; background:#fff6f4; }
.spirit-net-settlement h2 { margin:16px 0 4px; font-size:clamp(28px,4vw,44px); }
.spirit-net-amount { display:block; font-size:clamp(48px,7vw,82px); line-height:1; }
.spirit-net-math { display:flex; justify-content:center; gap:25px; color:var(--staff-muted); }

@media (max-width:1100px) {
    .spirit-manage-grid, .spirit-order-detail-grid { grid-template-columns:1fr; }
    .spirit-manage-side { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .spirit-product-admin-row { grid-template-columns:72px minmax(0,1fr) auto; }
    .spirit-product-actions { grid-column:2 / -1; flex-direction:row; }
    .spirit-store-row { grid-template-columns:1fr; }
    .spirit-store-row-actions { justify-content:flex-start; padding-left:98px; }
}
@media (max-width:760px) {
    .spirit-wizard-progress { grid-template-columns:repeat(5,1fr); }
    .spirit-wizard-progress button { font-size:0; }
    .spirit-wizard-progress button span { font-size:12px; }
    .spirit-form-grid.two, .spirit-choice-grid, .spirit-settings-grid, .spirit-settlement-grid, .spirit-packing-list { grid-template-columns:1fr; }
    .span-two { grid-column:auto; }
    .spirit-manage-side { grid-template-columns:1fr; }
    .spirit-product-admin-row { grid-template-columns:64px minmax(0,1fr); }
    .spirit-product-thumb { width:64px; height:64px; }
    .spirit-product-prices, .spirit-product-actions { grid-column:2; }
    .spirit-upcharge-grid { grid-template-columns:repeat(2,1fr); }
    .spirit-store-row-main { display:grid; grid-template-columns:auto 1fr; }
    .spirit-store-row-actions { padding-left:0; }
    .spirit-order-item-list > div { grid-template-columns:1fr auto; }
    .spirit-order-item-list > div > strong:last-child { grid-column:2; }
    .spirit-net-math { flex-direction:column; gap:4px; }
}
@media print {
    .staff-topbar, .back-link, .staff-page-heading .staff-button, .spirit-heading-actions, .spirit-extra-form, .staff-flash { display:none !important; }
    body.staff-app, html { background:#fff; }
    .staff-main { width:100%; padding:0; }
    .staff-card { box-shadow:none; break-inside:avoid; }
    .spirit-packing-list { grid-template-columns:repeat(2,1fr); }
}

/* Spirit Stores v1.4.0 product editing */
.spirit-product-edit-panel{margin:-8px 0 14px 82px;border:1px solid #e4e7eb;border-radius:10px;background:#fafbfc;overflow:hidden}.spirit-product-edit-panel>summary{cursor:pointer;padding:10px 14px;font-weight:700;color:#a72727;list-style:none}.spirit-product-edit-panel>summary::-webkit-details-marker{display:none}.spirit-product-edit-panel>summary:after{content:' +';font-weight:800}.spirit-product-edit-panel[open]>summary:after{content:' −'}.spirit-product-edit-form{padding:4px 14px 16px;border-top:1px solid #eceef0}.spirit-product-edit-form .staff-button{margin-top:4px}@media(max-width:800px){.spirit-product-edit-panel{margin-left:0}}


/* MPH Spirit Stores v1.4.1 usability refinements */
.spirit-wizard-progress-six { grid-template-columns:repeat(6,1fr); }
.spirit-tax-rate-box { width:min(100%,460px); margin-top:22px; padding:20px; border:1px solid #e0e3e5; border-radius:12px; background:#fafafa; }
.spirit-tax-rate-box > label { display:grid; gap:6px; color:#4d555b; font-size:13px; font-weight:800; }
.spirit-percent-input { display:grid; grid-template-columns:minmax(0,1fr) 46px; overflow:hidden; border:1px solid #bcc2c7; border-radius:8px; background:#fff; }
.spirit-percent-input input { min-width:0; min-height:42px; padding:9px 11px; border:0 !important; border-radius:0 !important; outline:0; }
.spirit-percent-input > span { display:grid; place-items:center; color:var(--staff-muted); background:#f3f4f5; font-weight:900; }
.spirit-size-field { display:grid; align-content:start; gap:7px; color:#4d555b; font-size:13px; font-weight:800; }
.spirit-size-field > small { color:var(--staff-muted); font-weight:400; }
.spirit-size-check-grid { display:flex; flex-wrap:wrap; gap:7px; padding:10px; border:1px solid #d9dde0; border-radius:9px; background:#fafbfb; }
.spirit-size-check { position:relative; display:block !important; cursor:pointer; }
.spirit-size-check input { position:absolute; opacity:0; pointer-events:none; }
.spirit-size-check span { min-width:48px; display:grid; place-items:center; padding:8px 10px; border:1px solid #cbd0d4; border-radius:7px; color:#4d555b; background:#fff; font-size:12px; font-weight:900; }
.spirit-size-check input:checked + span { color:#fff; border-color:var(--staff-red); background:var(--staff-red); }
.spirit-size-check input:focus-visible + span { outline:3px solid rgba(198,58,35,.18); outline-offset:2px; }
.spirit-current-image-row { display:grid; grid-template-columns:110px minmax(0,1fr); align-items:center; gap:16px; padding:12px; border:1px solid #e4e7e9; border-radius:10px; background:#fafbfb; }
.spirit-current-product-image { width:110px; height:90px; display:grid; place-items:center; overflow:hidden; border:1px solid #dfe2e4; border-radius:8px; color:#8a9298; background:#fff; font-size:11px; font-weight:900; }
.spirit-current-product-image img { width:100%; height:100%; object-fit:contain; }
.spirit-slug-input { display:grid; grid-template-columns:auto minmax(0,1fr); overflow:hidden; border:1px solid #bcc2c7; border-radius:8px; background:#fff; }
.spirit-slug-input > span { display:flex; align-items:center; padding:0 9px; color:#7b8287; background:#f2f3f4; font-size:12px; font-weight:700; }
.spirit-slug-input input { min-width:0; border:0 !important; border-radius:0 !important; }
.spirit-product-actions > button.staff-link-button { padding:0; border:0; background:transparent; cursor:pointer; }
@media(max-width:760px) {
    .spirit-wizard-progress-six { grid-template-columns:repeat(6,1fr); }
    .spirit-current-image-row { grid-template-columns:1fr; }
}


/* Spirit Stores v1.4.2 — modern product image manager */
.spirit-product-image-manager{display:grid;gap:14px;margin-top:2px;padding:16px;border:1px solid #e1e5e8;border-radius:12px;background:#fbfcfc}
.spirit-image-manager-heading span{display:block;color:var(--staff-text);font-size:14px;font-weight:800}.spirit-image-manager-heading small{display:block;margin-top:3px;color:var(--staff-muted);font-weight:400}
.spirit-image-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.spirit-image-drop{display:grid;gap:8px}.spirit-image-drop-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.spirit-image-drop-heading strong{display:block;font-size:13px;color:#353b40}.spirit-image-drop-heading small{display:block;margin-top:2px;color:var(--staff-muted);font-size:11px;font-weight:400}
.spirit-image-remove{appearance:none;border:0;background:transparent;color:#a72727;font:inherit;font-size:12px;font-weight:800;cursor:pointer;padding:0}
.spirit-dropzone{position:relative;display:block;min-height:170px;border:2px dashed #c9cfd3!important;border-radius:12px!important;background:#fff!important;overflow:hidden;cursor:pointer;transition:.15s ease}.spirit-dropzone:hover,.spirit-dropzone.is-dragging{border-color:var(--staff-red)!important;background:#fff8f6!important;box-shadow:0 0 0 3px rgba(198,58,35,.08)}
.spirit-dropzone input[type=file]{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.spirit-drop-preview{min-height:166px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;padding:12px;color:#697177}.spirit-drop-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f4f5f5}.spirit-drop-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#f3e5e2;color:var(--staff-red);font-size:24px;line-height:1}.spirit-drop-preview strong{font-size:13px;color:#3f474c}.spirit-drop-preview small{font-size:11px}.spirit-drop-replace{position:absolute;left:10px;right:10px;bottom:10px;padding:6px 8px;border-radius:7px;background:rgba(23,28,31,.82);color:#fff;font-size:11px;font-weight:700}
.spirit-color-image-overrides{border-top:1px solid #e5e8ea;padding-top:12px}.spirit-color-image-overrides>summary{cursor:pointer;font-weight:800;color:#3d464b}.spirit-color-image-overrides>summary span{margin-left:6px;color:var(--staff-muted);font-size:11px;font-weight:700}.spirit-color-image-overrides>p{margin:8px 0 12px;color:var(--staff-muted);font-size:12px}.spirit-color-image-row{display:grid;gap:10px;padding:14px 0;border-top:1px solid #eceeef}.spirit-color-image-row:first-child{border-top:0}.spirit-color-image-row h4{margin:0;color:#252b2f;font-size:14px}
@media(max-width:760px){.spirit-image-pair{grid-template-columns:1fr}.spirit-dropzone,.spirit-drop-preview{min-height:150px}}

/* v1.5.3 — Staff top navigation cleanup */
@media (min-width: 1181px) {
    .staff-topbar {
        min-height: 68px;
        display: flex;
        grid-template-columns: none;
        align-items: center;
        gap: 14px;
        padding: 8px clamp(14px, 1.6vw, 26px);
    }
    .staff-brand-wrap { flex: 0 0 auto; min-width: 0; }
    .staff-brand { gap: 11px; white-space: nowrap; }
    .staff-brand img { width: 176px; max-height: 44px; }
    .staff-brand span { padding-left: 11px; font-size: 15px; white-space: nowrap; }
    .staff-main-nav {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3px;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .staff-main-nav a,
    .staff-nav-disabled {
        flex: 0 0 auto;
        padding: 9px 10px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
    }
    .staff-user-menu {
        flex: 0 0 auto;
        gap: 6px;
        white-space: nowrap;
    }
    .staff-user-menu > div { min-width: 0; }
    .staff-user-menu > div strong { white-space: nowrap; }
    .staff-user-menu a,
    .staff-user-menu button { padding: 7px 6px; font-size: 12px; white-space: nowrap; }
}

@media (min-width: 1181px) and (max-width: 1370px) {
    .staff-brand span { display: none; }
    .staff-brand img { width: 165px; }
    .staff-main-nav a,
    .staff-nav-disabled { padding-inline: 8px; font-size: 12.5px; }
    .staff-user-menu small { display: none; }
}

@media (max-width: 1180px) {
    .staff-topbar {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 7px 12px;
        padding-block: 8px;
    }
    .staff-main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }
    .staff-main-nav a,
    .staff-nav-disabled {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 10px;
        font-size: 13px;
    }
    .staff-user-menu { grid-column: 2; grid-row: 1; }
}

/* v1.5.3 — Spirit Store lifecycle / archive */
.spirit-store-tabs {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: -8px 0 20px;
    padding: 5px;
    border: 1px solid var(--staff-border);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(17,17,17,.04);
}
.spirit-store-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--staff-muted);
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}
.spirit-store-tabs a strong {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    color: #5c646a;
    background: #eef0f1;
    font-size: 11px;
    text-align: center;
}
.spirit-store-tabs a:hover { color: var(--staff-text); background: #f4f5f6; }
.spirit-store-tabs a.active { color: #fff; background: var(--staff-black); }
.spirit-store-tabs a.active strong { color: var(--staff-black); background: #fff; }

.spirit-store-badge.status-fulfilled { color: #155534; background: #dff3e7; }
.spirit-store-badge.status-archived { color: #5f6468; background: #e9ebed; }
.spirit-store-row-archived { background: #fafafa; box-shadow: none; }
.spirit-store-row-archived h2 { color: #454b50; }
.spirit-archive-ready,
.spirit-archive-waiting {
    width: max-content;
    max-width: 100%;
    margin-top: 9px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}
.spirit-archive-ready { color: #155534; background: #e4f5eb; }
.spirit-archive-waiting { color: #725515; background: #fff2c7; }

.spirit-archive-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 18px 22px;
    box-shadow: none;
}
.spirit-archive-panel h2 { margin: 2px 0 3px; font-size: 23px; }
.spirit-archive-panel p:last-child { margin: 0; color: var(--staff-muted); }
.spirit-archive-panel form { flex: 0 0 auto; margin: 0; }
.spirit-archive-panel.is-ready { border-color: #b9ddc7; background: #f2fbf5; }
.spirit-archive-panel.is-waiting { border-color: #ead9a4; background: #fffaf0; }
.spirit-archive-panel.is-archived { border-color: #d5d9dc; background: #f6f7f8; }

@media (max-width: 720px) {
    .spirit-store-tabs { width: 100%; overflow-x: auto; }
    .spirit-store-tabs a { flex: 1 0 auto; justify-content: center; }
    .spirit-archive-panel { align-items: flex-start; flex-direction: column; }
}


/* ==========================================================================
   MPH Staff v1.9.0 — Website Content Manager
   ========================================================================== */

.website-manager-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 22px;
}

.website-manager-tabs a {
    padding: 9px 13px;
    border: 1px solid #d8dddf;
    border-radius: 8px;
    background: #fff;
    color: #30383c;
    font-weight: 800;
    text-decoration: none;
}

.website-manager-tabs a:hover {
    border-color: #aeb7bc;
}

.website-manager-section {
    margin-bottom: 24px;
    scroll-margin-top: 24px;
}

.website-manager-heading,
.website-slot-group-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
}

.website-manager-heading {
    margin-bottom: 20px;
}

.website-manager-heading h2,
.website-slot-group-heading h3 {
    margin: 3px 0 4px;
}

.website-manager-heading p:last-child {
    margin-bottom: 0;
    color: #68727b;
}

.website-manager-count,
.website-slot-group-heading span {
    flex: 0 0 auto;
    color: #68727b;
    font-size: 13px;
    font-weight: 800;
}

.website-gallery-add {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, .8fr) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #dde2e4;
    border-radius: 10px;
    background: #f7f9f8;
}

.website-gallery-add label,
.website-slot-form label {
    display: grid;
    gap: 6px;
}

.website-gallery-add label > span,
.website-slot-form label > span,
.website-drop-field > span {
    font-weight: 800;
}

.website-gallery-add input,
.website-slot-form input {
    width: 100%;
}

.website-drop-field {
    display: grid;
    gap: 6px;
}

.website-drop-field input[type="file"] {
    padding: 12px;
    border: 1px dashed #aeb7bc;
    border-radius: 8px;
    background: #fff;
}

.website-drop-field small,
.website-slot-copy p {
    color: #68727b;
    font-size: 12px;
}

.website-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.website-gallery-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #dce1e3;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 27, 34, .05);
}

.website-gallery-card.is-hidden {
    opacity: .62;
}

.website-gallery-card.is-dragging {
    opacity: .45;
    outline: 2px solid #cd3822;
}

.website-gallery-drag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(20, 24, 26, .82);
    color: #fff;
    cursor: grab;
    font-weight: 900;
    letter-spacing: -2px;
}

.website-gallery-preview {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #eef0ef;
}

.website-gallery-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.website-gallery-preview > span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #2e3437;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.website-gallery-card-body {
    padding: 12px 12px 8px;
}

.website-gallery-card-body strong,
.website-gallery-card-body small {
    display: block;
}

.website-gallery-card-body small {
    margin-top: 2px;
    color: #6c7478;
}

.website-gallery-order-buttons {
    display: flex;
    gap: 6px;
    margin-top: 9px;
}

.website-gallery-order-buttons button {
    width: 32px;
    height: 30px;
    border: 1px solid #d7dcde;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-weight: 900;
}

.website-gallery-actions {
    padding: 0 12px 12px;
}

.website-gallery-edit-toggle {
    width: 100%;
}

.website-gallery-editor {
    padding: 12px;
    border-top: 1px solid #e6e9ea;
    background: #f7f8f8;
}

.website-gallery-editor form {
    display: grid;
    gap: 10px;
}

.website-gallery-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.website-gallery-secondary-actions form {
    display: block;
}

.website-gallery-save-order {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.website-slot-group {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #e3e6e7;
}

.website-slot-group:first-of-type {
    margin-top: 0;
}

.website-slot-group-heading {
    margin-bottom: 12px;
}

.website-slot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.website-slot-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dce1e3;
    border-radius: 10px;
    background: #fff;
}

.website-slot-preview {
    position: relative;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #e3e6e7;
    background: #f2f3f2;
}

.website-slot-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.website-slot-preview > span {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 7px;
    border-radius: 999px;
    background: #163e29;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
}

.website-slot-preview > span.is-default {
    background: #525b60;
}

.website-slot-copy {
    padding: 13px 14px 0;
}

.website-slot-copy h4 {
    margin: 0 0 3px;
    font-size: 17px;
}

.website-slot-form {
    display: grid;
    gap: 10px;
    padding: 12px 14px 14px;
    margin-top: auto;
}

.website-restore-button {
    width: calc(100% - 28px);
    margin: 0 14px 14px;
}

@media (max-width: 1180px) {
    .website-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .website-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .website-gallery-add {
        grid-template-columns: 1fr;
    }

    .website-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .website-manager-heading,
    .website-slot-group-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 620px) {
    .website-gallery-grid,
    .website-slot-grid {
        grid-template-columns: 1fr;
    }
}


.website-gallery-secondary-actions .staff-button-danger {
    border-color: #b94235;
    background: #fff;
    color: #a12f25;
}

.website-gallery-secondary-actions .staff-button-danger:hover {
    background: #fff2f0;
}