/* SIGMA ERP tablet responsive fit hotfix 2026-06-24 */
:root {
  --sidebar-expanded: 252px;
  --sidebar-rail: 88px;
  --sidebar-current: var(--sidebar-expanded);
  --tablet-page-pad: clamp(10px, 1.5vw, 20px);
  --tablet-page-gap: clamp(8px, 1.2vw, 16px);
}

/* ERP_SIGMA_TABLET_FIXED_SCALE_ABSOLUTE_FINAL_V50_20260625_ACTIVE */
@media (min-width: 768px) and (max-width: 1199px) {
  html:not(.portal-page-shell) {
    --sigma-tablet-canvas-width: 1366px !important;
    --sigma-tablet-canvas-scale: .75 !important;
    --sidebar-current: 252px !important;
    --sidebar-rail: 252px !important;
  }
  html, body:not(.portal-page-shell) {
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    width: var(--sigma-tablet-canvas-width) !important;
    min-width: var(--sigma-tablet-canvas-width) !important;
    max-width: var(--sigma-tablet-canvas-width) !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
    transform: scale(var(--sigma-tablet-canvas-scale)) !important;
    transform-origin: top left !important;
  }
  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    position: relative !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    flex: 0 0 252px !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    padding: 18px !important;
    transform: none !important;
    box-shadow: none !important;
  }
  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img,
  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }
  html body:not(.portal-page-shell) .nav a,
  html body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar] body:not(.portal-page-shell) .nav a,
  html[data-sidebar] body:not(.portal-page-shell) .nav-simple a {
    display: flex !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  html body:not(.portal-page-shell) .main,
  html[data-sidebar] body:not(.portal-page-shell) .main {
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
  }
  html body:not(.portal-page-shell) .content {
    padding: 20px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ERP_SIGMA_TABLET_LARGE_FIT_V51_20260625_ACTIVE */
@media (min-width: 768px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .cards.finance-kpis {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .finance-dash-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-dash-grid {
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .78fr) minmax(250px, .78fr) !important;
  }

  html body:not(.portal-page-shell) .finance-panel-wide,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel-wide {
    grid-column: span 2 !important;
  }

  html body:not(.portal-page-shell) .finance-panel-full,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel-full {
    grid-column: 1 / -1 !important;
  }

  html body:not(.portal-page-shell) .production-recap-table,
  html[data-sidebar] body:not(.portal-page-shell) .production-recap-table {
    min-width: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .production-recap-table th:nth-child(1),
  html body:not(.portal-page-shell) .production-recap-table td:nth-child(1) {
    width: 58% !important;
  }

  html body:not(.portal-page-shell) .production-recap-table th:nth-child(2),
  html body:not(.portal-page-shell) .production-recap-table td:nth-child(2) {
    text-align: center !important;
    width: 14% !important;
  }

  html body:not(.portal-page-shell) .production-recap-table th:nth-child(3),
  html body:not(.portal-page-shell) .production-recap-table td:nth-child(3) {
    text-align: center !important;
    width: 28% !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html[data-sidebar="collapsed"]:not(.portal-page-shell) {
    --sidebar-current: 96px !important;
    --sidebar-rail: 96px !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    flex: 0 0 96px !important;
    max-width: 96px !important;
    min-width: 96px !important;
    overflow-x: hidden !important;
    padding: 12px 10px !important;
    width: 96px !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand {
    justify-content: center !important;
    padding: 8px !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand img,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav-text,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .user-name {
    display: none !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav a,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav-simple a {
    gap: 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 12px 8px !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app {
    grid-template-columns: 252px minmax(0, 1fr) !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar {
    flex: 0 0 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    padding: 18px !important;
    width: 252px !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand img,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }
}

/* ERP_SIGMA_TABLET_TABLE_FULL_WIDTH_FINAL_V53_20260625
   Final tablet-only table fill override. Keep this block at EOF so it wins over older max-content table rules. */
@media (min-width: 768px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .content,
  html body:not(.portal-page-shell) .card,
  html body:not(.portal-page-shell) .panel,
  html body:not(.portal-page-shell) .section-card,
  html body:not(.portal-page-shell) .finance-panel,
  html body:not(.portal-page-shell) .finance-panel-full,
  html body:not(.portal-page-shell) .finance-panel-wide,
  html body:not(.portal-page-shell) .inventory-clean-panel,
  html body:not(.portal-page-shell) .production-clean-card,
  html body:not(.portal-page-shell) .sales-modern-card,
  html body:not(.portal-page-shell) .hr-card,
  html body:not(.portal-page-shell) .purchase-clean-card,
  html[data-sidebar] body:not(.portal-page-shell) .content,
  html[data-sidebar] body:not(.portal-page-shell) .card,
  html[data-sidebar] body:not(.portal-page-shell) .panel,
  html[data-sidebar] body:not(.portal-page-shell) .section-card,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel-full,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel-wide,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-clean-panel,
  html[data-sidebar] body:not(.portal-page-shell) .production-clean-card,
  html[data-sidebar] body:not(.portal-page-shell) .sales-modern-card,
  html[data-sidebar] body:not(.portal-page-shell) .hr-card,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-clean-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .table-wrap,
  html body:not(.portal-page-shell) .finance-table-wrap,
  html body:not(.portal-page-shell) .sales-recap-table-wrap,
  html body:not(.portal-page-shell) .production-recap-table-wrap,
  html body:not(.portal-page-shell) .inventory-table-wrap,
  html body:not(.portal-page-shell) .data-table-wrap,
  html body:not(.portal-page-shell) .table-responsive,
  html body:not(.portal-page-shell) .table-scroll,
  html[data-sidebar] body:not(.portal-page-shell) .table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .finance-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .sales-recap-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .production-recap-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .data-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .table-responsive,
  html[data-sidebar] body:not(.portal-page-shell) .table-scroll {
    box-sizing: border-box !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body:not(.portal-page-shell) .table-wrap > table,
  html body:not(.portal-page-shell) .finance-table-wrap > table,
  html body:not(.portal-page-shell) .sales-recap-table-wrap > table,
  html body:not(.portal-page-shell) .production-recap-table-wrap > table,
  html body:not(.portal-page-shell) .inventory-table-wrap > table,
  html body:not(.portal-page-shell) .data-table-wrap > table,
  html body:not(.portal-page-shell) .table-responsive > table,
  html body:not(.portal-page-shell) .table-scroll > table,
  html body:not(.portal-page-shell) table.master-clean-table,
  html body:not(.portal-page-shell) table.inventory-fit-table,
  html body:not(.portal-page-shell) table.inventory-clean-stock-table,
  html body:not(.portal-page-shell) table.finance-simple-table,
  html body:not(.portal-page-shell) table.product-clean-table,
  html body:not(.portal-page-shell) table.consumable-clean-table,
  html body:not(.portal-page-shell) table.production-recap-table,
  html body:not(.portal-page-shell) table.sales-recap-table,
  html body:not(.portal-page-shell) .card > table,
  html body:not(.portal-page-shell) .panel > table,
  html body:not(.portal-page-shell) .section-card > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .finance-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .sales-recap-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .production-recap-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .data-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-responsive > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-scroll > table,
  html[data-sidebar] body:not(.portal-page-shell) table.master-clean-table,
  html[data-sidebar] body:not(.portal-page-shell) table.inventory-fit-table,
  html[data-sidebar] body:not(.portal-page-shell) table.inventory-clean-stock-table,
  html[data-sidebar] body:not(.portal-page-shell) table.finance-simple-table,
  html[data-sidebar] body:not(.portal-page-shell) table.product-clean-table,
  html[data-sidebar] body:not(.portal-page-shell) table.consumable-clean-table,
  html[data-sidebar] body:not(.portal-page-shell) table.production-recap-table,
  html[data-sidebar] body:not(.portal-page-shell) table.sales-recap-table,
  html[data-sidebar] body:not(.portal-page-shell) .card > table,
  html[data-sidebar] body:not(.portal-page-shell) .panel > table,
  html[data-sidebar] body:not(.portal-page-shell) .section-card > table {
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) table th,
  html body:not(.portal-page-shell) table td,
  html[data-sidebar] body:not(.portal-page-shell) table th,
  html[data-sidebar] body:not(.portal-page-shell) table td {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  html body:not(.portal-page-shell) table td.num,
  html body:not(.portal-page-shell) table th.num,
  html body:not(.portal-page-shell) table .num,
  html body:not(.portal-page-shell) table .money,
  html body:not(.portal-page-shell) table .currency,
  html[data-sidebar] body:not(.portal-page-shell) table td.num,
  html[data-sidebar] body:not(.portal-page-shell) table th.num,
  html[data-sidebar] body:not(.portal-page-shell) table .num,
  html[data-sidebar] body:not(.portal-page-shell) table .money,
  html[data-sidebar] body:not(.portal-page-shell) table .currency {
    overflow-wrap: normal !important;
    text-align: right !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}

/* ERP_SIGMA_FINANCE_MONITORING_RECON_FULL_WIDTH_EOF_V56_20260625 */
@media (min-width: 768px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .finance-recon-panel.finance-panel-full,
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel.finance-panel-full {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-scroll,
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-scroll {
    box-sizing: border-box !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table,
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table {
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    display: table !important;
    max-width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(1),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(1),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(1),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(1) {
    width: 30% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(2),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(2),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(3),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(3),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(2),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(2),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(3),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(3) {
    width: 16% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(4),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(4),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(5),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(5),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(4),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(4),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(5),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(5) {
    width: 12% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(6),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(6),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(6),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(6) {
    width: 14% !important;
  }
}

/* ERP_SIGMA_FINANCE_MONITORING_RECON_FULL_WIDTH_TABLET_V55_20260625
   Finance monitoring has its own wrapper, so force it to fill the card on tablet. */
@media (min-width: 768px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .finance-recon-panel.finance-panel-full,
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel.finance-panel-full {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-scroll,
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-scroll {
    box-sizing: border-box !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table,
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table {
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    display: table !important;
    max-width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th,
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td,
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th,
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(1),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(1),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(1),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(1) {
    width: 30% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(2),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(2),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(3),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(3),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(2),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(2),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(3),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(3) {
    width: 16% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(4),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(4),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(5),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(5),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(4),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(4),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(5),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(5) {
    width: 12% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(6),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(6),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table th:nth-child(6),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(6) {
    width: 14% !important;
  }

  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(2),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(3),
  html body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(4),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(2),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(3),
  html[data-sidebar] body:not(.portal-page-shell) .finance-recon-panel .finance-recon-table td:nth-child(4) {
    overflow-wrap: normal !important;
    text-align: right !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}

/* ERP_SIGMA_TABLET_TABLE_FULL_WIDTH_FINAL_V52_20260625
   Tablet-only correction: earlier tablet rules used width:max-content,
   which made tables stop at intrinsic column width and left empty space
   inside panels. Keep desktop untouched. */
@media (min-width: 768px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .content,
  html body:not(.portal-page-shell) .card,
  html body:not(.portal-page-shell) .panel,
  html body:not(.portal-page-shell) .section-card,
  html body:not(.portal-page-shell) .finance-panel,
  html body:not(.portal-page-shell) .finance-panel-full,
  html body:not(.portal-page-shell) .finance-panel-wide,
  html body:not(.portal-page-shell) .inventory-clean-panel,
  html body:not(.portal-page-shell) .production-clean-card,
  html body:not(.portal-page-shell) .sales-modern-card,
  html body:not(.portal-page-shell) .hr-card,
  html body:not(.portal-page-shell) .purchase-clean-card,
  html[data-sidebar] body:not(.portal-page-shell) .content,
  html[data-sidebar] body:not(.portal-page-shell) .card,
  html[data-sidebar] body:not(.portal-page-shell) .panel,
  html[data-sidebar] body:not(.portal-page-shell) .section-card,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel-full,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel-wide,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-clean-panel,
  html[data-sidebar] body:not(.portal-page-shell) .production-clean-card,
  html[data-sidebar] body:not(.portal-page-shell) .sales-modern-card,
  html[data-sidebar] body:not(.portal-page-shell) .hr-card,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-clean-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .table-wrap,
  html body:not(.portal-page-shell) .finance-table-wrap,
  html body:not(.portal-page-shell) .sales-recap-table-wrap,
  html body:not(.portal-page-shell) .production-recap-table-wrap,
  html body:not(.portal-page-shell) .inventory-table-wrap,
  html body:not(.portal-page-shell) .data-table-wrap,
  html body:not(.portal-page-shell) .table-responsive,
  html body:not(.portal-page-shell) .table-scroll,
  html[data-sidebar] body:not(.portal-page-shell) .table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .finance-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .sales-recap-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .production-recap-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .data-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .table-responsive,
  html[data-sidebar] body:not(.portal-page-shell) .table-scroll {
    box-sizing: border-box !important;
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body:not(.portal-page-shell) .table-wrap > table,
  html body:not(.portal-page-shell) .finance-table-wrap > table,
  html body:not(.portal-page-shell) .sales-recap-table-wrap > table,
  html body:not(.portal-page-shell) .production-recap-table-wrap > table,
  html body:not(.portal-page-shell) .inventory-table-wrap > table,
  html body:not(.portal-page-shell) .data-table-wrap > table,
  html body:not(.portal-page-shell) .table-responsive > table,
  html body:not(.portal-page-shell) .table-scroll > table,
  html body:not(.portal-page-shell) table.master-clean-table,
  html body:not(.portal-page-shell) table.inventory-fit-table,
  html body:not(.portal-page-shell) table.inventory-clean-stock-table,
  html body:not(.portal-page-shell) table.finance-simple-table,
  html body:not(.portal-page-shell) table.product-clean-table,
  html body:not(.portal-page-shell) table.consumable-clean-table,
  html body:not(.portal-page-shell) table.production-recap-table,
  html body:not(.portal-page-shell) table.sales-recap-table,
  html body:not(.portal-page-shell) .card > table,
  html body:not(.portal-page-shell) .panel > table,
  html body:not(.portal-page-shell) .section-card > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .finance-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .sales-recap-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .production-recap-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .data-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-responsive > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-scroll > table,
  html[data-sidebar] body:not(.portal-page-shell) table.master-clean-table,
  html[data-sidebar] body:not(.portal-page-shell) table.inventory-fit-table,
  html[data-sidebar] body:not(.portal-page-shell) table.inventory-clean-stock-table,
  html[data-sidebar] body:not(.portal-page-shell) table.finance-simple-table,
  html[data-sidebar] body:not(.portal-page-shell) table.product-clean-table,
  html[data-sidebar] body:not(.portal-page-shell) table.consumable-clean-table,
  html[data-sidebar] body:not(.portal-page-shell) table.production-recap-table,
  html[data-sidebar] body:not(.portal-page-shell) table.sales-recap-table,
  html[data-sidebar] body:not(.portal-page-shell) .card > table,
  html[data-sidebar] body:not(.portal-page-shell) .panel > table,
  html[data-sidebar] body:not(.portal-page-shell) .section-card > table {
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) table th,
  html body:not(.portal-page-shell) table td,
  html[data-sidebar] body:not(.portal-page-shell) table th,
  html[data-sidebar] body:not(.portal-page-shell) table td {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  html body:not(.portal-page-shell) table td.num,
  html body:not(.portal-page-shell) table th.num,
  html body:not(.portal-page-shell) table .num,
  html body:not(.portal-page-shell) table .money,
  html body:not(.portal-page-shell) table .currency,
  html[data-sidebar] body:not(.portal-page-shell) table td.num,
  html[data-sidebar] body:not(.portal-page-shell) table th.num,
  html[data-sidebar] body:not(.portal-page-shell) table .num,
  html[data-sidebar] body:not(.portal-page-shell) table .money,
  html[data-sidebar] body:not(.portal-page-shell) table .currency {
    overflow-wrap: normal !important;
    text-align: right !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  html body:not(.portal-page-shell) .finance-panel .table-wrap,
  html body:not(.portal-page-shell) .inventory-clean-panel .table-wrap,
  html body:not(.portal-page-shell) .production-clean-card .table-wrap,
  html body:not(.portal-page-shell) .sales-modern-card .table-wrap,
  html body:not(.portal-page-shell) .hr-card .table-wrap,
  html body:not(.portal-page-shell) .purchase-clean-card .table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel .table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-clean-panel .table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .production-clean-card .table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .sales-modern-card .table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .hr-card .table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-clean-card .table-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ERP_SIGMA_DESKTOP_SIDEBAR_EXPANDED_GUARD_V51_20260625_FINAL */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  body.sidebar-expanded:not(.portal-page-shell) .app {
    display: flex !important;
    grid-template-columns: none !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  body.sidebar-expanded:not(.portal-page-shell) .sidebar {
    flex: 0 0 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    padding: 18px !important;
    width: 252px !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand img,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .nav-text,
  body.sidebar-expanded:not(.portal-page-shell) .brand-logo,
  body.sidebar-expanded:not(.portal-page-shell) .brand img,
  body.sidebar-expanded:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }
}

/* ERP_SIGMA_TABLET_FIXED_SCALE_EOF_FINAL_V50_20260625_ACTIVE */
@media (min-width: 768px) and (max-width: 1199px) {
  html:not(.portal-page-shell) {
    --sigma-tablet-canvas-width: 1366px !important;
    --sigma-tablet-canvas-scale: .75 !important;
    --sidebar-current: 252px !important;
    --sidebar-rail: 252px !important;
  }

  html,
  html body:not(.portal-page-shell) {
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    width: var(--sigma-tablet-canvas-width) !important;
    min-width: var(--sigma-tablet-canvas-width) !important;
    max-width: var(--sigma-tablet-canvas-width) !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
    transform: scale(var(--sigma-tablet-canvas-scale)) !important;
    transform-origin: top left !important;
  }

  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    position: relative !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    flex: 0 0 252px !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    padding: 18px !important;
    transform: none !important;
    box-shadow: none !important;
  }

  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img,
  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }

  html body:not(.portal-page-shell) .nav a,
  html body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar] body:not(.portal-page-shell) .nav a,
  html[data-sidebar] body:not(.portal-page-shell) .nav-simple a {
    display: flex !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  html body:not(.portal-page-shell) .main,
  html[data-sidebar] body:not(.portal-page-shell) .main {
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
  }

  html body:not(.portal-page-shell) .content {
    padding: 20px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 819px) {
  html:not(.portal-page-shell) { --sigma-tablet-canvas-scale: .562 !important; }
}

@media (min-width: 820px) and (max-width: 899px) {
  html:not(.portal-page-shell) { --sigma-tablet-canvas-scale: .60 !important; }
}

@media (min-width: 900px) and (max-width: 979px) {
  html:not(.portal-page-shell) { --sigma-tablet-canvas-scale: .66 !important; }
}

@media (min-width: 980px) and (max-width: 1099px) {
  html:not(.portal-page-shell) { --sigma-tablet-canvas-scale: .749 !important; }
}

@media (min-width: 1100px) and (max-width: 1199px) {
  html:not(.portal-page-shell) { --sigma-tablet-canvas-scale: .86 !important; }
}

@media (min-width: 768px) and (max-width: 819px) {
  html:not(.portal-page-shell) { --sigma-tablet-canvas-scale: .562 !important; }
}
@media (min-width: 820px) and (max-width: 899px) {
  html:not(.portal-page-shell) { --sigma-tablet-canvas-scale: .60 !important; }
}
@media (min-width: 900px) and (max-width: 979px) {
  html:not(.portal-page-shell) { --sigma-tablet-canvas-scale: .66 !important; }
}
@media (min-width: 980px) and (max-width: 1099px) {
  html:not(.portal-page-shell) { --sigma-tablet-canvas-scale: .749 !important; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  html:not(.portal-page-shell) { --sigma-tablet-canvas-scale: .86 !important; }
}

/* ERP_SIGMA_TABLET_LAPTOP_DENSITY_V49_20260625_ACTIVE
   Tablet memakai density laptop: tidak ada kartu jumbo 2 kolom pada layar lebar tablet. */
@media (min-width: 600px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html:not(.portal-page-shell) {
    --sidebar-current: 188px !important;
    --sidebar-rail: 188px !important;
  }

  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: 188px minmax(0, 1fr) !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    width: 100vw !important;
  }

  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    box-shadow: none !important;
    flex: 0 0 188px !important;
    max-width: 188px !important;
    min-width: 188px !important;
    padding: 14px 16px !important;
    position: relative !important;
    transform: none !important;
    width: 188px !important;
  }

  html body:not(.portal-page-shell) .brand,
  html[data-sidebar] body:not(.portal-page-shell) .brand {
    justify-content: space-between !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
  }

  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }

  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img {
    max-height: 38px !important;
    max-width: 116px !important;
  }

  html body:not(.portal-page-shell) .nav a,
  html body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar] body:not(.portal-page-shell) .nav a,
  html[data-sidebar] body:not(.portal-page-shell) .nav-simple a {
    display: flex !important;
    gap: 10px !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
  }

  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:not(.portal-page-shell) .topbar {
    min-height: 64px !important;
    padding: 10px 18px !important;
  }

  html body:not(.portal-page-shell) .content {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 14px 18px !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    display: grid !important;
    gap: 10px !important;
  }

  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid > *,
  html body:not(.portal-page-shell) .owner-kpi-grid > *,
  html body:not(.portal-page-shell) .finance-kpi-grid > *,
  html body:not(.portal-page-shell) .cards.finance-kpis > *,
  html body:not(.portal-page-shell) .inventory-dashboard-kpis > *,
  html body:not(.portal-page-shell) .production-compact-kpis > *,
  html body:not(.portal-page-shell) .purchase-kpi-grid > * {
    min-height: 86px !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
  }

  html body:not(.portal-page-shell) .metric-value,
  html body:not(.portal-page-shell) .currency-value,
  html body:not(.portal-page-shell) .finance-kpi-card strong,
  html body:not(.portal-page-shell) .kpi-card strong,
  html body:not(.portal-page-shell) .stat-card strong,
  html body:not(.portal-page-shell) .inventory-kpi-copy strong,
  html body:not(.portal-page-shell) .production-compact-kpi strong,
  html body:not(.portal-page-shell) .hr-focus-kpi strong,
  html body:not(.portal-page-shell) .hr-payroll-value {
    font-size: clamp(20px, 1.8vw, 28px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  html body:not(.portal-page-shell) .finance-dash-grid,
  html body:not(.portal-page-shell) .sigma-dashboard-charts,
  html body:not(.portal-page-shell) .owner-dashboard-visuals,
  html body:not(.portal-page-shell) .inventory-dashboard-hero,
  html body:not(.portal-page-shell) .production-dashboard-body,
  html body:not(.portal-page-shell) .purchase-entry-layout,
  html body:not(.portal-page-shell) .hr-dashboard-workspace,
  html body:not(.portal-page-shell) .hr-tab-overview,
  html[data-sidebar] body:not(.portal-page-shell) .finance-dash-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-dashboard-visuals,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-hero,
  html[data-sidebar] body:not(.portal-page-shell) .production-dashboard-body,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-entry-layout,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-workspace,
  html[data-sidebar] body:not(.portal-page-shell) .hr-tab-overview {
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr) !important;
  }
}

@media (min-width: 600px) and (max-width: 980px) {
  html:not(.portal-page-shell) {
    --sidebar-current: 96px !important;
    --sidebar-rail: 96px !important;
  }

  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar {
    flex-basis: 96px !important;
    max-width: 96px !important;
    min-width: 96px !important;
    padding: 10px 8px !important;
    width: 96px !important;
  }

  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text,
  html body:not(.portal-page-shell) .user-name {
    display: none !important;
  }

  html body:not(.portal-page-shell) .brand,
  html[data-sidebar] body:not(.portal-page-shell) .brand,
  html body:not(.portal-page-shell) .nav a,
  html body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar] body:not(.portal-page-shell) .nav a,
  html[data-sidebar] body:not(.portal-page-shell) .nav-simple a {
    justify-content: center !important;
  }

  html body:not(.portal-page-shell) .finance-dash-grid,
  html body:not(.portal-page-shell) .sigma-dashboard-charts,
  html body:not(.portal-page-shell) .owner-dashboard-visuals,
  html body:not(.portal-page-shell) .inventory-dashboard-hero,
  html body:not(.portal-page-shell) .production-dashboard-body,
  html body:not(.portal-page-shell) .purchase-entry-layout,
  html body:not(.portal-page-shell) .hr-dashboard-workspace,
  html body:not(.portal-page-shell) .hr-tab-overview {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ERP_SIGMA_TABLET_LARGE_FIT_V51_SIDEBAR_FINAL */
@media (min-width: 768px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ERP_SIGMA_HR_TABLET_DENSITY_EOF_LOCK_V49_20260625_ACTIVE */
@media (min-width: 600px) and (max-width: 980px) {
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .hr-overview-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .hr-overview-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ERP_SIGMA_TABLET_LAPTOP_CANVAS_EOF_LOCK_V50_20260625_ACTIVE */
@media (min-width: 768px) and (max-width: 1199px) and (pointer: coarse) {
  html:not(.portal-page-shell) {
    --sigma-tablet-canvas-width: 1366px !important;
    --sigma-tablet-canvas-scale: calc(100vw / 1366) !important;
    --sidebar-current: 252px !important;
    --sidebar-rail: 252px !important;
  }
  html, body:not(.portal-page-shell) {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    width: var(--sigma-tablet-canvas-width) !important;
    min-width: var(--sigma-tablet-canvas-width) !important;
    max-width: var(--sigma-tablet-canvas-width) !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
    transform: scale(var(--sigma-tablet-canvas-scale)) !important;
    transform-origin: top left !important;
  }
  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    grid-column: 1 !important;
    position: relative !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    flex: 0 0 252px !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    padding: 18px !important;
    transform: none !important;
    box-shadow: none !important;
  }
  html body:not(.portal-page-shell) .brand,
  html[data-sidebar] body:not(.portal-page-shell) .brand {
    justify-content: space-between !important;
    min-height: 58px !important;
    padding: 10px !important;
  }
  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img,
  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }
  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img {
    max-height: 46px !important;
    max-width: 150px !important;
  }
  html body:not(.portal-page-shell) .nav a,
  html body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar] body:not(.portal-page-shell) .nav a,
  html[data-sidebar] body:not(.portal-page-shell) .nav-simple a {
    display: flex !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  html body:not(.portal-page-shell) .main,
  html[data-sidebar] body:not(.portal-page-shell) .main {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
  }
  html body:not(.portal-page-shell) .topbar {
    min-height: 64px !important;
    padding: 10px 18px !important;
  }
  html body:not(.portal-page-shell) .content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 20px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  html body:not(.portal-page-shell) .finance-dash-grid,
  html body:not(.portal-page-shell) .sigma-dashboard-charts,
  html body:not(.portal-page-shell) .owner-dashboard-visuals,
  html body:not(.portal-page-shell) .inventory-dashboard-hero,
  html body:not(.portal-page-shell) .production-dashboard-body,
  html body:not(.portal-page-shell) .purchase-entry-layout,
  html body:not(.portal-page-shell) .hr-dashboard-workspace,
  html body:not(.portal-page-shell) .hr-tab-overview,
  html[data-sidebar] body:not(.portal-page-shell) .finance-dash-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-dashboard-visuals,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-hero,
  html[data-sidebar] body:not(.portal-page-shell) .production-dashboard-body,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-entry-layout,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-workspace,
  html[data-sidebar] body:not(.portal-page-shell) .hr-tab-overview {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html:not(.portal-page-shell) {
    --sidebar-current: 252px !important;
    --sidebar-rail: 252px !important;
  }
  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
  }
  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    flex-basis: 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    padding: 18px !important;
    position: relative !important;
    transform: none !important;
    width: 252px !important;
  }
  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }
}

/* ERP_SIGMA_TABLET_LAPTOP_CANVAS_V50_20260625_ACTIVE
   Khusus tablet: render layout laptop, lalu scale ke viewport tablet.
   Tidak menyentuh mobile dan tidak aktif di laptop pointer/fine. */
@media (min-width: 768px) and (max-width: 1199px) and (pointer: coarse) {
  html:not(.portal-page-shell) {
    --sigma-tablet-canvas-width: 1366px !important;
    --sigma-tablet-canvas-scale: calc(100vw / 1366) !important;
    --sidebar-current: 252px !important;
    --sidebar-rail: 252px !important;
  }

  html,
  body:not(.portal-page-shell) {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    width: var(--sigma-tablet-canvas-width) !important;
    min-width: var(--sigma-tablet-canvas-width) !important;
    max-width: var(--sigma-tablet-canvas-width) !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    min-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
    transform: scale(var(--sigma-tablet-canvas-scale)) !important;
    transform-origin: top left !important;
  }

  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    grid-column: 1 !important;
    position: relative !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    flex: 0 0 252px !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    min-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    padding: 18px !important;
    transform: none !important;
    box-shadow: none !important;
  }

  html body:not(.portal-page-shell) .brand,
  html[data-sidebar] body:not(.portal-page-shell) .brand {
    justify-content: space-between !important;
    min-height: 58px !important;
    padding: 10px !important;
  }

  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text,
  html body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }

  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img {
    max-height: 46px !important;
    max-width: 150px !important;
  }

  html body:not(.portal-page-shell) .nav a,
  html body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar] body:not(.portal-page-shell) .nav a,
  html[data-sidebar] body:not(.portal-page-shell) .nav-simple a {
    display: flex !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  html body:not(.portal-page-shell) .main,
  html[data-sidebar] body:not(.portal-page-shell) .main {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    min-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
  }

  html body:not(.portal-page-shell) .topbar {
    min-height: 64px !important;
    padding: 10px 18px !important;
  }

  html body:not(.portal-page-shell) .content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 20px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .finance-dash-grid,
  html body:not(.portal-page-shell) .sigma-dashboard-charts,
  html body:not(.portal-page-shell) .owner-dashboard-visuals,
  html body:not(.portal-page-shell) .inventory-dashboard-hero,
  html body:not(.portal-page-shell) .production-dashboard-body,
  html body:not(.portal-page-shell) .purchase-entry-layout,
  html body:not(.portal-page-shell) .hr-dashboard-workspace,
  html body:not(.portal-page-shell) .hr-tab-overview,
  html[data-sidebar] body:not(.portal-page-shell) .finance-dash-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-dashboard-visuals,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-hero,
  html[data-sidebar] body:not(.portal-page-shell) .production-dashboard-body,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-entry-layout,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-workspace,
  html[data-sidebar] body:not(.portal-page-shell) .hr-tab-overview {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html:not(.portal-page-shell) {
    --sidebar-current: 252px !important;
    --sidebar-rail: 252px !important;
  }

  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
  }

  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    flex-basis: 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    padding: 18px !important;
    position: relative !important;
    transform: none !important;
    width: 252px !important;
  }

  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .hr-overview-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ERP_SIGMA_HR_TABLET_DENSITY_FINAL_LOCK_V49_20260625_ACTIVE */
@media (min-width: 600px) and (max-width: 980px) {
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .hr-overview-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .hr-overview-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .hr-overview-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Final clipping lockfix for tablet+mobile recap/table modules (no business logic changes). */
@media (max-width: 1800px) {
  html body:not(.portal-page-shell) .finance-table-wrap,
  html body:not(.portal-page-shell) .table-wrap,
  html body:not(.portal-page-shell) .table-scroll,
  html body:not(.portal-page-shell) .table-responsive,
  html body:not(.portal-page-shell) .sales-recap-table-wrap,
  html body:not(.portal-page-shell) .sales-recap-card .sales-recap-table-wrap,
  html body:not(.portal-page-shell) .sales-dashboard-recap .sales-recap-table-wrap,
  html body:not(.portal-page-shell) .sales-recap-table-card .sales-recap-table-wrap,
  html body:not(.portal-page-shell) .production-recap-table-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  html body:not(.portal-page-shell) .finance-table-wrap table,
  html body:not(.portal-page-shell) .table-wrap table,
  html body:not(.portal-page-shell) .table-scroll table,
  html body:not(.portal-page-shell) .table-responsive table,
  html body:not(.portal-page-shell) .sales-recap-table,
  html body:not(.portal-page-shell) .production-recap-table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  html body:not(.portal-page-shell) .finance-table-wrap th,
  html body:not(.portal-page-shell) .finance-table-wrap td,
  html body:not(.portal-page-shell) .table-wrap th,
  html body:not(.portal-page-shell) .table-wrap td,
  html body:not(.portal-page-shell) .table-scroll th,
  html body:not(.portal-page-shell) .table-scroll td,
  html body:not(.portal-page-shell) .table-responsive th,
  html body:not(.portal-page-shell) .table-responsive td,
  html body:not(.portal-page-shell) .sales-recap-table th,
  html body:not(.portal-page-shell) .sales-recap-table td,
  html body:not(.portal-page-shell) .production-recap-table th,
  html body:not(.portal-page-shell) .production-recap-table td,
  html body:not(.portal-page-shell) .sales-dashboard-recap .sales-recap-table-wrap td,
  html body:not(.portal-page-shell) .sales-dashboard-recap .sales-recap-table-wrap th,
  html body:not(.portal-page-shell) .production-recap-table-wrap td,
  html body:not(.portal-page-shell) .production-recap-table-wrap th,
  html body:not(.portal-page-shell) .sales-recap-table-card .sales-recap-table-wrap td,
  html body:not(.portal-page-shell) .sales-recap-table-card .sales-recap-table-wrap th {
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }
}

html:not(.portal-page-shell),
body:not(.portal-page-shell) {
  max-width: 100%;
  overflow: hidden !important;
}

html[data-sidebar="collapsed"] {
  --sidebar-current: var(--sidebar-rail);
}

body:not(.portal-page-shell) .app {
  display: grid !important;
  grid-template-columns: var(--sidebar-current) minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

body:not(.portal-page-shell) .sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  z-index: 40 !important;
  width: var(--sidebar-current) !important;
  min-width: 0 !important;
  max-width: var(--sidebar-current) !important;
  flex: 0 0 var(--sidebar-current) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body:not(.portal-page-shell) .main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  margin-left: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  overflow: hidden !important;
}

body:not(.portal-page-shell) .topbar {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  left: auto !important;
  transform: none !important;
}

body:not(.portal-page-shell) .content {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  margin-left: 0 !important;
  left: auto !important;
  transform: none !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding: var(--tablet-page-pad) !important;
}

body:not(.portal-page-shell) .content > *,
body:not(.portal-page-shell) .panel,
body:not(.portal-page-shell) .card,
body:not(.portal-page-shell) .section,
body:not(.portal-page-shell) .module-card,
body:not(.portal-page-shell) .dashboard-card,
body:not(.portal-page-shell) .finance-card,
body:not(.portal-page-shell) .finance-page,
body:not(.portal-page-shell) .finance-content,
body:not(.portal-page-shell) .owner-dashboard,
body:not(.portal-page-shell) .production-clean-page {
  min-width: 0 !important;
  max-width: 100% !important;
}

body:not(.portal-page-shell) .card,
body:not(.portal-page-shell) .panel,
body:not(.portal-page-shell) .section,
body:not(.portal-page-shell) .module-card,
body:not(.portal-page-shell) .dashboard-card,
body:not(.portal-page-shell) .finance-card {
  overflow: hidden;
  overflow-wrap: break-word;
}

body:not(.portal-page-shell) .sidebar-backdrop {
  display: none;
}

html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand {
  justify-content: center !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand-logo,
html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav-text,
html[data-sidebar="collapsed"] body:not(.portal-page-shell) .user-name {
  display: none !important;
}

html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav-simple a,
html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav a {
  justify-content: center !important;
  grid-template-columns: 34px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body:not(.portal-page-shell) .metric-value,
body:not(.portal-page-shell) .currency-value,
body:not(.portal-page-shell) .money-value,
body:not(.portal-page-shell) .finance-money,
body:not(.portal-page-shell) .finance-income-value,
body:not(.portal-page-shell) .finance-kpi-card strong,
body:not(.portal-page-shell) .kpi-card strong,
body:not(.portal-page-shell) .stat-card strong,
body:not(.portal-page-shell) .card strong,
body:not(.portal-page-shell) .owner-score-value,
body:not(.portal-page-shell) .hr-payroll-value,
body:not(.portal-page-shell) [data-currency],
body:not(.portal-page-shell) td:last-child,
body:not(.portal-page-shell) th:last-child {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body:not(.portal-page-shell) .metric-value,
body:not(.portal-page-shell) .currency-value,
body:not(.portal-page-shell) .finance-kpi-card strong,
body:not(.portal-page-shell) .kpi-card strong,
body:not(.portal-page-shell) .stat-card strong {
  font-size: clamp(1.05rem, 2.1vw, 2rem) !important;
  line-height: 1.12 !important;
}

body:not(.portal-page-shell) input,
body:not(.portal-page-shell) select,
body:not(.portal-page-shell) textarea,
body:not(.portal-page-shell) button {
  max-width: 100% !important;
  min-width: 0;
}

body:not(.portal-page-shell) .table-scroll,
body:not(.portal-page-shell) .table-wrap,
body:not(.portal-page-shell) .table-responsive,
body:not(.portal-page-shell) .finance-table-wrap,
body:not(.portal-page-shell) .panel-body:has(> table),
body:not(.portal-page-shell) .card:has(> table) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-inline: contain !important;
}

body:not(.portal-page-shell) .table-scroll table,
body:not(.portal-page-shell) .table-wrap table,
body:not(.portal-page-shell) .table-responsive table,
body:not(.portal-page-shell) .finance-table-wrap table {
  width: max-content !important;
  min-width: min(680px, 100%) !important;
  max-width: none !important;
}

body:not(.portal-page-shell) .tabs-scroll,
body:not(.portal-page-shell) .module-tabs,
body:not(.portal-page-shell) .sales-module-tabs,
body:not(.portal-page-shell) .sales-modern-tabs,
body:not(.portal-page-shell) .finance-tabs,
body:not(.portal-page-shell) .finance-page .finance-tab-row,
body:not(.portal-page-shell) .finance-page .finance-quick-grid.finance-quick-grid-top,
body:not(.portal-page-shell) .purchase-tabs,
body:not(.portal-page-shell) .inventory-tabs,
body:not(.portal-page-shell) .hr-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scrollbar-width: thin !important;
  scroll-snap-type: x proximity;
}

body:not(.portal-page-shell) .module-tabs > *,
body:not(.portal-page-shell) .sales-module-tabs > *,
body:not(.portal-page-shell) .finance-tabs > *,
body:not(.portal-page-shell) .finance-page .finance-tab-row > *,
body:not(.portal-page-shell) .finance-page .finance-quick-grid.finance-quick-grid-top > *,
body:not(.portal-page-shell) .purchase-tabs > *,
body:not(.portal-page-shell) .inventory-tabs > *,
body:not(.portal-page-shell) .hr-tabs > * {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  scroll-snap-align: start;
}

body:not(.portal-page-shell) .finance-quick-rail .finance-quick-action,
body:not(.portal-page-shell) .finance-quick-action {
  min-width: max-content !important;
  grid-template-columns: 28px max-content !important;
}

body:not(.portal-page-shell) .finance-quick-action strong {
  display: inline-block !important;
  max-height: none !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  -webkit-line-clamp: unset !important;
}

body:not(.portal-page-shell) .finance-page .finance-quick-grid.finance-quick-grid-top {
  grid-template-columns: none !important;
}

body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
body:not(.portal-page-shell) .owner-kpi-grid,
body:not(.portal-page-shell) .option2-kpi-grid,
body:not(.portal-page-shell) .kpi-grid,
body:not(.portal-page-shell) .stats-grid,
body:not(.portal-page-shell) .stat-grid,
body:not(.portal-page-shell) .finance-kpi-grid,
body:not(.portal-page-shell) .inventory-dashboard-kpis,
body:not(.portal-page-shell) .production-compact-kpis,
body:not(.portal-page-shell) .purchase-kpi-grid,
body:not(.portal-page-shell) .settings-grid {
  gap: var(--tablet-page-gap) !important;
}

body:not(.portal-page-shell) .form-grid,
body:not(.portal-page-shell) form.form-grid,
body:not(.portal-page-shell) .filters-grid,
body:not(.portal-page-shell) .compact-filter {
  min-width: 0 !important;
  max-width: 100% !important;
  gap: var(--tablet-page-gap) !important;
}

body:not(.portal-page-shell) canvas,
body:not(.portal-page-shell) svg {
  max-width: 100%;
}

body:not(.portal-page-shell) .production-clean-page a[href^="http"],
body:not(.portal-page-shell) .production-clean-page td,
body:not(.portal-page-shell) .production-clean-page .mono,
body:not(.portal-page-shell) .production-clean-page code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body:not(.portal-page-shell) .toast,
body:not(.portal-page-shell) .error-toast,
body:not(.portal-page-shell) .sigma-toast,
body:not(.portal-page-shell) .client-error-toast,
body:not(.portal-page-shell) [data-toast],
body:not(.portal-page-shell) [data-error-toast],
body:not(.portal-page-shell) .alert-floating,
body:not(.portal-page-shell) .page-error-toast {
  max-width: min(720px, calc(100vw - var(--sidebar-rail) - 24px)) !important;
  max-height: min(50dvh, 420px) !important;
  overflow: auto !important;
  inset-inline: auto max(12px, env(safe-area-inset-right)) !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

@media (min-width: 1200px) {
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    grid-template-columns: var(--sidebar-rail) minmax(0, 1fr) !important;
  }

  body:not(.portal-page-shell) .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 600px) and (max-width: 1800px) {
  :root {
    --sidebar-current: var(--sidebar-rail);
  }

  html[data-sidebar="expanded"],
  html[data-sidebar="collapsed"] {
    --sidebar-current: var(--sidebar-rail);
  }

  body:not(.portal-page-shell) .app {
    grid-template-columns: var(--sidebar-rail) minmax(0, 1fr) !important;
  }

  body:not(.portal-page-shell) .sidebar {
    width: var(--sidebar-rail) !important;
    max-width: var(--sidebar-rail) !important;
    flex-basis: var(--sidebar-rail) !important;
    padding: 10px 9px !important;
  }

  body:not(.portal-page-shell) .brand {
    justify-content: center !important;
    padding: 8px !important;
  }

  body:not(.portal-page-shell) .brand-logo,
  body:not(.portal-page-shell) .nav-text,
  body:not(.portal-page-shell) .user-name {
    display: none !important;
  }

  body:not(.portal-page-shell) .nav-simple a,
  body:not(.portal-page-shell) .nav a {
    justify-content: center !important;
    min-height: 56px !important;
    padding: 10px !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 60 !important;
    width: min(300px, calc(100vw - 28px)) !important;
    max-width: min(300px, calc(100vw - 28px)) !important;
    flex-basis: min(300px, calc(100vw - 28px)) !important;
    padding: 18px !important;
    box-shadow: 22px 0 54px rgba(2, 12, 27, .32) !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand {
    justify-content: space-between !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand-logo {
    display: block !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .nav-text {
    display: inline !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .nav a {
    justify-content: flex-start !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    padding: 10px 12px !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 55 !important;
    background: rgba(2, 12, 27, .38) !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body:not(.portal-page-shell) .content {
    padding: var(--tablet-page-pad) !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  body:not(.portal-page-shell) .option2-kpi-grid,
  body:not(.portal-page-shell) .kpi-grid,
  body:not(.portal-page-shell) .stats-grid,
  body:not(.portal-page-shell) .stat-grid,
  body:not(.portal-page-shell) .finance-kpi-grid,
  body:not(.portal-page-shell) .inventory-dashboard-kpis,
  body:not(.portal-page-shell) .production-compact-kpis,
  body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .finance-dash-grid,
  body:not(.portal-page-shell) .sigma-dashboard-charts,
  body:not(.portal-page-shell) .owner-dashboard-visuals,
  body:not(.portal-page-shell) .production-dashboard-body,
  body:not(.portal-page-shell) .inventory-dashboard-hero,
  body:not(.portal-page-shell) .reports-grid,
  body:not(.portal-page-shell) .management-grid {
    grid-template-columns: 1fr !important;
  }

  body:not(.portal-page-shell) .inventory-quick-grid,
  body:not(.portal-page-shell) .purchase-dashboard-actions,
  body:not(.portal-page-shell) .production-dashboard-links,
  body:not(.portal-page-shell) .quick-action-grid,
  body:not(.portal-page-shell) .sales-quick-grid,
  body:not(.portal-page-shell) .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .form-grid,
  body:not(.portal-page-shell) form.form-grid,
  body:not(.portal-page-shell) .filters-grid,
  body:not(.portal-page-shell) .compact-filter,
  body:not(.portal-page-shell) .payment-entry-form,
  body:not(.portal-page-shell) .asset-opening-form {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 600px) and (max-width: 1800px) {
  html[data-sidebar] body.tablet-mobile-mode:not(.portal-page-shell) {
    --sigma-tablet-rail: var(--sidebar-rail) !important;
  }

  html[data-sidebar] body.tablet-mobile-mode:not(.portal-page-shell) .app,
  html[data-sidebar] body.tablet-mobile-mode.sidebar-collapsed:not(.portal-page-shell) .app,
  html[data-sidebar] body.tablet-mobile-mode.sidebar-expanded:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body.tablet-mobile-mode:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body.tablet-mobile-mode:not(.portal-page-shell) .app {
    grid-template-columns: var(--sidebar-rail) minmax(0, 1fr) !important;
  }

  html[data-sidebar] body.tablet-mobile-mode:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body.tablet-mobile-mode.sidebar-collapsed:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body.tablet-mobile-mode:not(.portal-page-shell) .sidebar {
    width: var(--sidebar-rail) !important;
    min-width: 0 !important;
    max-width: var(--sidebar-rail) !important;
    flex-basis: var(--sidebar-rail) !important;
  }

  html[data-sidebar] body.tablet-mobile-mode:not(.portal-page-shell) .main,
  html[data-sidebar] body.tablet-mobile-mode.sidebar-collapsed:not(.portal-page-shell) .main,
  html[data-sidebar] body.tablet-mobile-mode.sidebar-expanded:not(.portal-page-shell) .main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    left: auto !important;
    transform: none !important;
  }

  html[data-sidebar="expanded"] body.tablet-mobile-mode:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body.tablet-mobile-mode.sidebar-expanded:not(.portal-page-shell) .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 60 !important;
    width: min(300px, calc(100vw - 28px)) !important;
    max-width: min(300px, calc(100vw - 28px)) !important;
    flex-basis: min(300px, calc(100vw - 28px)) !important;
    padding: 18px !important;
    box-shadow: 22px 0 54px rgba(2, 12, 27, .32) !important;
  }

  html[data-sidebar="expanded"] body.tablet-mobile-mode:not(.portal-page-shell) .brand,
  html[data-sidebar="expanded"] body.tablet-mobile-mode.sidebar-expanded:not(.portal-page-shell) .brand {
    justify-content: space-between !important;
  }

  html[data-sidebar="expanded"] body.tablet-mobile-mode:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="expanded"] body.tablet-mobile-mode:not(.portal-page-shell) .nav-text,
  html[data-sidebar="expanded"] body.tablet-mobile-mode.sidebar-expanded:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="expanded"] body.tablet-mobile-mode.sidebar-expanded:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }

  html[data-sidebar="expanded"] body.tablet-mobile-mode:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="expanded"] body.tablet-mobile-mode.sidebar-expanded:not(.portal-page-shell) .brand-logo {
    display: block !important;
  }

  html[data-sidebar="expanded"] body.tablet-mobile-mode:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar="expanded"] body.tablet-mobile-mode:not(.portal-page-shell) .nav a,
  html[data-sidebar="expanded"] body.tablet-mobile-mode.sidebar-expanded:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar="expanded"] body.tablet-mobile-mode.sidebar-expanded:not(.portal-page-shell) .nav a {
    justify-content: flex-start !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    padding: 10px 12px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1800px) and (orientation: landscape) {
  body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  body:not(.portal-page-shell) .option2-kpi-grid,
  body:not(.portal-page-shell) .kpi-grid,
  body:not(.portal-page-shell) .stats-grid,
  body:not(.portal-page-shell) .stat-grid,
  body:not(.portal-page-shell) .finance-kpi-grid,
  body:not(.portal-page-shell) .inventory-dashboard-kpis,
  body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .production-compact-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .form-grid,
  body:not(.portal-page-shell) form.form-grid,
  body:not(.portal-page-shell) .filters-grid,
  body:not(.portal-page-shell) .compact-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 599px) {
  :root {
    --sidebar-current: 0px;
  }

  body:not(.portal-page-shell) .app {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:not(.portal-page-shell) .main {
    grid-column: 1 !important;
  }

  body:not(.portal-page-shell) .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 60 !important;
    display: flex !important;
    width: min(300px, calc(100vw - 28px)) !important;
    max-width: min(300px, calc(100vw - 28px)) !important;
    transform: translateX(-104%) !important;
    transition: transform .18s ease !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar {
    transform: translateX(0) !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 55 !important;
    background: rgba(2, 12, 27, .38) !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body:not(.portal-page-shell) .brand-logo,
  body:not(.portal-page-shell) .nav-text {
    display: inline !important;
  }

  body:not(.portal-page-shell) .content {
    padding: 10px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  body:not(.portal-page-shell) .option2-kpi-grid,
  body:not(.portal-page-shell) .kpi-grid,
  body:not(.portal-page-shell) .stats-grid,
  body:not(.portal-page-shell) .stat-grid,
  body:not(.portal-page-shell) .finance-kpi-grid,
  body:not(.portal-page-shell) .inventory-dashboard-kpis,
  body:not(.portal-page-shell) .production-compact-kpis,
  body:not(.portal-page-shell) .purchase-kpi-grid,
  body:not(.portal-page-shell) .inventory-quick-grid,
  body:not(.portal-page-shell) .purchase-dashboard-actions,
  body:not(.portal-page-shell) .production-dashboard-links,
  body:not(.portal-page-shell) .quick-action-grid,
  body:not(.portal-page-shell) .sales-quick-grid,
  body:not(.portal-page-shell) .settings-grid,
  body:not(.portal-page-shell) .form-grid,
  body:not(.portal-page-shell) form.form-grid,
  body:not(.portal-page-shell) .filters-grid,
  body:not(.portal-page-shell) .compact-filter {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1800px) {
  body:not(.portal-page-shell) .content,
  body:not(.portal-page-shell) .content-inner,
  body:not(.portal-page-shell) .module,
  body:not(.portal-page-shell) .module-content,
  body:not(.portal-page-shell) .sales-page,
  body:not(.portal-page-shell) .owner-dashboard,
  body:not(.portal-page-shell) .finance-page,
  body:not(.portal-page-shell) .inventory-page,
  body:not(.portal-page-shell) .production-page,
  body:not(.portal-page-shell) .purchase-page,
  body:not(.portal-page-shell) .purchase-modern-page,
  body:not(.portal-page-shell) .hr-page,
  body:not(.portal-page-shell) .settings-page,
  body:not(.portal-page-shell) .reports-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body:not(.portal-page-shell) .content *,
  body:not(.portal-page-shell) .content *:before,
  body:not(.portal-page-shell) .content *:after {
    box-sizing: border-box;
    max-width: 100%;
  }

  body:not(.portal-page-shell) .content > div,
  body:not(.portal-page-shell) .content > section,
  body:not(.portal-page-shell) .content > main,
  body:not(.portal-page-shell) .content > form,
  body:not(.portal-page-shell) .content > article {
    min-width: 0;
  }

  body:not(.portal-page-shell) .card,
  body:not(.portal-page-shell) .panel,
  body:not(.portal-page-shell) .section,
  body:not(.portal-page-shell) .module-card,
  body:not(.portal-page-shell) .finance-card {
    overflow-x: clip;
    overflow-y: hidden;
  }

  body:not(.portal-page-shell) .module-tabs > button,
  body:not(.portal-page-shell) .finance-page .finance-tab-row > button,
  body:not(.portal-page-shell) .purchase-tabs > button,
  body:not(.portal-page-shell) .sales-module-tabs > button,
  body:not(.portal-page-shell) .inventory-tabs > button,
  body:not(.portal-page-shell) .hr-tabs > button,
  body:not(.portal-page-shell) .dashboard-tab {
    min-width: max-content;
    white-space: nowrap;
    padding-inline: 12px;
    flex: 0 0 auto;
  }

  body:not(.portal-page-shell) .table-wrap,
  body:not(.portal-page-shell) .table-scroll,
  body:not(.portal-page-shell) .table-responsive,
  body:not(.portal-page-shell) .finance-table-wrap,
  body:not(.portal-page-shell) .panel:has(> table),
  body:not(.portal-page-shell) .card:has(> table),
  body:not(.portal-page-shell) .grid-table,
  body:not(.portal-page-shell) .data-table,
  body:not(.portal-page-shell) .chart-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.portal-page-shell) .table-wrap table,
  body:not(.portal-page-shell) .table-scroll table,
  body:not(.portal-page-shell) .table-responsive table,
  body:not(.portal-page-shell) .finance-table-wrap table,
  body:not(.portal-page-shell) .panel:has(> table) table,
  body:not(.portal-page-shell) .card:has(> table) table,
  body:not(.portal-page-shell) .grid-table table,
  body:not(.portal-page-shell) .data-table table,
  body:not(.portal-page-shell) .chart-table table {
    width: max-content;
    min-width: 100%;
    max-width: none;
    table-layout: auto;
  }

  body:not(.portal-page-shell) .form-grid,
  body:not(.portal-page-shell) .filters-grid,
  body:not(.portal-page-shell) .compact-filter,
  body:not(.portal-page-shell) form.form-grid,
  body:not(.portal-page-shell) .payment-entry-form,
  body:not(.portal-page-shell) .asset-opening-form,
  body:not(.portal-page-shell) .quick-action-grid,
  body:not(.portal-page-shell) .action-grid,
  body:not(.portal-page-shell) .action-grid-compact {
    grid-template-columns: 1fr !important;
  }

  body:not(.portal-page-shell) .two-col,
  body:not(.portal-page-shell) .col-2,
  body:not(.portal-page-shell) .purchase-dashboard-actions,
  body:not(.portal-page-shell) .inventory-quick-grid,
  body:not(.portal-page-shell) .sales-quick-grid,
  body:not(.portal-page-shell) .production-dashboard-links,
  body:not(.portal-page-shell) .owner-kpi-grid,
  body:not(.portal-page-shell) .option2-kpi-grid,
  body:not(.portal-page-shell) .kpi-grid,
  body:not(.portal-page-shell) .stats-grid,
  body:not(.portal-page-shell) .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .settings-grid,
  body:not(.portal-page-shell) .reports-grid,
  body:not(.portal-page-shell) .management-grid {
    grid-template-columns: 1fr !important;
  }

  body:not(.portal-page-shell) .panel-body,
  body:not(.portal-page-shell) .card-body,
  body:not(.portal-page-shell) .finance-content,
  body:not(.portal-page-shell) .dashboard-body,
  body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  body:not(.portal-page-shell) .finance-kpi-grid,
  body:not(.portal-page-shell) .inventory-dashboard-kpis,
  body:not(.portal-page-shell) .production-compact-kpis,
  body:not(.portal-page-shell) .purchase-kpi-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body:not(.portal-page-shell) .page-title,
  body:not(.portal-page-shell) .section-title,
  body:not(.portal-page-shell) .card h2,
  body:not(.portal-page-shell) .card h3 {
    white-space: normal;
    word-break: break-word;
  }

  body:not(.portal-page-shell) .sales-dashboard-kpi-grid .metric-title,
  body:not(.portal-page-shell) .finance-kpi-grid .kpi-title,
  body:not(.portal-page-shell) .inventory-dashboard-kpis .kpi-title,
  body:not(.portal-page-shell) .production-compact-kpis .metric-title,
  body:not(.portal-page-shell) .purchase-kpi-grid .kpi-title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body:not(.portal-page-shell) .finance-money,
  body:not(.portal-page-shell) .currency-value,
  body:not(.portal-page-shell) .money-value,
  body:not(.portal-page-shell) .owner-score-value {
    text-align: right;
  }

  body:not(.portal-page-shell) .finance-money,
  body:not(.portal-page-shell) .currency-value {
    min-width: max-content;
  }
}

/* ERP_SIGMA_TABLET_VISUAL_FIT_V26_20260624_ACTIVE
   UI-only fit pass: compact module internals on tablet without changing data flow. */
@media (min-width: 600px) and (max-width: 1800px) {
  body:not(.portal-page-shell) {
    --sigma-card-pad-tablet: clamp(8px, 1.05vw, 12px);
    --sigma-card-gap-tablet: clamp(7px, .95vw, 12px);
  }

  body:not(.portal-page-shell) .topbar {
    min-height: clamp(48px, 6.4vw, 60px) !important;
    padding: 6px clamp(10px, 1.2vw, 16px) !important;
  }

  body:not(.portal-page-shell) .content {
    gap: var(--sigma-card-gap-tablet) !important;
    padding: clamp(8px, 1.2vw, 14px) !important;
  }

  body:not(.portal-page-shell) .panel,
  body:not(.portal-page-shell) .card,
  body:not(.portal-page-shell) .summary-card,
  body:not(.portal-page-shell) .dashboard-card,
  body:not(.portal-page-shell) .finance-card {
    min-width: 0 !important;
  }

  body:not(.portal-page-shell) .panel-header,
  body:not(.portal-page-shell) .panel-body {
    padding: var(--sigma-card-pad-tablet) !important;
  }

  body:not(.portal-page-shell) .tab-nav,
  body:not(.portal-page-shell) .tabs,
  body:not(.portal-page-shell) .sales-modern-tabs,
  body:not(.portal-page-shell) .purchase-clean-tabs,
  body:not(.portal-page-shell) .production-work-nav,
  body:not(.portal-page-shell) .finance-quick-grid {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:not(.portal-page-shell) .tab-nav a,
  body:not(.portal-page-shell) .tabs a,
  body:not(.portal-page-shell) .sales-modern-tabs a,
  body:not(.portal-page-shell) .purchase-clean-tabs a,
  body:not(.portal-page-shell) .production-work-nav a,
  body:not(.portal-page-shell) .finance-quick-grid a,
  body:not(.portal-page-shell) .btn,
  body:not(.portal-page-shell) button {
    min-height: 34px !important;
    min-width: 0 !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
  }

  body:not(.portal-page-shell) input,
  body:not(.portal-page-shell) select,
  body:not(.portal-page-shell) textarea {
    min-width: 0 !important;
    width: 100% !important;
  }

  body:not(.portal-page-shell) .money,
  body:not(.portal-page-shell) .amount,
  body:not(.portal-page-shell) .currency,
  body:not(.portal-page-shell) .rupiah,
  body:not(.portal-page-shell) [data-currency],
  body:not(.portal-page-shell) .kpi-value,
  body:not(.portal-page-shell) .card strong,
  body:not(.portal-page-shell) .summary-card strong {
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  body:not(.portal-page-shell) .client-error-toast,
  body:not(.portal-page-shell) .toast-error,
  body:not(.portal-page-shell) .page-error-toast,
  body:not(.portal-page-shell) [data-error-toast] {
    bottom: 12px !important;
    left: auto !important;
    max-width: min(380px, calc(100vw - var(--sidebar-current) - 32px)) !important;
    right: 12px !important;
    transform: none !important;
    z-index: 80 !important;
  }
}

@media (min-width: 900px) and (max-width: 1800px) and (orientation: landscape) {
  body:not(.portal-page-shell) .content {
    padding: 8px 10px !important;
  }

  body:not(.portal-page-shell) .dashboard-grid,
  body:not(.portal-page-shell) .settings-grid,
  body:not(.portal-page-shell) .reports-grid,
  body:not(.portal-page-shell) .cards-grid,
  body:not(.portal-page-shell) .quick-action-grid {
    gap: 8px !important;
  }

  body:not(.portal-page-shell) .settings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .settings-grid .card,
  body:not(.portal-page-shell) .settings-grid .panel,
  body:not(.portal-page-shell) .setting-card {
    padding: 10px !important;
  }

  body:not(.portal-page-shell) .filters-grid,
  body:not(.portal-page-shell) .report-filter-grid,
  body:not(.portal-page-shell) form.form-grid {
    gap: 8px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .reports-grid,
  body:not(.portal-page-shell) .report-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap {
    padding: 10px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-dashboard-kpi-grid {
    gap: 8px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    margin-bottom: 8px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-dashboard-kpi {
    display: grid !important;
    gap: 5px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    min-height: 74px !important;
    padding: 8px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-dashboard-kpi-icon {
    flex-basis: 30px !important;
    font-size: 12px !important;
    height: 30px !important;
    width: 30px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-dashboard-kpi small {
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-dashboard-kpi strong {
    font-size: clamp(18px, 2vw, 22px) !important;
    margin-top: 1px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-dashboard-kpi em {
    font-size: 9.5px !important;
    line-height: 1.12 !important;
    margin-top: 1px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-quick-actions {
    gap: 8px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-bottom: 8px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-quick-action {
    gap: 2px 8px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    min-height: 52px !important;
    padding: 8px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-quick-action span {
    height: 30px !important;
    width: 30px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-quick-action strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-quick-action em {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-recap-grid {
    gap: 8px !important;
    grid-template-columns: minmax(260px, .82fr) minmax(340px, 1.18fr) !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-status-row {
    gap: 6px !important;
    grid-template-columns: 108px minmax(54px, 1fr) 30px 58px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
  }

  body:not(.portal-page-shell) .sales-recap-table th,
  body:not(.portal-page-shell) .sales-recap-table td {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  body:not(.portal-page-shell) .sales-recap-table {
    min-width: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  body:not(.portal-page-shell) .sales-recap-table th,
  body:not(.portal-page-shell) .sales-recap-table td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:not(.portal-page-shell) .sales-recap-table th:nth-child(1),
  body:not(.portal-page-shell) .sales-recap-table td:nth-child(1) {
    width: 32% !important;
  }

  body:not(.portal-page-shell) .sales-recap-table th:nth-child(2),
  body:not(.portal-page-shell) .sales-recap-table td:nth-child(2),
  body:not(.portal-page-shell) .sales-recap-table th:nth-child(3),
  body:not(.portal-page-shell) .sales-recap-table td:nth-child(3) {
    text-align: center !important;
    width: 13% !important;
  }

  body:not(.portal-page-shell) .sales-recap-table th:nth-child(4),
  body:not(.portal-page-shell) .sales-recap-table td:nth-child(4) {
    text-align: right !important;
    width: 24% !important;
  }

  body:not(.portal-page-shell) .sales-recap-table th:nth-child(5),
  body:not(.portal-page-shell) .sales-recap-table td:nth-child(5) {
    text-align: right !important;
    width: 18% !important;
  }

  body:not(.portal-page-shell) .inventory-dashboard-modern {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  body:not(.portal-page-shell) .inventory-dashboard-hero {
    gap: 8px !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(240px, .88fr) !important;
  }

  body:not(.portal-page-shell) .inventory-dashboard-kpis {
    gap: 8px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .inventory-kpi-card {
    gap: 7px !important;
    grid-template-columns: 31px minmax(0, 1fr) !important;
    min-height: 66px !important;
    padding: 8px !important;
  }

  body:not(.portal-page-shell) .inventory-kpi-icon,
  body:not(.portal-page-shell) .inventory-quick-icon {
    border-radius: 9px !important;
    height: 31px !important;
    width: 31px !important;
  }

  body:not(.portal-page-shell) .inventory-kpi-copy small,
  body:not(.portal-page-shell) .inventory-quick-copy small {
    font-size: 9px !important;
    line-height: 1.08 !important;
  }

  body:not(.portal-page-shell) .inventory-kpi-copy strong {
    font-size: clamp(18px, 2.1vw, 24px) !important;
  }

  body:not(.portal-page-shell) .inventory-kpi-copy em {
    font-size: 9.5px !important;
    margin-top: 2px !important;
  }

  body:not(.portal-page-shell) .inventory-focus-card {
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
    min-height: 150px !important;
    padding: 10px !important;
  }

  body:not(.portal-page-shell) .inventory-focus-card h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  body:not(.portal-page-shell) .inventory-focus-list {
    gap: 7px !important;
  }

  body:not(.portal-page-shell) .inventory-focus-list a {
    height: 32px !important;
    padding: 0 8px !important;
  }

  body:not(.portal-page-shell) .inventory-focus-meter strong {
    font-size: 28px !important;
  }

  body:not(.portal-page-shell) .inventory-quick-grid {
    gap: 8px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .inventory-quick-card {
    gap: 7px !important;
    grid-template-columns: 31px minmax(0, 1fr) !important;
    height: 58px !important;
    padding: 8px !important;
  }

  body:not(.portal-page-shell) .inventory-quick-copy strong {
    font-size: 14px !important;
  }

  body:not(.portal-page-shell) .production-clean-page .production-dashboard-modern {
    padding: 10px !important;
  }

  body:not(.portal-page-shell) .production-clean-page .production-compact-kpis {
    gap: 8px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-bottom: 8px !important;
  }

  body:not(.portal-page-shell) .production-clean-page .production-compact-kpi {
    gap: 7px !important;
    min-height: 66px !important;
    padding: 8px !important;
  }

  body:not(.portal-page-shell) .production-clean-page .production-kpi-icon {
    flex-basis: 31px !important;
    height: 31px !important;
    width: 31px !important;
  }

  body:not(.portal-page-shell) .production-clean-page .production-compact-kpi small {
    font-size: 9px !important;
  }

  body:not(.portal-page-shell) .production-clean-page .production-compact-kpi strong {
    font-size: 22px !important;
  }

  body:not(.portal-page-shell) .production-clean-page .production-compact-kpi em {
    font-size: 9.5px !important;
    margin-top: 2px !important;
  }

  body:not(.portal-page-shell) .production-dashboard-body {
    gap: 8px !important;
    grid-template-columns: minmax(0, .82fr) minmax(300px, 1.18fr) !important;
  }

  body:not(.portal-page-shell) .production-dashboard-links {
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .production-dashboard-links .card {
    gap: 3px 8px !important;
    grid-template-columns: 31px minmax(0, 1fr) !important;
    min-height: 58px !important;
    padding: 8px !important;
  }

  body:not(.portal-page-shell) .production-dashboard-links .card span {
    height: 31px !important;
    width: 31px !important;
  }

  body:not(.portal-page-shell) .production-dashboard-links .card strong {
    font-size: 16px !important;
  }

  body:not(.portal-page-shell) .production-dashboard-links .card em {
    font-size: 9.5px !important;
  }

  body:not(.portal-page-shell) .production-status-row {
    gap: 6px !important;
    grid-template-columns: 104px minmax(58px, 1fr) 30px 58px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
  }

  body:not(.portal-page-shell) .production-recap-title {
    min-height: 34px !important;
    padding: 0 8px !important;
  }

  body:not(.portal-page-shell) .production-recap-table {
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body:not(.portal-page-shell) .production-recap-table th,
  body:not(.portal-page-shell) .production-recap-table td {
    font-size: 11px !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
    text-overflow: ellipsis !important;
  }

  body:not(.portal-page-shell) .production-recap-table td a,
  body:not(.portal-page-shell) .production-recap-table td span,
  body:not(.portal-page-shell) .production-recap-table td strong,
  body:not(.portal-page-shell) .production-recap-table td em {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:not(.portal-page-shell) .production-recap-table-wrap {
    overflow-x: hidden !important;
  }

  body:not(.portal-page-shell) .purchase-entry-layout {
    align-items: start !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 320px) !important;
  }

  body:not(.portal-page-shell) .purchasing-clean-page .purchase-clean-tabs {
    align-items: stretch !important;
    min-height: 42px !important;
    margin-bottom: 10px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body:not(.portal-page-shell) .purchasing-clean-page .purchase-clean-tabs a {
    height: 34px !important;
    min-height: 34px !important;
  }

  body:not(.portal-page-shell) .purchase-entry-fields,
  body:not(.portal-page-shell) .purchase-preview-card,
  body:not(.portal-page-shell) .payment-preview-card {
    min-width: 0 !important;
  }

  body:not(.portal-page-shell) .purchase-entry-fields .form-grid,
  body:not(.portal-page-shell) form.purchase-entry-form,
  body:not(.portal-page-shell) form.payment-entry-form {
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .purchase-entry-fields textarea,
  body:not(.portal-page-shell) form.purchase-entry-form textarea,
  body:not(.portal-page-shell) form.payment-entry-form textarea {
    min-height: 70px !important;
  }

  body:not(.portal-page-shell) .purchase-preview-card {
    padding: 10px !important;
  }

  body:not(.portal-page-shell) .hr-dashboard-clean,
  body:not(.portal-page-shell) .hr-enterprise-minimal {
    gap: 8px !important;
  }

  body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  body:not(.portal-page-shell) .hr-overview-grid {
    gap: 8px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .hr-dashboard-kpi-grid > *,
  body:not(.portal-page-shell) .hr-overview-grid > *,
  body:not(.portal-page-shell) .kpi-grid > * {
    min-height: 66px !important;
    min-width: 0 !important;
    padding: 8px !important;
  }

  body:not(.portal-page-shell) .hr-dashboard-kpi-grid strong,
  body:not(.portal-page-shell) .hr-overview-grid strong,
  body:not(.portal-page-shell) .kpi-grid .card strong {
    font-size: clamp(17px, 1.8vw, 22px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body:not(.portal-page-shell) .hr-action-panel .panel-body.hr-quick-actions,
  body:not(.portal-page-shell) .hr-quick-actions {
    gap: 8px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .hr-quick-action {
    min-height: 54px !important;
    padding: 8px !important;
  }

  body:not(.portal-page-shell) .hr-tab-overview {
    gap: 8px !important;
    grid-template-columns: minmax(0, .86fr) minmax(300px, 1.14fr) !important;
    padding: 10px !important;
  }
}

/* Final hardening for clipped/overlapping content on tablet. */
@media (min-width: 600px) and (max-width: 1800px), (max-width: 599px) {
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .content,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .content,
  body:not(.portal-page-shell) .content,
  body.tablet-mobile-mode:not(.portal-page-shell) .content,
  body.sidebar-expanded:not(.portal-page-shell) .content,
  body.sidebar-collapsed:not(.portal-page-shell) .content {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-width: 100dvw !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body:not(.portal-page-shell) .card,
  html body:not(.portal-page-shell) .panel,
  html body:not(.portal-page-shell) .section,
  html body:not(.portal-page-shell) .module-card,
  html body:not(.portal-page-shell) .finance-card,
  html body:not(.portal-page-shell) .panel-body,
  html body:not(.portal-page-shell) .card-body {
    overflow-x: visible !important;
  }

  html body:not(.portal-page-shell) .table-wrap,
  html body:not(.portal-page-shell) .table-scroll,
  html body:not(.portal-page-shell) .table-responsive,
  html body:not(.portal-page-shell) .finance-table-wrap,
  html body:not(.portal-page-shell) .panel:has(> table),
  html body:not(.portal-page-shell) .card:has(> table),
  html body:not(.portal-page-shell) .grid-table,
  html body:not(.portal-page-shell) .data-table,
  html body:not(.portal-page-shell) .chart-table,
  html body:not(.portal-page-shell) .sales-recap-table-wrap,
  html body:not(.portal-page-shell) .production-recap-table-wrap,
  html body:not(.portal-page-shell) .sales-recap-card .sales-recap-table-wrap,
  html body:not(.portal-page-shell) .sales-recap-table-card .sales-recap-table-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .sales-recap-table-wrap > table.sales-recap-table,
  html body:not(.portal-page-shell) .production-recap-table-wrap > table.production-recap-table {
    width: max-content !important;
    min-width: 680px !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  html body:not(.portal-page-shell) .finance-table-wrap table,
  html body:not(.portal-page-shell) .table-wrap table,
  html body:not(.portal-page-shell) .table-scroll table,
  html body:not(.portal-page-shell) .table-responsive table,
  html body:not(.portal-page-shell) .sales-recap-table,
  html body:not(.portal-page-shell) .production-recap-table,
  html body:not(.portal-page-shell) table {
    table-layout: auto !important;
  }

  html body:not(.portal-page-shell) .finance-table-wrap td,
  html body:not(.portal-page-shell) .table-wrap td,
  html body:not(.portal-page-shell) .table-scroll td,
  html body:not(.portal-page-shell) .table-responsive td,
  html body:not(.portal-page-shell) .sales-recap-table td,
  html body:not(.portal-page-shell) .production-recap-table td,
  html body:not(.portal-page-shell) .finance-table-wrap th,
  html body:not(.portal-page-shell) .table-wrap th,
  html body:not(.portal-page-shell) .table-scroll th,
  html body:not(.portal-page-shell) .table-responsive th,
  html body:not(.portal-page-shell) .sales-recap-table th,
  html body:not(.portal-page-shell) .production-recap-table th,
  html body:not(.portal-page-shell) table td,
  html body:not(.portal-page-shell) table th {
    overflow-x: visible !important;
    overflow-y: visible !important;
    white-space: nowrap;
  }

  html body:not(.portal-page-shell) .finance-table-wrap td,
  html body:not(.portal-page-shell) .table-wrap td,
  html body:not(.portal-page-shell) .table-scroll td,
  html body:not(.portal-page-shell) .table-responsive td,
  html body:not(.portal-page-shell) .sales-recap-table td,
  html body:not(.portal-page-shell) .production-recap-table td {
    text-overflow: ellipsis !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 600px) and (max-width: 899px), (min-width: 900px) and (max-width: 1800px) and (orientation: portrait) {
  body:not(.portal-page-shell) .sales-dashboard-recap .sales-dashboard-kpi-grid,
  body:not(.portal-page-shell) .inventory-dashboard-kpis,
  body:not(.portal-page-shell) .production-clean-page .production-compact-kpis,
  body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  body:not(.portal-page-shell) .hr-overview-grid,
  body:not(.portal-page-shell) .settings-grid,
  body:not(.portal-page-shell) .reports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-dashboard-kpi,
  body:not(.portal-page-shell) .inventory-kpi-card,
  body:not(.portal-page-shell) .production-clean-page .production-compact-kpi {
    min-height: 76px !important;
    padding: 9px !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-quick-actions,
  body:not(.portal-page-shell) .inventory-quick-grid,
  body:not(.portal-page-shell) .production-dashboard-links,
  body:not(.portal-page-shell) .hr-action-panel .panel-body.hr-quick-actions,
  body:not(.portal-page-shell) .hr-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.portal-page-shell) .sales-dashboard-recap .sales-recap-grid,
  body:not(.portal-page-shell) .inventory-dashboard-hero,
  body:not(.portal-page-shell) .production-dashboard-body,
  body:not(.portal-page-shell) .purchase-entry-layout,
  body:not(.portal-page-shell) .hr-tab-overview {
    grid-template-columns: 1fr !important;
  }

  body:not(.portal-page-shell) .purchasing-clean-page .purchase-clean-tabs {
    min-height: 42px !important;
    margin-bottom: 10px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body:not(.portal-page-shell) .purchase-entry-fields .form-grid,
  body:not(.portal-page-shell) form.purchase-entry-form,
  body:not(.portal-page-shell) form.payment-entry-form,
  body:not(.portal-page-shell) .filters-grid,
  body:not(.portal-page-shell) form.form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ERP_SIGMA_TABLET_VISUAL_FIT_V28_20260624_ACTIVE
   Higher-specificity overrides for legacy table min-width rules. */
@media (min-width: 600px) and (max-width: 1800px) {
  html body:not(.portal-page-shell) section.sales-dashboard-recap .sales-recap-table-card .sales-recap-table-wrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body:not(.portal-page-shell) section.sales-dashboard-recap .sales-recap-table-card .sales-recap-table-wrap > table.sales-recap-table {
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) section.sales-dashboard-recap .sales-recap-table-card .sales-recap-table-wrap > table.sales-recap-table th,
  html body:not(.portal-page-shell) section.sales-dashboard-recap .sales-recap-table-card .sales-recap-table-wrap > table.sales-recap-table td {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:not(.portal-page-shell) .sales-dashboard-recap .sales-recap-card .sales-recap-table-wrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body:not(.portal-page-shell) .sales-dashboard-recap .sales-recap-card .sales-recap-table-wrap > table.sales-recap-table {
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .sales-dashboard-recap .sales-recap-card .sales-recap-table-wrap > table.sales-recap-table th,
  html body:not(.portal-page-shell) .sales-dashboard-recap .sales-recap-card .sales-recap-table-wrap > table.sales-recap-table td {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:not(.portal-page-shell) .production-clean-page .production-recap-table-wrap table.production-recap-table td a {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ERP_SIGMA_TABLET_NO_CLIP_LOCK_V35_20260624_ACTIVE */
@media (min-width: 600px) and (max-width: 1800px) {
  html,
  body:not(.portal-page-shell) {
    height: 100dvh !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    width: 100vw !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: var(--sidebar-rail) minmax(0, 1fr) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100vw !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .main {
    grid-column: 2 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .topbar h1 {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .topbar .user {
    display: flex !important;
    justify-content: flex-end !important;
    max-width: min(58vw, 520px) !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    white-space: nowrap !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .content {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    max-width: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: clamp(10px, 1.5vw, 18px) !important;
    width: 100% !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .content > *,
  html[data-sidebar] body:not(.portal-page-shell) .panel,
  html[data-sidebar] body:not(.portal-page-shell) .panel-body,
  html[data-sidebar] body:not(.portal-page-shell) .card,
  html[data-sidebar] body:not(.portal-page-shell) .card-body,
  html[data-sidebar] body:not(.portal-page-shell) .section,
  html[data-sidebar] body:not(.portal-page-shell) .module-card,
  html[data-sidebar] body:not(.portal-page-shell) .dashboard-card,
  html[data-sidebar] body:not(.portal-page-shell) .finance-card,
  html[data-sidebar] body:not(.portal-page-shell) .finance-page,
  html[data-sidebar] body:not(.portal-page-shell) .production-clean-page,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-modern,
  html[data-sidebar] body:not(.portal-page-shell) .purchasing-clean-page,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-clean {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .panel,
  html[data-sidebar] body:not(.portal-page-shell) .panel-body,
  html[data-sidebar] body:not(.portal-page-shell) .card,
  html[data-sidebar] body:not(.portal-page-shell) .card-body,
  html[data-sidebar] body:not(.portal-page-shell) .section,
  html[data-sidebar] body:not(.portal-page-shell) .module-card,
  html[data-sidebar] body:not(.portal-page-shell) .dashboard-card,
  html[data-sidebar] body:not(.portal-page-shell) .finance-card {
    overflow: visible !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .table-scroll,
  html[data-sidebar] body:not(.portal-page-shell) .table-responsive,
  html[data-sidebar] body:not(.portal-page-shell) .finance-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .sales-recap-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .production-recap-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .grid-table,
  html[data-sidebar] body:not(.portal-page-shell) .data-table {
    box-sizing: border-box !important;
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-scroll > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-responsive > table,
  html[data-sidebar] body:not(.portal-page-shell) .finance-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .sales-recap-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .production-recap-table-wrap > table {
    max-width: none !important;
    min-width: max-content !important;
    table-layout: auto !important;
    width: max-content !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .content > table,
  html[data-sidebar] body:not(.portal-page-shell) .panel-body > table,
  html[data-sidebar] body:not(.portal-page-shell) .card-body > table {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) table.finance-recon-table {
    border-collapse: collapse !important;
    display: table !important;
    max-width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) table th,
  html[data-sidebar] body:not(.portal-page-shell) table td {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .tabs-scroll,
  html[data-sidebar] body:not(.portal-page-shell) .module-tabs,
  html[data-sidebar] body:not(.portal-page-shell) .sales-module-tabs,
  html[data-sidebar] body:not(.portal-page-shell) .sales-modern-tabs,
  html[data-sidebar] body:not(.portal-page-shell) .finance-tabs,
  html[data-sidebar] body:not(.portal-page-shell) .finance-page .finance-tab-row,
  html[data-sidebar] body:not(.portal-page-shell) .finance-page .finance-quick-grid.finance-quick-grid-top,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-tabs,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-clean-tabs,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-tabs,
  html[data-sidebar] body:not(.portal-page-shell) .hr-tabs,
  html[data-sidebar] body:not(.portal-page-shell) .hr-work-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .tabs-scroll > *,
  html[data-sidebar] body:not(.portal-page-shell) .module-tabs > *,
  html[data-sidebar] body:not(.portal-page-shell) .sales-module-tabs > *,
  html[data-sidebar] body:not(.portal-page-shell) .sales-modern-tabs > *,
  html[data-sidebar] body:not(.portal-page-shell) .finance-tabs > *,
  html[data-sidebar] body:not(.portal-page-shell) .finance-page .finance-tab-row > *,
  html[data-sidebar] body:not(.portal-page-shell) .finance-page .finance-quick-grid.finance-quick-grid-top > *,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-tabs > *,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-clean-tabs > *,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-tabs > *,
  html[data-sidebar] body:not(.portal-page-shell) .hr-tabs > *,
  html[data-sidebar] body:not(.portal-page-shell) .hr-work-tabs > * {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .stats-grid,
  html[data-sidebar] body:not(.portal-page-shell) .stat-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .settings-grid,
  html[data-sidebar] body:not(.portal-page-shell) .reports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .finance-dash-grid,
  html[data-sidebar] body:not(.portal-page-shell) .sigma-dashboard-charts,
  html[data-sidebar] body:not(.portal-page-shell) .owner-dashboard-visuals,
  html[data-sidebar] body:not(.portal-page-shell) .production-dashboard-body,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-hero,
  html[data-sidebar] body:not(.portal-page-shell) .reports-layout,
  html[data-sidebar] body:not(.portal-page-shell) .management-grid,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-entry-layout,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-workspace,
  html[data-sidebar] body:not(.portal-page-shell) .hr-tab-overview {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 600px) and (max-width: 1800px) and (orientation: landscape) {
  html[data-sidebar] body:not(.portal-page-shell) .inventory-quick-grid,
  html[data-sidebar] body:not(.portal-page-shell) .production-dashboard-links,
  html[data-sidebar] body:not(.portal-page-shell) .sales-quick-grid,
  html[data-sidebar] body:not(.portal-page-shell) .sales-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .quick-action-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ERP_SIGMA_TABLET_SHELL_SYNC_LOCK_V39_20260624_ACTIVE */
@media (min-width: 600px) and (max-width: 1800px) {
  :root {
    --sidebar-current: var(--sidebar-rail) !important;
  }

  html:not(.portal-page-shell),
  body:not(.portal-page-shell) {
    max-width: 100vw !important;
    overflow: hidden !important;
    width: 100vw !important;
  }

  html body:not(.portal-page-shell) .app,
  html body.sidebar-expanded:not(.portal-page-shell) .app,
  html body.sidebar-collapsed:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: var(--sidebar-rail) minmax(0, 1fr) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100vw !important;
  }

  html body:not(.portal-page-shell) .sidebar,
  html body.sidebar-expanded:not(.portal-page-shell) .sidebar,
  html body.sidebar-collapsed:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    box-sizing: border-box !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 100dvh !important;
    left: 0 !important;
    margin: 0 !important;
    max-height: 100dvh !important;
    max-width: var(--sidebar-rail) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 10px 8px !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: var(--sidebar-rail) !important;
    z-index: 40 !important;
  }

  html:not([data-sidebar="expanded"]) body:not(.portal-page-shell) .brand-logo,
  html:not([data-sidebar="expanded"]) body:not(.portal-page-shell) .nav-text,
  html:not([data-sidebar="expanded"]) body:not(.portal-page-shell) .user-name,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav-text,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .user-name {
    display: none !important;
  }

  html:not([data-sidebar="expanded"]) body:not(.portal-page-shell) .brand,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand {
    justify-content: center !important;
    padding: 8px !important;
  }

  html:not([data-sidebar="expanded"]) body:not(.portal-page-shell) .nav-simple a,
  html:not([data-sidebar="expanded"]) body:not(.portal-page-shell) .nav a,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav a {
    display: grid !important;
    grid-template-columns: 34px !important;
    justify-content: center !important;
    min-height: 56px !important;
    padding: 10px !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar {
    box-shadow: 22px 0 54px rgba(2, 12, 27, .32) !important;
    max-width: min(300px, calc(100vw - 28px)) !important;
    padding: 18px !important;
    position: fixed !important;
    width: min(300px, calc(100vw - 28px)) !important;
    z-index: 60 !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand {
    justify-content: space-between !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .nav a {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
  }

  html body:not(.portal-page-shell) .main,
  html body.sidebar-expanded:not(.portal-page-shell) .main,
  html body.sidebar-collapsed:not(.portal-page-shell) .main,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .main,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .main {
    box-sizing: border-box !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 100dvh !important;
    left: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    max-height: 100dvh !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .content {
    margin-left: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-left: clamp(10px, 1.5vw, 18px) !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .topbar {
    margin-left: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 14px !important;
    width: 100% !important;
  }
}

/* ERP_SIGMA_HR_TABLET_UNIFIED_LOCK_V39_20260624_ACTIVE */
@media (min-width: 600px) and (max-width: 1800px) {
  html[data-sidebar] body.hr-clean-modern-final:not(.portal-page-shell) .content,
  html[data-sidebar] body:not(.portal-page-shell) .hr-master-layout,
  html[data-sidebar] body:not(.portal-page-shell) .hr-enterprise-minimal,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-clean,
  html[data-sidebar] body:not(.portal-page-shell) .hr-daily-shell {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  html[data-sidebar] body.hr-clean-modern-final:not(.portal-page-shell) .content {
    gap: 14px !important;
    padding: clamp(12px, 1.55vw, 20px) !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .hr-daily-shell {
    display: grid !important;
    gap: 12px !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .hr-daily-head,
  html[data-sidebar] body:not(.portal-page-shell) .hr-command-meta,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-workspace,
  html[data-sidebar] body:not(.portal-page-shell) .hr-admin-workspace,
  html[data-sidebar] body:not(.portal-page-shell) .hr-report-layout,
  html[data-sidebar] body:not(.portal-page-shell) .hr-setting-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .hr-work-tabs,
  html[data-sidebar] body:not(.portal-page-shell) .hr-tabs {
    border-radius: 10px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px !important;
    width: 100% !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .hr-work-tabs a,
  html[data-sidebar] body:not(.portal-page-shell) .hr-tabs a,
  html[data-sidebar] body:not(.portal-page-shell) .hr-tabs button {
    flex: 0 0 auto !important;
    font-size: clamp(12px, 1.15vw, 14px) !important;
    min-height: 42px !important;
    min-width: max-content !important;
    padding: 9px 14px !important;
    white-space: nowrap !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .hr-focus-kpi,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid > *,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-action,
  html[data-sidebar] body:not(.portal-page-shell) .hr-admin-action,
  html[data-sidebar] body:not(.portal-page-shell) .hr-action-panel,
  html[data-sidebar] body:not(.portal-page-shell) .hr-priority-panel {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .hr-focus-kpi strong,
  html[data-sidebar] body:not(.portal-page-shell) .hr-kpi-copy strong,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid strong,
  html[data-sidebar] body:not(.portal-page-shell) .hr-payroll-value {
    font-size: clamp(20px, 2.35vw, 28px) !important;
    line-height: 1.05 !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-admin-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .hr-monitoring-table,
  html[data-sidebar] body:not(.portal-page-shell) .hr-fingerprint-grouped-table,
  html[data-sidebar] body:not(.portal-page-shell) .hr-enterprise-minimal .table-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-admin-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ERP_SIGMA_LAPTOP_DESKTOP_FIT_RESTORE_V39_20260624_ACTIVE */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html,
  body:not(.portal-page-shell) {
    max-width: 100vw !important;
    overflow: hidden !important;
    width: 100vw !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app,
  body.sidebar-expanded:not(.portal-page-shell) .app,
  body.sidebar-collapsed:not(.portal-page-shell) .app {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    width: 100vw !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  body.sidebar-expanded:not(.portal-page-shell) .sidebar {
    flex: 0 0 252px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-width: 252px !important;
    min-width: 252px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 18px !important;
    position: relative !important;
    transform: none !important;
    width: 252px !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar,
  body.sidebar-collapsed:not(.portal-page-shell) .sidebar {
    flex: 0 0 84px !important;
    max-width: 84px !important;
    min-width: 84px !important;
    padding: 10px 8px !important;
    width: 84px !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand-logo,
  body.sidebar-expanded:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .nav-text,
  body.sidebar-expanded:not(.portal-page-shell) .nav-text,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .user-name,
  body.sidebar-expanded:not(.portal-page-shell) .user-name {
    display: inline-flex !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand-logo,
  body.sidebar-collapsed:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav-text,
  body.sidebar-collapsed:not(.portal-page-shell) .nav-text,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .user-name,
  body.sidebar-collapsed:not(.portal-page-shell) .user-name {
    display: none !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .main,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .main,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .main,
  body.sidebar-expanded:not(.portal-page-shell) .main,
  body.sidebar-collapsed:not(.portal-page-shell) .main {
    flex: 1 1 auto !important;
    height: 100vh !important;
    margin-left: 0 !important;
    max-height: 100vh !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    width: auto !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .topbar,
  html[data-sidebar] body:not(.portal-page-shell) .content {
    margin-left: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html[data-sidebar] body:not(.portal-page-shell) .content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* ERP_SIGMA_TABLET_LAPTOP_DENSITY_FINAL_LOCK_V49_20260625_ACTIVE */
@media (min-width: 600px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html:not(.portal-page-shell) {
    --sidebar-current: 188px !important;
    --sidebar-rail: 188px !important;
  }

  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: 188px minmax(0, 1fr) !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    width: 100vw !important;
  }

  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    box-shadow: none !important;
    flex: 0 0 188px !important;
    max-width: 188px !important;
    min-width: 188px !important;
    padding: 14px 16px !important;
    position: relative !important;
    transform: none !important;
    width: 188px !important;
  }

  html body:not(.portal-page-shell) .brand,
  html[data-sidebar] body:not(.portal-page-shell) .brand {
    justify-content: space-between !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
  }

  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }

  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img {
    max-height: 38px !important;
    max-width: 116px !important;
  }

  html body:not(.portal-page-shell) .nav a,
  html body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar] body:not(.portal-page-shell) .nav a,
  html[data-sidebar] body:not(.portal-page-shell) .nav-simple a {
    display: flex !important;
    gap: 10px !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
  }

  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:not(.portal-page-shell) .content {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 14px 18px !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    display: grid !important;
    gap: 10px !important;
  }

  html body:not(.portal-page-shell) .finance-dash-grid,
  html body:not(.portal-page-shell) .sigma-dashboard-charts,
  html body:not(.portal-page-shell) .owner-dashboard-visuals,
  html body:not(.portal-page-shell) .inventory-dashboard-hero,
  html body:not(.portal-page-shell) .production-dashboard-body,
  html body:not(.portal-page-shell) .purchase-entry-layout,
  html body:not(.portal-page-shell) .hr-dashboard-workspace,
  html body:not(.portal-page-shell) .hr-tab-overview,
  html[data-sidebar] body:not(.portal-page-shell) .finance-dash-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-dashboard-visuals,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-hero,
  html[data-sidebar] body:not(.portal-page-shell) .production-dashboard-body,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-entry-layout,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-workspace,
  html[data-sidebar] body:not(.portal-page-shell) .hr-tab-overview {
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr) !important;
  }
}

@media (min-width: 600px) and (max-width: 980px) {
  html:not(.portal-page-shell) {
    --sidebar-current: 96px !important;
    --sidebar-rail: 96px !important;
  }
  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }
  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar {
    flex-basis: 96px !important;
    max-width: 96px !important;
    min-width: 96px !important;
    padding: 10px 8px !important;
    width: 96px !important;
  }
  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text,
  html body:not(.portal-page-shell) .user-name {
    display: none !important;
  }
  html body:not(.portal-page-shell) .brand,
  html[data-sidebar] body:not(.portal-page-shell) .brand,
  html body:not(.portal-page-shell) .nav a,
  html body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar] body:not(.portal-page-shell) .nav a,
  html[data-sidebar] body:not(.portal-page-shell) .nav-simple a {
    justify-content: center !important;
  }
  html body:not(.portal-page-shell) .finance-dash-grid,
  html body:not(.portal-page-shell) .sigma-dashboard-charts,
  html body:not(.portal-page-shell) .owner-dashboard-visuals,
  html body:not(.portal-page-shell) .inventory-dashboard-hero,
  html body:not(.portal-page-shell) .production-dashboard-body,
  html body:not(.portal-page-shell) .purchase-entry-layout,
  html body:not(.portal-page-shell) .hr-dashboard-workspace,
  html body:not(.portal-page-shell) .hr-tab-overview {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ERP_SIGMA_HR_TABLET_DENSITY_AFTER_FINAL_LOCK_V49_20260625_ACTIVE */
@media (min-width: 600px) and (max-width: 980px) {
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .hr-overview-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .hr-overview-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ERP_SIGMA_TABLET_LAPTOP_CANVAS_TRUE_EOF_LOCK_V50_20260625_ACTIVE */
@media (min-width: 768px) and (max-width: 1199px) and (pointer: coarse) {
  html:not(.portal-page-shell) {
    --sigma-tablet-canvas-width: 1366px !important;
    --sigma-tablet-canvas-scale: calc(100vw / 1366) !important;
    --sidebar-current: 252px !important;
    --sidebar-rail: 252px !important;
  }
  html, body:not(.portal-page-shell) {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    width: var(--sigma-tablet-canvas-width) !important;
    min-width: var(--sigma-tablet-canvas-width) !important;
    max-width: var(--sigma-tablet-canvas-width) !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
    transform: scale(var(--sigma-tablet-canvas-scale)) !important;
    transform-origin: top left !important;
  }
  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    position: relative !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    flex: 0 0 252px !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    padding: 18px !important;
    transform: none !important;
    box-shadow: none !important;
  }
  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img,
  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }
  html body:not(.portal-page-shell) .nav a,
  html body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar] body:not(.portal-page-shell) .nav a,
  html[data-sidebar] body:not(.portal-page-shell) .nav-simple a {
    display: flex !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  html body:not(.portal-page-shell) .main,
  html[data-sidebar] body:not(.portal-page-shell) .main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
  }
  html body:not(.portal-page-shell) .content {
    padding: 20px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  html body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html body:not(.portal-page-shell) .production-compact-kpis,
  html body:not(.portal-page-shell) .purchase-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-dashboard-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .production-compact-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .hr-overview-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-overview-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .hr-quick-actions,
  html[data-sidebar] body:not(.portal-page-shell) .hr-quick-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ERP_SIGMA_TABLET_LAPTOP_CANVAS_ABSOLUTE_FINAL_V50_20260625_ACTIVE */
@media (min-width: 768px) and (max-width: 1199px) {
  html:not(.portal-page-shell) {
    --sigma-tablet-canvas-width: 1366px !important;
    --sigma-tablet-canvas-scale: calc(100vw / 1366px) !important;
    --sidebar-current: 252px !important;
    --sidebar-rail: 252px !important;
  }
  html, body:not(.portal-page-shell) {
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
  }
  html body:not(.portal-page-shell) .app,
  html[data-sidebar] body:not(.portal-page-shell) .app,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    width: var(--sigma-tablet-canvas-width) !important;
    min-width: var(--sigma-tablet-canvas-width) !important;
    max-width: var(--sigma-tablet-canvas-width) !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
    transform: scale(var(--sigma-tablet-canvas-scale)) !important;
    transform-origin: top left !important;
  }
  html body:not(.portal-page-shell) .sidebar,
  html[data-sidebar] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    position: relative !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    flex: 0 0 252px !important;
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    padding: 18px !important;
    transform: none !important;
    box-shadow: none !important;
  }
  html body:not(.portal-page-shell) .brand-logo,
  html body:not(.portal-page-shell) .brand img,
  html body:not(.portal-page-shell) .nav-text,
  html[data-sidebar] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }
  html body:not(.portal-page-shell) .nav a,
  html body:not(.portal-page-shell) .nav-simple a,
  html[data-sidebar] body:not(.portal-page-shell) .nav a,
  html[data-sidebar] body:not(.portal-page-shell) .nav-simple a {
    display: flex !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  html body:not(.portal-page-shell) .main,
  html[data-sidebar] body:not(.portal-page-shell) .main {
    height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    max-height: calc(100dvh / var(--sigma-tablet-canvas-scale)) !important;
    overflow: hidden !important;
  }
  html body:not(.portal-page-shell) .content {
    padding: 20px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .sales-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  html body:not(.portal-page-shell) .owner-kpi-grid,
  html body:not(.portal-page-shell) .option2-kpi-grid,
  html body:not(.portal-page-shell) .hr-dashboard-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .owner-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .option2-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .hr-dashboard-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ERP_SIGMA_TABLET_LARGE_FIT_V51_20260625_FINAL */
@media (min-width: 768px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .finance-kpi-grid,
  html body:not(.portal-page-shell) .cards.finance-kpis,
  html[data-sidebar] body:not(.portal-page-shell) .finance-kpi-grid,
  html[data-sidebar] body:not(.portal-page-shell) .cards.finance-kpis {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body:not(.portal-page-shell) .finance-dash-grid,
  html[data-sidebar] body:not(.portal-page-shell) .finance-dash-grid {
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .78fr) minmax(250px, .78fr) !important;
  }

  html body:not(.portal-page-shell) .finance-panel-wide,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel-wide {
    grid-column: span 2 !important;
  }

  html body:not(.portal-page-shell) .finance-panel-full,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel-full {
    grid-column: 1 / -1 !important;
  }

  html body:not(.portal-page-shell) .production-recap-table,
  html[data-sidebar] body:not(.portal-page-shell) .production-recap-table {
    min-width: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .production-recap-table th:nth-child(1),
  html body:not(.portal-page-shell) .production-recap-table td:nth-child(1) {
    width: 58% !important;
  }

  html body:not(.portal-page-shell) .production-recap-table th:nth-child(2),
  html body:not(.portal-page-shell) .production-recap-table td:nth-child(2) {
    text-align: center !important;
    width: 14% !important;
  }

  html body:not(.portal-page-shell) .production-recap-table th:nth-child(3),
  html body:not(.portal-page-shell) .production-recap-table td:nth-child(3) {
    text-align: center !important;
    width: 28% !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html[data-sidebar="collapsed"]:not(.portal-page-shell) {
    --sidebar-current: 96px !important;
    --sidebar-rail: 96px !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .app {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .sidebar {
    flex: 0 0 96px !important;
    max-width: 96px !important;
    min-width: 96px !important;
    overflow-x: hidden !important;
    padding: 12px 10px !important;
    width: 96px !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand {
    justify-content: center !important;
    padding: 8px !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .brand img,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav-text,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .user-name {
    display: none !important;
  }

  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav a,
  html[data-sidebar="collapsed"] body:not(.portal-page-shell) .nav-simple a {
    gap: 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 12px 8px !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .app {
    grid-template-columns: 252px minmax(0, 1fr) !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .sidebar {
    flex: 0 0 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    padding: 18px !important;
    width: 252px !important;
  }

  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand-logo,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .brand img,
  html[data-sidebar="expanded"] body:not(.portal-page-shell) .nav-text {
    display: inline-flex !important;
  }
}
/* ERP_SIGMA_TABLET_TABLE_FULL_WIDTH_EOF_V54_20260625
   Must stay as the last tablet table rule: fills table/card width after all older max-content rules. */
@media (min-width: 768px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1800px) and (hover: none),
       (min-width: 1200px) and (max-width: 1800px) and (pointer: coarse) {
  html body:not(.portal-page-shell) .content,
  html body:not(.portal-page-shell) .card,
  html body:not(.portal-page-shell) .panel,
  html body:not(.portal-page-shell) .section-card,
  html body:not(.portal-page-shell) .finance-panel,
  html body:not(.portal-page-shell) .finance-panel-full,
  html body:not(.portal-page-shell) .finance-panel-wide,
  html body:not(.portal-page-shell) .inventory-clean-panel,
  html body:not(.portal-page-shell) .production-clean-card,
  html body:not(.portal-page-shell) .sales-modern-card,
  html body:not(.portal-page-shell) .hr-card,
  html body:not(.portal-page-shell) .purchase-clean-card,
  html[data-sidebar] body:not(.portal-page-shell) .content,
  html[data-sidebar] body:not(.portal-page-shell) .card,
  html[data-sidebar] body:not(.portal-page-shell) .panel,
  html[data-sidebar] body:not(.portal-page-shell) .section-card,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel-full,
  html[data-sidebar] body:not(.portal-page-shell) .finance-panel-wide,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-clean-panel,
  html[data-sidebar] body:not(.portal-page-shell) .production-clean-card,
  html[data-sidebar] body:not(.portal-page-shell) .sales-modern-card,
  html[data-sidebar] body:not(.portal-page-shell) .hr-card,
  html[data-sidebar] body:not(.portal-page-shell) .purchase-clean-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) .table-wrap,
  html body:not(.portal-page-shell) .finance-table-wrap,
  html body:not(.portal-page-shell) .sales-recap-table-wrap,
  html body:not(.portal-page-shell) .production-recap-table-wrap,
  html body:not(.portal-page-shell) .inventory-table-wrap,
  html body:not(.portal-page-shell) .data-table-wrap,
  html body:not(.portal-page-shell) .table-responsive,
  html body:not(.portal-page-shell) .table-scroll,
  html[data-sidebar] body:not(.portal-page-shell) .table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .finance-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .sales-recap-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .production-recap-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .data-table-wrap,
  html[data-sidebar] body:not(.portal-page-shell) .table-responsive,
  html[data-sidebar] body:not(.portal-page-shell) .table-scroll {
    box-sizing: border-box !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body:not(.portal-page-shell) .table-wrap > table,
  html body:not(.portal-page-shell) .finance-table-wrap > table,
  html body:not(.portal-page-shell) .sales-recap-table-wrap > table,
  html body:not(.portal-page-shell) .production-recap-table-wrap > table,
  html body:not(.portal-page-shell) .inventory-table-wrap > table,
  html body:not(.portal-page-shell) .data-table-wrap > table,
  html body:not(.portal-page-shell) .table-responsive > table,
  html body:not(.portal-page-shell) .table-scroll > table,
  html body:not(.portal-page-shell) table.master-clean-table,
  html body:not(.portal-page-shell) table.inventory-fit-table,
  html body:not(.portal-page-shell) table.inventory-clean-stock-table,
  html body:not(.portal-page-shell) table.finance-simple-table,
  html body:not(.portal-page-shell) table.product-clean-table,
  html body:not(.portal-page-shell) table.consumable-clean-table,
  html body:not(.portal-page-shell) table.production-recap-table,
  html body:not(.portal-page-shell) table.sales-recap-table,
  html body:not(.portal-page-shell) .card > table,
  html body:not(.portal-page-shell) .panel > table,
  html body:not(.portal-page-shell) .section-card > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .finance-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .sales-recap-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .production-recap-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .inventory-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .data-table-wrap > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-responsive > table,
  html[data-sidebar] body:not(.portal-page-shell) .table-scroll > table,
  html[data-sidebar] body:not(.portal-page-shell) table.master-clean-table,
  html[data-sidebar] body:not(.portal-page-shell) table.inventory-fit-table,
  html[data-sidebar] body:not(.portal-page-shell) table.inventory-clean-stock-table,
  html[data-sidebar] body:not(.portal-page-shell) table.finance-simple-table,
  html[data-sidebar] body:not(.portal-page-shell) table.product-clean-table,
  html[data-sidebar] body:not(.portal-page-shell) table.consumable-clean-table,
  html[data-sidebar] body:not(.portal-page-shell) table.production-recap-table,
  html[data-sidebar] body:not(.portal-page-shell) table.sales-recap-table,
  html[data-sidebar] body:not(.portal-page-shell) .card > table,
  html[data-sidebar] body:not(.portal-page-shell) .panel > table,
  html[data-sidebar] body:not(.portal-page-shell) .section-card > table {
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html body:not(.portal-page-shell) table th,
  html body:not(.portal-page-shell) table td,
  html[data-sidebar] body:not(.portal-page-shell) table th,
  html[data-sidebar] body:not(.portal-page-shell) table td {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  html body:not(.portal-page-shell) table td.num,
  html body:not(.portal-page-shell) table th.num,
  html body:not(.portal-page-shell) table .num,
  html body:not(.portal-page-shell) table .money,
  html body:not(.portal-page-shell) table .currency,
  html[data-sidebar] body:not(.portal-page-shell) table td.num,
  html[data-sidebar] body:not(.portal-page-shell) table th.num,
  html[data-sidebar] body:not(.portal-page-shell) table .num,
  html[data-sidebar] body:not(.portal-page-shell) table .money,
  html[data-sidebar] body:not(.portal-page-shell) table .currency {
    overflow-wrap: normal !important;
    text-align: right !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}