/* Sales-invoice smart grid — editable line items with unified search. */
.sg { border: 1px solid var(--mx-border); border-radius: var(--mx-radius-md, 10px); background: var(--mx-surface); overflow: visible; }
.sg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-space-3);
    padding: var(--mx-space-2) var(--mx-space-4); border-bottom: 1px solid var(--mx-border);
    background: linear-gradient(135deg, var(--mx-brand-soft), transparent); }
.sg-title { font-weight: 700; color: var(--mx-brand); font-size: var(--mx-fs-sm); }
.sg-filter { display: flex; gap: 4px; }
.sg-chip { border: 1px solid var(--mx-border); background: var(--mx-surface); color: var(--mx-text-muted);
    border-radius: 100px; padding: 3px 12px; font-size: var(--mx-fs-xs, .75rem); cursor: pointer; }
.sg-chip.on { background: var(--mx-brand); color: #fff; border-color: var(--mx-brand); }

.sg-scroll { overflow-x: auto; }
.sg-table { width: 100%; border-collapse: collapse; font-size: var(--mx-fs-sm); min-width: 820px; }
.sg-table th, .sg-table td { padding: 4px 6px; border-bottom: 1px solid var(--mx-border); text-align: right; vertical-align: middle; }
.sg-table thead th { background: var(--mx-surface-alt); color: var(--mx-text-muted); font-weight: 700;
    font-size: var(--mx-fs-xs, .75rem); position: sticky; top: 0; z-index: 1; }
.sg-c-ser { width: 34px; text-align: center; color: var(--mx-text-muted); }
.sg-c-code { min-width: 260px; }
.sg-c-unit { width: 90px; }
.sg-c-num  { width: 92px; text-align: left; font-variant-numeric: tabular-nums; }
.sg-c-del  { width: 34px; text-align: center; }
.sg-empty-row td { background: color-mix(in srgb, var(--mx-brand-soft) 40%, transparent); }

.sg-cell { position: relative; display: flex; align-items: center; gap: 5px; }
.sg-in { width: 100%; border: 1px solid transparent; background: transparent; color: var(--mx-text);
    border-radius: 6px; padding: 5px 7px; font: inherit; }
.sg-in:focus { outline: none; border-color: var(--mx-brand); background: var(--mx-surface); box-shadow: 0 0 0 2px var(--mx-brand-soft); }
.sg-in.num { text-align: left; }
.sg-c-num.ro { color: var(--mx-text); }
.sg-c-num.strong { font-weight: 700; color: var(--mx-text-strong, var(--mx-text)); }
.sg-code-hint { color: var(--mx-text-muted); font-size: var(--mx-fs-xs, .72rem); direction: ltr; white-space: nowrap; }

.sg-badge { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 12px; }
.sg-badge.itm { background: var(--mx-brand-soft); }
.sg-badge.svc { background: #fbf1df; }

.sg-del { border: 0; background: transparent; color: var(--mx-danger, #dc2626); cursor: pointer; font-size: .95rem; line-height: 1; }
.sg-del:hover { transform: scale(1.15); }

/* results dropdown */
.sg-list { list-style: none; margin: 2px 0 0; padding: 4px; position: absolute; z-index: 40;
    inset-inline-start: 0; top: 100%; min-width: 320px; max-width: 92vw;
    background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: 10px;
    box-shadow: var(--mx-shadow-md, 0 10px 30px -12px rgba(0,0,0,.28)); max-height: 300px; overflow-y: auto; }
.sg-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.sg-item:hover { background: var(--mx-brand-soft); }
.sg-item-name { flex: 1; color: var(--mx-text); }
.sg-item-meta { color: var(--mx-text-muted); font-size: var(--mx-fs-xs, .72rem); direction: ltr; white-space: nowrap; }
.sg-none { padding: 8px; text-align: center; color: var(--mx-text-muted); font-size: var(--mx-fs-sm); }

.sg-totals td { background: var(--mx-surface-alt); font-weight: 700; }
.sg-tot-label { text-align: end; color: var(--mx-text-muted); }

/* demo page */
.sgd-page { padding: var(--mx-space-5); max-width: 1100px; margin: 0 auto; }
.sgd-h { color: var(--mx-brand); margin: 0 0 4px; }
.sgd-sub { color: var(--mx-text-muted); margin: 0 0 var(--mx-space-4); font-size: var(--mx-fs-sm); }
.sgd-totals { display: flex; gap: var(--mx-space-4); justify-content: flex-end; margin-top: var(--mx-space-4); flex-wrap: wrap; }
.sgd-totals > div { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: 10px; padding: 8px 16px; min-width: 130px; }
.sgd-totals > div span { color: var(--mx-text-muted); font-size: var(--mx-fs-xs, .75rem); }
.sgd-totals > div b { font-size: var(--mx-fs-lg, 1.1rem); font-variant-numeric: tabular-nums; }
.sgd-totals .grand { background: var(--mx-brand); }
.sgd-totals .grand span, .sgd-totals .grand b { color: #fff; }

/* Sales invoice header (custom) */
.sh { display: flex; flex-direction: column; gap: var(--mx-space-3); background: var(--mx-surface);
    border: 1px solid var(--mx-border); border-radius: var(--mx-radius-md, 10px); padding: var(--mx-space-4); }
.sh-row { display: flex; flex-wrap: wrap; gap: var(--mx-space-3); }
.sh-field { display: flex; flex-direction: column; gap: 3px; min-width: 150px; flex: 1 1 150px; }
.sh-field.sh-grow { flex: 3 1 260px; }
.sh-field.sh-grow2 { flex: 6 1 420px; }
.sh-field > label { font-size: var(--mx-fs-xs, .72rem); font-weight: 600; color: var(--mx-text-muted); }
.sh-in { border: 1px solid var(--mx-border); background: var(--mx-surface); color: var(--mx-text);
    border-radius: 8px; padding: 7px 10px; font: inherit; width: 100%; }
.sh-in:focus { outline: none; border-color: var(--mx-brand); box-shadow: 0 0 0 2px var(--mx-brand-soft); }
.sh-in.ro { background: var(--mx-surface-alt); color: var(--mx-text-muted); }
.sh-in.num { text-align: left; font-variant-numeric: tabular-nums; }
.sh-in.num.strong { font-weight: 700; color: var(--mx-text); }

.sh-radios { display: flex; flex-wrap: wrap; gap: 5px; }
.sh-chip { border: 1px solid var(--mx-border); background: var(--mx-surface); color: var(--mx-text-muted);
    border-radius: 100px; padding: 6px 14px; font-size: var(--mx-fs-sm); cursor: pointer; }
.sh-chip.on { background: var(--mx-brand); color: #fff; border-color: var(--mx-brand); }

/* customer 3-mode block */
.sh-cust { border: 1px dashed var(--mx-border-strong, var(--mx-border)); border-radius: 10px; padding: var(--mx-space-3);
    display: flex; flex-direction: column; gap: var(--mx-space-3); background: color-mix(in srgb, var(--mx-brand-soft) 25%, transparent); }
.sh-cust-modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-cust-label { font-weight: 700; color: var(--mx-brand); margin-inline-end: 6px; }
.sh-mode { border: 1px solid var(--mx-border-strong, var(--mx-border)); background: var(--mx-surface); color: var(--mx-text);
    border-radius: 8px; padding: 6px 14px; font-size: var(--mx-fs-sm); cursor: pointer; }
.sh-mode.on { background: var(--mx-brand); color: #fff; border-color: var(--mx-brand); }
.sh-picked { color: var(--mx-success, #0f9d6b); font-size: var(--mx-fs-sm); font-weight: 600; }
.sh-picked-code { color: var(--mx-text-muted); font-weight: 400; margin-inline-start: 6px; direction: ltr; }

.sh-list { list-style: none; margin: 2px 0 0; padding: 4px; position: absolute; z-index: 40; inset-inline: 0; top: 100%;
    background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: 10px;
    box-shadow: var(--mx-shadow-md, 0 10px 30px -12px rgba(0,0,0,.28)); max-height: 280px; overflow-y: auto; }
.sh-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 9px; border-radius: 7px; cursor: pointer; }
.sh-item:hover,
.sh-item.active { background: var(--mx-brand-soft); }
.sh-item.active { outline: 1px solid var(--mx-brand, #2563eb); outline-offset: -1px; }
.sh-item-name { color: var(--mx-text); }
.sh-item-meta { color: var(--mx-text-muted); font-size: var(--mx-fs-xs, .72rem); direction: ltr; white-space: nowrap; }

.sgd-lines { margin-top: var(--mx-space-4); }
.sgd-actions { display: flex; gap: var(--mx-space-3); justify-content: flex-start; margin-top: var(--mx-space-4); }
.sgd-btn { background: var(--mx-brand); color: #fff; border: 0; border-radius: 8px; padding: 9px 22px; font: inherit; font-weight: 600; cursor: pointer; }
.sgd-btn:disabled { opacity: .5; cursor: not-allowed; }
.sgd-btn.ghost { background: var(--mx-surface); color: var(--mx-brand); border: 1px solid var(--mx-border-strong, var(--mx-border)); }
.sgd-msg { margin-top: var(--mx-space-3); padding: 9px 14px; border-radius: 8px; font-weight: 600; }
.sgd-msg.ok  { background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; border: 1px solid #16a34a; }
.sgd-msg.err { background: color-mix(in srgb, var(--mx-danger, #dc2626) 12%, transparent); color: var(--mx-danger, #dc2626); border: 1px solid var(--mx-danger, #dc2626); }

/* search button + modals (customer & item unit) */
.sh-search-wrap { display: flex; gap: 4px; }
.sh-search-wrap .sh-in { flex: 1; }
.sh-find-btn { flex: none; border: 1px solid var(--mx-border-strong, var(--mx-border)); background: var(--mx-surface-alt);
    border-radius: 8px; padding: 0 12px; cursor: pointer; font-size: var(--mx-fs-sm); }
.sh-find-btn:hover { background: var(--mx-brand-soft); border-color: var(--mx-brand); }

.sg-modal-back, .sh-modal-back { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.45);
    display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; }
.sg-modal, .sh-modal { width: min(680px, 96vw); max-height: 80vh; display: flex; flex-direction: column;
    background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: 14px; overflow: hidden;
    box-shadow: var(--mx-shadow-lg, 0 24px 60px -20px rgba(0,0,0,.5)); }
.sg-modal-head, .sh-modal-head { display: flex; align-items: center; justify-content: space-between;
    padding: var(--mx-space-3) var(--mx-space-5); border-bottom: 1px solid var(--mx-border);
    background: linear-gradient(135deg, var(--mx-brand-soft), transparent); }
.sg-modal-head h6, .sh-modal-head h6 { margin: 0; color: var(--mx-brand); font-size: var(--mx-fs-base); }
.sg-modal-x, .sh-modal-x { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--mx-text-muted); }
.sh-modal-search { padding: var(--mx-space-3) var(--mx-space-5); border-bottom: 1px solid var(--mx-border); }
.sh-modal-body { overflow: auto; }
.sg-modal-table, .sh-modal-table { width: 100%; border-collapse: collapse; font-size: var(--mx-fs-sm); }
.sg-modal-table th, .sg-modal-table td, .sh-modal-table th, .sh-modal-table td {
    padding: 7px 12px; border-bottom: 1px solid var(--mx-border); text-align: right; }
.sg-modal-table thead th, .sh-modal-table thead th { background: var(--mx-surface-alt); color: var(--mx-text-muted);
    font-weight: 700; font-size: var(--mx-fs-xs, .75rem); position: sticky; top: 0; }
.sg-modal-row, .sh-modal-row { cursor: pointer; }
.sg-modal-row:hover td, .sh-modal-row:hover td { background: var(--mx-brand-soft); }
.sg-mono, .sh-mono { direction: ltr; font-variant-numeric: tabular-nums; color: var(--mx-text-muted); }

/* disabled type chip + national address */
.sh-chip.disabled { opacity: .55; cursor: not-allowed; }
.sh-chip.disabled.on { opacity: 1; }
.sh-natadr { border-top: 1px dashed var(--mx-border); padding-top: var(--mx-space-3); }
.sh-natadr-label { display: block; font-weight: 700; color: var(--mx-brand); font-size: var(--mx-fs-sm); margin-bottom: var(--mx-space-2); }
.sh-natadr .sh-field { min-width: 110px; flex: 1 1 110px; }

/* grid: add button + click-to-pick cell */
.sg-add { border: 1px solid var(--mx-brand); background: var(--mx-brand); color: #fff; border-radius: 8px;
    padding: 6px 14px; font: inherit; font-weight: 600; font-size: var(--mx-fs-sm); cursor: pointer; }
.sg-add:hover { background: var(--mx-brand-hover, var(--mx-brand)); }
.sg-cell-pick { cursor: pointer; min-height: 30px; padding: 3px 4px; border-radius: 6px; }
.sg-cell-pick:hover { background: var(--mx-brand-soft); }
.sg-name { flex: 1; color: var(--mx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-placeholder { flex: 1; color: var(--mx-text-muted); font-size: var(--mx-fs-sm); }
.sg-find { flex: none; border: 1px solid var(--mx-border); background: var(--mx-surface-alt); border-radius: 6px;
    padding: 2px 8px; cursor: pointer; font-size: .85rem; }
.sg-find:hover { background: var(--mx-brand-soft); border-color: var(--mx-brand); }
.sg-modal-head .sg-filter { margin-inline-start: auto; }

/* editable code + description columns */
.sg-c-code2 { width: 150px; }
.sg-c-name  { min-width: 220px; }
.sg-c-code2 .sg-cell { gap: 4px; }
.sg-code-in { direction: ltr; font-variant-numeric: tabular-nums; }
/* code typed but no item/service matched */
.sg-in.miss, .sh-in.miss { border-color: var(--mx-danger, #dc2626) !important; background: color-mix(in srgb, var(--mx-danger, #dc2626) 10%, transparent); }
.sg-c-name .sg-in { width: 100%; }

/* unit cell: item = clickable chooser, service = read-only */
.sg-unit-btn { width: 100%; border: 1px solid var(--mx-border); background: var(--mx-surface);
    color: var(--mx-text); border-radius: 6px; padding: 5px 8px; font: inherit; cursor: pointer;
    text-align: start; display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.sg-unit-btn:hover { border-color: var(--mx-brand); background: var(--mx-brand-soft); }
.sg-unit-fixed { display: block; padding: 5px 8px; color: var(--mx-text-muted); }

/* invalid conversion (item with Conv <= 0) */
.sg-unit-btn.warn { border-color: var(--mx-danger, #dc2626); color: var(--mx-danger, #dc2626); }

/* expanded entry panel (above the grid) */
.sg-panel { border: 1px solid var(--mx-brand); border-radius: var(--mx-radius-md, 10px);
    background: color-mix(in srgb, var(--mx-brand-soft) 30%, var(--mx-surface));
    padding: var(--mx-space-3) var(--mx-space-4); margin-bottom: var(--mx-space-3);
    display: flex; flex-direction: column; gap: var(--mx-space-2); }
.sg-panel-head { display: flex; align-items: center; justify-content: space-between; }
.sg-panel-title { font-weight: 700; color: var(--mx-brand); font-size: var(--mx-fs-sm); }
.sg-panel-actions { display: flex; gap: 6px; }
.sg-btn { border: 1px solid var(--mx-brand); background: var(--mx-brand); color: #fff; border-radius: 8px;
    padding: 5px 14px; font: inherit; font-weight: 600; font-size: var(--mx-fs-sm); cursor: pointer; }
.sg-btn.ghost { background: var(--mx-surface); color: var(--mx-brand); }
.sg-btn.ghost:hover { background: var(--mx-brand-soft); }

.sg-toolbar-btns { display: flex; gap: 6px; }
.sg-add.ghost { background: var(--mx-surface); color: var(--mx-brand); }
.sg-add.ghost.on { background: var(--mx-brand); color: #fff; }

.sg-exp { border: 0; background: transparent; color: var(--mx-brand); cursor: pointer; font-size: .95rem; line-height: 1; margin-inline-end: 4px; }
.sg-exp:hover { transform: scale(1.15); }
.sg-c-del { width: 56px; white-space: nowrap; }
.sg-active-row td { background: color-mix(in srgb, var(--mx-brand-soft) 55%, transparent) !important; }