/*
 * Retailer Pro desktop responsiveness
 * One fluid scale for every authenticated ERP view. The 1920px composition is
 * preserved while spacing, controls and type become denser on laptop screens.
 */
:root {
    --ui-scale: 1;
    --ui-sidebar: 17rem;
    --ui-sidebar-collapsed: 4.75rem;
    --ui-header-h: 4.375rem;
    --ui-page-pad: 1.5rem;
    --ui-gap: 1.25rem;
    --ui-gap-sm: .75rem;
    --ui-control-h: 2.5rem;
    --ui-radius: .75rem;
}

@media (max-width: 1600px), (max-height: 900px) {
    :root { --ui-scale: .94; --ui-sidebar: 15.75rem; --ui-page-pad: 1.25rem; --ui-gap: 1.05rem; }
}
@media (max-width: 1536px), (max-height: 864px) {
    :root { --ui-scale: .91; --ui-sidebar: 15.125rem; --ui-header-h: 4rem; --ui-page-pad: 1.05rem; --ui-gap: .9rem; }
}
@media (max-width: 1440px), (max-height: 800px) {
    :root { --ui-scale: .875; --ui-sidebar: 14.5rem; --ui-sidebar-collapsed: 4.4rem; --ui-page-pad: .9rem; --ui-gap: .78rem; --ui-gap-sm: .6rem; --ui-control-h: 2.25rem; }
}
@media (max-width: 1366px), (max-height: 768px) {
    :root { --ui-scale: .84; --ui-sidebar: 13.75rem; --ui-header-h: 3.75rem; --ui-page-pad: .75rem; --ui-gap: .68rem; --ui-gap-sm: .52rem; --ui-control-h: 2.125rem; --ui-radius: .625rem; }
}
@media (max-width: 1280px), (max-height: 720px) {
    :root { --ui-scale: .8; --ui-sidebar: 13rem; --ui-sidebar-collapsed: 4.125rem; --ui-header-h: 3.5rem; --ui-page-pad: .625rem; --ui-gap: .6rem; --ui-gap-sm: .45rem; --ui-control-h: 2rem; }
}

/* A predictable rem baseline replaces competing width/height-only rules. */
@media (min-width: 768px) {
    html { font-size: calc(16px * var(--ui-scale)) !important; }
}
html, body { width: 100%; max-width: 100%; overflow: hidden; }
body { min-width: 0; }
*, *::before, *::after { min-width: 0; }
img, svg, canvas, video { max-width: 100%; }

/* Application chrome */
.app-layout {
    grid-template-columns: var(--ui-sidebar) minmax(0, 1fr) !important;
    width: 100%;
    height: 100dvh;
}
.app-layout.sidebar-collapsed { grid-template-columns: var(--ui-sidebar-collapsed) minmax(0, 1fr) !important; }
.app-sidebar { width: var(--ui-sidebar) !important; min-width: var(--ui-sidebar) !important; height: 100dvh; }
.sidebar-collapsed .app-sidebar { width: var(--ui-sidebar-collapsed) !important; min-width: var(--ui-sidebar-collapsed) !important; }
.sidebar-header { height: calc(var(--ui-header-h) + .75rem); min-height: calc(var(--ui-header-h) + .75rem); padding: clamp(.65rem, 1.1vw, 1.25rem); }
.sidebar-menu { padding: clamp(.5rem, .9vw, .875rem); gap: clamp(.125rem, .35vh, .5rem); }
.menu-item { height: clamp(2.4rem, 5.1vh, 3.25rem); padding-inline: clamp(.65rem, 1vw, 1rem); gap: clamp(.5rem, .7vw, .75rem); }
.menu-item span { font-size: clamp(.75rem, .72vw, .9375rem); }
.sidebar-section-label { height: clamp(1.1rem, 2.6vh, 1.55rem); margin-block: clamp(.125rem, .5vh, .5rem); }

.app-main { min-width: 0; height: 100dvh; }
.app-header { height: var(--ui-header-h); min-height: var(--ui-header-h); padding-inline: var(--ui-page-pad); gap: var(--ui-gap-sm); }
.header-left { flex: 1 1 22rem; max-width: clamp(18rem, 32vw, 31.25rem); gap: var(--ui-gap-sm) !important; }
.header-right { flex: 0 1 auto; gap: var(--ui-gap-sm) !important; }
.global-search-container input { height: var(--ui-control-h); padding-block: 0; }
.global-search-container .search-icon { top: 50%; transform: translateY(-50%); }
.header-btn, .header-profile-trigger { height: var(--ui-control-h); }
.header-profile-avatar { width: calc(var(--ui-control-h) - .55rem); height: calc(var(--ui-control-h) - .55rem); }
.app-content-viewport { padding: var(--ui-page-pad); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }

/* Shared page primitives */
.erp-view, .erp-view > *, .card, .glass-panel, .form-grid, .view-title-row { max-width: 100%; }
.view-title-row { margin-bottom: var(--ui-gap); gap: var(--ui-gap-sm); }
.view-title { font-size: clamp(1.25rem, 1.45vw, 1.75rem); gap: var(--ui-gap-sm); }
.view-title-icon { width: clamp(2rem, 2.4vw, 2.125rem); height: clamp(2rem, 2.4vw, 2.125rem); }
.view-actions { gap: var(--ui-gap-sm); flex: 0 1 auto; }
.btn { min-height: var(--ui-control-h); padding: 0 clamp(.75rem, 1vw, 1.125rem); gap: .5rem; white-space: nowrap; }
.form-control, input:not([type="checkbox"]):not([type="radio"]), select { min-height: var(--ui-control-h); }
.grid-cols-4, .grid-cols-3, .grid-cols-2 { gap: var(--ui-gap); }
.card { overflow: hidden; }

/* Inline dashboard dimensions are normalized here. Six cards remain in one row. */
.dashboard-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: var(--ui-gap) !important; margin-bottom: var(--ui-gap) !important; }
.dashboard-kpi-grid > .kpi-card { height: clamp(5.5rem, 12.5vh, 7rem) !important; padding: clamp(.65rem, 1vw, 1rem) !important; border-radius: var(--ui-radius) !important; }
.dashboard-kpi-grid .kpi-card * { min-width: 0; }
.dashboard-kpi-grid .kpi-card h3 { font-size: clamp(1.05rem, 1.35vw, 1.55rem) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-kpi-grid .kpi-card p,
.dashboard-kpi-grid .kpi-card span { font-size: clamp(.58rem, .62vw, .75rem) !important; }
.dashboard-row-2, .dashboard-row-3, .dashboard-row-4, .dashboard-summary-strip { gap: var(--ui-gap) !important; margin-bottom: var(--ui-gap) !important; }
.dashboard-row-2 > *, .dashboard-row-3 > *, .dashboard-row-4 > * { min-width: 0; overflow: hidden; }

/* Data-dense modules */
.pos-layout { grid-template-columns: minmax(0, 1fr) clamp(20rem, 27vw, 26.25rem); height: calc(100dvh - var(--ui-header-h) - (2 * var(--ui-page-pad))); gap: var(--ui-gap); }
.pos-catalog-actions { gap: var(--ui-gap-sm); margin-bottom: var(--ui-gap-sm); flex-wrap: nowrap; }
.table-container, .data-table-container, .table-responsive { width: 100%; max-width: 100%; overflow: hidden; }
table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; }
th, td { padding: clamp(.4rem, .55vw, .75rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
th { font-size: clamp(.65rem, .66vw, .8rem); }
td { font-size: clamp(.68rem, .7vw, .85rem); }

/* Dialogs and full-screen transaction workspaces */
.modal-overlay { padding: var(--ui-gap); }
.modal-window { width: min(var(--modal-width, 42rem), calc(100vw - (2 * var(--ui-gap)))); max-width: calc(100vw - (2 * var(--ui-gap))); max-height: calc(100dvh - (2 * var(--ui-gap))); }
.modal-header, .modal-footer { padding: clamp(.65rem, 1vw, 1rem); gap: var(--ui-gap-sm); }
.modal-body { padding: clamp(.65rem, 1.2vw, 1.25rem); }
.modal-window.modal-purchase-create,
.modal-window.modal-quotation-create { width: 100vw !important; max-width: none !important; height: 100dvh !important; max-height: none !important; }

@media (max-width: 1440px) {
    .header-profile-copy { max-width: 7rem; }
    .dashboard-row-2 { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
    .dashboard-row-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr) !important; }
}

@media (max-width: 1280px) {
    .header-profile-copy { display: none; }
    .header-profile-trigger > svg { display: none; }
    .dashboard-kpi-grid { gap: .5rem !important; }
    .pos-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 25vw); }
}

@media (max-height: 768px) and (min-width: 768px) {
    .software-brand-signature { display: none; }
    .sidebar-menu { padding-block: .45rem; }
    .chart-card-wrapper { min-height: clamp(12rem, 34vh, 21.875rem); margin-top: var(--ui-gap); }
}

/* Sales invoice list: retain all information and actions in the available pane. */
#view-sales .sales-invoices-panel { width: 100%; max-width: 100%; }
#view-sales .sales-invoice-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: var(--ui-gap) !important;
    margin-bottom: var(--ui-gap) !important;
}
#view-sales .sales-invoice-summary-grid .summary-card {
    min-height: clamp(5.75rem, 12vh, 7.125rem);
    padding: clamp(.65rem, .85vw, 1rem) !important;
    gap: clamp(.5rem, .7vw, .75rem) !important;
}
#view-sales .sales-invoice-summary-grid .summary-card > div:first-child {
    width: clamp(2.4rem, 2.8vw, 2.75rem) !important;
    height: clamp(2.4rem, 2.8vw, 2.75rem) !important;
}
#view-sales .sales-invoice-summary-grid .summary-card > div:last-child { overflow: hidden; }
#view-sales .sales-invoice-summary-grid .summary-card [id^="card"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#view-sales .sales-invoice-tabs-row { margin-bottom: var(--ui-gap) !important; gap: var(--ui-gap-sm); }
#view-sales #invoiceStatusTabs { gap: clamp(.75rem, 1.25vw, 1.5rem) !important; white-space: nowrap; }
#view-sales .filter-card { padding: clamp(.75rem, 1vw, 1rem) !important; margin-bottom: var(--ui-gap) !important; }
#view-sales .sales-invoice-filter-grid { gap: var(--ui-gap-sm) !important; }

#view-sales .sales-invoice-table-wrap { overflow: visible !important; }
#view-sales .sales-invoice-list-table { table-layout: fixed !important; }
#view-sales .sales-invoice-list-table th,
#view-sales .sales-invoice-list-table td {
    padding: clamp(.45rem, .58vw, .75rem) clamp(.35rem, .55vw, 1rem) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#view-sales .sales-invoice-list-table th:nth-child(1) { width: 7%; }
#view-sales .sales-invoice-list-table th:nth-child(2) { width: 8%; }
#view-sales .sales-invoice-list-table th:nth-child(3) { width: 8%; }
#view-sales .sales-invoice-list-table th:nth-child(4) { width: 10%; }
#view-sales .sales-invoice-list-table th:nth-child(5) { width: 9%; }
#view-sales .sales-invoice-list-table th:nth-child(6) { width: 5%; }
#view-sales .sales-invoice-list-table th:nth-child(7) { width: 8%; }
#view-sales .sales-invoice-list-table th:nth-child(8) { width: 10%; }
#view-sales .sales-invoice-list-table th:nth-child(9) { width: 9%; }
#view-sales .sales-invoice-list-table th:nth-child(10) { width: 8%; }
#view-sales .sales-invoice-list-table th:nth-child(11) { width: 8%; }
#view-sales .sales-invoice-list-table th:nth-child(12) { width: 9%; }
#view-sales .sales-invoice-list-table th:nth-child(13) { width: 8.75rem; }
#view-sales .sales-invoice-list-table td:nth-child(13) { overflow: visible; }
#view-sales .sales-invoice-primary-actions { width: 100%; justify-content: flex-end; }
#view-sales .sales-invoice-primary-actions .btn-action {
    flex: 0 0 auto;
    width: clamp(1.6rem, 1.8vw, 1.75rem) !important;
    height: clamp(1.6rem, 1.8vw, 1.75rem) !important;
}
#view-sales .more-dropdown-menu { max-height: min(26rem, calc(100dvh - 1rem)); overflow-y: auto; }

/* Universal list action safety for Sales, Purchase, Returns, Expenses and reports. */
.erp-view table:has(.btn-action) { table-layout: fixed; }
.erp-view table:has(.btn-action) th:last-child { width: clamp(7.75rem, 10vw, 9.25rem); }
.erp-view table:has(.btn-action) td:last-child {
    overflow: visible;
    padding-inline: clamp(.3rem, .5vw, .65rem) !important;
}
.erp-view table:has(.btn-action) td:last-child > div[style*="flex"] {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: flex-end;
    align-items: center;
    gap: .25rem !important;
    width: 100%;
    max-width: 100%;
}
.erp-view table .btn-action {
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 1.75rem;
    line-height: 1;
    white-space: nowrap;
}
.erp-view table .btn-action[style*="width:28px"],
.erp-view table .btn-action[style*="width: 28px"] {
    width: clamp(1.6rem, 1.8vw, 1.75rem) !important;
    height: clamp(1.6rem, 1.8vw, 1.75rem) !important;
    padding: 0 !important;
}
.erp-view .more-dropdown-menu {
    width: min(13.5rem, calc(100vw - 1rem));
    min-width: min(11.25rem, calc(100vw - 1rem)) !important;
    max-height: calc(100dvh - 1rem) !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.erp-view .more-dropdown-menu .dropdown-item {
    flex: 0 0 auto;
    min-height: 2.25rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Compact, single-line primary actions; secondary actions live in More menus. */
#view-sales .sales-invoice-primary-actions,
#view-purchases .purchase-list-primary-actions {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-end;
    width: 100%;
}
#view-sales .sales-invoice-actions-cell,
#view-purchases .purchase-list-actions-cell { overflow: visible !important; }
#view-sales .sales-invoice-list-table th:last-child,
#view-purchases table:has(.purchase-list-actions-cell) th:last-child {
    width: clamp(8.25rem, 10vw, 9.25rem) !important;
}
#view-purchases .purchase-list-primary-actions .settle-purchase-btn,
#view-purchases .purchase-list-primary-actions .return-purchase-btn {
    min-width: 3.8rem;
    min-height: 1.75rem;
    padding: .25rem .45rem !important;
    justify-content: center;
}
#view-sales .sales-invoice-primary-actions > div,
#view-purchases .purchase-list-primary-actions > div { flex: 0 0 auto; }

@media (max-width: 1366px) {
    #view-sales .sales-invoice-primary-actions,
    #view-purchases .purchase-list-primary-actions { gap: .18rem !important; }
    #view-sales .sales-invoice-primary-actions .btn-action[style*="width:28px"],
    #view-purchases .purchase-list-primary-actions .btn-action[style*="width:28px"] {
        width: 1.55rem !important;
        height: 1.55rem !important;
        min-height: 1.55rem;
    }
    #view-purchases .purchase-list-primary-actions .settle-purchase-btn,
    #view-purchases .purchase-list-primary-actions .return-purchase-btn {
        min-width: 3.45rem;
        min-height: 1.55rem;
        padding-inline: .32rem !important;
        font-size: .68rem !important;
    }
}

@media (max-width: 1366px) {
    #view-sales .sales-invoice-list-table th,
    #view-sales .sales-invoice-list-table td { font-size: .72rem !important; }
    #view-sales .sales-invoice-list-table th:nth-child(5),
    #view-sales .sales-invoice-list-table td:nth-child(5) { width: 7%; }
    #view-sales .sales-invoice-list-table th:nth-child(12),
    #view-sales .sales-invoice-list-table td:nth-child(12) { width: 7%; }
    #view-sales .sales-invoice-list-table th:nth-child(13) { width: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}