.products-view-tabs { display: flex; gap: 8px; margin-top: 16px; }
.products-view-tabs button { background: transparent; color: #fff; border: 1px solid #747992; border-radius: 9px; padding: 10px 22px; font: inherit; font-weight: 600; cursor: pointer; }
.products-view-tabs button[aria-selected="true"] { background: #6074ff; border-color: #6074ff; }
#products-all-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#products-all-panel[hidden], #products-client-panel[hidden] { display: none !important; }
.client-products { --cp-ink: #343957; --cp-line: #dce4ec; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; padding: 20px; color: var(--cp-ink); background: linear-gradient(140deg, #f3f7fa, #f7faf8); }
.client-products > :not(.cp-table-scroll) { flex-shrink: 0; }
.client-products p, .cp-dialog p { color: #53647a; line-height: 1.5; font-size: 13px; font-weight: 400; }
.cp-intro, .cp-selection-bar, .cp-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cp-intro h3 { font-size: 20px; margin: 0 0 4px; }
.cp-intro span { font-size: 12px; color: #64758a; }
.client-products button, .cp-dialog button { font: inherit; border: 1px solid #cfd9e6; border-radius: 8px; padding: 9px 14px; color: #343957; background: white; cursor: pointer; }
.client-products button:disabled, .cp-dialog button:disabled { opacity: .5; cursor: default; }
.client-products .cp-primary, .cp-dialog .cp-primary { background: #078653; border-color: #078653; color: white; font-weight: 600; }
.cp-filters { display: grid !important; grid-template-columns: 1.3fr 2fr 1fr .7fr .7fr auto; gap: 12px; padding: 18px; background: white; border: 1px solid var(--cp-line); border-radius: 12px; align-items: start; margin: 16px 0; }
.cp-filters label, .cp-edit-grid label { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; color: #343957; }
.cp-filters input, .cp-filters select, .cp-edit-grid input, .cp-edit-grid select { width: 100%; min-width: 0; height: 40px; padding: 7px 10px; border-radius: 7px; border: 1px solid #cfd9e6; background: #fff; color: #343957; font: inherit; box-sizing: border-box; }
.cp-filters button { margin-top: 23px; }
.cp-filters small { font-size: 11px; font-weight: 400; color: #637387; }
.cp-selection-bar { font-size: 13px; font-weight: 600; }
.cp-selection-bar > div, .cp-pagination > div { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-quick-actions { max-width: 240px; min-width: 0; padding: 9px 12px; border: 1px solid #cfd9e6; border-radius: 8px; background: white; color: #343957; font: inherit; }
.cp-quick-actions:disabled { opacity: .5; }
.cp-status { margin: 8px 0; }
.cp-status:empty { margin: 6px 0; }
.client-products .cp-error, .cp-dialog [data-error] { color: #b03232; }
.cp-table-scroll { overflow: auto; border: 1px solid var(--cp-line); border-radius: 10px; background: #fff; flex: 1; min-height: 160px; }
.client-products table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; }
.client-products thead th { background: #069a58; color: white; padding: 12px 10px; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.client-products td { padding: 12px 10px; border-bottom: 1px solid #e7edf3; vertical-align: middle; white-space: nowrap; }
.client-products td:nth-child(2), .client-products td:nth-child(3), .client-products td:last-child { white-space: normal; min-width: 170px; }
.client-products td small { display: block; color: #607086; margin-top: 4px; }
.client-products .cp-row-cancel { display: block; font-size: 11px; padding: 3px 0; margin-top: 6px; border: 0; background: transparent; color: #9c3848; }
.cp-pending-badge { display: inline-block; margin-top: 5px; padding: 3px 6px; border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: .04em; color: #896224; background: #fff0cf; }
.cp-cell-value { display: inline-flex; align-items: center; gap: 6px; }
.cp-cell-changed { border-radius: 6px; background: #fff6df; padding: 3px 5px; }
.client-products .cp-change-indicator { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 1px solid #ebcf89; border-radius: 6px; background: #fff0c8; color: #80540d; }
.client-products .cp-change-indicator:hover { background: #ffe5a1; }
.client-products .cp-change-indicator:focus-visible { outline: 2px solid #80540d; outline-offset: 2px; }
.cp-change-dialog { width: min(440px, calc(100vw - 30px)); }
.cp-change-dialog dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 20px; padding: 14px; background: #f5f8fa; border-radius: 8px; font-size: 13px; }
.cp-change-dialog dt { color: #617086; font-weight: 500; }
.cp-change-dialog dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.client-products .cp-danger-quiet { color: #a33e4a; background: #fff9f9; border-color: #ecd5da; }
.client-products .cp-danger-quiet:not(:disabled):hover, .client-products .cp-row-cancel:not(:disabled):hover { color: #822332; background: #fbecef; }
.client-products tbody tr:nth-child(even) { background: #f7f9fc; }
.client-products input[type="checkbox"] { width: 17px; height: 17px; accent-color: #078653; cursor: pointer; }
.cp-hcg { border-radius: 20px; background: #edf1f6; padding: 4px 9px; }
.cp-hcg[data-category="green"] { background: #e2f4e8; color: #27613f; }
.cp-hcg[data-category="amber"] { background: #fff2cd; color: #775600; }
.cp-hcg[data-category="red"] { background: #fbe5e9; color: #9a3243; }
.cp-pagination { margin-top: 14px; font-size: 12px; color: #52627a; }
.cp-dialog { --cp-ink: #343957; position: fixed; inset: 0; margin: auto; width: min(660px, calc(100vw - 30px)); max-height: calc(100dvh - 30px); padding: 0; border: 0; border-radius: 14px; overflow: auto; color: var(--cp-ink); background: #fff; box-shadow: 0 25px 90px #1b253944; }
.cp-dialog::backdrop { background: #18203788; }
.cp-dialog header { padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #343957; color: white; position: sticky; top: 0; z-index: 2; }
.cp-dialog h3 { color: white; margin: 3px 0 0; font-size: 21px; }
.cp-dialog header small { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; color: #d1d6e6; }
.cp-dialog .productClose { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; background: transparent; border: 0; border-radius: 4px; color: white; }
.cp-dialog .productClose i { font-size: 28px; margin: 0; line-height: 1; }
.cp-dialog .productClose:hover { color: #e0e6ff; }
.cp-dialog-body { padding: 16px 24px 0; }
.cp-edit-summary { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: 11px; color: #728095; }
.cp-edit-summary [data-summary] { font-weight: 600; color: #3c6555; background: #eaf5ef; padding: 4px 8px; border-radius: 5px; }
.cp-edit-summary > span:last-child { align-self: center; }
.cp-edit-section { padding: 12px 14px 14px; margin-bottom: 14px; border: 1px solid #d4dde7; border-left: 3px solid #739889; border-radius: 10px; background: #f5f8fa; }
.cp-edit-section h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #dce4ec; color: #343957; }
.cp-edit-section h4 i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #e3eee9; color: #3d6a56; }
.cp-edit-section h4 small { margin-left: auto; font-size: 10px; font-weight: 400; color: #788599; }
.cp-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cp-stock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-dialog .cp-edit-grid label { font-size: 12px; font-weight: 500; }
.cp-dialog .cp-edit-grid input, .cp-dialog .cp-edit-grid select { font-weight: 400; text-align: left; background: #fff; }
.cp-dialog input::placeholder { font-weight: 400; color: #8b96a6; }
.cp-dialog :is(input, select, button, summary):focus-visible { outline: 2px solid #6074ff; outline-offset: 2px; }
.cp-wide { grid-column: 1 / -1; }
.cp-product-picker { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cp-product-input { position: relative; }
.cp-dialog .cp-product-input input:not([type="hidden"]) { padding-right: 32px; }
.cp-dialog [data-clear-product] { position: absolute; right: 4px; top: 5px; padding: 3px; width: 28px; height: 30px; border: 0; background: transparent; color: #68758a; }
.cp-dialog [data-clear-product][hidden], .cp-product-list[hidden] { display: none; }
.cp-product-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #dce4ec; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px #26334a26; }
.cp-product-list.cp-list-above { top: auto; bottom: calc(100% + 4px); }
.cp-product-option { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #edf1f5; cursor: pointer; font-size: 12px; color: #343957; }
.cp-product-option > span:not(.cp-product-thumb):not(.cp-hcg) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cp-product-thumb { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 4px; background: #f4f7fa; color: #8a97a8; }
.cp-product-thumb > * { grid-area: 1 / 1; }
.cp-product-option img { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; border-radius: 4px; }
.cp-product-option:hover, .cp-product-option.cp-active-option { background: #edf3fb; }
.cp-product-option[aria-selected="true"] { background: #eaf5ef; }
.cp-product-option .cp-hcg { font-size: 10px; flex: 0 0 auto; }
.cp-product-hint { padding: 10px 12px; color: #738096; font-size: 11px; }
.cp-edit-help { font-size: 11px; color: #6b788c; margin-bottom: 12px; }
.cp-edit-help summary { cursor: pointer; }
.cp-edit-help p { margin-top: 8px; font-size: 12px; }
.cp-dialog [data-immediate-warning] { padding: 10px 12px; border-radius: 6px; color: #8b5424; background: #fff4de; font-size: 12px; }
.cp-dialog [data-error]:empty { display: none; }
.cp-dialog footer { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 24px; background: #f8fafc; border-top: 1px solid #e9edf3; position: sticky; bottom: 0; z-index: 2; }
.cp-dialog .cp-danger { background: #af3e50; border-color: #af3e50; color: white; }
.cp-cancel-dialog { width: min(560px, calc(100vw - 30px)); }
.cp-cancel-dialog [data-scope] { display: block; font-size: 14px; margin-bottom: 14px; }
.cp-cancel-dialog [data-skipped] { font-size: 12px; margin-bottom: 12px; }
.cp-cancel-dialog li { margin-top: 8px; }
.cp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1150px) { .cp-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .client-products { display: block; padding: 12px; }
  .cp-table-scroll { max-height: 65vh; }
  .cp-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .cp-search { grid-column: 1 / -1; }
  .cp-intro, .cp-selection-bar, .cp-pagination { align-items: flex-start; flex-wrap: wrap; }
  .cp-edit-grid { grid-template-columns: 1fr; }
  .cp-dialog-body { padding: 14px; }
  .cp-edit-section { padding: 10px; }
  .cp-stock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .cp-dialog header { padding: 14px; }
  .cp-dialog footer { padding: 12px 14px; }
}