:root {
  --rp-ink: #272832;
  --rp-muted: #747986;
  --rp-line: #e6e4eb;
  --rp-surface: #fff;
  --rp-soft: #f8f7fb;
  --rp-purple: #6427d9;
  --rp-purple-dark: #3d167d;
  --rp-red: #c53f54;
  --rp-orange: #d77822;
  --rp-amber: #ae7c12;
  --rp-green: #27795a;
}

.replenishment-page { width: 100%; max-width: 1660px; min-width: 0; margin: 0 auto; color: var(--rp-ink); }
.replenishment-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 4px 0 20px; }
.replenishment-heading .back-button { margin-bottom: 17px; }
.replenishment-heading h1 { margin: 8px 0 7px; font-size: clamp(26px, 2.5vw, 35px); letter-spacing: -.045em; }
.replenishment-heading p { max-width: 760px; margin: 0; color: var(--rp-muted); font-size: 11px; line-height: 1.65; }
.replenishment-source-status { display: grid; grid-template-columns: 9px auto; align-items: center; column-gap: 8px; min-width: 210px; padding: 12px 15px; border: 1px solid #dcd9e5; border-radius: 11px; background: rgba(255,255,255,.76); box-shadow: 0 6px 20px rgba(54,32,89,.04); }
.replenishment-source-status i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: #38a875; box-shadow: 0 0 0 4px rgba(56,168,117,.11); }
.replenishment-source-status span { color: var(--rp-muted); font-size: 8px; letter-spacing: .1em; }
.replenishment-source-status b { margin-top: 2px; font-size: 10px; }
.replenishment-source-status small { grid-column: 2; margin-top: 4px; color: #9699a2; font-size: 8px; }

.replenishment-preview-notice { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 13px 15px; border: 1px solid #ded6f0; border-radius: 12px; background: linear-gradient(100deg,#f7f3fd,#fbf9ff); }
.preview-notice-icon { display: grid; flex: 0 0 auto; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #e7dcf9; color: var(--rp-purple); font-family: Georgia,serif; font-size: 14px; font-weight: 700; }
.replenishment-preview-notice > div:nth-child(2) { min-width: 0; }
.replenishment-preview-notice b { display: block; color: #422076; font-size: 10px; }
.replenishment-preview-notice p { margin: 4px 0 0; color: #777080; font-size: 9px; line-height: 1.55; }
.replenishment-preview-notice button { flex: 0 0 auto; margin-left: auto; border: 0; background: transparent; color: var(--rp-purple); font-size: 9px; font-weight: 700; cursor: pointer; }

.replenishment-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.replenishment-summary-card { position: relative; min-width: 0; min-height: 104px; overflow: hidden; padding: 14px 15px; border: 1px solid var(--rp-line); border-radius: 13px; background: var(--rp-surface); text-align: left; cursor: pointer; box-shadow: 0 6px 18px rgba(39,23,65,.035); transition: transform .16s,border-color .16s,box-shadow .16s; }
.replenishment-summary-card:after { content: ""; position: absolute; right: -22px; bottom: -32px; width: 72px; height: 72px; border: 13px solid rgba(100,39,217,.035); border-radius: 50%; }
.replenishment-summary-card:hover { z-index: 1; transform: translateY(-2px); border-color: #cfc7e0; box-shadow: 0 10px 26px rgba(51,28,86,.08); }
.replenishment-summary-card span,.replenishment-summary-card b,.replenishment-summary-card small { display: block; }
.replenishment-summary-card span { color: var(--rp-muted); font-size: 9px; }
.replenishment-summary-card b { margin: 8px 0 6px; color: var(--rp-purple-dark); font-size: clamp(20px,1.8vw,27px); line-height: 1; letter-spacing: -.035em; }
.replenishment-summary-card small { overflow: hidden; color: #979aa3; font-size: 8px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.replenishment-summary-card.critical { border-top: 3px solid var(--rp-red); }
.replenishment-summary-card.critical b { color: var(--rp-red); }
.replenishment-summary-card.warning { border-top: 3px solid var(--rp-orange); }
.replenishment-summary-card.warning b { color: var(--rp-orange); }
.replenishment-summary-card.attention { border-top: 3px solid #b68b20; }
.replenishment-summary-card.attention b { color: #9c7310; }
.replenishment-summary-card.quantity { border-top: 3px solid var(--rp-purple); }
.replenishment-summary-card.value { border-top: 3px solid #3854a8; }
.replenishment-summary-card.value b { color: #3854a8; font-size: clamp(17px,1.45vw,23px); }
.replenishment-summary-card.issue { border-top: 3px solid #7b7487; }
.replenishment-summary-card.issue b { color: #615a6b; }

.replenishment-parameters { display: grid; grid-template-columns: 1.08fr repeat(3,minmax(110px,.7fr)) repeat(2,minmax(150px,1fr)) auto; align-items: end; gap: 10px; margin-bottom: 12px; padding: 13px; border: 1px solid var(--rp-line); border-radius: 13px; background: #fff; }
.parameter-title { align-self: center; padding-left: 3px; }
.parameter-title span,.parameter-title b { display: block; }
.parameter-title span { color: var(--rp-purple); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.parameter-title b { margin-top: 6px; font-size: 10px; }
.replenishment-parameters > label,.replenishment-filters > label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #565a64; font-size: 8px; font-weight: 700; }
.number-input { display: flex; height: 37px; align-items: center; border: 1px solid #dfdce5; border-radius: 8px; background: #fcfcfd; }
.number-input:focus-within { border-color: #9a6be4; box-shadow: 0 0 0 3px rgba(100,39,217,.07); }
.number-input input { min-width: 0; width: 100%; height: 100%; padding: 0 3px 0 10px; border: 0; outline: 0; background: transparent; color: #292631; font-size: 10px; font-weight: 700; }
.number-input i { padding-right: 10px; color: #8c8f98; font-size: 8px; font-style: normal; }
.parameter-switch { height: 37px; flex-direction: row!important; align-items: center; gap: 8px!important; padding: 0 10px; border: 1px solid #dfdce5; border-radius: 8px; background: #fcfcfd; cursor: pointer; }
.parameter-switch.caution { border-color: #e7dac2; background: #fffdf8; }
.parameter-switch input { width: 14px; height: 14px; margin: 0; accent-color: var(--rp-purple); }
.parameter-switch span,.parameter-switch b,.parameter-switch small { display: block; min-width: 0; }
.parameter-switch b { font-size: 8px; white-space: nowrap; }
.parameter-switch small { margin-top: 2px; overflow: hidden; color: #9b97a0; font-size: 7px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.replenishment-calculate { height: 37px; padding: 0 16px; border: 0; border-radius: 8px; background: linear-gradient(105deg,#5722c6,#8c2bc4); color: #fff; font-size: 9px; font-weight: 700; cursor: pointer; box-shadow: 0 7px 17px rgba(100,39,217,.17); }
.replenishment-calculate:disabled { opacity: .58; cursor: wait; }

.replenishment-filters { display: grid; grid-template-columns: minmax(220px,1.45fr) repeat(4,minmax(120px,.75fr)) auto; align-items: end; gap: 9px; margin-bottom: 11px; padding: 11px 12px; border: 1px solid var(--rp-line); border-radius: 12px; background: #fff; }
.replenishment-filters input,.replenishment-filters select { width: 100%; height: 35px; padding: 0 9px; border: 1px solid #e1dfe5; border-radius: 8px; outline: 0; background: #fcfcfd; color: #34323a; font-size: 9px; }
.replenishment-filters input:focus,.replenishment-filters select:focus { border-color: #9a6be4; box-shadow: 0 0 0 3px rgba(100,39,217,.07); }
.replenishment-filter-actions { display: flex; gap: 6px; }
.replenishment-filter-actions button { height: 35px; padding: 0 13px; border: 1px solid #dedbe5; border-radius: 8px; background: #fff; color: #67616d; font-size: 8px; font-weight: 700; cursor: pointer; }
.replenishment-filter-actions button:first-child { border-color: var(--rp-purple); background: var(--rp-purple); color: #fff; }

.replenishment-result-line { display: flex; justify-content: space-between; gap: 12px; padding: 0 3px 8px; color: #777b85; font-size: 8px; }
.replenishment-result-line span:last-child { color: #4c257e; font-weight: 700; }
.replenishment-table-shell { position: relative; overflow: auto; min-height: 380px; max-height: calc(100vh - 310px); border: 1px solid var(--rp-line); border-radius: 13px; background: #fff; box-shadow: 0 7px 25px rgba(44,24,71,.035); }
.replenishment-table { width: 100%; min-width: 2140px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.replenishment-table th { position: sticky; top: 0; z-index: 3; height: 35px; padding: 0 8px; border-bottom: 1px solid #dedbe4; background: #f6f4f9; color: #6e6876; font-size: 7px; font-weight: 800; line-height: 1.25; letter-spacing: .035em; text-align: left; white-space: nowrap; }
.replenishment-table th:nth-child(1){width:92px}.replenishment-table th:nth-child(2){width:105px}.replenishment-table th:nth-child(3){width:255px}.replenishment-table th:nth-child(4){width:90px}.replenishment-table th:nth-child(5){width:125px}.replenishment-table th:nth-child(6){width:100px}.replenishment-table th:nth-child(7){width:100px}.replenishment-table th:nth-child(8){width:95px}.replenishment-table th:nth-child(9){width:110px}.replenishment-table th:nth-child(10){width:105px}.replenishment-table th:nth-child(11){width:100px}.replenishment-table th:nth-child(12){width:105px}.replenishment-table th:nth-child(13){width:92px}.replenishment-table th:nth-child(14){width:100px}.replenishment-table th:nth-child(15){width:90px}.replenishment-table th:nth-child(16){width:105px}.replenishment-table th:nth-child(17){width:120px}.replenishment-table th:nth-child(18){width:150px}.replenishment-table th:nth-child(19){width:78px}
.replenishment-table td { height: 44px; padding: 3px 8px; border-bottom: 1px solid #efedf2; color: #51535d; font-size: 8px; line-height: 1.25; vertical-align: middle; }
.replenishment-table tbody tr { transition: background .14s; }
.replenishment-table tbody tr:hover { background: #faf8fd; }
.replenishment-table tbody tr:last-child td { border-bottom: 0; }
.risk-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.risk-badge.p0 { background: #fdebed; color: #b62d43; }.risk-badge.p1 { background: #fff0e2; color: #bd651b; }.risk-badge.p2 { background: #fff7dc; color: #8f6710; }.risk-badge.p3 { background: #e9f6ef; color: #287252; }.risk-badge.p4 { background: #f0eff2; color: #68626d; }.risk-badge.p5 { background: #eee9f7; color: #674398; }
.rp-product-cell { display: flex; min-width: 0; align-items: center; gap: 7px; }
.rp-product { min-width: 0; flex: 1; }
.rp-product-image { position: relative; display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; overflow: hidden; border: 1px solid #e4e1e8; border-radius: 6px; background: #f8f7fa; color: #aaa5ae; }
.rp-product-image img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; cursor: zoom-in; transition: border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
.rp-product-image:not(.detail):hover { border-color: #b99bdc; box-shadow: 0 3px 10px rgba(78,43,116,.16); transform: scale(1.04); }
.rp-product-image:not(.detail):focus-within { border-color: var(--rp-purple); outline: 2px solid rgba(100,39,217,.2); outline-offset: 2px; }
.rp-product-image.missing { border-style: dashed; background: linear-gradient(135deg,#faf9fb,#f2f0f5); }
.rp-product-image.missing:before { content: ""; width: 17px; height: 13px; border: 1px solid #c8c3cd; border-radius: 3px; background: linear-gradient(145deg,transparent 43%,#d5d0d9 44% 56%,transparent 57%); }
.rp-product-image.missing small { position: absolute; right: 0; bottom: 2px; left: 0; color: #aaa5ae; font-size: 6px; text-align: center; }
.rp-product-image.detail { width: 52px; height: 52px; flex-basis: 52px; border-radius: 8px; background: #fff; }
.rp-product-image.detail img { cursor: default; }
.rp-product b,.rp-product span,.rp-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-product b { font-size: 9px; }.rp-product span { margin-top: 2px; color: #5f3b8e; font-size: 7px; font-weight: 700; }.rp-product small { margin-top: 1px; color: #9b9da4; font-size: 6.5px; }
.rp-status { display: inline-flex; padding: 3px 6px; border-radius: 5px; background: #f2f0f5; color: #67616d; font-size: 7px; white-space: nowrap; }
.rp-status.active { background: #eaf7f0; color: #287252; }.rp-status.paused { background: #fff5df; color: #986b0d; }.rp-status.closed { background: #f3ebed; color: #8d4c57; }
.rp-sales { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }.rp-sales span { display: block; }.rp-sales b { font-size: 8px; }.rp-sales small { color: #9b9da4; font-size: 6.5px; }
.rp-profit-rate b { display: block; font-size: 9px; letter-spacing: -.015em; }.rp-profit-rate small { display: block; margin-top: 2px; color: #989aa2; font-size: 6.5px; }.rp-profit-rate.positive b { color: #24764f; }.rp-profit-rate.negative b { color: #bb3544; }.rp-profit-rate.neutral b { color: #6f6a74; }.rp-profit-rate.missing b { color: #aaaeb4; font-weight: 500; }
.rp-forecast b,.rp-stock b,.rp-quantity b { display: block; font-size: 9px; }.rp-forecast small,.rp-stock small,.rp-quantity small { display: block; margin-top: 2px; color: #9699a1; font-size: 6.5px; }
.rp-trend { display: inline-block; margin-top: 3px; font-size: 7px; }.rp-trend.growing { color: #c24848; }.rp-trend.declining { color: #367359; }.rp-trend.stable { color: #77727d; }
.rp-candidate { color: #95650a; font-weight: 700; }.rp-inbound { color: #4d3984; font-weight: 700; }.rp-recommend b { color: #4f1fb0; font-size: 10px; }.rp-recommend small { display: block; margin-top: 2px; color: #918c98; font-size: 6.5px; }
.rp-zero { color: #acaeb4!important; font-weight: 400!important; }.rp-critical-number { color: var(--rp-red); font-weight: 800; }
.rp-issues { display: flex; flex-wrap: wrap; gap: 3px; }.rp-issue { display: inline-block; max-width: 100%; overflow: hidden; padding: 2px 5px; border-radius: 4px; background: #f2eef7; color: #6c4a91; font-size: 6px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }.rp-issue.danger { background: #fdebed; color: #ad3245; }.rp-issue.caution { background: #fff4db; color: #8e6817; }
.rp-detail-button { height: 27px; padding: 0 9px; border: 1px solid #dcd7e5; border-radius: 7px; background: #fff; color: #55259d; font-size: 8px; font-weight: 700; cursor: pointer; }
.rp-detail-button:hover { border-color: #9a71d6; background: #f8f4fd; }

.replenishment-loading { position: absolute; inset: 35px 0 0; z-index: 5; display: grid; place-content: center; justify-items: center; background: rgba(255,255,255,.94); color: #625a6b; }
.replenishment-loading i { width: 32px; height: 32px; margin-bottom: 12px; border: 3px solid #e3d9f3; border-top-color: var(--rp-purple); border-radius: 50%; animation: rp-spin .8s linear infinite; }
.replenishment-loading b { font-size: 10px; }.replenishment-loading span { margin-top: 6px; color: #9a96a0; font-size: 8px; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
.replenishment-empty { position: absolute; inset: 35px 0 0; display: grid; place-content: center; text-align: center; background: #fff; }.replenishment-empty b { font-size: 11px; }.replenishment-empty p { margin: 7px 0 0; color: #9699a1; font-size: 8px; }
.replenishment-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 11px 2px 0; }
.replenishment-pagination button { height: 31px; padding: 0 12px; border: 1px solid #dedbe5; border-radius: 7px; background: #fff; color: #5f5965; font-size: 8px; font-weight: 700; cursor: pointer; }.replenishment-pagination button:disabled { opacity: .45; cursor: default; }.replenishment-pagination span { min-width: 112px; color: #74717a; font-size: 8px; text-align: center; }

.replenishment-dialog { width: min(880px,calc(100vw - 34px)); max-height: min(820px,calc(100vh - 34px)); padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #fff; color: var(--rp-ink); box-shadow: 0 26px 80px rgba(33,18,52,.28); }
.replenishment-dialog::backdrop { background: rgba(27,17,40,.48); backdrop-filter: blur(3px); }
.replenishment-dialog-content { display: flex; max-height: inherit; flex-direction: column; }
.replenishment-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 17px; border-bottom: 1px solid var(--rp-line); }.replenishment-dialog h2 { margin: 7px 0 4px; font-size: 21px; }.replenishment-dialog header p { margin: 0; color: var(--rp-muted); font-size: 9px; }.replenishment-dialog header button { border: 0; background: transparent; color: #78737d; font-size: 23px; cursor: pointer; }
#replenishment-dialog-body { overflow: auto; padding: 18px 24px 23px; }
.rp-detail-risk { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; padding: 10px 15px 10px 10px; border-radius: 10px; background: #f7f4fb; }.rp-detail-risk p { margin: 0; color: #5f5968; font-size: 9px; line-height: 1.55; }.rp-detail-lead { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.rp-detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }.rp-detail-panel { padding: 14px; border: 1px solid var(--rp-line); border-radius: 11px; background: #fff; }.rp-detail-panel h3 { margin: 0 0 12px; color: #4c237e; font-size: 10px; }.rp-detail-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #ece9ef; font-size: 8px; }.rp-detail-metric:last-child { border-bottom: 0; }.rp-detail-metric span { color: #7e7a84; }.rp-detail-metric b { text-align: right; font-size: 9px; }
.rp-formula { margin-bottom: 14px; padding: 14px 15px; border-radius: 11px; background: #2d163e; color: #f5eefd; }.rp-formula h3 { margin: 0 0 9px; color: #debafa; font-size: 9px; }.rp-formula code { display: block; font-family: Consolas,monospace; font-size: 9px; line-height: 1.65; white-space: normal; }.rp-formula p { margin: 8px 0 0; color: #cbbbd6; font-size: 8px; line-height: 1.55; }
.rp-arrivals h3,.rp-assumptions h3 { margin: 0 0 9px; font-size: 10px; }.rp-arrival-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }.rp-arrival-list span { padding: 6px 8px; border: 1px solid #ded8e8; border-radius: 7px; background: #faf8fd; color: #5f3e86; font-size: 8px; }.rp-assumptions { padding: 13px 14px; border: 1px solid #ebdfc6; border-radius: 10px; background: #fffaf0; }.rp-assumptions ul { margin: 0; padding-left: 18px; color: #716756; font-size: 8px; line-height: 1.75; }
.replenishment-dialog footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 24px; border-top: 1px solid var(--rp-line); background: #faf9fb; }.replenishment-dialog footer span { color: #8d8992; font-size: 8px; }.replenishment-dialog footer button { height: 34px; padding: 0 17px; border: 0; border-radius: 8px; background: var(--rp-purple); color: #fff; font-size: 9px; font-weight: 700; cursor: pointer; }

@media(max-width:1400px) { .replenishment-summary { grid-template-columns: repeat(3,1fr); }.replenishment-parameters { grid-template-columns: repeat(4,1fr); }.parameter-title { grid-row: span 1; }.replenishment-calculate { align-self: end; }.replenishment-filters { grid-template-columns: 1.4fr repeat(3,1fr); }.replenishment-filter-actions { grid-column: auto; } }
@media(min-width:931px) { .replenishment-page { width: min(1660px,calc(100vw - 306px)); } }
@media(max-width:950px) { .replenishment-heading { align-items: flex-start; }.replenishment-source-status { display: none; }.replenishment-parameters { grid-template-columns: repeat(3,1fr); }.parameter-title { grid-column: 1 / -1; }.replenishment-filters { grid-template-columns: repeat(2,1fr); }.replenishment-search { grid-column: 1 / -1; }.replenishment-table-shell { max-height: none; }.rp-detail-grid { grid-template-columns: 1fr; } }
@media(max-width:680px) { .replenishment-page { width: 100%; }.replenishment-heading { margin-top: 0; }.replenishment-heading h1 { font-size: 27px; }.replenishment-preview-notice { align-items: flex-start; }.replenishment-preview-notice button { display: none; }.replenishment-summary { grid-template-columns: repeat(2,1fr); }.replenishment-summary-card { min-height: 96px; }.replenishment-parameters,.replenishment-filters { grid-template-columns: 1fr 1fr; }.parameter-title,.replenishment-search { grid-column: 1 / -1; }.parameter-switch { min-width: 0; }.replenishment-calculate { grid-column: 1 / -1; }.replenishment-filter-actions { grid-column: 1 / -1; }.replenishment-filter-actions button { flex: 1; }.replenishment-result-line { flex-direction: column; gap: 4px; }.replenishment-dialog header,#replenishment-dialog-body,.replenishment-dialog footer { padding-inline: 16px; } }
@media(max-width:430px) { .replenishment-summary { grid-template-columns: 1fr 1fr; gap: 7px; }.replenishment-summary-card { padding: 12px; }.replenishment-parameters { grid-template-columns: 1fr; }.parameter-title,.replenishment-calculate { grid-column: auto; }.replenishment-filters { grid-template-columns: 1fr; }.replenishment-search,.replenishment-filter-actions { grid-column: auto; } }
@media(hover:none),(pointer:coarse) { .rp-product-image img { cursor: default; } }