/* ==========================================================================
   AGGROW Shipper/Delivery (trang) — class trích từ inline style, theme-aware.
   Token nền: --ag-fg-rgb, --ag-surface-sunken, --ag-border (aggrow-ui-core.css).
   Màu trạng thái pastel ánh xạ sang biến --mud-palette-* qua các class .shp-c-*.
   ========================================================================== */

/* ── Bảng màu trạng thái shipper (dùng chung) ──
   Mỗi token gồm: text màu (--shp-c) + RGB cho nền alpha (--shp-c-rgb). Pastel → semantic. */
.shp-c-slate  { --shp-c: var(--mud-palette-text-secondary); --shp-c-rgb: var(--mud-palette-text-secondary-rgb, 148,163,184); }
.shp-c-orange { --shp-c: var(--mud-palette-warning-darken); --shp-c-rgb: var(--mud-palette-warning-rgb); }
.shp-c-green  { --shp-c: var(--mud-palette-success); --shp-c-rgb: var(--mud-palette-success-rgb); }

/* Badge trạng thái: nền alpha + chữ theo --shp-c (gán kèm 1 class .shp-c-*) */
.shp-badge {
    border-radius: 4px; padding: 2px 10px; font-weight: 600; font-size: 11px;
    white-space: nowrap; background: rgba(var(--shp-c-rgb), 0.13); color: var(--shp-c);
}
.shp-badge--xs { border-radius: 3px; padding: 1px 6px; font-size: 10px; font-weight: 700; flex-shrink: 0; }

/* ==========================================================================
   OrderDetailDialog.razor
   ========================================================================== */
.od-loading        { padding: 48px; text-align: center; }
.od-loading-text   { font-size: 12px; color: rgba(var(--ag-fg-rgb), 0.40); margin-top: 10px; }
.od-refresh-btn    { margin-left: auto; color: rgba(var(--ag-fg-rgb), 0.50); }
.od-title-icon     { color: var(--mud-palette-warning); }

/* Info card — nhãn nhỏ + giá trị */
.od-field-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
    color: rgba(var(--ag-fg-rgb), 0.40); margin-bottom: 3px;
}
.od-field-value     { font-weight: 600; font-size: 13px; }
.od-field-sub       { font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.40); margin-top: 2px; }
.od-field-amount    { font-weight: 700; font-size: 15px; color: var(--mud-palette-info); }
.od-field-duration  { font-weight: 600; font-size: 13px; color: #a78bfa; }
.od-field-receiver  { font-size: 13px; }

/* Timeline */
.od-block           { margin-bottom: 14px; }
.od-timeline-row    { display: flex; align-items: flex-start; gap: 0; }
.od-timeline-step   { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; min-width: 64px; max-width: 76px; }
.od-step-circle     { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.od-timeline-line   { flex: 1; height: 2px; margin-top: 18px; min-width: 8px; }
.od-step-time       { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.45); white-space: nowrap; text-align: center; }
.od-step-date       { font-size: 9px; color: rgba(var(--ag-fg-rgb), 0.25); white-space: nowrap; text-align: center; margin-top: -2px; }

/* Notes box */
.od-notes {
    margin-bottom: 14px; padding: 10px 12px; border-radius: 6px;
    background: rgba(var(--ag-fg-rgb), 0.04);
    border-left: 3px solid rgba(var(--mud-palette-warning-rgb), 0.40);
}
.od-note-label        { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: rgba(var(--ag-fg-rgb), 0.45); margin-bottom: 3px; }
.od-note-label--good  { color: var(--mud-palette-success); margin-top: 8px; }
.od-note-label--bad   { color: var(--mud-palette-error);   margin-top: 8px; }
.od-note-text         { font-size: 12px; }
.od-note-text--bad    { font-size: 12px; color: var(--mud-palette-error-lighten); }

/* Lines extra */
.od-lines-th-prod     { min-width: 170px; }
.od-prod-name         { font-weight: 600; color: rgba(var(--ag-fg-rgb), 0.86); }
.od-prod-code         { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.36); margin-top: 2px; }
.od-qty-muted         { color: rgba(var(--ag-fg-rgb), 0.32); }
.od-qty-delivery      { color: var(--mud-palette-warning); }
.od-qty-receipt       { color: var(--mud-palette-success); }
.od-lines-foot        { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.35); margin-top: 5px; }

/* History (assignment + status) */
.od-hist-wrap         { border-radius: 6px; overflow: hidden; border: 1px solid rgba(var(--ag-fg-rgb), 0.07); }
.od-hist-row          { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px 10px; border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.05); font-size: 11px; }
.od-hist-head         { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.od-hist-time         { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.40); }
.od-hist-main         { margin-top: 3px; color: rgba(var(--ag-fg-rgb), 0.72); overflow: hidden; text-overflow: ellipsis; }
.od-hist-sub          { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.42); margin-top: 2px; }
.od-hist-sub--dim     { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.32); margin-top: 2px; }
.od-status-row        { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.05); font-size: 11px; }
.od-status-time       { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.40); white-space: nowrap; min-width: 54px; }
.od-status-arrow      { font-size: 12px; color: rgba(var(--ag-fg-rgb), 0.30); flex-shrink: 0; }
.od-status-dur        { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.35); margin-left: auto; white-space: nowrap; flex-shrink: 0; }

/* Signatures */
.od-sign-block        { margin-bottom: 16px; }
.od-sign-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.od-sign-label        { font-size: 11px; font-weight: 600; margin-bottom: 5px; display: flex; align-items: center; gap: 4px; }
.od-sign-label--pick  { color: var(--mud-palette-warning); }
.od-sign-label--deliv { color: var(--mud-palette-success); }
.od-sign-box--h100    { height: 100px; }
.od-sign-img          { max-height: 100px; object-fit: contain; }
.od-sign-empty {
    border: 1px dashed rgba(var(--ag-fg-rgb), 0.10); border-radius: 8px; height: 100px;
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.od-sign-empty-icon   { font-size: 22px; color: rgba(var(--ag-fg-rgb), 0.15); }
.od-sign-empty-text   { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.25); }
.od-sign-empty-tag        { font-size: 9px; opacity: .6; }
.od-sign-empty-tag--pick  { color: var(--mud-palette-warning); }
.od-sign-empty-tag--deliv { color: var(--mud-palette-success); }

/* Photos */
.od-photo-block       { margin-bottom: 12px; }
.od-photo-grouphd     { font-size: 11px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.od-photo-grouphd--other { color: rgba(var(--ag-fg-rgb), 0.50); }
.od-photo-list        { display: flex; flex-wrap: wrap; gap: 6px; }
.od-photo-time {
    position: absolute; bottom: 3px; right: 4px; font-size: 9px;
    color: rgba(255, 255, 255, 0.70); background: rgba(0, 0, 0, 0.60);
    border-radius: 3px; padding: 0 3px; pointer-events: none;
}
.od-photo-empty       { text-align: center; padding: 20px 0; color: rgba(var(--ag-fg-rgb), 0.30); font-size: 12px; }
.od-photo-empty-icon  { font-size: 36px; display: block; margin: 0 auto 6px; opacity: .2; }

/* Lightbox (overlay tối toàn màn — giữ nền tối thực) */
.od-lightbox          { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.93); display: flex; align-items: center; justify-content: center; }
.od-lightbox-img      { max-width: 90vw; max-height: 88vh; border-radius: 8px; object-fit: contain; box-shadow: 0 8px 48px rgba(0, 0, 0, 0.8); cursor: default; }
.od-lightbox-close    { position: absolute; top: 14px; right: 18px; }
.od-lightbox-close-btn{ color: #fff; background: rgba(0, 0, 0, 0.4); }

/* ==========================================================================
   AssignDriverDialog.razor
   ========================================================================== */
.shp-dlg-md          { min-width: 560px; max-width: 720px; width: 90vw; }
.shp-dlg-title       { display: flex; align-items: center; gap: 8px; }
.shp-dlg-title-icon  { color: var(--mud-palette-info); }
.shp-dlg-title-text  { font-size: 15px; font-weight: 700; margin: 0; }
.shp-ad-header       { display: grid; gap: 2px; margin-bottom: 12px; }
.shp-ad-cap55        { color: rgba(var(--ag-fg-rgb), 0.55); }
.shp-ad-cap45        { color: rgba(var(--ag-fg-rgb), 0.45); }
.shp-ad-chips        { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.shp-ad-loading      { display: flex; align-items: center; gap: 8px; padding: 12px 0; }
.shp-ad-sel-chips    { display: flex; gap: 6px; margin: 8px 0 10px; flex-wrap: wrap; }

/* ==========================================================================
   LocationEditDialog.razor
   ========================================================================== */
.shp-dlg-sm          { min-width: 420px; max-width: 560px; width: 90vw; }
.shp-le-title        { font-size: 15px; font-weight: 700; }
.shp-le-title-icon   { vertical-align: middle; margin-right: 6px; color: var(--mud-palette-warning); }
.shp-le-addr         { color: rgba(var(--ag-fg-rgb), 0.50); display: block; margin-bottom: 12px; }
.shp-le-alert        { font-size: 11px; }
.shp-le-hint         { color: rgba(var(--ag-fg-rgb), 0.35); margin-top: 8px; display: block; }

/* ==========================================================================
   ShipperManagement.razor
   ========================================================================== */
/* Toolbar */
.shp-toolbar         { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.shp-toolbar-icon    { color: var(--mud-palette-success); }
.shp-toolbar-title   { font-weight: 700; margin: 0; }
.shp-toolbar-divider { height: 24px; align-self: center; }
.shp-live-chip       { font-size: 10px; }
.shp-legend          { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.shp-legend-item     { display: flex; align-items: center; gap: 3px; font-size: 11px; }
.shp-legend-dot      { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* KPI biến thể màu (giữ pastel hiện hữu trên .kpi-compact-card) */
.shp-kpi--blue   { --kpi-bg: rgba(var(--mud-palette-info-rgb), 0.07);    --kpi-accent: var(--mud-palette-info); }
.shp-kpi--slate  { --kpi-bg: rgba(var(--ag-fg-rgb), 0.05);               --kpi-accent: var(--mud-palette-text-secondary); }
.shp-kpi--orange { --kpi-bg: rgba(var(--mud-palette-warning-rgb), 0.07); --kpi-accent: var(--mud-palette-warning-darken); }
.shp-kpi--green  { --kpi-bg: rgba(var(--mud-palette-success-rgb), 0.07); --kpi-accent: var(--mud-palette-success); }
.shp-kpi--red    { --kpi-bg: rgba(var(--mud-palette-error-rgb), 0.07);   --kpi-accent: var(--mud-palette-error); }
.shp-kpi--amber  { --kpi-bg: rgba(var(--mud-palette-warning-rgb), 0.07); --kpi-accent: var(--mud-palette-warning); }
.shp-kpi-frac    { font-size: .8rem; opacity: .6; }

/* Layout chính */
.shp-main        { display: flex; gap: 8px; height: calc(100vh - 230px); min-height: 560px; }
.shp-left-col    { flex: 0 0 420px; display: flex; flex-direction: column; overflow: hidden; min-width: 320px; border-radius: 8px; border: 1px solid var(--ag-border); }
.shp-left-head {
    padding: 6px 12px; background: rgba(var(--ag-fg-rgb), 0.04); border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.07);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: rgba(var(--ag-fg-rgb), 0.45); display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.shp-left-head-btn { margin-left: auto; font-size: 10px; padding: 0 6px; min-width: 0; }
.shp-tabs        { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.shp-tab-scroll  { overflow-y: auto; height: calc(100vh - 320px); }
.shp-center      { padding: 16px; text-align: center; }
.shp-empty       { padding: 16px; text-align: center; color: rgba(var(--ag-fg-rgb), 0.35); font-size: 12px; }
.shp-empty-icon  { font-size: 24px; display: block; margin: 0 auto 4px; opacity: .3; }
.shp-empty--lg   { padding: 24px; text-align: center; color: rgba(var(--ag-fg-rgb), 0.30); font-size: 12px; }

/* Shipper list item */
.shp-item        { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; cursor: pointer; border-left: 3px solid transparent; background: transparent; transition: background 0.15s; }
.shp-item--active{ border-left-color: var(--mud-palette-info); background: rgba(var(--mud-palette-info-rgb), 0.08); }
.shp-item-avatar { height: 32px; width: 32px; flex-shrink: 0; font-size: 12px; font-weight: 700; }
.shp-item-body   { flex: 1; min-width: 0; }
.shp-item-name   { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shp-item-tags   { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.shp-item-chevron{ color: var(--mud-palette-info); align-self: center; flex-shrink: 0; font-size: 18px; }
.shp-item-divider{ background: rgba(var(--ag-fg-rgb), 0.04); }
.shp-mini-stat   { border-radius: 3px; padding: 0 4px; font-size: 10px; font-weight: 700; background: rgba(var(--shp-c-rgb), 0.15); color: var(--shp-c); }
.shp-mini-stat--normal { font-weight: 400; }
.shp-mini-gps    { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.30); }
.shp-mini-nogps  { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.20); }

/* Order table (cards) */
.shp-filterbar   { padding: 4px 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; position: sticky; top: 0; z-index: 1; background: var(--mud-palette-surface); }
.shp-filter-sel  { min-width: 130px; }
.shp-filter-chip { height: 20px; font-size: 10px; }
.shp-ocard       { padding: 7px 10px; border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.05); }
.shp-ocard--hl   { background: rgba(var(--mud-palette-info-rgb), 0.06); }
.shp-ocard-r1    { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.shp-ocard-id    { font-family: monospace; font-size: 10.5px; color: var(--mud-palette-info); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-ocard-iconbtn   { padding: 1px; width: 22px; height: 22px; flex-shrink: 0; }
.shp-ocard-iconbtn--w28 { padding: 1px; width: 28px; height: 28px; flex-shrink: 0; }
.shp-ocard-r2    { display: flex; align-items: baseline; gap: 6px; }
.shp-ocard-cus   { font-size: 11.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-ocard-amt   { font-size: 11px; font-weight: 700; color: var(--mud-palette-success); white-space: nowrap; flex-shrink: 0; }
.shp-ocard-r3    { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.shp-ocard-drv   { font-size: 10px; padding: 0 4px; min-width: 0; max-width: 190px; height: 20px; justify-content: flex-start; text-transform: none; overflow: hidden; }
.shp-ocard-time  { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.35); white-space: nowrap; flex-shrink: 0; }
.shp-ocard-done  { font-size: 10px; color: var(--mud-palette-success); white-space: nowrap; flex-shrink: 0; }

/* Map */
.shp-map-col     { flex: 1; border-radius: 8px; overflow: hidden; position: relative; min-width: 0; }
.shp-map         { width: 100%; height: 100%; }
.shp-map-loading {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75); padding: 6px 14px; border-radius: 20px; font-size: 11px;
    color: var(--mud-palette-info); z-index: 1000; display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.shp-map-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--mud-palette-surface-rgb, 13, 22, 36), 0.85); color: rgba(var(--ag-fg-rgb), 0.40);
    font-size: 13px; flex-direction: column; gap: 8px; z-index: 999;
}
.shp-map-overlay-icon { font-size: 40px; opacity: .3; }

/* ==========================================================================
   ShipperHome.razor
   ========================================================================== */
.shh-wrap {
    position: fixed; inset: 0; background: var(--mud-palette-background);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 24px; padding: 24px;
}
.shh-logo    { height: 52px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(var(--mud-palette-primary-rgb), 0.4)); }
.shh-textcenter { text-align: center; }
.shh-greet   { font-size: 1.4rem; font-weight: 700; color: var(--mud-palette-text-primary); margin-bottom: 6px; }
.shh-sub     { font-size: 0.9rem; color: var(--mud-palette-text-secondary); }
.shh-logout {
    padding: 10px 28px; background: rgba(var(--mud-palette-error-rgb), 0.15);
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.3); border-radius: 8px;
    color: var(--mud-palette-error); font-size: 0.9rem; cursor: pointer; font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   DeliveryDetail.razor / DeliveryList.razor (bổ sung cho delivery.css)
   ========================================================================== */
.dv-header-icon       { color: var(--mud-palette-info); font-size: 24px; }
.dv-header-title      { margin: 0; font-weight: 700; }
.dv-header-trans      { color: var(--mud-palette-text-primary); font-weight: normal; }
.dv-chip-pulse        { animation: pulse 2s infinite; }
.dv-panel-pad         { padding: 10px 14px; }
.dv-row-wrap          { flex-wrap: wrap; gap: 8px; }
.dv-text-muted-ml     { margin-left: 8px; }
.dv-tt-none           { text-transform: none; }

/* Ảnh có sẵn (proof) */
.dv-proof-label       { font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.50); white-space: nowrap; }
.dv-proof-thumb-wrap  { position: relative; display: inline-block; cursor: pointer; }
.dv-proof-thumb       { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; border: 2px solid rgba(var(--mud-palette-info-rgb), 0.4); vertical-align: middle; }
.dv-proof-ocr-btn {
    position: absolute; top: -4px; right: -4px; background: var(--mud-palette-surface);
    color: var(--mud-palette-info); padding: 2px; min-width: 0; width: 18px; height: 18px; font-size: 11px;
}

/* Model select + OCR status */
.dv-model-wrap        { min-width: 160px; }
.dv-model-select      { background: var(--ag-surface-sunken); font-size: 0.82rem; }
.dv-ocr-row           { flex-wrap: wrap; gap: 6px; }
.dv-ocr-title         { color: var(--mud-palette-warning); margin: 0; }
.dv-ocr-title-icon    { font-size: 18px; vertical-align: middle; }
.dv-ocr-model-chip    { margin-left: 8px; margin-top: -2px; }
.dv-ocr-data-btn      { text-transform: none; margin-left: 8px; }
.dv-toggle-pad        { padding: 4px; }
.dv-toggle-text       { cursor: pointer; user-select: none; margin-left: -4px; }
.dv-toggle-text--gap  { margin-right: 12px; }

/* Image review card */
.dv-img-card          { background: var(--mud-palette-surface); border: 1px solid var(--ag-border); height: 100%; }
.dv-img-caption       { color: var(--mud-palette-text-secondary); }
.dv-img-caption-icon  { font-size: 14px; vertical-align: middle; margin-right: 4px; }
.dv-img-link          { display: block; }
.dv-img               { max-width: 100%; max-height: calc(100vh - 220px); object-fit: contain; border: 1px solid rgba(var(--ag-fg-rgb), 0.1); }

/* Table extras */
.dv-table-toolbar     { gap: 8px; flex-wrap: wrap; border-bottom: 1px solid rgba(var(--mud-palette-text-secondary-rgb, 148,163,184), .16); }
.dv-filter-input      { max-width: 420px; min-width: 260px; flex: 1; }
.dv-cell-barcode      { font-size: 0.72rem; }
.dv-cell-name         { max-width: 220px; white-space: normal; }
.dv-cell-uom          { font-size: 0.75rem; }
.dv-inline-input--w70 { width: 70px; }
.dv-icon-pad          { padding: 2px; }

/* JSON dialog */
.dv-json-scroll       { max-height: 70vh; overflow-y: auto; }
.dv-json-pre {
    background: var(--ag-surface-sunken); color: var(--mud-palette-info-lighten);
    padding: 12px; border-radius: 8px; font-family: monospace; white-space: pre-wrap; font-size: 0.85rem;
}

/* DeliveryList */
.dv-page-icon         { color: var(--mud-palette-info); font-size: 28px; }
.dv-daterange-wrap    { width: 260px; }
.dv-search-input      { width: 250px; }
.dv-batch-progress    { height: 8px; border-radius: 4px; }
.dv-batch-panel-bg    { background-color: rgba(var(--mud-palette-info-rgb), 0.05); border: 1px solid rgba(var(--mud-palette-info-rgb), 0.2); }
.dv-batch-errbox {
    background: rgba(var(--mud-palette-error-rgb), 0.1); border: 1px solid rgba(var(--mud-palette-error-rgb), 0.2);
    max-height: 120px; overflow-y: auto;
}
.dv-row-tight         { line-height: 1.2; }
.dv-list-scrollbox    { max-height: calc(100vh - 350px); overflow-y: auto; }
.dv-grid-filter       { background: var(--mud-palette-surface); position: sticky; top: 0; z-index: 3; }
.dv-grid-filter-input { background-color: var(--mud-palette-surface); width: 300px; }
.dv-thead-sticky      { position: sticky; top: 52px; z-index: 2; }
.dv-col-w180          { width: 180px; }
.dv-col-w120          { width: 120px; }
.dv-col-w100          { width: 100px; }
.dv-col-w80           { width: 80px; }
.dv-col-team          { width: 15%; }
.dv-col-date          { width: 100px; }
.dv-col-auto          { width: auto; }
.dv-upload-btn        { padding: 2px 8px; text-transform: none; }
.dv-empty-cell        { padding: 24px; }

/* ── từ OrderDetailDialog.razor ── */
.od-photo-thumb {
    width: 88px; height: 88px; border-radius: 6px; overflow: hidden;
    cursor: zoom-in; position: relative; background: rgba(var(--ag-fg-rgb),.06);
    flex-shrink: 0; transition: transform .15s;
}
.od-photo-thumb:hover { transform: scale(1.04); }
.od-photo-thumb img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.od-sign-box {
    border-radius: 8px; overflow: hidden; background: #fff;
    display: flex; align-items: center; justify-content: center;
    max-width: 100%; cursor: zoom-in;
}
.od-sign-box img { width: 100%; height: auto; display: block; }
.od-section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: rgba(var(--ag-fg-rgb),.4); margin-bottom: 8px;
}
.od-lines { width: 100%; border-collapse: collapse; font-size: 11px; }
.od-lines th {
    text-align: left; padding: 6px 7px; color: rgba(var(--ag-fg-rgb),.42);
    font-size: 10px; text-transform: uppercase; letter-spacing: .35px;
    border-bottom: 1px solid rgba(var(--ag-fg-rgb),.08); white-space: nowrap;
}
.od-lines td { padding: 6px 7px; border-bottom: 1px solid rgba(var(--ag-fg-rgb),.05); vertical-align: top; }
.od-qty-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-dialog { width:min(1200px, 92vw); max-width:calc(100vw - 24px); }
.od-title-bar { display:flex; align-items:center; gap:10px; min-width:0; }
.od-title-text { font-size:15px; font-weight:700; margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.od-main-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:start; }
.od-info-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; margin-bottom:14px; padding:12px 14px; background:rgba(var(--ag-fg-rgb),0.03); border-radius:8px; }
.od-lines-wrap { border:1px solid rgba(var(--ag-fg-rgb),.07); border-radius:6px; overflow:auto; max-height:260px; }

@media (max-width: 720px) {
    .od-dialog { width:calc(100vw - 12px); max-width:calc(100vw - 12px); margin:6px; }
    .od-title-bar { gap:6px; }
    .od-title-text { font-size:13px; }
    .od-main-grid { grid-template-columns:1fr; gap:12px; }
    .od-info-grid { grid-template-columns:1fr; padding:10px 12px; }
    .od-lines { min-width:560px; }
    .od-photo-thumb { width:72px; height:72px; }
}