/* Inline product grid of the entry pages (Pages/InvoiceItemGrid.razor). Same palette and type as the
   .modern-table it replaces: blue header, #c8c6c4 rules, 12px bold cells, sticky Index + Product. */

.iig { position: relative; width: 100%; }

.iig-wrap {
    max-height: 360px;
    min-height: 220px;
    overflow: auto;
    border: 1px solid #c8c6c4;
    border-radius: 4px;
    background: #ffffff;
    outline: none;
}

.iig-wrap:focus-visible { box-shadow: 0 0 0 2px #cce5ff; }

.iig-table {
    min-width: 100%;
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
}

.iig-table th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #e5efff;
    padding: 6px 8px;
    border-bottom: 1px solid #c8c6c4;
    border-right: 1px solid #c8c6c4;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    color: #1f2937;
    font-size: 12px;
}

.iig-table td {
    height: 34px;
    padding: 0 8px;
    border-bottom: 1px solid #c8c6c4;
    border-right: 1px solid #c8c6c4;
    background: #ffffff;
    font-size: 12px;
    font-weight: bold;
    color: #605e5c;
    white-space: nowrap;
    user-select: none;
    cursor: default;
}

.iig-table th:last-child,
.iig-table td:last-child { border-right: none; }

.iig-table .hide-col { display: none; }

/* Index and Product stay put while the rest scrolls sideways */
.iig-table .iig-idx {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 60px;
    min-width: 60px;
    text-align: center;
}

.iig-table .iig-prod {
    position: sticky;
    left: 60px;
    z-index: 3;
    min-width: 260px;
    max-width: 320px;
    text-align: left;
    overflow: visible;
}

.iig-table th.iig-idx,
.iig-table th.iig-prod { z-index: 5; }

/* A sticky cell is its own stacking layer, so the Product list opened inside it was painted under the
   later rows' sticky cells (and the header). Lift the cell above them while its list is open. */
.iig-table td:has(.vd-dropdown) { z-index: 8; }

.iig-table .iig-num { text-align: right; }
.iig-table .iig-amt { color: #1f2937; }
.iig-table .iig-act { width: 60px; min-width: 60px; text-align: center; }

.iig-table tbody tr:hover td { background: #f1f5ff; }

/* the selected row (keyboard / click) */
.iig-table tr.sel td { background: #dbeafe; }
.iig-table tr.sel td.iig-idx { box-shadow: inset 3px 0 0 #3399ff; }

/* the row being edited */
.iig-table tr.editing td { background: #eef6ff; padding: 0; }
.iig-table tr.editing td.iig-idx,
.iig-table tr.editing td.iig-static,
.iig-table tr.editing td.iig-na { padding: 0 8px; }

.iig-table td.iig-na { background: #f4f5f7 !important; color: #a0a4ab; text-align: center; }
.iig-table tr.blank td.iig-hint { color: #8a8f98; font-style: italic; font-weight: normal; }

.iig-table td.iig-dd { min-width: 150px; }
.iig-table td.iig-dd .vd-container { border-color: transparent; border-radius: 0; background: transparent; }
.iig-table td.iig-dd .vd-container:focus,
.iig-table td.iig-dd .vd-container:focus-within { border-color: #3399ff; }
.iig-table td.iig-dd .vd-trigger { background: transparent; }

.iig-in {
    display: block;
    width: 100%;
    min-width: 90px;
    height: 32px;
    padding: 0 8px;
    border: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: bold;
    color: #1f2937;
    outline: none;
}

.iig-in.iig-num { text-align: right; }
.iig-in:focus { border-color: #3399ff; background: #fffbe6; }
.iig-in:disabled { color: #a0a4ab; }

.iig-table td.iig-rate { position: relative; min-width: 120px; }
.iig-table td.iig-rate .iig-in { padding-left: 34px; }
.iig-tp {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    padding: 0 5px;
    border: 1px solid #c8c6c4;
    border-radius: 4px;
    background: #ffffff;
    color: #8a8f98;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
}
.iig-tp.on { background: #3399ff; border-color: #3399ff; color: #ffffff; }

/* Compact layout, set by invoicegrid.js when every column fits the box (InvoiceItemGrid.razor FitWidth):
   the columns share the width at fixed sizes so the row being edited never widens the table, and with
   no inner scroller the header sticks to the page's scroll -- it stays on screen while a row is typed. */
.iig.iig-fit .iig-wrap { overflow: visible; max-height: none; }
.iig.iig-fit .iig-table { width: 100%; table-layout: fixed; }
.iig.iig-fit .iig-table th { white-space: normal; line-height: 1.2; }
.iig.iig-fit .iig-table td { overflow: hidden; text-overflow: ellipsis; }
.iig.iig-fit .iig-table .iig-idx { width: 56px; min-width: 0; }
.iig.iig-fit .iig-table .iig-prod { width: 20%; min-width: 0; max-width: none; }
.iig.iig-fit .iig-table .iig-c-hsn,
.iig.iig-fit .iig-table .iig-c-qty { width: 84px; }
.iig.iig-fit .iig-table .iig-c-unit { width: 60px; }
.iig.iig-fit .iig-table .iig-c-rate { width: 110px; }
.iig.iig-fit .iig-table .iig-c-orate { width: 100px; }
.iig.iig-fit .iig-table .iig-c-amt { width: 104px; }
.iig.iig-fit .iig-table .iig-c-gst { width: 64px; }
.iig.iig-fit .iig-table .iig-act { width: 56px; min-width: 0; }
.iig.iig-fit .iig-table td.iig-dd,
.iig.iig-fit .iig-table td.iig-rate,
.iig.iig-fit .iig-in { min-width: 0; }
.iig.iig-fit .iig-table td.iig-dd .vd-trigger { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a cell scrolled into view by focus or the arrow keys lands below the sticky header, not under it */
.iig.iig-fit tbody tr,
.iig.iig-fit tbody input,
.iig.iig-fit tbody .vd-container { scroll-margin-top: 48px; }

/* drag to reorder */
.iig-grip { display: inline-block; width: 14px; margin-right: 2px; color: #b0b6bf; cursor: grab; }
.iig-table tr:hover .iig-grip,
.iig-table tr.sel .iig-grip { color: #605e5c; }
.iig-table tr.drag-src td { opacity: .45; }
.iig-table tr.drop-before td { box-shadow: inset 0 3px 0 #3399ff; }

.iig-table .delete-icon { cursor: pointer; fill: #808080; vertical-align: middle; }
.iig-table .delete-icon:hover { fill: #e53935; }

.iig-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 6px;
    font-size: 11px;
    color: #6b7280;
}
.iig-keys b { color: #1f2937; }
.iig-keys kbd {
    border: 1px solid #d1d5db;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 4px;
    font: 10px monospace;
    background: #f8fafc;
    color: #1f2937;
}

/* item box: expenses, tax, sub total -- fixed so the scrolling grid never clips it */
.iig-box {
    position: fixed;
    z-index: 1000;
    width: 470px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #c8c6c4;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .22);
    font-size: 12px;
    color: #1f2937;
}

.iig-box-head { display: flex; justify-content: space-between; font-weight: bold; font-size: 13px; margin-bottom: 4px; }
.iig-box-head span:last-child { color: #6b7280; font-weight: 600; font-size: 12px; }
.iig-box-sec { margin: 10px 0 6px; font-weight: bold; color: #0078d4; font-size: 12px; }

.iig-box-row {
    display: grid;
    grid-template-columns: 1fr 22px 100px 120px;
    gap: 6px;
    align-items: center;
    margin-bottom: 5px;
}
.iig-box-row > span:first-child { font-weight: 600; }
.iig-box-row.ro > span:first-child { color: #8a8f98; }
.iig-box-row.total { border-top: 1px solid #c8c6c4; padding-top: 6px; font-weight: bold; }
.iig-box-row.total > span:first-child { font-weight: bold; }
.iig-box-v { grid-column: 4; text-align: right; font-weight: bold; }
.iig-box-row > input { grid-column: 4; }

.iig-sign { text-align: center; font-weight: bold; font-size: 14px; }
.iig-sign.plus { color: #16a34a; }
.iig-sign.minus { color: #e53935; }

.iig-perc { position: relative; }
.iig-perc i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; color: #8a8f98; pointer-events: none; }

.iig-box-in {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #c8c6c4;
    border-radius: 4px;
    text-align: right;
    font: inherit;
    font-weight: bold;
    background: #ffffff;
    color: #1f2937;
}
.iig-perc .iig-box-in { padding-right: 22px; }
.iig-box-in:focus { outline: none; border-color: #3399ff; background: #fffbe6; }
.iig-box-in:disabled { background: #f4f5f7; color: #8a8f98; cursor: not-allowed; }

.iig-mode { grid-column: 2 / span 3; display: inline-flex; justify-self: end; border: 1px solid #0078d4; border-radius: 6px; overflow: hidden; }
.iig-mode-btn { border: none; background: #ffffff; color: #0078d4; padding: 4px 12px; font: inherit; font-weight: bold; cursor: pointer; }
.iig-mode-btn.on { background: #0078d4; color: #ffffff; }

.iig-box-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.iig-box-btns .btn { font-weight: bold; }

@media (max-width: 700px) {
    .iig-wrap { max-height: 300px; }
    .iig-table .iig-idx { width: 40px; min-width: 40px; }
    .iig-table .iig-prod { left: 40px; min-width: 180px; }
    .iig-box-row { grid-template-columns: 1fr 18px 80px 100px; }
}