/* custom.css - page-level styles added for the Sales Order / Pharmacy Invoice redesign.
   Loaded after app.css. Sections: form fields, buttons, grid, popups (modal + dialog), Syncfusion input sizing. */


/* Form label used by the FormField component and form pages */
.field-label {
    display: inline-block;
    margin-bottom: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Boxed sub-section inside a form card (e.g. "Item Details") */
.section-card {
    background-color: #fdfdfd;
    border-radius: 4px;
}

.section-card-header {
    background-color: #f0f2f5;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    min-height: auto;
}

.grid-summary {
    font-size: 0.8rem;
}

/* Emphasise the final invoice total */
.gross-value {
    font-weight: 700;
}

.grid-summary {
    font-size: 0.9rem;
}

/* Keep Edit / Delete command buttons side by side in one line */
.grid-actions-inline .e-unboundcelldiv {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}


/* ---- Professional popup styling (hand-rolled Bootstrap modals + Syncfusion dialog) ---- */
.app-modal-backdrop {
    background-color: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(2px);
    overflow-y: auto;
    animation: app-modal-fade 0.15s ease-out;
}

.app-modal-content {
    border: none;
    border-radius: 10px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: app-modal-pop 0.2s ease-out;
}

.app-modal-header {
    background-color: #f8f9fb;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 1.25rem;
}

.app-modal-header .modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}

.app-modal-content .modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.e-dialog.app-dialog {
    border-radius: 10px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.e-dialog.app-dialog .e-dlg-header-content {
    background-color: #f8f9fb;
    border-bottom: 1px solid #e5e7eb;
}

@keyframes app-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes app-modal-pop {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Make Syncfusion (Material theme) inputs look like Bootstrap form-control-sm.
   !important is needed because the CDN theme loads after this file and uses higher-specificity rules. */
.form-sm-inputs .e-input-group,
.form-sm-inputs .e-input-group.e-control-wrapper,
.form-sm-inputs .e-control-wrapper.e-input-group {
    box-sizing: border-box !important;
    min-height: calc(1.5em + 0.5rem + 2px) !important;
    height: calc(1.5em + 0.5rem + 2px) !important;
    margin: 0 !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    background-color: #fff !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
}

.form-sm-inputs .e-input-group input.e-input,
.form-sm-inputs .e-input-group.e-control-wrapper input.e-input {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    text-indent: 0 !important;
    color: #212529;
}

.form-sm-inputs .e-input-group input.e-input::placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-sm-inputs .e-input-group .e-input-group-icon {
    min-height: 0 !important;
    height: 100% !important;
    font-size: 0.7rem !important;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    display: flex;
    align-items: center;
}

.form-sm-inputs .e-input-group:focus-within {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-sm-inputs .e-input-group::before,
.form-sm-inputs .e-input-group::after,
.form-sm-inputs .e-input-group:not(.e-float-icon-left)::before {
    display: none !important;
}

/* Button matching the height of form-control-sm inputs */
.btn-compact {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.e-dialog.app-dialog .e-dlg-header-content {
    padding: 0.4rem 1rem;
    min-height: 0;
}

.app-dialog-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.e-dialog.app-dialog .e-dlg-content {
    padding: 0.75rem 1.25rem 0.75rem;
}

.e-dialog.app-dialog .e-dlg-header {
    line-height: 1.5;
}

.e-dialog.app-dialog .e-dlg-header-content .e-dlg-closeicon-btn {
    margin: 0;
}

/* Payment popup: the embedded payment form already has its own card + title,
   so remove the doubled-up padding, margins and header from the modal shell. */
#paymentDialogModal .modal-header {
    padding: 0.25rem 0.5rem;
    min-height: 0;
    border-bottom: none;
    background-color: transparent;
    justify-content: flex-end;
}

#paymentDialogModal .modal-body {
    padding: 0 0.75rem 0.5rem;
}

#paymentDialogModal .card,
#paymentDialogModal .card.card-round {
    margin-bottom: 0;
    border: none;
    box-shadow: none;
}

#paymentDialogModal .card-header {
    padding: 0.25rem 0.5rem;
}

#paymentDialogModal .card-body {
    padding: 0.5rem;
}

#paymentDialogModal .row {
    margin-bottom: 0.25rem;
}

/* Grids that show only body rows (membership / coupon / promo pick lists) */
#SFPromoGrid.e-grid .e-gridheader .e-columnheader,
#SFMMDGrid.e-grid .e-gridheader .e-columnheader,
#SFCouponGrid.e-grid .e-gridheader .e-columnheader {
    display: none;
}

/* Sales order: prescription (Rx) table */
.rx-input {
    height: 22px;
    min-height: 22px;
    padding: 0 0.25rem;
    text-align: center;
}

.rx-ipd {
    width: 60px;
    height: 24px;
}

.send-otp-link {
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    line-height: 1.5;
    background-color: #e7f1ff;
    border: 1px solid #b6d4fe;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.send-otp-link:hover {
    background-color: #cfe2ff;
}

.promo-desc {
    margin-top: -12px;
}

/* Sales order: item-code dropdown columns */
.item-dd {
    display: flex;
    width: 650px;
    align-items: center;
}

.item-dd-head {
    font-weight: bold;
    background: #f5f5f5;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.item-dd-row {
    padding: 4px 0;
}

.item-dd-c100 { width: 100px; }
.item-dd-c120 { width: 120px; }
.item-dd-c150 { width: 150px; }
.item-dd-c280 { width: 280px; }

.promo-desc-inline {
    font-size: 0.75rem;
    color: #6c757d;
    padding-left: 0.5rem;
}

/* Sleek text-style action (icon + label, no border) */
.link-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid #b6d4fe;
    border-radius: 999px;
    background: #e7f1ff;
    color: #0d6efd;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.link-action:hover {
    background-color: #cfe2ff;
}

.link-action:focus-visible {
    outline: 2px solid #86b7fe;
    outline-offset: 1px;
}

/* Compact page-title bar (e.g. "Add Sales Order") */
.card-header.page-header-compact {
    padding: 0.4rem 1.25rem;
}

.page-header-compact .card-head-row {
    align-items: center;
    min-height: 0;
}

.page-header-compact .card-title {
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.page-header-compact .card-tools .btn {
    margin-top: 0;
    margin-bottom: 0;
}

.e-grid .e-toolbar .e-toolbar-item.grid-tb-title .e-tbar-btn-text {
    font-weight: 700;
    font-size: calc(1em + 1pt);
}

.rb-group {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0 8px 2px;
    margin: 0;
    min-width: 0;
}

.rb-group > legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 4px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.flt-col {
    min-width: 130px;
}

.compact-uploader.e-upload {
    border: 0 !important;
    background: transparent;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.compact-uploader .e-file-select-wrap {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    line-height: 1;
}


.compact-uploader .e-file-drop {
    display: none;
}

.compact-uploader .e-file-select-wrap .e-btn {
    margin: 0 !important;
    float: none;
    padding: 3px 22px;
    min-height: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    background: linear-gradient(to bottom, #7be8f5 0%, #25bfdc 48%, #0f9bbd 52%, #17b3d3 100%);
    border: 2px solid #0b7f9f;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.compact-uploader .e-file-select-wrap .e-btn:hover,
.compact-uploader .e-file-select-wrap .e-btn:focus {
    color: #ffffff;
    background: linear-gradient(to bottom, #94eef9 0%, #3acbe6 48%, #12a8cb 52%, #22bfdf 100%);
    border-color: #0b7f9f;
}

.compact-uploader .e-file-select-wrap .e-btn:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Syncfusion grid: the Material theme puts 21px of padding on each side of every header and row cell.
   Use a slimmer 8px so columns need less width and sit closer together. */
.e-grid .e-headercell,
.e-grid .e-rowcell,
.e-grid .e-summarycell,
.e-grid .e-filterbarcell {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Very faint vertical line between grid columns (header and rows) */
.e-grid .e-headercell,
.e-grid .e-rowcell,
.e-grid .e-summarycell {
    border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.e-grid .e-headercell:last-child,
.e-grid .e-rowcell:last-child,
.e-grid .e-summarycell:last-child {
    border-right: 0 !important;
}

/* Dialog controls: app.css gives every .btn-sm a 15px font / 7px padding, which looks oversized inside popups */
.e-dialog.app-dialog .btn-sm,
.modal-content .btn-sm {
    font-size: 13px;
    padding: 4px 14px;
    line-height: 1.4;
}

.e-dialog.app-dialog .e-radio + label .e-label,
.e-dialog.app-dialog .e-radio + label {
    font-size: 13px;
}

/* Compact confirm / OTP style boxes (.modal-confirm). Page-level copies of this style also get overridden. */
.modal-confirm {
    width: 340px !important;
    max-width: 94vw;
}

.modal-confirm .modal-content {
    padding: 10px 12px !important;
    font-size: 13px !important;
}

.modal-confirm .modal-header {
    padding: 4px 0 !important;
}

.modal-confirm h4 {
    font-size: 17px !important;
    margin: 8px 0 0 !important;
}

.modal-confirm .icon-box {
    width: 48px !important;
    height: 48px !important;
    border-width: 2px !important;
}

.modal-confirm .icon-box i {
    font-size: 26px !important;
    margin-top: 5px !important;
}

.modal-confirm .modal-body {
    padding: 6px 0 !important;
}

.modal-confirm .modal-footer {
    padding: 4px 0 6px !important;
}

.modal-confirm .btn,
.modal-confirm .btn:active {
    min-width: 88px !important;
    min-height: 30px !important;
    font-size: 13px !important;
    margin: 0 4px !important;
}

/* Opt-in compact Syncfusion grid: add CssClass="grid-compact" to an SfGrid.
   13px cells / 12px bold headers stay easily readable; grids without the class are unchanged. */
.e-grid.grid-compact .e-rowcell,
.e-grid.grid-compact .e-summarycell {
    font-size: 11px !important;
    line-height: 1.35 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.e-grid.grid-compact .e-headercell,
.e-grid.grid-compact .e-headercelldiv,
.e-grid.grid-compact .e-headertext {
    font-size: 10px !important;
    font-weight: 600;
}

.e-grid.grid-compact .e-headercell {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.e-grid.grid-compact .e-gridpager,
.e-grid.grid-compact .e-gridpager .e-pagercontainer .e-numericitem {
    font-size: 10px !important;
}

/* grid-compact: also size the content inside cells (links, spans, templates, inputs) and win over theme/app.css rules */
html body .e-grid.grid-compact .e-rowcell,
html body .e-grid.grid-compact .e-rowcell *,
html body .e-grid.grid-compact .e-summarycell,
html body .e-grid.grid-compact .e-summarycell * {
    font-size: 11px !important;
}

html body .e-grid.grid-compact .e-headercell,
html body .e-grid.grid-compact .e-headercell *,
html body .e-grid.grid-compact .e-gridpager,
html body .e-grid.grid-compact .e-gridpager * {
    font-size: 10px !important;
}

html body .e-grid.grid-compact .e-rowcell .fa,
html body .e-grid.grid-compact .e-rowcell .fas,
html body .e-grid.grid-compact .e-rowcell .e-icons,
html body .e-grid.grid-compact .e-headercell .e-icons {
    font-size: 14px !important;
}

/* Stacked cell values (e.g. Order No / Branch): second line is smaller and muted so it reads as a separate value, no extra space */
.compact-table .cell-sub {
    color: #6c757d;
    font-size: 0.92em;
}

/* Small button for use inside compact grid rows (matches the 22px compact-input height) */
.btn.btn-grid-sm {
    height: 22px;
    padding: 0 10px !important;
    font-size: 11px !important;
    line-height: 20px !important;
}

/* Grid footer (aggregate / total) row: light highlight so totals stand out */
html body .e-grid .e-gridfooter,
html body .e-grid .e-gridfooter .e-summaryrow,
html body .e-grid .e-gridfooter .e-summarycell {
    background-color: #e8f0fe !important;
    color: #1a237e !important;
    font-weight: 700 !important;
}

/* Footer (total) row height: same as the header row (~37px, 5px vertical padding) */
html body .e-grid .e-gridfooter .e-summarycell,
html body .e-grid.grid-compact .e-gridfooter .e-summarycell {
    height: 37px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    vertical-align: middle;
}

/* ---- Product gallery (Frame Gallery page) ---- */
.gallery-filters { max-height: calc(100vh - 230px); overflow-y: auto; padding-right: 8px; font-size: 13px; }
.gallery-filter-group { border-top: 1px solid rgba(0, 0, 0, 0.08); padding: 8px 0; }
.gallery-filter-title { font-weight: 700; margin-bottom: 4px; }
.gallery-check { display: flex; align-items: center; gap: 6px; margin: 2px 0; cursor: pointer; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; max-height: calc(100vh - 230px); overflow-y: auto; padding: 2px; }
.gallery-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; }
.gallery-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); transform: translateY(-2px); }
.gallery-img { height: 150px; background: #f5f6f8; display: flex; align-items: center; justify-content: center; }
.gallery-img img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.gallery-img::before { content: ""; position: absolute; inset: -12px; background-image: var(--gallery-bg); background-size: cover; background-position: center; filter: blur(14px); opacity: .55; }
.gallery-info { padding: 8px 10px; }
.gallery-brand { font-size: 11px; color: #6c757d; text-transform: uppercase; }
.gallery-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-code { font-size: 11px; }
.gallery-price { margin-top: 4px; font-size: 14px; }
.gallery-noimg { align-items: center; justify-content: center; color: #9aa3ad; }
.gallery-img { position: relative; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 32px; border: 0; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.gallery-card:hover .gallery-nav { opacity: 1; }
.gallery-prev { left: 0; border-radius: 0 4px 4px 0; }
.gallery-next { right: 0; border-radius: 4px 0 0 4px; }
.gallery-count { position: absolute; right: 6px; bottom: 4px; font-size: 10px; background: rgba(0, 0, 0, 0.45); color: #fff; padding: 0 6px; border-radius: 8px; }
.gallery-img { cursor: zoom-in; }
.gallery-info { cursor: default; }
.gallery-card { cursor: default; }
.gallery-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.gallery-lightbox-body { position: relative; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
.gallery-lightbox-body img { max-width: 92vw; max-height: 82vh; object-fit: contain; background: #fff; border-radius: 6px; }
.gallery-lightbox-caption { color: #fff; margin-top: 8px; font-size: 14px; }
.gallery-lightbox-close { position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.gallery-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border: 0; background: rgba(255, 255, 255, 0.85); font-size: 32px; line-height: 1; cursor: pointer; }
.gallery-lightbox-nav.gallery-prev { left: 8px; }
.gallery-lightbox-nav.gallery-next { right: 8px; }
.gallery-lightbox-body img { min-width: min(70vw, 600px); min-height: 40vh; }
.gallery-img { overflow: hidden; }
.gallery-img img, .gallery-lightbox img { user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.gallery-meta { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-count-badge { color: #6c757d; font-size: 11px; }
.gallery-loadmore { grid-column: 1 / -1; text-align: center; padding: 8px 0 4px; }
.gallery-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.gallery-chip { display: inline-flex; align-items: center; gap: 6px; background: #e8f0fe; color: #1a237e; border-radius: 14px; padding: 2px 10px; font-size: 12px; }
.gallery-chip a { text-decoration: none; font-weight: 700; color: #1a237e; }
@media (max-width: 767.98px) {
    .gallery-filters { max-height: none; overflow-y: visible; padding-right: 0; }
    .gallery-grid { max-height: none; overflow-y: visible; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .gallery-img { height: 120px; }
}
/* placeholder never takes space next to the image, and the image always sits above it */
.gallery-img .gallery-noimg { position: absolute; inset: 0; z-index: 0; }
.gallery-img img { z-index: 1; }
.gallery-zero { opacity: .45; cursor: not-allowed; }
/* Keep the horizontal layout identical on every page: always reserve the vertical scrollbar's width, so pages
   with and without a scrollbar (long vs short) have the same left/right gaps. The reserved gutter is empty
   (no visible track) when the page does not scroll. */
html {
    scrollbar-gutter: stable;
}

/* Toast countdown bar: the theme's pink blends into the orange/red toasts; white stands out on all toast colours. */
.e-toast .e-toast-progress {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

/* Same title-bar height on every page: the tallest header (Manage pages with From/To date pickers) sets the height,
   other headers are centred in the same height. */
.card.card-round > .card-header {
    display: flex;
    align-items: center;
    min-height: 3.75rem;
}

.card.card-round > .card-header > * {
    flex: 1 1 auto;
}

/* The theme's 30px bottom margin on the page card pushed pages with taller headers (e.g. date pickers) past the screen */
.content > .card.card-round {
    margin-bottom: 0.5rem;
}

/* Customer Sales Order History - read-only order sheet */
.so-sheet { border: 1px solid #cfd8e3; border-radius: 6px; padding: 14px 18px; background: #fff; font-size: 0.85rem; }
.so-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #1f4e79; padding-bottom: 8px; margin-bottom: 8px; }
.so-title { font-size: 1.25rem; font-weight: 700; letter-spacing: 2px; color: #1f4e79; }
.so-sub { color: #444; line-height: 1.6; }
.so-badge { background: #e8f1fb; color: #1f4e79; border: 1px solid #b6d0ea; border-radius: 10px; padding: 1px 10px; font-weight: 600; }
.so-section { margin: 12px 0 6px; padding: 3px 8px; background: #eef3f9; border-left: 4px solid #1f4e79; font-weight: 700; color: #1f4e79; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.5px; }
.so-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 16px; }
.so-grid > div { display: flex; flex-direction: column; border-bottom: 1px dotted #c9d3de; padding-bottom: 2px; min-height: 38px; }
.so-grid > div.so-wide { grid-column: span 2; }
.so-grid span { font-size: 0.7rem; color: #6b7785; text-transform: uppercase; }
.so-grid b { font-weight: 600; color: #1d2733; }
.so-table { width: 100%; border-collapse: collapse; }
.so-table th, .so-table td { border: 1px solid #cfd8e3; padding: 3px 7px; }
.so-table thead th { background: #f3f6fa; font-weight: 600; text-align: left; }
.so-table .r { text-align: right; }
.so-rx th, .so-rx td { text-align: center; }
.so-rx td { min-width: 60px; }
.so-totals td:first-child { background: #f8fafc; }
.so-totals .so-gross td { font-weight: 700; background: #eef3f9; font-size: 0.95rem; }
@media print {
    .no-print, .sidebar, .main-header, .navbar, .main-panel > .main-header, .footer { display: none !important; }
    .main-panel, .content, .container { margin: 0 !important; padding: 0 !important; width: 100% !important; }
    .card, .card-body { border: none !important; box-shadow: none !important; }
    .so-sheet { border: none; padding: 0; }
}

/* Shown only on the printed sheet (e.g. Total GST instead of CGST/SGST/IGST) */
.print-only { display: none; }
@media print {
    .print-only { display: table-row !important; }
}

/* Customer Sales Order History: customer cards */
.cust-list { max-height: 410px; overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 6px; }
.cust-card { border: 1px solid #d9e1ec; border-left: 4px solid #b6d0ea; border-radius: 6px; padding: 6px 10px; background: #fff; cursor: pointer; transition: box-shadow .15s, border-color .15s, background .15s; }
.cust-card:hover { box-shadow: 0 2px 8px rgba(31, 78, 121, .15); background: #f8fbff; }
.cust-card.active { border-color: #1f4e79; border-left-color: #1f4e79; background: #eef5fd; }
.cust-name { font-weight: 700; color: #1f4e79; }
.cust-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: #3b4756; margin-top: 2px; }
.cust-meta i, .cust-addr i { color: #6b7785; margin-right: 3px; }
.cust-addr { font-size: .78rem; color: #6b7785; margin-top: 2px; }

/* Clickable rows/cards hints (Customer Sales Order History) */
.click-hint { font-weight: 400; font-size: .75rem; color: #6b7785; margin-left: 8px; }
.cust-name { display: flex; align-items: center; justify-content: space-between; }
.cust-go { color: #9aa7b6; font-size: .8rem; transition: transform .15s, color .15s; }
.cust-card:hover .cust-go, .cust-card.active .cust-go { color: #1f4e79; transform: translateX(3px); }
.e-grid.click-rows .e-row { cursor: pointer; }
.e-grid.click-rows .e-row:hover td { background: #e8f1fb !important; }
.view-link { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid #b6d4fe; border-radius: 999px; background: #e7f1ff; color: #0d6efd; font-size: .75rem; font-weight: 600; }
.e-grid.click-rows .e-row:hover .view-link { background: #0d6efd; color: #fff; border-color: #0d6efd; }

/* ---- Customer Sales Order History: order detail ---- */
.od-wrap { padding: 4px 2px 8px; }
.od-topbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.od-banner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px 22px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #052767 0%, #04449c 55%, #1c6fd1 100%); box-shadow: 0 4px 14px rgba(4, 68, 156, .25); }
.od-kicker { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; opacity: .8; }
.od-orderno { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.od-dates { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .85rem; opacity: .95; margin-top: 2px; }
.od-dates i { margin-right: 4px; opacity: .8; }
.od-status { text-align: right; }
.od-pill { display: inline-block; padding: 4px 16px; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .45); font-weight: 700; font-size: .9rem; }
.od-status-remark { margin-top: 6px; font-size: .8rem; opacity: .9; max-width: 340px; margin-left: auto; }

.od-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.od-kpi { background: #fff; border: 1px solid #dbe4ef; border-top: 3px solid #04449c; border-radius: 8px; padding: 8px 14px; box-shadow: 0 1px 4px rgba(15, 23, 42, .06); }
.od-kpi span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: #6b7785; }
.od-kpi b { font-size: 1.25rem; color: #1d2733; }
.od-kpi-green { border-top-color: #198754; }
.od-kpi-green b { color: #146c43; }
.od-kpi-red { border-top-color: #dc3545; }
.od-kpi-red b { color: #b02a37; }

.od-card { background: #fff; border: 1px solid #dbe4ef; border-radius: 10px; padding: 12px 16px; box-shadow: 0 1px 4px rgba(15, 23, 42, .05); }
.od-card-title { font-weight: 700; color: #052767; font-size: .88rem; text-transform: uppercase; letter-spacing: .5px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid #e3ebf6; }
.od-card-title i { margin-right: 6px; color: #1c6fd1; }

.od-cust { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.od-avatar { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, #1c6fd1, #04449c); flex: 0 0 auto; }
.od-cust-name { font-weight: 700; font-size: 1.05rem; color: #1d2733; }
.od-cust-sub { color: #6b7785; font-size: .85rem; }
.od-cust-sub i { margin-right: 4px; }

.od-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; }
.od-fields-1 { grid-template-columns: 1fr; }
.od-fields > div { display: flex; flex-direction: column; padding-bottom: 3px; border-bottom: 1px dashed #dbe4ef; min-height: 38px; }
.od-fields > div.od-wide { grid-column: 1 / -1; }
.od-fields span { font-size: .7rem; text-transform: uppercase; color: #7b8799; letter-spacing: .3px; }
.od-fields b { font-weight: 600; color: #1d2733; word-break: break-word; }

.od-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.od-table th, .od-table td { padding: 6px 10px; border-bottom: 1px solid #e6edf5; }
.od-table thead th { background: #eef3f9; color: #052767; font-weight: 700; text-align: left; border-bottom: 2px solid #cfdbea; white-space: nowrap; }
.od-table tbody tr:nth-child(even) td { background: #fafcff; }
.od-table tbody tr:hover td { background: #f0f6ff; }
.od-table .r { text-align: right; }
.od-table tfoot th { background: #eef3f9; color: #052767; border-top: 2px solid #cfdbea; }
.od-rx th, .od-rx td { text-align: center; }
.od-rx tbody th { background: #eef3f9; color: #052767; width: 90px; }
.od-rx thead th.od-right { background: #e3f0ff; }
.od-rx thead th.od-left { background: #e6f6ec; }
.od-rx thead th.od-corner { vertical-align: middle; }
.od-rx small { font-weight: 600; opacity: .8; }

.od-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.od-chip { display: flex; flex-direction: column; min-width: 90px; padding: 5px 14px; border: 1px solid #cfe0f5; border-radius: 8px; background: #f4f8fe; }
.od-chip span { font-size: .68rem; text-transform: uppercase; color: #6b7785; letter-spacing: .3px; }
.od-chip b { font-weight: 700; color: #052767; }

.od-totals { width: 100%; font-size: .88rem; }
.od-totals td { padding: 5px 4px; border-bottom: 1px solid #edf1f7; }
.od-totals .r { text-align: right; font-weight: 600; }
.od-totals .od-gross td { background: #eef3f9; font-weight: 800; font-size: 1rem; color: #052767; border-top: 2px solid #cfdbea; padding: 8px 6px; }
.od-totals .od-balance td { font-weight: 800; color: #b02a37; }

/* Customer Sales Order History: order cards */
.ord-list { max-height: 560px; overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 8px; }
.ord-card { border: 1px solid #d9e1ec; border-radius: 8px; padding: 8px 14px; background: #fff; transition: box-shadow .15s, border-color .15s, transform .15s; }
.ord-card:hover { box-shadow: 0 3px 12px rgba(31, 78, 121, .18); border-color: #1c6fd1; transform: translateY(-1px); }
.ord-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ord-no { font-weight: 800; color: #052767; font-size: 1rem; }
.ord-no i, .ord-date i, .ord-remark i { color: #6b7785; margin-right: 4px; }
.ord-date { font-size: .8rem; color: #6b7785; }
.ord-store { display: inline-block; margin-top: 3px; padding: 1px 10px; border-radius: 10px; background: #fff4e0; border: 1px solid #f5c26b; color: #8a5300; font-size: .8rem; font-weight: 700; }
.ord-store i { color: #d98300; margin-right: 4px; }
.ord-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ord-status { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; border: 1px solid transparent; }
.ord-status.st-green { background: #e3f6ea; color: #146c43; border-color: #b7e4c7; }
.ord-status.st-amber { background: #fff4d6; color: #8a5a00; border-color: #f3d98b; }
.ord-status.st-red { background: #fde8ea; color: #b02a37; border-color: #f4b7bd; }
.ord-status.st-blue { background: #e7f1ff; color: #0b4fa8; border-color: #b6d4fe; }
.ord-view { font-size: .78rem; color: #0d6efd; background: #e7f1ff; border: 1px solid #b6d4fe; border-radius: 999px; padding: 3px 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.ord-view:hover { background: #0d6efd; color: #fff; }
.ord-amts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #dbe4ef; }
.ord-amts span { display: block; font-size: .68rem; text-transform: uppercase; color: #7b8799; letter-spacing: .3px; }
.ord-amts b { font-size: .95rem; }
.ord-remark { margin-top: 5px; font-size: .78rem; color: #5b6676; background: #f6f8fb; border-radius: 4px; padding: 2px 8px; }

/* Clickable status (opens status history) */
.ord-status-link { cursor: pointer; }
.ord-status-link:hover { filter: brightness(.95); box-shadow: 0 1px 6px rgba(0, 0, 0, .15); }
.ord-status-link i { font-size: .7rem; margin-left: 3px; }
.od-pill-link { cursor: pointer; color: inherit; transition: background .15s; }
.od-pill-link:hover { background: rgba(255, 255, 255, .32); }
.od-pill-link i { font-size: .75rem; margin-left: 4px; }
/* Status history timeline */
.sh-timeline { position: relative; padding: 4px 4px 4px 22px; max-height: 60vh; overflow-y: auto; }
.sh-timeline::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: #cfd8e3; }
.sh-item { position: relative; margin-bottom: 12px; }
.sh-dot { position: absolute; left: -19px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #9aa7b6; }
.sh-current .sh-dot { border-color: #146c43; background: #146c43; box-shadow: 0 0 0 4px #d6f0e0; }
.sh-card { background: #f8fafc; border: 1px solid #dde5ef; border-radius: 8px; padding: 8px 12px; }
.sh-current .sh-card { background: #eefaf2; border-color: #b7e4c7; }
.sh-top { display: flex; align-items: center; gap: 8px; }
.sh-status { font-weight: 700; color: #1f4e79; }
.sh-badge { background: #146c43; color: #fff; border-radius: 999px; font-size: .68rem; padding: 1px 9px; font-weight: 600; }
.sh-date, .sh-remark { font-size: .8rem; color: #6b7785; margin-top: 2px; }
.sh-remark { color: #444; }
.sh-date i, .sh-remark i { margin-right: 4px; }
.ord-remark-right { max-width: 260px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Item code link in order detail (opens item detail popup) */
.od-link { color: #0d6efd; font-weight: 600; cursor: pointer; text-decoration: none; }
.od-link:hover { text-decoration: underline; }
.od-link i { font-size: .72rem; margin-left: 3px; opacity: .8; }