/* ════════════════════════════════════════════════════════════════════
   DOCUMENT EDITOR (se-*) — sale invoice, reusable for stock documents.
   Desktop ≥1100px : items column + sticky summary/payment column.
   Tablet / phone  : single column, sticky checkout bar at the bottom.
   Item rows are cards with large touch targets (44–48px).
════════════════════════════════════════════════════════════════════ */

.se-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    direction: rtl;
}

/* ── Header ───────────────────────────────────────────────────────── */
.se-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.se-back {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    transition: background 0.15s ease;
}
.se-back:hover { background: var(--md-sys-color-surface-container-high); }
.se-head-main { min-width: 0; flex: 1 1 auto; }
.se-head-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.se-title {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--md-sys-color-on-surface);
}
.se-head-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}
.se-head-sub .mud-icon-root { font-size: 1rem; }
.se-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.se-btn-danger { color: var(--md-sys-color-error) !important; }
@media (max-width: 599px) {
    .se-head-actions { width: 100%; }
    .se-head-actions > .ds-btn { flex: 1; }
}

/* ── Layout ───────────────────────────────────────────────────────── */
.se-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.se-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1100px) {
    .se-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; }
    .se-aside { position: sticky; top: 84px; }
}

.se-card {
    padding: 20px;
    border-radius: var(--ui-radius, 16px);
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--ui-card-border, transparent);
}
@media (max-width: 599px) { .se-card { padding: 16px; } }

.se-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.se-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}
.se-count {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 0.78rem;
    font-weight: 600;
}
.se-dot { margin: 0 6px; opacity: 0.5; }
.se-muted { color: var(--md-sys-color-on-surface-variant); font-weight: 400; }

/* ── Collapsible one-line sections (context, customer) ───────────── */
.se-context-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.se-context-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.se-context-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.se-context-label { font-size: 0.78rem; color: var(--md-sys-color-on-surface-variant); }
.se-context-label small { font-size: 0.72rem; opacity: 0.8; }
.se-context-value {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.se-unit-tag {
    margin-inline-start: 8px;
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.72rem;
    font-weight: 500;
}
.se-context-toggle {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--md-sys-color-primary);
    font-size: 0.86rem;
    font-weight: 600;
    transition: background 0.15s ease;
}
.se-context-summary:hover .se-context-toggle { background: var(--md-sys-color-primary-container); }

.se-context-fields,
.se-cust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--md-sys-color-outline-variant);
}
@media (max-width: 599px) {
    .se-context-fields, .se-cust-grid { grid-template-columns: minmax(0, 1fr); }
}
.se-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.se-field-label, .se-cust-grid .qm-cust-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}
.se-cust-grid .qm-cust-field--search,
.se-cust-grid .qm-cust-field--gender { grid-column: 1 / -1; }
.se-cust-grid .qm-meta-input {
    height: var(--ui-field-h, 44px);
    border-radius: var(--ui-radius-sm, 10px);
    border-color: var(--md-sys-color-outline-variant);
}
.se-cust-grid .qm-meta-input:focus { border-color: var(--md-sys-color-primary); box-shadow: var(--ui-focus); }
.se-cust-grid .qm-gender-group { border-radius: var(--ui-radius-sm, 10px); border-color: var(--md-sys-color-outline-variant); }
.se-cust-grid .qm-gender { min-height: var(--ui-field-h, 44px); }

/* ── Product search ───────────────────────────────────────────────── */
.se-search { margin-bottom: 4px; }
.se-search .se-search-input .mud-input.mud-input-outlined {
    background: var(--md-sys-color-surface-container);
    border-radius: 14px;
}
.se-search .se-search-input .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: transparent;
    border-radius: 14px;
}
.se-search .se-search-input input.mud-input-root { min-height: 50px !important; font-size: 1rem; }
.se-search .qm-search-wrap .qm-search-input { padding-left: 0; }
@media (max-width: 1099px) {
    /* Keep the search reachable while scrolling a long invoice. */
    .se-search {
        position: sticky;
        top: 64px;
        z-index: 6;
        margin: -4px -4px 4px;
        padding: 4px;
        background: var(--md-sys-color-surface-container-low);
    }
}
@media (max-width: 599px) { .se-search { top: 56px; } }

.se-option { min-height: 48px; padding: 4px 0; }
.se-option .prod-option__fa { font-weight: 600; }
.se-option-incart {
    margin-inline-start: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 0.7rem;
    font-weight: 600;
}
.se-option-empty { padding: 16px; color: var(--md-sys-color-on-surface-variant); font-size: 0.88rem; text-align: center; }

.se-hint { margin-top: 8px; font-size: 0.82rem; }
.se-hint--warn { color: var(--md-sys-color-warning); }

/* ── Empty state ──────────────────────────────────────────────────── */
.se-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 16px 28px;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
}
.se-empty strong { color: var(--md-sys-color-on-surface); font-size: 1rem; }
.se-empty-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--md-sys-color-surface-container);
}
.se-empty-icon .mud-icon-root { font-size: 2rem; }
.se-empty-kbd { margin-top: 6px; font-size: 0.78rem; }
@media (pointer: coarse) { .se-empty-kbd { display: none; } }

/* ── Line cards ───────────────────────────────────────────────────── */
.se-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.se-line {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.se-line:focus-within { border-color: color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent); }
.se-line--error {
    border-color: var(--md-sys-color-error);
    background: color-mix(in srgb, var(--md-sys-color-error-container) 30%, var(--md-sys-color-surface-container-low));
}

.se-line-top { display: flex; align-items: flex-start; gap: 12px; }
.se-line-num {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.se-line-prod { flex: 1; min-width: 0; }
.se-line-fa {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--md-sys-color-on-surface);
    overflow-wrap: anywhere;
}
.se-line-en {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: var(--md-sys-color-on-surface-variant);
    direction: ltr;
    text-align: right;
    overflow-wrap: anywhere;
}
.se-line-del {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin: -6px -6px 0 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.se-line-del:hover { background: var(--md-sys-color-error-container); color: var(--md-sys-color-error); }

.se-line-fields {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) minmax(130px, auto);
    gap: 12px 16px;
    align-items: end;
    margin-top: 12px;
    padding-inline-start: 40px;
}
.se-line-field { display: flex; flex-direction: column; min-width: 0; }
.se-line-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 22px;
    margin-bottom: 6px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}
.se-line-label .qm-stock-pill { font-size: 0.7rem; padding: 1px 8px; }
.se-range {
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--md-sys-color-surface-container);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 599px) {
    .se-line { padding: 12px 14px; }
    .se-line-fields {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "qty   total"
            "price price";
        padding-inline-start: 0;
    }
    .se-line-field--qty   { grid-area: qty; }
    .se-line-field--price { grid-area: price; }
    .se-line-field--total { grid-area: total; text-align: left; }
    .se-line-field--total .se-line-label { justify-content: flex-end; }
}
@media (min-width: 600px) and (max-width: 799px) {
    .se-line-fields { padding-inline-start: 0; grid-template-columns: 170px minmax(0, 1fr) auto; }
}

/* Quantity stepper:  [+] [ value ] [−]   (RTL — plus sits on the right) */
.se-stepper {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    height: var(--ui-field-h, 44px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    overflow: hidden;
    background: var(--md-sys-color-surface-container-low);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.se-stepper:has(.se-step-input:disabled) { grid-template-columns: minmax(0, 1fr); }
.se-stepper:focus-within { border-color: var(--md-sys-color-primary); box-shadow: var(--ui-focus); }
.se-step {
    display: grid;
    place-items: center;
    border: 0;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    transition: background 0.12s ease;
}
.se-step:hover:not(:disabled) { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.se-step:active:not(:disabled) { transform: scale(0.94); }
.se-step:disabled { opacity: 0.35; cursor: not-allowed; }
.se-step .mud-icon-root { font-size: 1.25rem; }
.se-step-input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    direction: ltr;
}

/* Money field: [ 1,250,000 | تومان ] */
.se-money {
    display: flex;
    align-items: center;
    height: var(--ui-field-h, 44px);
    padding: 0 12px;
    gap: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    background: var(--md-sys-color-surface-container-low);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.se-money:focus-within { border-color: var(--md-sys-color-primary); box-shadow: var(--ui-focus); }
.se-money-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: right;
}
.se-money-input::placeholder { color: var(--md-sys-color-outline); font-weight: 400; }
.se-money-unit { flex-shrink: 0; font-size: 0.78rem; color: var(--md-sys-color-on-surface-variant); }
.se-money:has(input:disabled), .se-stepper:has(input:disabled) { background: var(--md-sys-color-surface-container); }

.se-stepper.is-invalid, .se-money.is-invalid { border-color: var(--md-sys-color-error); }
.se-stepper.is-invalid:focus-within, .se-money.is-invalid:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-error) 18%, transparent);
}

.se-line-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: var(--ui-field-h, 44px);
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--md-sys-color-on-surface);
}
.se-line-total small { font-size: 0.72rem; font-weight: 500; color: var(--md-sys-color-on-surface-variant); }
.se-line-msg {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    font-size: 0.82rem;
}

/* ── Summary & payment ────────────────────────────────────────────── */
.se-summary { display: flex; flex-direction: column; gap: 14px; }
.se-sum-rows { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.se-sum-rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; }
.se-sum-rows dt { color: var(--md-sys-color-on-surface-variant); }
.se-sum-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.se-grand {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--dash-ink, #2B3035), var(--dash-ink-2, #1F2327));
    color: #FFFFFF;
}
.se-grand span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.68); }
.se-grand strong { font-size: 1.65rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.se-grand small { margin-inline-start: 6px; font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.68); }

.se-pay-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.se-pay-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.se-pay-chip .mud-icon-root { font-size: 1.1rem; }
.se-pay-chip:hover { background: var(--md-sys-color-surface-container); }
.se-pay-chip.is-active {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 600;
}

.se-pay-fields { display: grid; gap: 12px; }
@media (min-width: 600px) and (max-width: 1099px) {
    .se-pay-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.se-pay-field { display: flex; flex-direction: column; gap: 6px; }
.se-pay-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; }
.se-pay-label .mud-icon-root { font-size: 1.05rem; }
.se-pay-label--pos  { color: var(--payment-pos-accent); }
.se-pay-label--cash { color: var(--payment-cash-accent); }

.se-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
}
.se-alert .mud-icon-root { font-size: 1.15rem; flex-shrink: 0; }
.se-alert--error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.se-alert--warn  { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }

.se-submit { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.se-submit .ds-btn { width: 100%; }

/* ── Sticky checkout bar (phone / tablet) ─────────────────────────── */
.se-bar { display: none; }
@media (max-width: 1099px) {
    .se-submit-btn { display: none !important; }
    .se-bar {
        position: sticky;
        bottom: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 -4px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        background: var(--md-sys-color-surface-container-low);
        box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.12);
    }
    .se-bar-total { display: flex; flex-direction: column; min-width: 0; }
    .se-bar-total span { font-size: 0.76rem; color: var(--md-sys-color-on-surface-variant); }
    .se-bar-total strong { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .se-bar-total small { font-size: 0.75rem; font-weight: 500; color: var(--md-sys-color-on-surface-variant); }
    .se-bar .ds-btn { flex-shrink: 0; }
}
@media (max-width: 599px) {
    .se-bar { margin: 0 -12px; }
    .se-bar .ds-btn { --btn-px: 20px; }
}

/* Success-green confirm button (sale complete) */
.qm-btn-go {
    background-color: var(--md-sys-color-success) !important;
    color: var(--md-sys-color-on-success) !important;
    border-color: transparent !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.qm-btn-go:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--md-sys-color-success) 88%, black) !important;
}
.qm-btn-go:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Stock documents: route row, read-only values, notes ──────────── */
.se-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: end;
    gap: 12px;
}
.se-route-arrow {
    display: grid;
    place-items: center;
    height: var(--ui-field-h, 44px);
    color: var(--md-sys-color-on-surface-variant);
}
@media (max-width: 599px) {
    .se-route { grid-template-columns: minmax(0, 1fr); }
    .se-route-arrow { height: 20px; transform: rotate(-90deg); }
}
.se-ro {
    display: flex;
    align-items: center;
    min-height: var(--ui-field-h, 44px);
    padding: 0 14px;
    border-radius: var(--ui-radius-sm, 10px);
    background: var(--md-sys-color-surface-container);
    font-weight: 600;
}
.se-textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 0.92rem;
    resize: vertical;
    outline: none;
}
.se-textarea:focus { border-color: var(--md-sys-color-primary); box-shadow: var(--ui-focus); }
.se-textarea:disabled { background: var(--md-sys-color-surface-container); }
.se-line-fields--qty-only { grid-template-columns: minmax(0, 220px); }
@media (max-width: 599px) {
    .se-line-fields--qty-only { grid-template-columns: minmax(0, 1fr); grid-template-areas: "qty"; }
}

/* "Add another item" — full-width dashed row under the list (common invoice/POS pattern). */
.se-add-next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 10px;
    border: 1.5px dashed color-mix(in srgb, var(--md-sys-color-primary) 45%, var(--md-sys-color-outline-variant));
    border-radius: 14px;
    background: transparent;
    color: var(--md-sys-color-primary);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.se-add-next:hover {
    background: color-mix(in srgb, var(--md-sys-color-primary) 7%, transparent);
    border-color: var(--md-sys-color-primary);
}
.se-add-next:active { transform: scale(0.99); }
.se-add-next-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.se-add-next-icon .mud-icon-root { font-size: 1.15rem; }

/* ════════════════════════════════════════════════════════════════════
   BULK PRODUCT EDITOR (be-*)
════════════════════════════════════════════════════════════════════ */
.be-setup { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 999px) { .be-setup { grid-template-columns: minmax(0, 1fr); } }
.be-filters { gap: 18px; }
.be-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599px) { .be-row { grid-template-columns: minmax(0, 1fr); } }
.be-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.be-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 500; color: var(--md-sys-color-on-surface-variant); }
.be-hint { font-size: 0.76rem; color: var(--md-sys-color-on-surface-variant); }
.be-input {
    height: var(--ui-field-h, 44px);
    padding: 0 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.be-input:focus { border-color: var(--md-sys-color-primary); box-shadow: var(--ui-focus); }
.be-input--lg { height: 50px; font-size: 1.05rem; font-weight: 600; }
.be-seg { align-self: flex-start; padding: 4px; border-radius: 12px; background: var(--dash-pill-bg); }
.be-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.be-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
}
.be-check input { accent-color: var(--md-sys-color-primary); width: 16px; height: 16px; }
.be-check.is-on { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-weight: 600; }

.be-start { gap: 6px; position: sticky; top: 84px; }
.be-start-label { font-size: 0.85rem; color: var(--dash-muted); }
.be-start-count { font-size: 2.6rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.be-start-sub { font-size: 0.82rem; color: var(--dash-muted); }
.be-start-tips { margin: 14px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.8); line-height: 1.6; }
.be-start-tips kbd { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); font-family: inherit; font-size: 0.78rem; color: #FFFFFF; }
.be-start-btn { width: 100%; background: #FFFFFF !important; color: #1F2327 !important; }

/* Full-screen editing shell */
.be-shell {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    background: var(--md-sys-color-background);
    direction: rtl;
}
.be-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: var(--md-sys-color-surface-container-low);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.be-top-main { flex: 1; min-width: 0; }
.be-top-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 700; }
.be-top-count { font-size: 0.8rem; font-weight: 500; color: var(--md-sys-color-on-surface-variant); }
.be-progress { height: 6px; margin-top: 8px; border-radius: 999px; background: var(--md-sys-color-surface-container-high); overflow: hidden; }
.be-progress span { display: block; height: 100%; border-radius: inherit; background: var(--md-sys-color-success); transition: width 0.3s ease; }
.be-pos { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; background: var(--md-sys-color-surface-container); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.be-body { flex: 1; overflow-y: auto; padding: 20px; }
.be-form { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 599px) { .be-body { padding: 12px; } .be-top { padding: 10px 12px; } }

.be-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.be-span-2 { grid-column: span 2; }
@media (max-width: 999px) { .be-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .be-grid { grid-template-columns: minmax(0, 1fr); } .be-span-2 { grid-column: auto; } }
.be-switch { display: flex; align-items: center; gap: 4px; min-height: var(--ui-field-h, 44px); font-size: 0.9rem; }

.be-chips-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
@media (max-width: 799px) { .be-chips-grid { grid-template-columns: minmax(0, 1fr); } }
.be-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.be-chip {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.be-chip:hover { border-color: var(--md-sys-color-primary); }
.be-chip.is-active { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: 600; }

.be-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #6250D6, #2A78D6);
    color: #FFFFFF;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(98, 80, 214, 0.3);
}
.be-ai-btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.be-ai-btn .mud-icon-root { font-size: 1.15rem; }
.be-ai-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, #6250D6 10%, transparent);
    color: var(--md-sys-color-on-surface);
    font-size: 0.86rem;
    line-height: 1.6;
}
.be-ai-note .mud-icon-root { color: #6250D6; flex-shrink: 0; }
.be-ai-note.is-low { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.be-ai-note.is-low .mud-icon-root { color: inherit; }
.be-ai-tag { padding: 0 6px; border-radius: 6px; background: #6250D6; color: #FFFFFF; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; }
.be-saved { margin-inline-start: 8px; padding: 2px 10px; border-radius: 999px; background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); font-size: 0.72rem; font-weight: 600; }
.be-suggest { font-size: 0.78rem; color: var(--md-sys-color-on-surface-variant); line-height: 1.6; }
.be-link { padding: 0; border: 0; background: none; color: var(--md-sys-color-primary); font: inherit; font-weight: 600; cursor: pointer; }

.be-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--md-sys-color-surface-container-low);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.06);
}
.be-foot-spacer { flex: 1; }
.be-save { min-width: 180px; }
@media (max-width: 599px) {
    .be-foot { flex-wrap: wrap; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
    .be-foot-spacer { display: none; }
    .be-foot > .ds-btn--outline { flex: 1; }
    .be-save { order: -1; width: 100%; }
}
.be-finished { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.be-finished h2 { margin: 6px 0 0; font-size: 1.2rem; }
.be-finished p { margin: 0 0 12px; color: var(--md-sys-color-on-surface-variant); }

/* "Previous value" under each bulk-edit field */
.be-was {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 2px;
    font-size: 0.76rem;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.6;
}
.be-was-value { max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.be-was.is-changed {
    padding: 4px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, #F57C00 12%, transparent);
    color: var(--md-sys-color-on-surface);
}
.be-was.is-changed .be-was-label { color: #E65100; font-weight: 600; }
.be-was.is-changed .be-was-value { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.be-was-restore { margin-inline-start: auto; font-size: 0.76rem; }

/* ════════════════════════════════════════════════════════════════════
   EXCEL IMPORT WIZARD (im-*)
════════════════════════════════════════════════════════════════════ */
.ds-badge-soft--info { background: color-mix(in srgb, #1E88E5 14%, transparent); color: #1565C0; }
html[data-theme='dark'] .ds-badge-soft--info { color: #90CAF9; }

.im-page { max-width: 1180px; margin: 0 auto; width: 100%; }

/* Stepper */
.im-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.im-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.im-step::before {
    content: '';
    position: absolute;
    top: 18px;
    right: 50%;
    width: 100%;
    height: 3px;
    background: var(--md-sys-color-surface-container-highest);
    z-index: 0;
}
.im-step:first-child::before { display: none; }
.im-step.is-done::before, .im-step.is-current::before { background: var(--md-sys-color-primary); }
.im-step-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--md-sys-color-surface-container-highest);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: all 0.2s ease;
}
.im-step-dot .mud-icon-root { font-size: 1.2rem; }
.im-step.is-current .im-step-dot { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent); }
.im-step.is-done .im-step-dot { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.im-step-label { font-size: 0.82rem; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.im-step.is-current .im-step-label { color: var(--md-sys-color-on-surface); }
@media (max-width: 599px) {
    .im-step-label { display: none; }
    .im-step.is-current .im-step-label { display: block; position: absolute; top: 44px; white-space: nowrap; }
    .im-steps { margin-bottom: 18px; }
}

.im-card { padding: 24px; gap: 18px; }
@media (max-width: 599px) { .im-card { padding: 16px; } }
.im-card-head h2 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 700; }
.im-card-head p { margin: 0; font-size: 0.9rem; color: var(--md-sys-color-on-surface-variant); line-height: 1.7; }

/* Step 1 — targets */
.im-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
@media (max-width: 599px) { .im-targets { grid-template-columns: minmax(0, 1fr); } }
.im-target {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: 14px;
    background: var(--md-sys-color-surface-container-low);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.im-target:hover { border-color: color-mix(in srgb, var(--md-sys-color-primary) 50%, var(--md-sys-color-outline-variant)); }
.im-target.is-active { border-color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary) 5%, var(--md-sys-color-surface-container-low)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent); }
.im-target-icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.im-target-icon .mud-icon-root { font-size: 1.5rem; }
.im-target-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.im-target-text strong { font-size: 1rem; }
.im-target-text small { font-size: 0.82rem; color: var(--md-sys-color-on-surface-variant); line-height: 1.6; }
.im-target-fields { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.im-target-fields span { padding: 1px 8px; border-radius: 6px; background: var(--md-sys-color-surface-container); font-size: 0.72rem; color: var(--md-sys-color-on-surface-variant); }
.im-target-fields span.is-req { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-weight: 600; }
.im-target-check { position: absolute; top: 12px; left: 12px; color: var(--md-sys-color-primary); opacity: 0; transform: scale(0.6); transition: all 0.15s ease; }
.im-target.is-active .im-target-check { opacity: 1; transform: none; }

/* Step 2 — drop zone */
.im-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 240px;
    padding: 28px 16px;
    border: 2px dashed color-mix(in srgb, var(--md-sys-color-primary) 40%, var(--md-sys-color-outline-variant));
    border-radius: 18px;
    background: color-mix(in srgb, var(--md-sys-color-primary) 3%, transparent);
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.im-drop:hover, .im-drop:focus-within { background: color-mix(in srgb, var(--md-sys-color-primary) 7%, transparent); border-color: var(--md-sys-color-primary); }
.im-drop.is-ready { border-style: solid; border-color: var(--md-sys-color-success); background: color-mix(in srgb, var(--md-sys-color-success) 6%, transparent); }
.im-drop.is-error { border-color: var(--md-sys-color-error); }
.im-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.im-drop-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.im-drop-icon.is-ok { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.im-drop-icon .mud-icon-root { font-size: 2.2rem; }
.im-drop strong { font-size: 1.05rem; }
.im-drop span { font-size: 0.86rem; color: var(--md-sys-color-on-surface-variant); }
.im-drop-change { font-size: 0.78rem !important; }
.im-template {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--md-sys-color-surface-container);
    font-size: 0.86rem;
}
.im-template > .mud-icon-root { color: #F57C00; }
.im-template .ds-action-link { margin-inline-start: auto; padding: 0; }

/* Step 3 — mapping */
.im-map { display: flex; flex-direction: column; gap: 8px; }
.im-map-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.2fr);
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-inline-start-width: 4px;
}
.im-map-row.is-mapped { border-inline-start-color: var(--md-sys-color-success); }
.im-map-row.is-missing { border-inline-start-color: var(--md-sys-color-error); background: color-mix(in srgb, var(--md-sys-color-error) 5%, transparent); }
.im-map-field { display: flex; flex-direction: column; min-width: 0; }
.im-map-field strong { font-size: 0.95rem; }
.im-map-field small { font-size: 0.76rem; color: var(--md-sys-color-on-surface-variant); }
.im-map-arrow { color: var(--md-sys-color-on-surface-variant); }
.im-map-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.im-map-col .ds-filter-select { width: 100%; flex: none; }
.im-sample { font-size: 0.76rem; color: var(--md-sys-color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599px) {
    .im-map-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .im-map-arrow { display: none; }
}
.im-options { display: flex; flex-wrap: wrap; gap: 8px; }
.im-match { margin: 0; font-size: 0.82rem; color: var(--md-sys-color-on-surface-variant); }

/* Step 4 — preview */
.im-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 599px) { .im-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.im-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--md-sys-color-surface-container);
}
.im-stat .mud-icon-root { grid-row: span 2; font-size: 1.8rem; }
.im-stat strong { font-size: 1.4rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.im-stat span { font-size: 0.8rem; color: var(--md-sys-color-on-surface-variant); }
.im-stat.is-create .mud-icon-root { color: #00897B; }
.im-stat.is-update .mud-icon-root { color: #1E88E5; }
.im-stat.is-skip .mud-icon-root { color: #78909C; }
.im-stat.is-error .mud-icon-root { color: #E53935; }
.im-tabs { margin: 0 !important; align-items: center; }
.im-err-dl { margin-inline-start: auto; padding: 0; white-space: nowrap; }
.im-preview { padding: 0 !important; max-height: 520px; overflow: auto !important; }
.im-preview .ds-table thead th { position: sticky; top: 0; z-index: 1; background: var(--md-sys-color-surface-container-low) !important; padding-top: 10px !important; }
.im-preview .ds-table tbody td { white-space: nowrap; }
.im-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.im-msg { min-width: 220px; white-space: normal !important; font-size: 0.8rem; color: var(--md-sys-color-on-surface-variant); }
.im-row--error td { background: color-mix(in srgb, var(--md-sys-color-error) 5%, transparent); }
.im-row--error .im-msg { color: var(--md-sys-color-error); }

/* Step 5 — done */
.im-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; text-align: center; }
.im-done h2 { margin: 6px 0 0; font-size: 1.3rem; }
.im-done p { margin: 0; color: var(--md-sys-color-on-surface-variant); }
.im-done .im-summary { width: 100%; max-width: 720px; margin: 12px 0; }
.im-done-icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.im-done-icon .mud-icon-root { font-size: 2.8rem; }
.im-done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Sticky wizard footer */
.im-foot {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}
.im-foot-hint { flex: 1; font-size: 0.85rem; color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 599px) {
    .im-foot { flex-wrap: wrap; margin: 0 -12px; }
    .im-foot-hint { order: -1; flex-basis: 100%; text-align: center; }
    .im-foot .ds-btn { flex: 1; }
}

/* AI fill bar in the product form */
.pf-ai {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, #6250D6 9%, transparent), color-mix(in srgb, #1E88E5 9%, transparent));
    border: 1px solid color-mix(in srgb, #6250D6 18%, transparent);
}
.pf-ai-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.pf-ai-text strong { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; }
.pf-ai-text strong .mud-icon-root { font-size: 1.1rem; color: #6250D6; }
.pf-ai-text span { font-size: 0.8rem; color: var(--md-sys-color-on-surface-variant); line-height: 1.6; }
@media (max-width: 599px) { .pf-ai .be-ai-btn { width: 100%; justify-content: center; } }

/* File summary under the drop zone: separate chips so LTR sheet/file names don't scramble the RTL line */
.im-file-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; direction: rtl; }
.im-file-stat {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8rem; unicode-bidi: isolate;
}
.im-file-stat b { color: var(--md-sys-color-on-surface); font-variant-numeric: tabular-nums; }

/* AI result panel (product form + bulk editor) */
.ai-res {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #6250D6 30%, transparent);
    background: color-mix(in srgb, #6250D6 6%, var(--md-sys-color-surface-container-low));
    font-size: 0.84rem;
    line-height: 1.7;
}
.ai-res.is-low { border-color: color-mix(in srgb, #F57C00 40%, transparent); background: color-mix(in srgb, #F57C00 8%, var(--md-sys-color-surface-container-low)); }
.ai-res-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ai-res-head .mud-icon-root { font-size: 1.2rem; color: #6250D6; }
.ai-res.is-low .ai-res-head .mud-icon-root { color: #E65100; }
.ai-res-head strong { flex: 1; font-size: 0.9rem; }
.ai-res-conf { padding: 1px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.ai-res-conf--high { background: rgba(22, 163, 74, 0.14); color: #15803D; }
.ai-res-conf--medium { background: rgba(245, 124, 0, 0.14); color: #C2410C; }
.ai-res-conf--low { background: rgba(220, 38, 38, 0.12); color: #B91C1C; }
.ai-res-row > span:first-child { font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.ai-res-id { font-weight: 600; }
.ai-res-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--md-sys-color-primary); font-weight: 600; text-decoration: none; }
.ai-res-link:hover { text-decoration: underline; }
.ai-res-link .mud-icon-root { font-size: 1rem; }
.ai-res-foot { font-size: 0.74rem; color: var(--md-sys-color-on-surface-variant); }
.se-add-next--empty { margin-top: 14px; }

/* Web perfume picker (candidates table) */
.aip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
}
.aip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aip-head > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.aip-head strong { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; }
.aip-head strong .mud-icon-root { color: var(--md-sys-color-primary); font-size: 1.2rem; }
.aip-head span { font-size: 0.82rem; color: var(--md-sys-color-on-surface-variant); }
.aip-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--md-sys-color-on-surface-variant); cursor: pointer; }
.aip-close:hover { background: var(--md-sys-color-surface-container); }
.aip-state, .aip-empty, .aip-error { display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-size: 0.88rem; }
.aip-error { color: var(--md-sys-color-error); }
.aip-hint { margin: 0; font-size: 0.82rem; color: var(--md-sys-color-on-surface-variant); }
.aip-table-wrap { max-height: 420px; overflow: auto; border-radius: 10px; border: 1px solid var(--md-sys-color-outline-variant); }
.aip-table { width: 100%; }
.aip-table thead th { position: sticky; top: 0; z-index: 1; background: var(--md-sys-color-surface-container); font-size: 0.78rem; white-space: nowrap; }
.aip-table td { vertical-align: middle; font-size: 0.86rem; }
.aip-row { cursor: pointer; }
.aip-row:hover td { background: color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent); }
.aip-thumb { width: 52px; }
.aip-thumb img { display: block; width: 40px; height: 52px; object-fit: contain; border-radius: 6px; background: #FFFFFF; }
.aip-name { font-weight: 600; }
.aip-meta-m { display: none; }
.aip-table a { color: var(--md-sys-color-primary); font-size: 0.8rem; text-decoration: none; }
.aip-pick {
    min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
    background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
    font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.aip-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; font-size: 0.82rem; color: var(--md-sys-color-on-surface-variant); }
.aip-alt {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
    border: 1px solid var(--md-sys-color-outline-variant); border-radius: 999px; background: transparent;
    color: var(--md-sys-color-on-surface); font: inherit; font-size: 0.82rem; cursor: pointer;
}
.aip-alt .mud-icon-root { font-size: 1rem; color: #6250D6; }
@media (max-width: 699px) {
    .aip-table-wrap { max-height: none; border: 0; }
    .aip-table thead { display: none; }
    .aip-table tr { display: grid; grid-template-columns: 48px 1fr auto; grid-template-areas: "img name pick" "img meta pick"; gap: 2px 10px; padding: 10px 4px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
    .aip-table td { display: block; padding: 0 !important; border: 0 !important; }
    .aip-table td::before { content: none !important; }
    .aip-table td:nth-child(1) { grid-area: img; }
    .aip-table td:nth-child(2) { grid-area: name; }
    .aip-table td:nth-child(n+3):nth-child(-n+6) { display: none; }
    .aip-meta-m { display: block !important; margin-top: 2px; font-size: 0.78rem; color: var(--md-sys-color-on-surface-variant); }
    .aip-table td:nth-child(7) { grid-area: pick; align-self: center; }
}

/* Compact AI result line */
.ai-res { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
.ai-res-icon { flex-shrink: 0; font-size: 1.25rem !important; color: #16A34A; }
.ai-res.is-low .ai-res-icon { color: #E65100; }
.ai-res-body { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-size: 0.86rem; }
.ai-res-body strong { font-size: 0.88rem; }
.ai-res-sep { color: var(--md-sys-color-on-surface-variant); }
.ai-res-id { font-weight: 600; overflow-wrap: anywhere; }
.ai-res .ai-res-link { flex-shrink: 0; align-self: center; font-size: 0.82rem; }

/* "Similar scent" row (product form + bulk editor) */
.sim-row { display: flex; align-items: center; gap: 8px; }
.sim-icon { flex-shrink: 0; color: #6250D6; font-size: 1.3rem !important; }
.sim-input { flex: 1; min-width: 0; padding: 0 12px !important; }
.sim-btn { flex-shrink: 0; height: 40px; }
@media (max-width: 599px) {
    .sim-row { flex-wrap: wrap; }
    .sim-input { flex-basis: calc(100% - 40px); }
    .sim-btn { flex: 1 1 100%; justify-content: center; height: 44px; }
}

/* Fill tools panel: two clearly separated options */
.aitools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 899px) { .aitools { grid-template-columns: minmax(0, 1fr); } }
.aitool {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas: "icon text" "act act";
    gap: 8px 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
}
.aitool-icon { grid-area: icon; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, #6250D6 14%, transparent); color: #6250D6; }
.aitool-icon--alt { background: color-mix(in srgb, #00897B 14%, transparent); color: #00897B; }
.aitool-icon .mud-icon-root { font-size: 1.3rem; }
.aitool-text { grid-area: text; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aitool-text strong { font-size: 0.95rem; }
.aitool-text span { font-size: 0.78rem; line-height: 1.6; color: var(--md-sys-color-on-surface-variant); }
.aitool > .aitool-btn, .aitool-search { grid-area: act; }
.aitool-search { display: flex; gap: 8px; }
.aitool-search .ds-filter-input { flex: 1; min-width: 0; padding: 0 12px; }
.aitool-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 16px; border-radius: 10px;
    border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.aitool-btn .mud-icon-root { font-size: 1.1rem; }
.aitool-btn--primary { border-color: transparent; background: #6250D6; color: #FFFFFF; }
.aitool-btn--primary .mud-icon-root { color: #FFFFFF; }
.aitool-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.aitool-btn:not(:disabled):hover { filter: brightness(0.95); }
@media (pointer: coarse) { .aitool-btn { min-height: 44px; } .aitool-search .ds-filter-input { font-size: 16px; } }