/* =========================================================
   ALFAA ERP - SALES & PURCHASE PROFESSIONAL DENSITY PATCH
   File: assets/css/sales-purchase-density.css
   Scope: Sales and Purchase modules only

   Purpose:
   - Match the clean, properly fitted density of Cash & Bank / Returns.
   - Remove oversized/heavy typography and excessive spacing.
   - Keep KPI cards, filters and tables visible at normal 100% browser zoom.
   - Preserve all module logic, HTML generation and backend behavior.
   ========================================================= */

/* =========================================================
   SHARED LIST PAGE DENSITY TOKENS
   ========================================================= */
.sales-list-page.premium-sales-dashboard,
.purchase-list-page.premium-purchase-dashboard {
  --erp-title: #0f172a;
  --erp-muted: #64748b;
  --erp-border: #e2e8f0;
  --erp-surface: #ffffff;
  --erp-bg: #f8fafc;
  --erp-shadow: 0 8px 24px rgba(15, 23, 42, .045);
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  background: transparent !important;
  font-size: 13px;
}

/* =========================================================
   MODULE HEADERS
   ========================================================= */
.sales-list-page .sales-dash-header,
.purchase-list-page .purchase-dash-header {
  min-height: 52px;
  margin: 0 0 16px !important;
  align-items: center !important;
}

.sales-list-page .sales-dash-header h1,
.purchase-list-page .purchase-dash-header h1 {
  margin: 0;
  color: var(--erp-title);
  font-size: clamp(25px, 1.8vw, 28px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
  font-weight: 800 !important;
}

.sales-list-page .sales-dash-header p,
.purchase-list-page .purchase-dash-header p {
  margin: 5px 0 0 !important;
  color: var(--erp-muted);
  font-size: 13px !important;
  line-height: 1.4;
  font-weight: 500 !important;
}

.sales-list-page .sales-primary-action,
.purchase-list-page .purchase-primary-btn {
  min-width: 146px !important;
  height: 44px !important;
  padding: 0 17px !important;
  border-radius: 10px !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 9px 18px rgba(5, 150, 105, .14) !important;
}

.purchase-list-page .purchase-primary-btn {
  box-shadow: 0 9px 18px rgba(124, 58, 237, .15) !important;
}

/* =========================================================
   SALES LIST - KPI ROW AND MODE ANALYTICS
   ========================================================= */
.sales-list-page .sales-analytics-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(128px, 1fr)) minmax(315px, 1.55fr) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.sales-list-page .sales-kpi-card,
.sales-list-page .sales-mode-card,
.sales-list-page .sales-dashboard-card {
  border-radius: 12px !important;
  border: 1px solid var(--erp-border) !important;
  box-shadow: var(--erp-shadow) !important;
}

.sales-list-page .sales-kpi-card {
  min-height: 126px !important;
  padding: 14px 15px !important;
  align-content: start !important;
  gap: 9px !important;
}

.sales-list-page .sales-kpi-icon {
  width: 39px !important;
  height: 39px !important;
  font-size: 16px !important;
}

.sales-list-page .sales-kpi-card span {
  color: #334155;
  font-size: 12px !important;
  line-height: 1.25;
  font-weight: 650 !important;
}

.sales-list-page .sales-kpi-card strong {
  color: var(--erp-title);
  font-size: clamp(17px, 1.24vw, 20px) !important;
  line-height: 1.15;
  letter-spacing: -.015em !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.sales-list-page .sales-kpi-meta {
  gap: 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.sales-list-page .sales-mode-card {
  padding: 13px 15px !important;
  min-height: 126px !important;
}

.sales-list-page .sales-mode-head {
  grid-template-columns: minmax(108px, 1fr) 126px !important;
  gap: 9px !important;
}

.sales-list-page .sales-mode-head h3,
.sales-list-page .sales-card-head h2,
.sales-list-page .sales-search-card h2 {
  color: var(--erp-title);
  font-size: 15px !important;
  font-weight: 750 !important;
}

.sales-list-page .sales-mode-head p {
  font-size: 11px !important;
  font-weight: 500 !important;
}

.sales-list-page .sales-mode-head select {
  min-width: 0 !important;
  height: 35px !important;
  line-height: 35px !important;
  padding: 0 30px 0 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.sales-list-page .sales-mode-body {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 13px !important;
  margin-top: 9px !important;
}

.sales-list-page .sales-donut {
  width: 82px !important;
  height: 82px !important;
}

.sales-list-page .sales-donut:before {
  inset: 18px !important;
}

.sales-list-page .sales-donut span {
  font-size: 10px !important;
}

.sales-list-page .sales-donut strong {
  font-size: 11px !important;
}

.sales-list-page .sales-mode-legend {
  gap: 2px !important;
}

.sales-list-page .mode-line {
  grid-template-columns: minmax(52px, .7fr) minmax(78px, 1fr) 37px !important;
  gap: 6px !important;
  padding: 3px 0 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.sales-list-page .mode-percent {
  min-width: 34px !important;
  padding: 3px 5px !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

/* =========================================================
   PURCHASE LIST - KPI ROW AND MODE ANALYTICS
   ========================================================= */
.purchase-list-page.premium-purchase-dashboard {
  display: grid;
  gap: 14px !important;
}

.purchase-list-page .purchase-top-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, .95fr) !important;
  gap: 12px !important;
}

.purchase-list-page .purchase-kpi-grid {
  grid-template-columns: repeat(4, minmax(122px, 1fr)) !important;
  gap: 12px !important;
}

.purchase-list-page .purchase-kpi-card,
.purchase-list-page .purchase-panel,
.purchase-list-page .purchase-mode-card {
  border-radius: 12px !important;
  border: 1px solid var(--erp-border) !important;
  box-shadow: var(--erp-shadow) !important;
}

.purchase-list-page .purchase-kpi-card {
  min-height: 126px !important;
  padding: 14px 15px !important;
}

.purchase-list-page .purchase-kpi-card::after {
  display: none !important;
}

.purchase-list-page .purchase-kpi-icon {
  width: 39px !important;
  height: 39px !important;
  font-size: 16px !important;
}

.purchase-list-page .purchase-kpi-card span {
  margin-top: 8px !important;
  color: #334155 !important;
  font-size: 12px !important;
  line-height: 1.25;
  font-weight: 650 !important;
}

.purchase-list-page .purchase-kpi-card strong {
  margin-top: 8px !important;
  font-size: clamp(16px, 1.18vw, 19px) !important;
  letter-spacing: -.015em !important;
  line-height: 1.15;
  font-weight: 800 !important;
  white-space: nowrap;
}

.purchase-list-page .purchase-kpi-card p {
  margin: 7px 0 0 !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

.purchase-list-page .purchase-mode-card {
  min-height: 126px !important;
  padding: 13px 15px !important;
  overflow: hidden !important;
}

.purchase-list-page .purchase-mode-head {
  grid-template-columns: minmax(98px, 1fr) 114px !important;
  gap: 8px !important;
}

.purchase-list-page .purchase-mode-head h2,
.purchase-list-page .purchase-panel h2,
.purchase-list-page .purchase-search-panel h2,
.purchase-list-page .purchase-table-head h2 {
  font-size: 15px !important;
  letter-spacing: -.015em !important;
  font-weight: 750 !important;
}

.purchase-list-page .purchase-mode-head select {
  min-width: 0 !important;
  max-width: none !important;
  height: 35px !important;
  padding: 0 27px 0 9px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.purchase-list-page .purchase-mode-body {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 12px !important;
  margin-top: 9px !important;
}

.purchase-list-page .purchase-donut {
  width: 72px !important;
  height: 72px !important;
}

.purchase-list-page .purchase-donut > div {
  width: 47px !important;
  height: 47px !important;
}

.purchase-list-page .purchase-donut span {
  font-size: 9px !important;
  font-weight: 500 !important;
}

.purchase-list-page .purchase-donut strong {
  font-size: 9px !important;
  font-weight: 700 !important;
}

.purchase-list-page .purchase-mode-legend {
  min-width: 0 !important;
  gap: 1px !important;
}

.purchase-list-page .purchase-mode-line {
  grid-template-columns: 8px minmax(41px, .58fr) minmax(73px, 1fr) 34px !important;
  gap: 5px !important;
  padding: 3px 0 !important;
  min-width: 0 !important;
  font-size: 10.5px !important;
}

.purchase-list-page .purchase-mode-line .mode-dot {
  width: 7px;
  height: 7px;
}

.purchase-list-page .purchase-mode-line b,
.purchase-list-page .purchase-mode-line strong {
  min-width: 0 !important;
  font-weight: 650 !important;
  font-size: 10.5px !important;
}

.purchase-list-page .purchase-mode-line em {
  min-width: 30px !important;
  padding: 3px 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* =========================================================
   INSIGHT PANELS - TOP SELLING / TOP VENDORS
   ========================================================= */
.sales-list-page .sales-dashboard-card,
.purchase-list-page .purchase-panel {
  padding: 15px 16px !important;
  margin-bottom: 12px !important;
}

.sales-list-page .top-selling-list {
  gap: 10px !important;
  margin-top: 12px !important;
}

.sales-list-page .top-selling-item {
  min-height: 73px !important;
  grid-template-columns: 29px 45px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 10px !important;
}

.sales-list-page .top-rank {
  width: 27px !important;
  height: 27px !important;
  border-radius: 8px !important;
  font-size: 11px;
}

.sales-list-page .top-product-img {
  width: 43px !important;
  height: 35px !important;
  border-radius: 8px !important;
}

.sales-list-page .top-product-name,
.sales-list-page .top-product-revenue {
  font-size: 12px !important;
}

.sales-list-page .top-product-name span,
.sales-list-page .top-product-revenue span {
  margin-top: 4px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

.purchase-list-page .purchase-top-strip {
  gap: 10px !important;
  margin-top: 12px !important;
}

/* =========================================================
   FILTER / SEARCH SECTIONS
   ========================================================= */
.sales-list-page .sales-search-card,
.purchase-list-page .purchase-search-panel {
  padding: 15px 16px !important;
}

.sales-list-page .sales-search-toolbar {
  grid-template-columns: minmax(190px, 1fr) minmax(126px, .63fr) minmax(126px, .63fr) minmax(112px, .54fr) minmax(112px, .54fr) auto auto !important;
  gap: 9px !important;
  margin-top: 11px !important;
}

.purchase-list-page .purchase-filter-row {
  grid-template-columns: minmax(190px, 1.2fr) minmax(126px, .6fr) minmax(112px, .52fr) minmax(112px, .52fr) auto auto !important;
  gap: 9px !important;
  margin-top: 11px !important;
}

.sales-list-page .sales-search-input-wrap input,
.sales-list-page .sales-filter-field input,
.sales-list-page .sales-filter-field select,
.purchase-list-page .purchase-search-box input,
.purchase-list-page .purchase-field input,
.purchase-list-page .purchase-field select {
  height: 40px !important;
  border-radius: 9px !important;
  padding-left: 11px !important;
  color: var(--erp-title);
  font-size: 12px !important;
  font-weight: 500 !important;
}

.sales-list-page .sales-filter-field span,
.purchase-list-page .purchase-field span {
  margin-bottom: 5px !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.sales-list-page .sales-search-btn,
.sales-list-page .sales-reset-btn,
.purchase-list-page .purchase-search-btn,
.purchase-list-page .purchase-reset-btn {
  height: 40px !important;
  border-radius: 9px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.sales-list-page .sales-quick-filters,
.purchase-list-page .purchase-quick-filters {
  gap: 7px !important;
  margin-top: 10px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.sales-list-page .sales-quick-filters button,
.purchase-list-page .purchase-quick-btn {
  height: 28px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* =========================================================
   TABLES - FIT AVAILABLE DESKTOP WIDTH AT 100% ZOOM
   ========================================================= */
.sales-list-page .sales-table-card,
.purchase-list-page .purchase-table-panel {
  padding: 0 !important;
  overflow: hidden !important;
}

.sales-list-page .sales-table-card .sales-card-head,
.purchase-list-page .purchase-table-head {
  padding: 14px 16px !important;
  border-bottom: 1px solid #eef2f7;
}

.sales-list-page .sales-modern-table-wrap {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.sales-list-page .sales-modern-table,
.purchase-list-page .purchase-premium-table {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: fixed;
  font-size: 12px !important;
}

.sales-list-page .sales-modern-table th,
.sales-list-page .sales-modern-table td,
.purchase-list-page .purchase-premium-table th,
.purchase-list-page .purchase-premium-table td {
  height: auto !important;
  padding: 11px 9px !important;
  font-size: 12px !important;
  line-height: 1.32 !important;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-list-page .sales-modern-table th,
.purchase-list-page .purchase-premium-table th {
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

.sales-list-page .sales-modern-table td:nth-child(3),
.purchase-list-page .purchase-premium-table td:nth-child(3) {
  white-space: normal !important;
}

.sales-list-page .sales-modern-table th:nth-child(1) { width: 8%; }
.sales-list-page .sales-modern-table th:nth-child(2) { width: 9%; }
.sales-list-page .sales-modern-table th:nth-child(3) { width: 16%; }
.sales-list-page .sales-modern-table th:nth-child(4),
.sales-list-page .sales-modern-table th:nth-child(5),
.sales-list-page .sales-modern-table th:nth-child(6) { width: 10%; }
.sales-list-page .sales-modern-table th:nth-child(7) { width: 10%; }
.sales-list-page .sales-modern-table th:nth-child(8),
.sales-list-page .sales-modern-table th:nth-child(9),
.sales-list-page .sales-modern-table th:nth-child(10) { width: 7%; }
.sales-list-page .sales-modern-table th:nth-child(11) { width: 9%; }

.purchase-list-page .purchase-premium-table th:nth-child(1),
.purchase-list-page .purchase-premium-table td:nth-child(1) { width: 8%; min-width: 0 !important; }
.purchase-list-page .purchase-premium-table th:nth-child(2),
.purchase-list-page .purchase-premium-table td:nth-child(2) { width: 10%; min-width: 0 !important; }
.purchase-list-page .purchase-premium-table th:nth-child(3),
.purchase-list-page .purchase-premium-table td:nth-child(3) { width: 18%; min-width: 0 !important; }
.purchase-list-page .purchase-premium-table th:nth-child(4),
.purchase-list-page .purchase-premium-table td:nth-child(4) { width: 7%; min-width: 0 !important; }
.purchase-list-page .purchase-premium-table th:nth-child(5),
.purchase-list-page .purchase-premium-table td:nth-child(5),
.purchase-list-page .purchase-premium-table th:nth-child(6),
.purchase-list-page .purchase-premium-table td:nth-child(6),
.purchase-list-page .purchase-premium-table th:nth-child(7),
.purchase-list-page .purchase-premium-table td:nth-child(7) { width: 11%; min-width: 0 !important; }
.purchase-list-page .purchase-premium-table th:nth-child(8),
.purchase-list-page .purchase-premium-table td:nth-child(8),
.purchase-list-page .purchase-premium-table th:nth-child(9),
.purchase-list-page .purchase-premium-table td:nth-child(9) { width: 8%; min-width: 0 !important; }
.purchase-list-page .purchase-premium-table th:nth-child(10),
.purchase-list-page .purchase-premium-table td:nth-child(10) { width: 8%; min-width: 0 !important; }

.sales-list-page .sales-table-actions button,
.purchase-list-page .purchase-table-actions button {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.sales-list-page .sales-table-footer,
.purchase-list-page .purchase-table-footer {
  min-height: 54px !important;
  padding: 9px 16px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.purchase-list-page .purchase-table-footer select {
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.purchase-list-page .purchase-pagination button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
}

/* =========================================================
   SALES / PURCHASE CREATE AND EDIT FORMS
   Reduces oversized card/sidebar density without changing form logic.
   ========================================================= */
.sales-page,
.purchase-page {
  --header-height: 62px !important;
  --footer-height: 62px !important;
}

.sales-page .sales-header-bar,
.purchase-page .purchase-header-bar {
  min-height: 62px !important;
  padding: 0 20px !important;
}

.sales-page .sales-header-title-wrap h1,
.purchase-page .purchase-header-title-wrap h1 {
  font-size: 20px !important;
  font-weight: 750 !important;
}

.sales-page .sales-main-layout,
.purchase-page .purchase-main-layout {
  grid-template-columns: minmax(0, 1fr) 328px !important;
  gap: 16px !important;
  padding: 16px 18px !important;
  max-width: none !important;
}

.sales-page .sales-content-area,
.purchase-page .purchase-content-area,
.sales-page .sales-sidebar,
.purchase-page .purchase-sidebar {
  gap: 13px !important;
}

.sales-page .sales-sidebar,
.purchase-page .purchase-sidebar {
  width: 328px !important;
  top: calc(var(--header-height) + 16px) !important;
}

.sales-page .neo-card,
.purchase-page .neo-card {
  border-radius: 12px !important;
}

.sales-page .card-header,
.purchase-page .card-header {
  padding: 14px 16px 12px !important;
}

.sales-page .card-body,
.purchase-page .card-body {
  padding: 14px 16px !important;
}

.sales-page .card-icon,
.purchase-page .card-icon {
  width: 39px !important;
  height: 39px !important;
  border-radius: 11px !important;
  font-size: 16px !important;
}

.sales-page .card-header h2,
.purchase-page .card-header h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
}

.sales-page .card-header p,
.purchase-page .card-header p {
  font-size: 12px !important;
}

.sales-page .item-card,
.purchase-page .item-card {
  padding: 14px !important;
}

/* =========================================================
   RESPONSIVE FALLBACKS
   ========================================================= */
@media (max-width: 1460px) {
  .sales-list-page .sales-analytics-grid {
    grid-template-columns: repeat(4, minmax(135px, 1fr)) !important;
  }

  .sales-list-page .sales-mode-card {
    grid-column: 1 / -1;
  }

  .sales-list-page .sales-mode-body {
    grid-template-columns: 88px minmax(280px, 390px) !important;
  }

  .purchase-list-page .purchase-top-grid {
    grid-template-columns: 1fr !important;
  }

  .purchase-list-page .purchase-mode-body {
    grid-template-columns: 76px minmax(250px, 380px) !important;
  }
}

@media (max-width: 1180px) {
  .sales-list-page .sales-search-toolbar,
  .purchase-list-page .purchase-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sales-page .sales-main-layout,
  .purchase-page .purchase-main-layout {
    grid-template-columns: 1fr !important;
  }

  .sales-page .sales-sidebar,
  .purchase-page .purchase-sidebar {
    width: 100% !important;
    position: static !important;
  }
}

@media (max-width: 820px) {
  .sales-list-page .sales-analytics-grid,
  .purchase-list-page .purchase-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sales-list-page .top-selling-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .sales-list-page .sales-analytics-grid,
  .purchase-list-page .purchase-kpi-grid,
  .sales-list-page .sales-search-toolbar,
  .purchase-list-page .purchase-filter-row {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   V2 DEEP DEBUG FIX - MODULE WIDTH / OVERFLOW / TYPOGRAPHY
   Updated scope:
   - Sales List
   - Purchase List
   - Stock / Inventory
   - Expenses

   Root causes solved:
   1. Oversized internal module padding + heavy 900/950 typography.
   2. KPI and chart grids forcing more width than the app viewport.
   3. Analytics legends with fixed minimum widths overflowing cards.
   4. Table action cells too narrow and visually clipped at the right side.
   ========================================================= */

/* =========================================================
   CONTENT WIDTH SAFETY
   Allows each module grid to shrink inside the app shell.
   ========================================================= */
.app-content {
  min-width: 0;
}

.sales-list-page.premium-sales-dashboard,
.purchase-list-page.premium-purchase-dashboard,
.stock-page.premium-stock-dashboard,
.expense-list-page.premium-expense-dashboard {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 !important;
  gap: 12px !important;
  overflow: visible !important;
}

/* =========================================================
   COMMON PROFESSIONAL TYPOGRAPHY + HEADER DENSITY
   ========================================================= */
.sales-list-page .sales-dash-header,
.purchase-list-page .purchase-dash-header,
.stock-page .stock-dash-header,
.expense-list-page .expense-dash-header {
  min-height: 48px !important;
  margin: 0 0 14px !important;
  align-items: center !important;
}

.sales-list-page .sales-dash-header h1,
.purchase-list-page .purchase-dash-header h1,
.stock-page .stock-dash-header h1,
.expense-list-page .expense-dash-header h1 {
  font-size: clamp(25px, 1.8vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
}

.sales-list-page .sales-dash-header p,
.purchase-list-page .purchase-dash-header p,
.stock-page .stock-dash-header p,
.expense-list-page .expense-dash-header p {
  margin: 5px 0 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.sales-list-page .sales-primary-action,
.purchase-list-page .purchase-primary-btn,
.stock-page .stock-primary-btn,
.expense-list-page .expense-primary-btn {
  height: 44px !important;
  min-width: 146px !important;
  padding: 0 17px !important;
  border-radius: 10px !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* =========================================================
   SALES - MODE CARD WIDTH AND LEGEND CLIPPING FIX
   ========================================================= */
.sales-list-page .sales-analytics-grid {
  grid-template-columns: repeat(4, minmax(128px, 1fr)) minmax(300px, 1.52fr) !important;
  gap: 12px !important;
  min-width: 0;
}

.sales-list-page .sales-kpi-card {
  min-width: 0 !important;
  min-height: 120px !important;
  padding: 13px 14px !important;
  gap: 8px !important;
}

.sales-list-page .sales-kpi-card span {
  font-size: 12px !important;
  font-weight: 650 !important;
}

.sales-list-page .sales-kpi-card strong {
  font-size: clamp(16px, 1.15vw, 19px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}

.sales-list-page .sales-mode-card {
  min-width: 0 !important;
  min-height: 120px !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
}

.sales-list-page .sales-mode-head {
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
}

.sales-list-page .sales-mode-head h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  min-width: 0;
}

.sales-list-page .sales-mode-head p {
  font-size: 11px !important;
  font-weight: 500 !important;
}

.sales-list-page .sales-mode-head select {
  min-width: 0 !important;
  width: 112px !important;
  height: 34px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.sales-list-page .sales-mode-body {
  grid-template-columns: 74px minmax(0, 1fr) !important;
  gap: 11px !important;
  min-width: 0 !important;
  margin-top: 8px !important;
}

.sales-list-page .sales-donut {
  width: 70px !important;
  height: 70px !important;
}

.sales-list-page .sales-donut::before {
  inset: 16px !important;
}

.sales-list-page .sales-mode-legend {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.sales-list-page .mode-line {
  min-width: 0 !important;
  grid-template-columns: minmax(42px, .72fr) minmax(82px, 1fr) 33px !important;
  gap: 5px !important;
  padding: 2px 0 !important;
  font-size: 10.5px !important;
}

.sales-list-page .mode-amount {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 650 !important;
}

/* =========================================================
   PURCHASE - MODE CARD WIDTH AND LEGEND CLIPPING FIX
   ========================================================= */
.purchase-list-page .purchase-top-grid {
  grid-template-columns: minmax(0, 1.74fr) minmax(302px, .96fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.purchase-list-page .purchase-kpi-card {
  min-width: 0 !important;
  min-height: 120px !important;
  padding: 13px 14px !important;
}

.purchase-list-page .purchase-kpi-card span {
  font-size: 12px !important;
  font-weight: 650 !important;
}

.purchase-list-page .purchase-kpi-card strong {
  font-size: clamp(16px, 1.13vw, 19px) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.purchase-list-page .purchase-mode-card {
  min-width: 0 !important;
  min-height: 120px !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
}

.purchase-list-page .purchase-mode-body {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-top: 8px !important;
  min-width: 0 !important;
}

.purchase-list-page .purchase-mode-legend {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.purchase-list-page .purchase-mode-line {
  grid-template-columns: 7px minmax(40px, .65fr) minmax(78px, 1fr) 31px !important;
  min-width: 0 !important;
  gap: 4px !important;
  padding: 2px 0 !important;
  font-size: 10.5px !important;
}

.purchase-list-page .purchase-mode-line strong {
  min-width: 0 !important;
  justify-self: stretch !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10.5px !important;
}

.purchase-list-page .purchase-mode-line em {
  min-width: 0 !important;
  font-size: 10px !important;
}

/* =========================================================
   STOCK / INVENTORY - CLEAN FIT AT 100% ZOOM
   ========================================================= */
.stock-page .stock-top-grid {
  grid-template-columns: minmax(0, 1.86fr) minmax(305px, .94fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.stock-page .stock-kpi-grid {
  gap: 12px !important;
  min-width: 0 !important;
}

.stock-page .stock-kpi-card,
.stock-page .stock-panel,
.stock-page .stock-status-card {
  min-width: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .045) !important;
}

.stock-page .stock-kpi-card {
  min-height: 128px !important;
  padding: 14px 15px !important;
}

.stock-page .stock-kpi-card::after {
  height: 21px !important;
  inset: auto 14px 12px 14px !important;
  opacity: .5 !important;
}

.stock-page .stock-kpi-icon {
  width: 39px !important;
  height: 39px !important;
  font-size: 16px !important;
}

.stock-page .stock-kpi-card span {
  margin-top: 9px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.stock-page .stock-kpi-card strong {
  margin-top: 8px !important;
  font-size: clamp(17px, 1.18vw, 20px) !important;
  font-weight: 800 !important;
  letter-spacing: -.018em !important;
  white-space: nowrap !important;
}

.stock-page .stock-kpi-card p {
  margin-top: 7px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

.stock-page .stock-status-card {
  padding: 14px 15px !important;
  overflow: hidden !important;
}

.stock-page .stock-card-head h2,
.stock-page .stock-search-panel h2,
.stock-page .stock-table-head h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
}

.stock-page .stock-status-layout {
  grid-template-columns: 82px minmax(0, 1fr) !important;
  gap: 11px !important;
  margin-top: 10px !important;
  min-width: 0 !important;
}

.stock-page .stock-donut,
.stock-page .stock-category-donut {
  width: 78px !important;
  height: 78px !important;
}

.stock-page .stock-donut > div,
.stock-page .stock-category-donut > div {
  width: 49px !important;
  height: 49px !important;
}

.stock-page .stock-donut span,
.stock-page .stock-category-donut span {
  font-size: 9px !important;
  font-weight: 550 !important;
}

.stock-page .stock-donut strong,
.stock-page .stock-category-donut strong {
  font-size: 10px !important;
  font-weight: 700 !important;
}

.stock-page .stock-status-legend,
.stock-page .stock-category-legend {
  min-width: 0 !important;
  gap: 4px !important;
}

.stock-page .stock-status-line,
.stock-page .stock-category-line {
  grid-template-columns: 8px minmax(62px, 1fr) minmax(55px, .72fr) !important;
  min-width: 0 !important;
  gap: 5px !important;
  padding: 3px 0 !important;
  font-size: 10.5px !important;
}

.stock-page .stock-status-line strong,
.stock-page .stock-category-line strong,
.stock-page .stock-status-line em,
.stock-page .stock-category-line em {
  min-width: 0 !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* =========================================================
   EXPENSES - CLEAN FIT AT 100% ZOOM
   ========================================================= */
.expense-list-page .expense-top-grid {
  grid-template-columns: minmax(0, 1.82fr) minmax(305px, .98fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.expense-list-page .expense-kpi-grid {
  gap: 12px !important;
  min-width: 0 !important;
}

.expense-list-page .expense-kpi-card,
.expense-list-page .expense-panel,
.expense-list-page .expense-analytics-card {
  min-width: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .045) !important;
}

.expense-list-page .expense-kpi-card {
  min-height: 128px !important;
  padding: 14px 15px !important;
}

.expense-list-page .expense-kpi-card::after {
  height: 21px !important;
  inset: auto 14px 12px 14px !important;
  opacity: .5 !important;
}

.expense-list-page .expense-kpi-icon {
  width: 39px !important;
  height: 39px !important;
  font-size: 16px !important;
}

.expense-list-page .expense-kpi-label {
  margin-top: 9px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.expense-list-page .expense-kpi-value {
  margin-top: 8px !important;
  font-size: clamp(16px, 1.15vw, 20px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.018em !important;
  white-space: nowrap !important;
}

.expense-list-page .expense-kpi-trend {
  margin-top: 7px !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
}

.expense-list-page .expense-analytics-card {
  min-height: 128px !important;
  padding: 13px 15px !important;
  overflow: hidden !important;
}

.expense-list-page .expense-analytics-head {
  grid-template-columns: minmax(0, 1fr) 112px !important;
  gap: 8px !important;
}

.expense-list-page .expense-analytics-head h2,
.expense-list-page .expense-panel-head h2,
.expense-list-page .expense-search-panel h2,
.expense-list-page .expense-table-head h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
}

.expense-list-page .expense-analytics-head select {
  width: 112px !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 28px 0 9px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.expense-list-page .expense-donut-layout {
  grid-template-columns: 75px minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-top: 9px !important;
  min-width: 0 !important;
}

.expense-list-page .expense-donut {
  width: 72px !important;
  height: 72px !important;
}

.expense-list-page .expense-donut > div {
  width: 47px !important;
  height: 47px !important;
}

.expense-list-page .expense-donut span {
  font-size: 9px !important;
  font-weight: 550 !important;
}

.expense-list-page .expense-donut strong {
  font-size: 10px !important;
  font-weight: 700 !important;
}

.expense-list-page .expense-legend {
  min-width: 0 !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.expense-list-page .expense-legend-line {
  grid-template-columns: 7px minmax(55px, 1fr) minmax(70px, .94fr) !important;
  min-width: 0 !important;
  gap: 5px !important;
  padding: 3px 0 !important;
  font-size: 10.5px !important;
}

.expense-list-page .expense-legend-line strong,
.expense-list-page .expense-legend-line em {
  min-width: 0 !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* =========================================================
   STOCK + EXPENSE SUPPORTING SECTIONS
   ========================================================= */
.stock-page .stock-panel,
.expense-list-page .expense-panel,
.stock-page .stock-search-panel,
.expense-list-page .expense-search-panel {
  padding: 14px 16px !important;
}

.stock-page .stock-mid-grid {
  gap: 12px !important;
}

.stock-page .stock-category-layout {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.stock-page .stock-filter-row,
.expense-list-page .expense-filter-row {
  grid-template-columns: minmax(178px, 1.2fr) minmax(118px, .6fr) minmax(112px, .55fr) minmax(112px, .55fr) auto auto !important;
  gap: 9px !important;
  margin-top: 11px !important;
}

.stock-page .stock-search-box input,
.stock-page .stock-field select,
.expense-list-page .expense-search-box input,
.expense-list-page .expense-field input,
.expense-list-page .expense-field select {
  height: 40px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.stock-page .stock-field span,
.expense-list-page .expense-field span {
  margin-bottom: 5px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.stock-page .stock-search-btn,
.stock-page .stock-reset-btn,
.expense-list-page .expense-search-btn,
.expense-list-page .expense-reset-btn {
  height: 40px !important;
  padding: 0 13px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

/* =========================================================
   TABLE AND ACTION COLUMN FIX
   Prevents View / three-dot action buttons from cutting at edge.
   ========================================================= */
.sales-list-page .sales-table-card,
.purchase-list-page .purchase-table-panel,
.expense-list-page .expense-table-panel,
.stock-page .stock-table-panel {
  min-width: 0 !important;
  overflow: visible !important;
}

.sales-list-page .sales-modern-table-wrap,
.purchase-list-page .table-wrap,
.expense-list-page .table-wrap,
.stock-page .table-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.sales-list-page .sales-modern-table,
.purchase-list-page .purchase-premium-table,
.expense-list-page .expense-premium-table,
.stock-page .stock-premium-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  font-size: 12px !important;
}

.sales-list-page .sales-modern-table th,
.sales-list-page .sales-modern-table td,
.purchase-list-page .purchase-premium-table th,
.purchase-list-page .purchase-premium-table td,
.expense-list-page .expense-premium-table th,
.expense-list-page .expense-premium-table td,
.stock-page .stock-premium-table th,
.stock-page .stock-premium-table td {
  padding: 10px 8px !important;
  min-width: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.32 !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-list-page .sales-modern-table th,
.purchase-list-page .purchase-premium-table th,
.expense-list-page .expense-premium-table th,
.stock-page .stock-premium-table th {
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

/* Action cells require fixed usable width and visible inline buttons. */
.sales-list-page .sales-modern-table th:last-child,
.sales-list-page .sales-modern-table td:last-child,
.purchase-list-page .purchase-premium-table th:last-child,
.purchase-list-page .purchase-premium-table td:last-child,
.expense-list-page .expense-premium-table th:last-child,
.expense-list-page .expense-premium-table td:last-child {
  width: 126px !important;
  min-width: 126px !important;
  max-width: 126px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  padding-right: 12px !important;
}

.sales-list-page .row-action-group,
.purchase-list-page .row-action-group,
.expense-list-page .row-action-group {
  display: inline-flex !important;
  width: 112px !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  overflow: visible !important;
  position: relative !important;
}

.sales-list-page .row-action-group .btn,
.purchase-list-page .row-action-group .btn,
.expense-list-page .row-action-group .btn {
  flex: 0 0 auto !important;
  height: 35px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.sales-list-page .row-action-group .row-dots-btn,
.purchase-list-page .row-action-group .row-dots-btn,
.expense-list-page .row-action-group .row-dots-btn {
  width: 35px !important;
  min-width: 35px !important;
  padding: 0 !important;
}

/* Keep floating action menus visible beyond the table edge. */
.sales-list-page .row-action-menu,
.purchase-list-page .row-action-menu,
.expense-list-page .row-action-menu {
  overflow: visible !important;
  z-index: 5000 !important;
}

/* Stock product table column balancing. */
.stock-page .stock-premium-table th:last-child,
.stock-page .stock-premium-table td:last-child {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  text-align: center !important;
  overflow: visible !important;
}

/* =========================================================
   SAFE DESKTOP FALLBACKS
   ========================================================= */
@media (max-width: 1480px) {
  .sales-list-page .sales-analytics-grid,
  .purchase-list-page .purchase-kpi-grid,
  .stock-page .stock-kpi-grid,
  .expense-list-page .expense-kpi-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  }

  .sales-list-page .sales-mode-card,
  .purchase-list-page .purchase-mode-card,
  .stock-page .stock-status-card,
  .expense-list-page .expense-analytics-card {
    grid-column: 1 / -1;
  }

  .purchase-list-page .purchase-top-grid,
  .stock-page .stock-top-grid,
  .expense-list-page .expense-top-grid {
    grid-template-columns: 1fr !important;
  }

  .sales-list-page .sales-mode-body,
  .purchase-list-page .purchase-mode-body,
  .stock-page .stock-status-layout,
  .expense-list-page .expense-donut-layout {
    max-width: 460px;
  }
}

@media (max-width: 1100px) {
  .stock-page .stock-filter-row,
  .expense-list-page .expense-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stock-page .stock-mid-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .sales-list-page .sales-analytics-grid,
  .purchase-list-page .purchase-kpi-grid,
  .stock-page .stock-kpi-grid,
  .expense-list-page .expense-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}