/* SIGMA_GLOBAL_VISUAL_OVERHAUL_20260521_ACTIVE
   Final UI-only visual system for SIGMA ERP. No business logic/data changes. */

:root {
  --sigma-bg: #eef3f7;
  --sigma-panel: #ffffff;
  --sigma-panel-soft: #f8fafc;
  --sigma-line: #d8e2ec;
  --sigma-text: #07192d;
  --sigma-muted: #64748b;
  --sigma-navy: #071827;
  --sigma-teal: #0f877c;
  --sigma-teal-2: #0ea596;
  --sigma-red: #c81e1e;
  --sigma-shadow: 0 14px 36px rgba(15, 23, 42, .08);
}

html,
body:not(.portal-page-shell) {
  background: var(--sigma-bg) !important;
  color: var(--sigma-text) !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body:not(.portal-page-shell) .main,
body:not(.portal-page-shell) main,
body:not(.portal-page-shell) .content {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

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

body:not(.portal-page-shell) .topbar {
  align-items: center !important;
  background: var(--sigma-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  gap: 14px !important;
  min-height: 68px !important;
  padding: 14px 20px !important;
}

body:not(.portal-page-shell) .topbar h1 {
  color: #fff !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

body:not(.portal-page-shell) .topbar .user,
body:not(.portal-page-shell) .topbar .topbar-actions,
body:not(.portal-page-shell) .topbar .user-chip {
  min-width: 0 !important;
  max-width: 100% !important;
}

body:not(.portal-page-shell) .sidebar {
  background: linear-gradient(180deg, #061725 0%, #092033 100%) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
}

body:not(.portal-page-shell) .sidebar a,
body:not(.portal-page-shell) .sidebar button,
body:not(.portal-page-shell) .sidebar summary {
  border-radius: 10px !important;
}

body:not(.portal-page-shell) .sidebar a.active,
body:not(.portal-page-shell) .sidebar .active {
  background: rgba(15, 135, 124, .36) !important;
}

body:not(.portal-page-shell) .panel,
body:not(.portal-page-shell) .card,
body:not(.portal-page-shell) .owner-dashboard-head,
body:not(.portal-page-shell) .finance-hero,
body:not(.portal-page-shell) .sales-compact-summary,
body:not(.portal-page-shell) .production-dashboard,
body:not(.portal-page-shell) .sigma-dashboard-hero,
body:not(.portal-page-shell) .resizable-split > * {
  background: var(--sigma-panel) !important;
  border: 1px solid var(--sigma-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--sigma-shadow) !important;
  min-width: 0 !important;
}

body:not(.portal-page-shell) .panel {
  overflow: hidden !important;
}

body:not(.portal-page-shell) .panel-header,
body:not(.portal-page-shell) .card-header {
  align-items: center !important;
  border-bottom: 1px solid var(--sigma-line) !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  min-height: 58px !important;
  padding: 14px 18px !important;
}

body:not(.portal-page-shell) .panel-header h2,
body:not(.portal-page-shell) .panel-header h3 {
  font-size: 17px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

body:not(.portal-page-shell) .panel-body {
  min-width: 0 !important;
  padding: 16px 18px !important;
}

body:not(.portal-page-shell) .input-note:not(.bad):not(.warn):not(.ok):not(.alert) {
  display: none !important;
}

body:not(.portal-page-shell) .grid,
body:not(.portal-page-shell) .two-col,
body:not(.portal-page-shell) .cards,
body:not(.portal-page-shell) .finance-kpis,
body:not(.portal-page-shell) .role-dashboard-kpis,
body:not(.portal-page-shell) .owner-summary-grid {
  display: grid !important;
  gap: 16px !important;
  min-width: 0 !important;
}

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

body:not(.portal-page-shell) .cards,
body:not(.portal-page-shell) .finance-kpis,
body:not(.portal-page-shell) .role-dashboard-kpis,
body:not(.portal-page-shell) .owner-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

body:not(.portal-page-shell) .resizable-split,
body:not(.portal-page-shell) .purchase-layout,
body:not(.portal-page-shell) .consumable-layout {
  align-items: start !important;
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body:not(.portal-page-shell) .resize-handle,
body:not(.portal-page-shell) .resizable-handle {
  display: none !important;
}

body:not(.portal-page-shell) form,
body:not(.portal-page-shell) .form-grid {
  min-width: 0 !important;
}

body:not(.portal-page-shell) input,
body:not(.portal-page-shell) select,
body:not(.portal-page-shell) textarea {
  border: 1px solid #cbd7e3 !important;
  border-radius: 9px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body:not(.portal-page-shell) .btn,
body:not(.portal-page-shell) button {
  border-radius: 9px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

body:not(.portal-page-shell) .btn:not(.secondary):not(.danger):not(.warning),
body:not(.portal-page-shell) button.btn:not(.secondary):not(.danger):not(.warning) {
  background: var(--sigma-teal) !important;
  border-color: var(--sigma-teal) !important;
  color: #fff !important;
}

body:not(.portal-page-shell) .tabbar,
body:not(.portal-page-shell) .tabs,
body:not(.portal-page-shell) .finance-tabs,
body:not(.portal-page-shell) .sales-tabs,
body:not(.portal-page-shell) .inventory-tabs,
body:not(.portal-page-shell) .production-work-nav,
body:not(.portal-page-shell) .module-tabs {
  align-items: center !important;
  background: #fff !important;
  border: 1px solid var(--sigma-line) !important;
  border-radius: 12px !important;
  display: flex !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  padding: 8px !important;
  scrollbar-width: thin;
}

body:not(.portal-page-shell) .tabbar a,
body:not(.portal-page-shell) .tabs a,
body:not(.portal-page-shell) .finance-tabs a,
body:not(.portal-page-shell) .sales-tabs a,
body:not(.portal-page-shell) .inventory-tabs a,
body:not(.portal-page-shell) .production-work-nav a,
body:not(.portal-page-shell) .module-tabs a,
body:not(.portal-page-shell) .tabbar button,
body:not(.portal-page-shell) .tabs button {
  border-radius: 9px !important;
  flex: 0 0 auto !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
}

body:not(.portal-page-shell) .tabbar .active,
body:not(.portal-page-shell) .tabs .active,
body:not(.portal-page-shell) .finance-tabs .active,
body:not(.portal-page-shell) .sales-tabs .active,
body:not(.portal-page-shell) .inventory-tabs .active,
body:not(.portal-page-shell) .production-work-nav .active,
body:not(.portal-page-shell) .module-tabs .active {
  background: var(--sigma-navy) !important;
  color: #fff !important;
}

body:not(.portal-page-shell) .table-wrap {
  border: 1px solid var(--sigma-line) !important;
  border-radius: 10px !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

body:not(.portal-page-shell) .table-wrap table {
  border-collapse: collapse !important;
  table-layout: fixed !important;
  width: 100% !important;
}

body:not(.portal-page-shell) .table-wrap th,
body:not(.portal-page-shell) .table-wrap td {
  border-bottom: 1px solid #e4ebf2 !important;
  line-height: 1.35 !important;
  max-width: 260px !important;
  overflow: hidden !important;
  padding: 11px 12px !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

body:not(.portal-page-shell) .table-wrap th {
  background: #edf3f8 !important;
  color: #32445a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body:not(.portal-page-shell) .table-wrap tbody tr:nth-child(even) {
  background: #f8fbfd !important;
}

body:not(.portal-page-shell) .table-wrap tbody tr:hover {
  background: #eef8f6 !important;
}

body:not(.portal-page-shell) .table-wrap .actions,
body:not(.portal-page-shell) td .actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: max-content !important;
}

body:not(.portal-page-shell) .inventory-clean-stock-table,
body:not(.portal-page-shell) .inventory-fit-table,
body:not(.portal-page-shell) .finance-simple-table,
body:not(.portal-page-shell) .master-clean-table,
body:not(.portal-page-shell) .product-clean-table,
body:not(.portal-page-shell) .consumable-clean-table {
  min-width: 0 !important;
}

body:not(.portal-page-shell) .finance-simple-table td:first-child {
  white-space: normal !important;
}

body:not(.portal-page-shell) .finance-simple-table td:last-child {
  text-align: right !important;
}

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

body:not(.portal-page-shell) .production-work-nav a,
body:not(.portal-page-shell) .production-work-nav button {
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

body:not(.portal-page-shell) .cell-stack,
body:not(.portal-page-shell) .status-stack {
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body:not(.portal-page-shell) .cell-inline {
  align-items: center !important;
  display: inline-flex !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body:not(.portal-page-shell) .audit-chip,
body:not(.portal-page-shell) .status-pill,
body:not(.portal-page-shell) .badge {
  border-radius: 999px !important;
  white-space: nowrap !important;
}

body:not(.portal-page-shell) .row-inline-tools .compact-stock-form {
  background: #fff !important;
  border: 1px solid var(--sigma-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.16) !important;
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding: 10px !important;
  z-index: 40 !important;
}

@media (max-width: 1180px) {
  body:not(.portal-page-shell) .content {
    padding: 14px 16px 92px !important;
  }

  body:not(.portal-page-shell) .two-col,
  body:not(.portal-page-shell) .resizable-split,
  body:not(.portal-page-shell) .purchase-layout,
  body:not(.portal-page-shell) .consumable-layout {
    grid-template-columns: 1fr !important;
  }

  body:not(.portal-page-shell) .production-work-nav {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  body.mobile-mode:not(.portal-page-shell) .topbar {
    min-height: 56px !important;
    padding: 8px 10px !important;
  }

  body.mobile-mode:not(.portal-page-shell) .topbar h1 {
    font-size: 17px !important;
    max-width: 48vw !important;
  }

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

  body.mobile-mode:not(.portal-page-shell) .panel-header,
  body.mobile-mode:not(.portal-page-shell) .card-header {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  body.mobile-mode:not(.portal-page-shell) .panel-body {
    padding: 12px !important;
  }

  body.mobile-mode:not(.portal-page-shell) .cards,
  body.mobile-mode:not(.portal-page-shell) .finance-kpis,
  body.mobile-mode:not(.portal-page-shell) .role-dashboard-kpis,
  body.mobile-mode:not(.portal-page-shell) .owner-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.mobile-mode:not(.portal-page-shell) .table-wrap {
    border: 0 !important;
    overflow: visible !important;
  }

  body.mobile-mode:not(.portal-page-shell) .table-wrap table,
  body.mobile-mode:not(.portal-page-shell) .table-wrap thead,
  body.mobile-mode:not(.portal-page-shell) .table-wrap tbody,
  body.mobile-mode:not(.portal-page-shell) .table-wrap tr,
  body.mobile-mode:not(.portal-page-shell) .table-wrap th,
  body.mobile-mode:not(.portal-page-shell) .table-wrap td {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.mobile-mode:not(.portal-page-shell) .table-wrap thead {
    display: none !important;
  }

  body.mobile-mode:not(.portal-page-shell) .table-wrap tr {
    background: #fff !important;
    border: 1px solid var(--sigma-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.06) !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
  }

  body.mobile-mode:not(.portal-page-shell) .table-wrap td {
    align-items: center !important;
    border-bottom: 1px solid #edf2f7 !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: space-between !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    text-align: right !important;
    white-space: normal !important;
  }

  body.mobile-mode:not(.portal-page-shell) .table-wrap td::before {
    color: var(--sigma-muted);
    content: attr(data-label);
    flex: 0 0 42%;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
  }

  body.mobile-mode:not(.portal-page-shell) .table-wrap td .actions {
    justify-content: flex-end !important;
  }

  body.mobile-mode:not(.portal-page-shell) .row-inline-tools .compact-stock-form {
    grid-template-columns: 1fr !important;
    position: static !important;
  }
}

@media (max-width: 380px) {
  body.mobile-mode:not(.portal-page-shell) .cards,
  body.mobile-mode:not(.portal-page-shell) .finance-kpis,
  body.mobile-mode:not(.portal-page-shell) .role-dashboard-kpis,
  body.mobile-mode:not(.portal-page-shell) .owner-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* SIGMA_PURCHASE_SETTING_FIT_FIX_20260521_ACTIVE
   Corrective UI-only layer: restore split panels and readable tables after the global visual pass. */
body:not(.portal-page-shell) .resizable-split {
  align-items: start !important;
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: minmax(300px, min(34%, 380px)) minmax(0, 1fr) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body:not(.portal-page-shell) .master-product-layout {
  align-items: start !important;
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: minmax(320px, min(34%, 430px)) minmax(0, 1fr) !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body:not(.portal-page-shell) .resizable-split > .resizable-pane,
body:not(.portal-page-shell) .resizable-left-panel,
body:not(.portal-page-shell) .resizable-right-panel,
body:not(.portal-page-shell) .master-product-left,
body:not(.portal-page-shell) .master-product-right {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

body:not(.portal-page-shell) .resizable-split > .resizable-gutter,
body:not(.portal-page-shell) .resizable-split > .resize-handle,
body:not(.portal-page-shell) .resizable-split > .resizable-handle,
body:not(.portal-page-shell) .resizable-divider {
  display: none !important;
}

body:not(.portal-page-shell) .resizable-pane-right,
body:not(.portal-page-shell) .resizable-right-panel,
body:not(.portal-page-shell) .master-product-right,
body:not(.portal-page-shell) .consumable-layout .resizable-pane-right {
  display: grid !important;
  gap: 18px !important;
}

body:not(.portal-page-shell) .resizable-pane-right > .panel,
body:not(.portal-page-shell) .resizable-right-panel > .panel,
body:not(.portal-page-shell) .master-product-right > .panel,
body:not(.portal-page-shell) .consumable-layout .resizable-pane-right > .panel {
  margin: 0 !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  body:not(.portal-page-shell) .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
  }

  body:not(.portal-page-shell) .table-wrap table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
  }

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

  body:not(.portal-page-shell) .table-wrap td:nth-child(3),
  body:not(.portal-page-shell) .table-wrap td:nth-child(4),
  body:not(.portal-page-shell) .table-wrap td:nth-child(5),
  body:not(.portal-page-shell) .table-wrap td:nth-child(10) {
    min-width: 92px !important;
  }

  body:not(.portal-page-shell) .panel-header .actions,
  body:not(.portal-page-shell) .panel-header > div,
  body:not(.portal-page-shell) .card-header .actions {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 900px) {
  body:not(.portal-page-shell) .resizable-split,
  body:not(.portal-page-shell) .master-product-layout,
  body:not(.portal-page-shell) .purchase-layout,
  body:not(.portal-page-shell) .consumable-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  body.mobile-mode:not(.portal-page-shell) .resizable-pane-right,
  body.mobile-mode:not(.portal-page-shell) .resizable-right-panel,
  body.mobile-mode:not(.portal-page-shell) .master-product-right,
  body.mobile-mode:not(.portal-page-shell) .consumable-layout .resizable-pane-right {
    display: grid !important;
    gap: 12px !important;
  }

  body.mobile-mode:not(.portal-page-shell) .table-wrap td {
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  body.mobile-mode:not(.portal-page-shell) .panel-header .actions,
  body.mobile-mode:not(.portal-page-shell) .panel-header > div {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}