/* /Pages/PD/Utility/RawMaterialTransfer/PdRawMaterialTransferPage.razor.rz.scp.css */
/* =======================================================
   Raw Material Transfer Page  -  rmt- design system
   3-column layout: Source | Connector | Destination
   ======================================================= */

.rmt-page[b-6isq0mm0he] {
    --rmt-surface: #fff;
    --rmt-surface-muted: #f8f9fa;
    --rmt-border: #dee2e6;
    --rmt-border-strong: #ced4da;
    --rmt-text: #212529;
    --rmt-muted: #6c757d;
    --rmt-primary: #0d6efd;
    --rmt-primary-soft: #e7f1ff;
    --rmt-success: #198754;
    --rmt-success-soft: #e8f6ee;
    --rmt-warning-soft: #fff8e1;
    --rmt-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
}

/* ── Header ─────────────────────────────────────────── */
.rmt-header[b-6isq0mm0he] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: 8px;
    border: 1px solid var(--rmt-border);
    background: var(--rmt-surface);
    color: var(--rmt-text);
    box-shadow: var(--rmt-shadow);
}

.rmt-header-brand[b-6isq0mm0he] {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rmt-header-kicker[b-6isq0mm0he] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rmt-primary);
    opacity: 1;
    margin-bottom: 0;
}

.rmt-header-title[b-6isq0mm0he] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--rmt-text);
}

.rmt-steps[b-6isq0mm0he] {
    flex: 1 1 280px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rmt-step[b-6isq0mm0he] {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    background: var(--rmt-surface-muted);
    border: 1px solid var(--rmt-border);
    color: var(--rmt-muted);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.rmt-step.rmt-step-active[b-6isq0mm0he] {
    background: var(--rmt-primary-soft);
    border-color: #b6d4fe;
    color: #0a58ca;
}

.rmt-step-sep[b-6isq0mm0he] { color: #adb5bd; font-size: 0.85rem; }

.rmt-header-meta[b-6isq0mm0he] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

.rmt-header-count[b-6isq0mm0he] {
    min-width: 120px;
    padding: 8px 10px;
    border: 1px solid var(--rmt-border);
    border-radius: 8px;
    background: var(--rmt-surface-muted);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "label label"
        "strong total";
    gap: 2px 6px;
    font-size: 0.78rem;
    color: #495057;
}

.rmt-header-count-label[b-6isq0mm0he] {
    grid-area: label;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rmt-muted);
    opacity: 1;
}

.rmt-header-count strong[b-6isq0mm0he] {
    grid-area: strong;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rmt-primary);
}

.rmt-header-count span:last-child[b-6isq0mm0he] {
    grid-area: total;
    justify-self: end;
    align-self: end;
    color: var(--rmt-muted);
}

/* ── 3-Column Workspace ─────────────────────────────── */
.rmt-workspace[b-6isq0mm0he] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    /* ensure the workspace itself doesn't overflow page */
    min-width: 0;
}

/* ── Column base ─────────────────────────────────────── */
.rmt-col[b-6isq0mm0he] {
    /* CRITICAL: without min-width:0, CSS grid items default to auto
       which lets TelerikGrid's wide columns force the column wider than
       its grid track, breaking the 3-column split */
    min-width: 0;
    overflow: hidden;
    background: var(--rmt-surface);
    border-radius: 8px;
    border: 1px solid var(--rmt-border);
    box-shadow: var(--rmt-shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rmt-col-source[b-6isq0mm0he]    { border-top: 3px solid var(--rmt-primary); }
.rmt-col-destination[b-6isq0mm0he] { border-top: 3px solid var(--rmt-success); }

.rmt-col-connector[b-6isq0mm0he] {
    min-width: 0;
    background: var(--rmt-surface);
    border: 1px dashed var(--rmt-border-strong);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ── Column header ──────────────────────────────────── */
.rmt-col-header[b-6isq0mm0he] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5eaef;
}

.rmt-col-badge[b-6isq0mm0he] {
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rmt-col-badge-source[b-6isq0mm0he]      { background: #1a4d70; color: #fff; }
.rmt-col-badge-destination[b-6isq0mm0he] { background: #1d6541; color: #fff; }

.rmt-col-header-sub[b-6isq0mm0he] { font-size: 0.75rem; color: #667788; flex: 1; }

/* ── Search panel ───────────────────────────────────── */
.rmt-search-panel[b-6isq0mm0he] {
    background: var(--rmt-surface-muted);
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rmt-search-row[b-6isq0mm0he] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rmt-search-row > :first-child[b-6isq0mm0he] {
    flex: 1;
    min-width: 140px;
}

.rmt-panel-shell[b-6isq0mm0he] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.rmt-panel-loader[b-6isq0mm0he] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(2px);
    border-radius: 8px;
}

.rmt-panel-loader-card[b-6isq0mm0he] {
    min-width: 220px;
    max-width: 280px;
    padding: 14px 16px;
    border: 1px solid rgba(13, 110, 253, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 28px rgba(13, 110, 253, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
}

.rmt-panel-loader-text[b-6isq0mm0he] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rmt-panel-loader-text strong[b-6isq0mm0he] {
    font-size: 0.84rem;
    line-height: 1.2;
    color: #18486b;
}

.rmt-panel-loader-text span[b-6isq0mm0he] {
    font-size: 0.72rem;
    line-height: 1.3;
    color: #5f7287;
}

.rmt-search-fields[b-6isq0mm0he] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.rmt-field-compact[b-6isq0mm0he] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #445566;
}

.rmt-search-footer[b-6isq0mm0he] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.rmt-checkbox-row[b-6isq0mm0he] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #445566;
    white-space: nowrap;
}

.rmt-btn-row[b-6isq0mm0he] { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Compact button / input ─────────────────────────── */
[b-6isq0mm0he] .rmt-btn-sm {
    font-size: 0.7rem;
    padding: 3px 10px;
    min-height: 26px;
}

[b-6isq0mm0he] .rmt-input-sm .k-input-inner {
    font-size: 0.74rem;
    padding: 3px 8px;
    min-height: 26px;
}

/* ── Grid wrap ──────────────────────────────────────── */
/* overflow-x:auto lets the Telerik grid scroll inside its column
   instead of pushing the column wider than its grid track          */
.rmt-grid-wrap[b-6isq0mm0he] {
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    background: var(--rmt-surface);
}

[b-6isq0mm0he] .rmt-grid-main {
    border: 0;
    background: transparent;
}

[b-6isq0mm0he] .rmt-grid-main .k-grid-toolbar,
[b-6isq0mm0he] .rmt-grid-main .k-grid-header {
    background: var(--rmt-surface);
}

[b-6isq0mm0he] .rmt-grid-main .k-grid-content {
    overflow-y: auto;
}

.rmt-grid-toolbar[b-6isq0mm0he] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding: 2px 6px;
}

/* ── Compact grid (smaller font) ───────────────────── */
[b-6isq0mm0he] .rmt-grid-compact .k-grid-header th,
[b-6isq0mm0he] .rmt-grid-compact .k-grid-content td {
    font-size: 0.72rem;
    padding: 4px 6px;
}

[b-6isq0mm0he] .rmt-grid-compact .k-grid-toolbar {
    font-size: 0.76rem;
    min-height: 32px;
    padding: 2px 6px;
}

[b-6isq0mm0he] .rmt-grid-compact .k-pager-wrap,
[b-6isq0mm0he] .rmt-grid-compact .k-pager {
    font-size: 0.72rem;
    min-height: 30px;
}

/* ── State cell ─────────────────────────────────────── */
.rmt-state-cell[b-6isq0mm0he] { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ── Connector column ───────────────────────────────── */
.rmt-connector-title[b-6isq0mm0he] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #495057;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.rmt-connector-icon[b-6isq0mm0he] { font-size: 1.3rem; color: var(--rmt-primary); opacity: 0.45; }

.rmt-connector-pairs[b-6isq0mm0he] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    scroll-behavior: smooth;
    min-height: 80px;
    max-height: 500px;
}

.rmt-connector-empty[b-6isq0mm0he] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 24px 8px;
}

.rmt-connector-empty-icon[b-6isq0mm0he] { font-size: 2.2rem; opacity: 0.25; }

.rmt-connector-empty p[b-6isq0mm0he] {
    margin: 0;
    font-weight: 600;
    font-size: 0.83rem;
    color: #6680a0;
}

.rmt-connector-empty small[b-6isq0mm0he] { font-size: 0.73rem; color: #8fa4b8; }

/* ── Pair rows ──────────────────────────────────────── */
.rmt-pair[b-6isq0mm0he] {
    background: #fff;
    border: 1px solid #dde4ef;
    border-radius: 10px;
    padding: 7px 10px;
    display: grid;
    grid-template-columns: 24px minmax(0,1fr) 20px minmax(0,1fr);
    gap: 4px;
    align-items: center;
    font-size: 0.76rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.15s;
}

.rmt-pair:hover[b-6isq0mm0he] { box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.rmt-pair-complete[b-6isq0mm0he]   { border-left: 3px solid #1d6541; }
.rmt-pair-incomplete[b-6isq0mm0he] { border-left: 3px solid #b88400; }

.rmt-pair-seq[b-6isq0mm0he] { font-weight: 800; font-size: 0.7rem; color: #5577aa; text-align: center; }

.rmt-pair-arrow[b-6isq0mm0he] { font-size: 1rem; font-weight: 700; color: #3a7dc9; text-align: center; }

.rmt-pair-side[b-6isq0mm0he] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: relative;
    min-width: 0;
    padding-right: 14px;
}

.rmt-pair-barcode[b-6isq0mm0he] {
    font-weight: 700;
    font-size: 0.71rem;
    color: #1a3a52;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rmt-pair-rm[b-6isq0mm0he] { font-size: 0.68rem; color: #4a6e8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmt-pair-weight[b-6isq0mm0he] { font-size: 0.66rem; color: #778a99; }
.rmt-pair-waiting[b-6isq0mm0he] { font-style: italic; color: #aabbcc; font-size: 0.71rem; }

.rmt-pair-arrow-matched[b-6isq0mm0he] { color: #1d6541; }
.rmt-pair-arrow-mismatch[b-6isq0mm0he] { color: #b7791f; }
.rmt-pair-arrow-waiting[b-6isq0mm0he] { color: #8fa4b8; }

.rmt-pair-status-row[b-6isq0mm0he] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding-top: 5px;
    margin-top: 2px;
    border-top: 1px dashed #e3eaf2;
}

.rmt-pair-status-pill[b-6isq0mm0he] {
    flex: none;
    padding: 2px 8px;
    font-size: 0.63rem;
    line-height: 1.15;
}

.rmt-pair-status-detail[b-6isq0mm0he] {
    min-width: 0;
    font-size: 0.65rem;
    color: #6f7f8d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.rmt-pair-remove[b-6isq0mm0he] {
    display: none;
    position: absolute;
    top: 0; right: 0;
    background: none;
    border: none;
    color: #c03030;
    cursor: pointer;
    font-size: 0.68rem;
    padding: 1px 2px;
    line-height: 1;
}

.rmt-pair-side:hover .rmt-pair-remove[b-6isq0mm0he] { display: block; }

/* ── Connector controls ─────────────────────────────── */
.rmt-connector-status[b-6isq0mm0he] {
    padding: 5px 10px;
    background: var(--rmt-surface-muted);
    border: 1px solid var(--rmt-border);
    border-radius: 8px;
    font-size: 0.76rem;
    display: flex;
    justify-content: center;
}

.rmt-connector-options[b-6isq0mm0he] { display: flex; flex-direction: column; gap: 6px; }
.rmt-connector-actions[b-6isq0mm0he] { display: flex; flex-direction: column; gap: 4px; }

.rmt-connector-actions[b-6isq0mm0he]  .k-button,
.rmt-connector-history-btns[b-6isq0mm0he]  .k-button {
    font-size: 0.7rem;
    padding: 3px 10px;
    min-height: 26px;
}

.rmt-connector-options[b-6isq0mm0he]  .k-input-inner {
    font-size: 0.74rem;
    padding: 3px 8px;
}

.rmt-connector-history-btns[b-6isq0mm0he] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

/* ── Full-width sections (Preview / History) ─────────── */
.rmt-section[b-6isq0mm0he] {
    background: var(--rmt-surface);
    border-radius: 8px;
    border: 1px solid var(--rmt-border);
    box-shadow: var(--rmt-shadow);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rmt-section-header[b-6isq0mm0he] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rmt-section-title-group[b-6isq0mm0he] { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.rmt-section-kicker[b-6isq0mm0he] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rmt-muted);
}

.rmt-section-title[b-6isq0mm0he] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--rmt-text); }

.rmt-section-empty[b-6isq0mm0he] {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-size: 0.88rem;
    background: var(--rmt-surface-muted);
    border: 1px dashed #e9ecef;
    border-radius: 8px;
}

/* ── Preview metrics ────────────────────────────────── */
.rmt-preview-metrics[b-6isq0mm0he] { display: flex; align-items: center; gap: 16px; }

.rmt-metric[b-6isq0mm0he] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.73rem;
    color: #778899;
    min-width: 44px;
}

.rmt-metric strong[b-6isq0mm0he] { font-size: 1.35rem; font-weight: 800; color: #15324a; line-height: 1.1; }
.rmt-metric-sep[b-6isq0mm0he] { padding-left: 16px; border-left: 1px solid #dde4ef; }
.rmt-metric-ok strong[b-6isq0mm0he]  { color: #1d6541; }
.rmt-metric-err strong[b-6isq0mm0he] { color: #a01010; }
.rmt-metric-warn strong[b-6isq0mm0he] { color: #a76800; }

/* ── Chips ──────────────────────────────────────────── */
.rmt-chip[b-6isq0mm0he] {
    padding: 2px 7px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    background: #eef2f7;
    color: #495057;
}

.rmt-chip-ok[b-6isq0mm0he]   { background: var(--rmt-success-soft); color: #146c43; }
.rmt-chip-warn[b-6isq0mm0he] { background: var(--rmt-warning-soft); color: #997404; }

.rmt-count-chip[b-6isq0mm0he] {
    background: var(--rmt-surface-muted);
    border: 1px solid var(--rmt-border);
    color: #495057;
    font-size: 0.73rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.rmt-validation-text[b-6isq0mm0he] { font-size: 0.78rem; line-height: 1.45; }

/* =======================================================
   Class names returned from .razor.cs helper methods
   ======================================================= */

.rm-transfer-state-pill[b-6isq0mm0he] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
}

.rm-transfer-state-pill-neutral[b-6isq0mm0he] { background: #e4e9f0; color: #556677; }
.rm-transfer-state-pill-success[b-6isq0mm0he] { background: #d0f0e0; color: #1a5c36; }
.rm-transfer-state-pill-danger[b-6isq0mm0he]  { background: #fde8e8; color: #7a1b14; }
.rm-transfer-state-pill-warning[b-6isq0mm0he] { background: #fff3cc; color: #8a5700; }

.rm-transfer-status-badge[b-6isq0mm0he] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.rm-transfer-status-badge-ok[b-6isq0mm0he]      { background: #d0f0e0; color: #1a5c36; }
.rm-transfer-status-badge-info[b-6isq0mm0he]    { background: #d0e8f8; color: #1a4c78; }
.rm-transfer-status-badge-warning[b-6isq0mm0he] { background: #fff0cc; color: #8a5700; }
.rm-transfer-status-badge-neutral[b-6isq0mm0he] { background: #eeeeee; color: #556677; }

.rm-transfer-status-block[b-6isq0mm0he] { color: #a01010; font-weight: 700; font-size: 0.78rem; }
.rm-transfer-status-warn[b-6isq0mm0he]  { color: #a76800; font-weight: 700; font-size: 0.78rem; }
.rm-transfer-status-ok[b-6isq0mm0he]    { color: #1d6541; font-weight: 700; font-size: 0.78rem; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1500px) {
    .rmt-workspace[b-6isq0mm0he] { grid-template-columns: minmax(0,1fr) 300px minmax(0,1fr); }
}

@media (max-width: 1100px) {
    .rmt-workspace[b-6isq0mm0he] { grid-template-columns: minmax(0,1fr) 260px minmax(0,1fr); }
    .rmt-search-fields[b-6isq0mm0he] { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .rmt-workspace[b-6isq0mm0he] {
        grid-template-columns: 1fr;
    }
    .rmt-col-connector[b-6isq0mm0he] { order: -1; }
}