/* Remove spin buttons from all number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* ── BlazoredTypeahead label — floating on border like MudBlazor outlined ── */
/* Wrapper needed: bt-label sits inside the parent MudItem, before the typeahead */
/* We use negative margin to overlap the typeahead's top border */
.bt-label {
    position: relative;
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    padding: 0 4px;
    margin-left: 10px;
    margin-bottom: -8px;
    line-height: 1;
    z-index: 2;
    transform: scale(0.75);
    transform-origin: left;
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
}

/* Responsive chart container used by Dashboard monthly trend */
.responsive-chart {
    width: 100%;
    min-width: 0;
    height: 500px;
    /* default desktop height */
}

/* Smaller screens: reduce height */
@media (max-width: 1200px) {
    .responsive-chart {
        height: 420px;
    }
}

@media (max-width: 992px) {
    .responsive-chart {
        height: 360px;
    }
}

@media (max-width: 768px) {
    .responsive-chart {
        height: 320px;
    }
}

@media (max-width: 480px) {
    .responsive-chart {
        height: 260px;
    }
}


/* ── BlazoredTypeahead global styles ── */
/* Outer wrapper — has the single border */
.blazored-typeahead {
    position: relative !important;
    display: block;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.23) !important;
    border-radius: 4px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    background: #fff !important;
}

.blazored-typeahead:focus-within {
    border-color: #7e57c2 !important;
    box-shadow: none !important;
}

/* Inner controls container */
.blazored-typeahead__controls {
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
}

/* Input — no border (wrapper has it) */
.blazored-typeahead input,
.blazored-typeahead__input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 3px 8px !important;
    font-size: 14px !important;
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
    color: rgba(0, 0, 0, 0.87);
    height: 34px !important;
    width: 100%;
    box-sizing: border-box;
    line-height: 22px !important;
}

.blazored-typeahead input::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
}

/* Selected value mask — no border (wrapper has it) */
.blazored-typeahead__input-mask,
.blazored-typeahead__input-mask-wrapper {
    border: none !important;
    padding: 3px 8px !important;
    font-size: 14px !important;
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
}

/* Clear (x) button */
.blazored-typeahead__clear {
    width: 22px !important;
    padding: 0 3px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
}

/* Align inside MudGrid — BlazoredTypeahead with bt-label needs no extra margin */
.mud-grid-item>.bt-label+.blazored-typeahead {
    margin-top: 0 !important;
}

.mud-grid-item>.blazored-typeahead {
    margin-top: 0;
}

tr .blazored-typeahead,
td .blazored-typeahead,
.mud-toolbar .blazored-typeahead,
.mud-stack .blazored-typeahead {
    margin-top: 0 !important;
}

/* ── MudBlazor form controls — always-shrunk label on border ── */
.mud-input-label {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.mud-input-label-animated {
    transition: none !important;
}

/* Always keep label shrunk (on the border) even when unfocused/empty */
.mud-input-label-outlined {
    transform: translate(14px, -9px) scale(0.75) !important;
    background: #fff !important;
    padding: 0 4px !important;
    font-size: 14px !important;
}

.mud-input-label-outlined.mud-input-label-shrink {
    transform: translate(14px, -9px) scale(0.75) !important;
}

/* Notch in border for label text */
.mud-input-outlined .mud-notchedoutline legend {
    max-width: 100% !important;
}

/* Allow notch in outlined border for label */
.mud-input-outlined .mud-notchedoutline legend {
    max-width: 100% !important;
}

.mud-input-control-input-container {
    margin-top: 0 !important;
}

.mud-input-outlined .mud-input-slot {
    height: 36px !important;
    min-height: 36px !important;
    padding: 3px 8px !important;
    font-size: 14px !important;
}

/* Allow multiline textareas to expand */
.mud-input-outlined .mud-input-slot:has(textarea) {
    height: auto !important;
    min-height: 80px !important;
}

.mud-input-outlined textarea.mud-input-slot {
    height: auto !important;
    min-height: 80px !important;
    font-size: 14px !important;
    padding: 8px !important;
}

.mud-input.mud-input-outlined:has(textarea) {
    height: auto !important;
    min-height: 80px !important;
}

.mud-input-control:has(textarea) {
    min-height: auto !important;
}

.mud-input-outlined.mud-input-outlined-dense .mud-input-slot {
    height: 36px !important;
    min-height: 36px !important;
}

.mud-select .mud-input-slot {
    height: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
}

.mud-select .mud-select-input {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
}

.mud-picker .mud-input-slot {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 14px !important;
}

.mud-input.mud-input-outlined {
    height: 36px !important;
    background: #fff !important;
}

.mud-input-control {
    min-height: 36px !important;
    background: #fff !important;
}

/* Align buttons inside MudGrid */
.mud-grid-item>.mud-button-root {
    margin-top: 3px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
}

/* ── Dropdown results ── */
/* Moved to main result rules below */

/* Product search dropdown header & item rows — 4 fixed columns */
.ps-hdr,
.ps-item {
    display: grid;
    grid-template-columns: 38% 8% 24% 18%;
    padding: 5px 12px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    column-gap: 8px;
}

div.ps-hdr,
.blazored-typeahead__results div.ps-hdr {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: #7e57c2 !important;
    border-bottom: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    padding: 4px 8px !important;
}

div.ps-hdr span,
.blazored-typeahead__results div.ps-hdr span {
    color: #fff !important;
}

/* Override BlazoredTypeahead default header styling */
.blazored-typeahead__results-header {
    background: #7e57c2 !important;
    color: #fff !important;
    padding: 0 !important;
    border: none !important;
}

.blazored-typeahead__results-header * {
    color: #fff !important;
}

/* Header 2nd & 3rd columns (Stock & Pack) right-aligned */
.ps-hdr span:nth-child(2),
.ps-hdr span:nth-child(3) {
    text-align: right !important;
}

.ps-hdr,
.ps-item {
    padding: 6px 8px;
}

.ps-item {
    font-size: 13px;
}

.ps-item .ps-name {
    font-weight: 700;
    font-size: 14px;
    color: #1a237e;
}

.ps-item .ps-generic {
    font-size: 10px;
    color: #888;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.1;
    margin-top: 0;
}

.ps-item .ps-mfr {
    font-size: 11px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-item .ps-stock {
    font-weight: 700;
    text-align: right !important;
    font-size: 13px;
    color: #d32f2f;
}

.ps-item .ps-stock.in {
    color: #2e7d32 !important;
}

.ps-item .ps-stock.out {
    color: #d32f2f !important;
}

.ps-item>div:nth-child(3) {
    font-size: 11px;
    color: #555;
    text-align: right !important;
}

/* Dropdown results */
.blazored-typeahead__results {
    z-index: 9999 !important;
    position: absolute !important;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 9999 !important;
    min-width: 650px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    margin-top: 2px;
}



@media (max-width: 600px) {
    .blazored-typeahead__results {
        min-width: 100% !important;
    }
}

/* Widen dropdown for product searches (in grid entry rows) */
tr .blazored-typeahead__results {
    min-width: 700px !important;
}

/* Each result item — zero padding when ps-item handles it */
/* All dropdown result items — consistent font */
.blazored-typeahead__result,
.blazored-typeahead__result *,
.blazored-typeahead__result div,
.blazored-typeahead__result span {
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif !important;
    color: rgba(0, 0, 0, 0.87) !important;
}

.blazored-typeahead__result {
    padding: 0 !important;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px !important;
    transition: background 0.1s;
}

/* Non-product dropdowns get padding */
.blazored-typeahead__result:not(:has(.ps-item)) {
    padding: 6px 10px !important;
    font-size: 14px !important;
}

.blazored-typeahead__result:last-child {
    border-bottom: none;
}

/* Hover & active highlight */
.blazored-typeahead__result:hover,
.blazored-typeahead__result:focus,
.blazored-typeahead__active-item {
    background: #ede7f6 !important;
    border-top-color: #ede7f6 !important;
    border-bottom-color: #ede7f6 !important;
}

/* Not found / loading */
.blazored-typeahead__notfound {
    padding: 10px 12px;
    color: #999;
    font-style: italic;
    font-size: 14px;
}

.blazored-typeahead__loading {
    padding: 10px 12px;
    color: #666;
    font-size: 14px;
}

/* Ensure MudPaper/MudItem don't clip the dropdown */
.mud-paper,
.mud-grid-item,
.mud-item,
.mud-expansion-panel-content {
    overflow: visible !important;
}


/* But keep table containers scrollable */
.mud-table-container {
    overflow-x: auto !important;
}

/* Inside MudSimpleTable — compact style */
.mud-simple-table .blazored-typeahead input {
    padding: 4px 8px;
    font-size: 14px;
    height: 34px;
}

.mud-simple-table .blazored-typeahead__result {
    padding: 5px 8px !important;
    font-size: 14px;
}

/* Inside dialog — ensure dropdown visible */
.mud-dialog .blazored-typeahead__results {
    z-index: 10000 !important;
}

/* But keep table containers scrollable */
.mud-table-container {
    overflow-x: auto !important;
}



/* Fix: MudDatePicker calendar popup cut off by input width constraint in MudBlazor v8 */
/* In v8, Style="max-width:..." on MudDatePicker constrains both input AND calendar */
.mud-picker-inline-paper {
    min-width: 320px !important;
}

/* Override MudBlazor default font family */
:root {
    --mud-typography-default-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
}

/* Force Nunito font everywhere */
html,
body {
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif !important;
    font-size: 87% !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: #fff !important;
}

/* White page background */
.mud-main-content {
    background: #fff !important;
}

/* White text on colored-background entry table headers only */
.entry-table th,
.entry-table th *,
tr[style*="background:#7e57c2"] th,
tr[style*="background:#ef6c00"] th,
tr[style*="background:#00695c"] th,
tr[style*="background:#00897b"] th,
tr[style*="background:#1565c0"] th,
tr[style*="background:#2e7d32"] th,
tr[style*="background:#5c6bc0"] th,
.grn-table thead tr[style*="--entry-header-bg"] th,
.dark-header th {
    color: #fff !important;
}

/* Default header text dark for light-background tables */
th {
    color: #333 !important;
}

/* Force MudBlazor checkbox visibility inside table headers and cells */
th .mud-input-control,
th .mud-input-control *,
td .mud-input-control,
td .mud-input-control * {
    color: inherit !important;
}

/* Fix checkbox background bleed in table headers */
.mud-table-head th .mud-input-control-boolean-input {
    background-color: transparent !important;
}

th .mud-checkbox-false .mud-input-control-input-container,
td .mud-checkbox-false .mud-input-control-input-container {
    color: #333 !important;
}

th .mud-checkbox-true .mud-input-control-input-container,
td .mud-checkbox-true .mud-input-control-input-container {
    color: var(--mud-palette-primary) !important;
}

/* MudSimpleTable headers — nice subtle professional background */
.mud-simple-table thead tr {
    background: #5c6bc0 !important;
}

.mud-simple-table thead th {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
}

/* MudSimpleTable compact rows */
.mud-simple-table tbody td {
    padding: 2px 6px !important;
    font-size: 12px !important;
}

.mud-simple-table tbody tr {
    height: auto !important;
}

/* Dialog table headers override */
.mud-dialog .mud-simple-table thead tr {
    background: #5c6bc0 !important;
}

/* Explicit light-bg headers keep dark text */
tr[style*="background:#fff"] th,
tr[style*="background:#f5f5f5"] th {
    color: #333 !important;
}

/* All table data cells white background */
td,
tbody td,
table tbody td {
    background-color: #fff !important;
}

/* Table containers white */
.mud-table-container {
    background: #fff !important;
    background-color: #fff !important;
}


.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code {
    color: #c02d76;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

/* Product search autocomplete dropdown grid */
.product-search-popover {
    min-width: 520px !important;
}

.product-search-popover-wide {
    min-width: 500px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}

/* Force all autocomplete popovers to open downward */
.product-search-popover-wide.mud-popover-open {
    margin-top: 0 !important;
}

.product-search-header {
    display: grid;
    grid-template-columns: 5fr 4fr 3fr;
    gap: 8px;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.product-search-row {
    display: grid;
    grid-template-columns: 5fr 4fr 3fr;
    gap: 8px;
    align-items: center;
}

/* ── Product dropdown shared colors ── */
.ps-hdr {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    background: #7e57c2 !important;
    color: #fff !important;
    border-bottom: 1px solid #5e35b1;
    letter-spacing: 0.3px;
}

.ps-name {
    font-weight: 600;
    color: #1a237e;
}

.ps-pack {
    color: #5c6bc0;
    text-align: right;
    min-width: 80px;
    font-size: 11px;
}

.ps-generic {
    color: #78909c;
}

.ps-company {
    color: #455a64;
}

.ps-rate {
    color: #6a1b9a;
    text-align: right;
    min-width: 70px;
}

/* Company search autocomplete dropdown grid */
.company-search-popover {
    min-width: 480px !important;
}

.company-search-header {
    display: grid;
    grid-template-columns: 5fr 3fr 3fr;
    gap: 8px;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.company-search-row {
    display: grid;
    grid-template-columns: 5fr 3fr 3fr;
    gap: 8px;
    align-items: center;
}

/* ═══════════ ENTRY TABLE (inline HTML tables) ═══════════ */
.entry-table {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
}

.entry-table thead tr {
    background: var(--entry-header-bg, #7e57c2) !important;
    color: #fff !important;
}

.entry-table thead th {
    color: #fff !important;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 6px;
    border-bottom: none !important;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.entry-table tbody tr {
    transition: background 0.15s ease;
    background: #f5f5f5;
}

.entry-table tbody tr:nth-child(even) {
    background: #ebebeb;
}

.entry-table tbody tr:hover {
    background: #e0e0e0 !important;
}

.entry-table tbody td {
    border-bottom: 1px solid #ddd !important;
    padding: 0px 3px;
    line-height: 1.1;
    font-size: 12px;
}

/* New-entry row override (keep blue highlight) */
.entry-table tbody tr[style*="background:#f5f9ff"]:hover {
    background: #e3f2fd !important;
}

/* Product name in committed rows */
.entry-table tbody td.grn-sticky-product {
    color: #1a237e;
}

/* SL number style */
.entry-table tbody td.grn-sticky-sl {
    color: #5c6bc0;
    font-weight: 600;
}

/* Inline inputs in entry table */
.entry-table input[type="number"],
.entry-table input[type="text"],
.entry-table select {
    border: none !important;
    border-radius: 3px !important;
    font-size: 12px;
    padding: 2px 4px !important;
    height: 28px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.entry-table input[type="number"]:focus,
.entry-table input[type="text"]:focus,
.entry-table select:focus {
    border-color: #5c6bc0 !important;
    box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.15);
    outline: none;
}

.entry-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════ UI ENHANCEMENTS: COLORED GRIDS & SELECTIONS ═══════════ */

/* ── MudTable: Dark blue header (reports, lists — all except sale entry grids) ── */
.mud-table .mud-table-head .mud-table-row,
table thead.mud-table-head tr {
    background: #e8eaf6 !important;
    background-color: #e8eaf6 !important;
}

.mud-table .mud-table-head th,
table thead.mud-table-head th,
th.mud-table-cell.mud-table-cell-hide-on-edit {
    color: #333 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #c5cae9 !important;
    padding: 6px 8px !important;
    background: #e8eaf6 !important;
    background-color: #e8eaf6 !important;
}

.mud-table .mud-table-head th .mud-button-root,
.mud-table-head th .mud-button-root {
    color: #333 !important;
}

/* Sort icon in header */
.mud-table-head .mud-table-sort-label .mud-icon-root {
    color: #5c6bc0 !important;
}

/* ── MudTable: Selected row ── */
.mud-table .mud-table-body .mud-table-row.mud-selected {
    background: #162447 !important;
    color: #fff !important;
}

.mud-table .mud-table-body .mud-table-row.mud-selected td {
    color: #fff !important;
}

.mud-table .mud-table-body .mud-table-row.mud-selected .mud-chip {
    opacity: 0.9;
}

/* ── MudTable: Row backgrounds (light gray) + compact height ── */
.mud-table .mud-table-body .mud-table-row {
    background: #f5f5f5 !important;
}

.mud-table .mud-table-body td {
    padding: 2px 6px !important;
    font-size: 14px !important;
}

.mud-table .mud-table-body .mud-table-row:nth-child(even):not(.mud-selected) {
    background: #ebebeb !important;
}

.mud-table .mud-table-body .mud-table-row:hover {
    background: #e0e0e0 !important;
}

/* ── MudTable: Footer totals row ── */
.mud-table .mud-table-foot .mud-table-row {
    background: #e8eaf6 !important;
    font-weight: 700 !important;
}

.mud-table .mud-table-foot td {
    border-top: 2px solid #7986cb !important;
    color: #1b1b2f !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
}

/* ── MudTable: Checkbox multi-select ── */

/* ── Active control focus states (MudBlazor inputs) ── */
.mud-input.mud-input-outlined.mud-input-adorned-end:focus-within,
.mud-input-outlined:focus-within {
    border-color: #1b1b2f !important;
}

.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #1b1b2f !important;
    border-width: 2px !important;
}

.mud-input:focus-within~.mud-input-label,
.mud-input-control:focus-within>.mud-input-label {
    color: #7e57c2 !important;
}

/* ── ALL dropdowns: Selected + Keyboard-navigated = violet ── */
/* MudBlazor v8 uses: mud-selected-item mud-primary-text mud-primary-hover */
.mud-list-item.mud-selected-item,
.mud-list-item.mud-selected,
.mud-list-item.mud-primary-hover {
    background: #7e57c2 !important;
    background-color: #7e57c2 !important;
    color: #fff !important;
}

.mud-list-item.mud-selected-item *,
.mud-list-item.mud-selected *,
.mud-list-item.mud-primary-hover * {
    color: #fff !important;
}

/* Hover on non-selected */
.mud-list-item:hover:not(.mud-selected):not(:focus):not(.mud-list-item-highlighted):not(.mud-active) {
    background: #ede7f6 !important;
    background-color: #ede7f6 !important;
}

/* MudSelect input chip */
.mud-chip.mud-chip-filled.mud-primary {
    background: #7e57c2 !important;
    background-color: #7e57c2 !important;
    color: #fff !important;
}


    /* ── PRIORITY: Sidebar + AppBar colors (loaded first to prevent flash) ── */
    .mud-drawer,
    .mud-drawer-content {
        /*    background: linear-gradient(90deg, #190033 0%, #2a0845 50%, #4a1a7a 100%) !important;*/
        background-color: white !important;
    }

    /* ── MudNavMenu: Dark purple gradient sidebar ── */
    .mud-drawer,
    .mud-drawer-content {
        background: linear-gradient(90deg, white 0%, #FFFFF8 50%, white 100%) !important;
    }

    .mud-drawer .mud-nav-link {
        color: #000000 !important;
        font-size: 13px !important;
    }

    .mud-drawer .mud-nav-link .mud-icon-root {
/*        color: #787878 !important;*/
    }

    .mud-drawer .mud-nav-link:hover {
        background: #e8e8e8 !important;
        /* color: white !important; */
    }

        .mud-drawer .mud-nav-link.active {
            /*            background: radial-gradient(#04379f, #00082a) !important;*/
            background: linear-gradient(90deg, #2c68ef, #2749b2);
            color: #fff !important;
            border-radius: 6px;
            margin: 10px;
            padding-left: 26px !important;
        }
            .mud-drawer .mud-nav-link.active:hover {
                background: radial-gradient(#04379f, #2c68ef) !important;
                color: #fff !important;
            }

.topHeaderLogo {
/*    box-shadow: 0px 0px 5px 0px #153279;*/
    border-radius: 7px;
    padding: 5px 5px;
    background: #2558cc66;
/*    animation: float1 3s ease-in-out infinite;*/
}
 
.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: #fff !important;
}

.mud-drawer .mud-navgroup .mud-nav-link {
    color: #ccc !important;
}

.mud-drawer .mud-navgroup-title {
    color: #ddd !important;
}

.mud-drawer .mud-navgroup .mud-expand-icon {
    color: #aaa !important;
}

.mud-drawer .mud-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ═══════════ GRN TABLE: STICKY SL COLUMN ═══════════ */
.grn-table .grn-sticky-sl {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
}

.grn-table thead .grn-sticky-sl {
    z-index: 3;
    background: inherit !important;
    color: inherit !important;
}

.grn-table .grn-sticky-product {
    border-right: 2px solid #c5cae9;
}

.grn-table tbody tr .grn-sticky-sl {
    background: #f5f5f5;
}

.grn-table tr:nth-child(even) .grn-sticky-sl {
    background: #ebebeb;
}

.grn-table tr[style*="background:#f5f9ff"] .grn-sticky-sl {
    background: #f5f9ff;
}

/* ═══════════ SALES HEADER BAR ═══════════ */
.sales-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.sales-header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sales-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sales-header-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

/* ═══════════ CREDIT NOTE: HEADER & MOBILE CARD VIEW ═══════════ */

.cn-mobile-items {
    display: none;
}

.cn-mobile-card {
    padding: 8px 10px;
    margin-bottom: 2px;
    background: white;
    border-left: 3px solid #ccc;
    border-bottom: 1px solid #eee;
}

/* ═══════════ ORDER GENERATE: MOBILE CARD VIEW ═══════════ */
.order-mobile-items {
    display: none;
}

.order-mobile-card {
    padding: 8px 10px;
    margin-bottom: 2px;
    background: white;
    border-left: 3px solid var(--mud-palette-primary);
    border-bottom: 1px solid #eee;
}

/* ═══════════ PURCHASE APPROVALS: MOBILE CARD VIEW ═══════════ */
.approval-mobile-items {
    display: none;
}

/* ═══════════ SHORTCUT KEYS: MOBILE CARD VIEW ═══════════ */
.shortcut-mobile-items {
    display: none;
}

.approval-mobile-card {
    padding: 8px 10px;
    margin-bottom: 2px;
    background: white;
    border-left: 3px solid var(--mud-palette-success);
    border-bottom: 1px solid #eee;
}

/* ═══════════ SALES ENTRY: MOBILE CARD VIEW ═══════════ */
.sales-mobile-items {
    display: none;
}

.sales-mobile-card {
    padding: 8px 10px;
    margin-bottom: 2px;
    background: white;
    border-left: 3px solid var(--mud-palette-primary);
    border-bottom: 1px solid #eee;
}

/* ═══════════ MOBILE UTILITIES ═══════════ */
.hide-mobile {
    display: table-cell;
}

/* ═══════════ RESPONSIVE: SMALL (≤ 600px) ═══════════ */
@media (max-width: 600px) {

    /* ── Reduce main content padding ── */
    .mud-main-content {
        padding: 8px !important;
        padding-top: 62px !important;
    }

    /* ── AppBar: hide store & user text ── */
    .appbar-store-info,
    .appbar-user-name {
        display: none !important;
    }

    /* ── Page titles: smaller ── */
    .mud-typography-h4 {
        font-size: 1.4rem !important;
    }

    .mud-typography-h5 {
        font-size: 1.15rem !important;
    }

    /* ── Popover dropdowns: auto-width ── */
    .product-search-popover,
    .product-search-popover-wide,
    .company-search-popover {
        min-width: auto !important;
        max-width: 95vw !important;
    }

    .product-search-header,
    .product-search-row,
    .company-search-header,
    .company-search-row {
        grid-template-columns: 1fr;
        gap: 2px;
        font-size: 0.7rem;
    }

    /* ── Entry tables: reduce min-width, smaller font ── */
    .entry-table {
        min-width: 700px !important;
        font-size: 14px;
    }

    /* ── Sales header: compact on mobile ── */
    .sales-header-top {
        gap: 4px;
    }

    .sales-header-title .mud-typography-h6 {
        font-size: 1rem !important;
    }

    .sales-header-fields {
        margin-top: 4px;
        gap: 4px;
    }

    .sales-header-fields .mud-input-control {
        min-width: 0 !important;
        max-width: unset !important;
        flex: 1;
    }

    /* ── Credit note: compact header on mobile ── */
    .cn-header-title .mud-typography-h6 {
        font-size: 1rem !important;
    }

    .cn-header-title .mud-input-control {
        min-width: 0 !important;
        max-width: unset !important;
        flex: 1 1 100%;
    }

    /* ── Credit note items: card view on mobile ── */
    .cn-mobile-items {
        display: block;
    }

    .cn-items-table {
        display: none;
    }

    /* ── Order generate: card view on mobile ── */
    .order-mobile-items {
        display: block;
    }

    .order-desktop-table {
        display: none;
    }

    /* ── Purchase approvals: card view on mobile ── */
    .approval-mobile-items {
        display: block;
    }

    .approval-desktop-table {
        display: none;
    }

    /* ── Shortcut keys: card view on mobile ── */
    .shortcut-mobile-items {
        display: block;
    }

    .shortcut-desktop-table {
        display: none;
    }

    /* ── Sales entry: card view on mobile ── */
    .sales-mobile-items {
        display: block;
    }

    .sales-entry-table {
        min-width: unset !important;
    }

    .sales-entry-table thead,
    .sales-entry-table .sales-committed-row {
        display: none;
    }

    .sales-entry-table .grn-sticky-sl,
    .sales-entry-table .grn-sticky-product {
        position: static;
        border-right: none;
        max-width: unset;
        white-space: normal;
    }

    .sales-entry-table .sales-new-row-filler {
        display: none;
    }

    /* ── Short Book: card layout on mobile ── */
    .entry-table.shortbook-table {
        min-width: 0 !important;
        font-size: 14px;
    }

    /* ── GRN Table: compact sticky columns on mobile ── */
    .entry-table.grn-table {
        font-size: 14px;
    }

    .grn-table .grn-sticky-product {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .grn-table .grn-sticky-sl {
        width: 30px;
        min-width: 30px;
        font-size: 14px;
    }

    /* ── GRN Actions Row: compact on mobile ── */
    .grn-actions-row .mud-button {
        padding: 2px 4px !important;
        font-size: 0.7rem !important;
        min-width: 0 !important;
    }

    .shortbook-table thead .shortbook-thead {
        display: none;
    }

    .shortbook-table tbody tr.shortbook-row,
    .shortbook-table tbody tr.shortbook-entry-row {
        display: block;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 8px 0;
        background: #fff;
    }

    .shortbook-table tbody tr.shortbook-entry-row {
        background: #f5f9ff;
        border-color: var(--mud-palette-primary);
    }

    .shortbook-table tbody tr.shortbook-row td,
    .shortbook-table tbody tr.shortbook-entry-row td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 12px !important;
        text-align: left !important;
        border: none;
        min-height: 32px;
    }

    .shortbook-table tbody tr.shortbook-row td[data-label]::before,
    .shortbook-table tbody tr.shortbook-entry-row td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--mud-palette-text-secondary);
        text-transform: uppercase;
        min-width: 90px;
        flex-shrink: 0;
    }

    .shortbook-table tbody tr td[data-label=""]::before {
        display: none;
    }

    .shortbook-table tbody tr.shortbook-entry-row td[colspan] {
        display: block;
    }

    .shortbook-table tbody tr td input[type="number"],
    .shortbook-table tbody tr td input[type="text"] {
        width: 100% !important;
    }

    /* ── MudTable: compact on mobile ── */
    .mud-table .mud-table-cell {
        padding: 4px 8px !important;
        font-size: 0.8rem;
    }

    .mud-table .mud-table-head .mud-table-cell {
        padding: 6px 8px !important;
        font-size: 0.75rem;
    }

    /* ── Dialogs: full width on mobile ── */
    .mud-dialog {
        margin: 8px !important;
        max-height: 95vh !important;
    }

    /* ── Forms: tighter spacing ── */
    .mud-input-control {
        margin-bottom: 4px !important;
    }

    /* ── Hide non-essential table columns ── */
    .hide-mobile {
        display: none !important;
    }

    /* ── MudGrid items: reduce gap ── */
    .mud-grid {
        gap: 0;
    }

    .mud-grid>.mud-grid-item {
        padding: 2px !important;
    }
}

/* ═══════════ RESPONSIVE: MEDIUM (≤ 960px) ═══════════ */
@media (max-width: 960px) {

    /* ── Popover: cap width ── */
    .product-search-popover,
    .product-search-popover-wide,
    .company-search-popover {
        min-width: auto !important;
        max-width: 90vw !important;
    }

    /* ── AppBar: hide place (keep store name) ── */
    .appbar-store-place {
        display: none !important;
    }

    /* ── Entry tables: medium breakpoint ── */
    .entry-table {
        min-width: 800px !important;
    }

    .entry-table.shortbook-table {
        min-width: 0 !important;
    }
}


.blazorTypeheadMudItemContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}



.customTableFont > td, th {
    font-size: 14px !important;
}