/* SC-UI-v0.1-20261017 local tokens, not official ERP component dimensions. */
:root { --erp-nav-bg: #283d7d; --erp-primary: #4b86ff; --erp-table-header: #e6edfc; --erp-border: #d9dfe9; --erp-control-height: 28px; --dev-teal: var(--erp-primary); --dev-bg: #f5f6f8; --dev-ink: #243650; --dev-line: #e3e9f2; }
.dev-app, .dev-app.collapsed { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: var(--dev-bg); }
.dev-workspace { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.platform-header, .platform-page-tabs, .dev-topbar, .dev-page-footer { flex-shrink: 0; }
.platform-header { position: relative; z-index: 60; height: 39.2px; display: flex; align-items: center; background: var(--erp-nav-bg); color: #fff; padding: 0 12px; gap: 16px; }
.platform-brand { display: flex; flex: 0 0 32px; align-items: center; }
.platform-brand img { display: block; width: 32px; height: 32px; object-fit: contain; }
.platform-nav { display: flex; align-self: stretch; flex: 1; min-width: 0; }
.platform-menu-anchor { display: flex; align-items: stretch; }
.platform-menu-anchor > button { display: flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-bottom: 2px solid #79a6ff; background: #ffffff08; color: #b9d1ff; font-size: 18px; font-weight: 600; white-space: nowrap; }
.platform-menu-anchor > button:hover { background: #ffffff15; }
.platform-nav svg { width: 13px; height: 13px; }
.platform-account { display: flex; align-items: center; gap: 14px; min-width: 0; }
.platform-environment { font-size: 10px; color: #d0dcf8; border: 1px solid #ffffff35; border-radius: 3px; padding: 1px 5px; }
.platform-account > button { display: flex; align-items: center; gap: 7px; border: 0; background: none; color: #fff; }
.platform-account strong { font-size: 12px; font-weight: 400; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-account .dev-avatar { background: #ffffff20; color: #fff; width: 24px; height: 24px; }
.platform-account svg { width: 12px; }
.platform-mega { position: absolute; top: 39.2px; left: 12px; width: min(1420px, calc(100vw - 24px)); max-height: calc(100dvh - 55px); overflow: auto; padding: 0 16px 18px; background: #fff; border: 1px solid #d5ddeb; box-shadow: 0 4px 14px #20335b25; color: var(--dev-ink); }
.platform-mega-heading { display: flex; align-items: center; padding: 8px 0; margin-bottom: 10px; border-bottom: 1px solid #edf0f5; }
.platform-mega-heading > strong { font-size: 14px; }
.platform-mega-heading > button { margin-left: auto; }
#dev-mega-nav { display: grid; grid-template-columns: repeat(6, minmax(155px, 1fr)); gap: 16px; min-width: 1010px; }
.platform-mega .dev-nav-group { margin: 0; padding: 0; border: 0; }
.platform-mega .dev-nav-group h2 { display: block; margin: 0 0 10px; padding: 0 5px; font-size: 14px; font-weight: 650; color: #243650; }
.platform-mega .dev-nav-link { min-height: 29px; padding: 5px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.platform-mega .dev-nav-link span { display: block; }
.platform-mega .dev-nav-link.active { color: var(--erp-primary); background: #f1f5ff; }
.platform-unavailable { display: block; padding: 5px; font-size: 11px; color: #8690a0; }
.platform-page-tabs { display: flex; align-items: stretch; height: 29.4px; padding: 0 12px; border-bottom: 1px solid #dfe5f0; background: #fff; gap: 2px; overflow: hidden; }
.platform-page-tab { display: flex; align-items: center; flex: 0 1 185px; min-width: 0; margin-top: 3px; border-radius: 3px 3px 0 0; border: 1px solid transparent; border-bottom: 0; color: #5c6a80; }
.platform-page-tab:first-child { flex: 0 0 64px; }
.platform-page-tab.active { color: #326cd9; background: #edf3ff; border-color: #dce6fb; }
.platform-page-tab a { display: flex; align-items: center; gap: 5px; padding: 3px 2px; min-width: 0; flex: 1; color: inherit; font-size: 12px; white-space: nowrap; }
.platform-page-tab a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.platform-page-tab a svg { width: 13px; height: 13px; }
.platform-page-tab > button { display: grid; place-items: center; flex: 0 0 17px; width: 17px; height: 20px; padding: 0; border: 0; border-radius: 2px; background: transparent; color: inherit; }
.platform-page-tab > button:hover { background: #dfe9fd; }
.platform-page-tab > button svg { width: 11px; height: 11px; }
.dev-topbar { position: static; height: auto; min-height: 43px; padding: 5px 12px; background: #f5f6f8; border-bottom: 0; gap: 10px; }
.dev-breadcrumb { min-width: 0; font-size: 11px; color: #72829b; overflow-wrap: anywhere; }
#dev-crumb strong { color: #34435b; }
.dev-menu-button { display: inline-flex; margin-right: 5px; }
.dev-global-tools { gap: 6px; flex-wrap: wrap; }
#dev-search-form { width: 215px; height: 28px; border: 1px solid #dfe5ef; background: #fff; border-radius: 3px; }
#dev-search-form input { min-width: 0; width: 100%; font-size: 11px; }
.dev-demo-tag { color: #8b733e; border-color: #e5ddca; }
.dev-button { color: #415676; border-color: var(--erp-border); font-size: 12px; min-height: var(--erp-control-height); padding: 4px 9px; }
.dev-primary { color: #fff; background: var(--erp-primary); border-color: var(--erp-primary); }
.dev-button:hover { color: #326cd9; background: #f0f5ff; border-color: #afc8ff; }
.dev-primary:hover { color: #fff; background: #386fee; }
.dev-app select, .dev-app input[type="search"] { min-height: var(--erp-control-height); padding: 4px 7px; font-size: 12px; border-color: var(--erp-border); color: #435777; }
.platform-body { display: flex; flex: 1; align-items: stretch; margin: 0 10px; min-height: 0; overflow: hidden; }
.platform-body .dev-sidebar { position: static; display: flex; width: var(--sidebar-width, 210px); height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; flex: 0 0 var(--sidebar-width, 210px); border: 1px solid #e2e7ef; border-radius: 0; z-index: auto; }
.platform-context-heading { flex-shrink: 0; padding: 10px 12px; border-bottom: 1px solid #edf0f6; color: #2d405f; font-size: 13px; font-weight: 650; }
.platform-body #dev-nav { padding: 6px; overflow: visible; flex: 0 0 auto; }
.platform-tree-branch { margin-bottom: 3px; }
.platform-tree-parent { display: flex; align-items: center; width: 100%; gap: 6px; padding: 7px 6px; border: 0; background: none; text-align: left; font-size: 12px; color: #435777; }
.platform-tree-parent > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.platform-tree-parent svg { width: 14px; height: 14px; }
.platform-tree-parent.active { color: #326cd9; font-weight: 600; }
.platform-tree-parent:hover { background: #f0f4fc; }
.platform-body .dev-nav-link { display: flex; justify-content: flex-start; gap: 5px; min-height: 29px; margin: 1px 0; padding: 5px 7px; text-align: left; font-size: 12px; border: 0; border-radius: 2px; color: #5e6e87; white-space: normal; overflow-wrap: anywhere; }
.platform-body .platform-tree-child { padding-left: 27px; }
.platform-body .dev-nav-link > span { display: block; flex: 1; min-width: 0; }
.platform-body .dev-nav-link em { display: inline-block; background: #eef3ff; color: #326cd9; }
.platform-body .dev-nav-link.active { background: #eaf1ff; color: #326cd9; font-weight: 500; }
.platform-all-functions { display: flex; flex-shrink: 0; justify-content: center; align-items: center; gap: 7px; margin: auto 8px 10px; padding-top: 18px; color: #7a8ba5; font-size: 11px; }
.platform-all-functions svg { width: 14px; }
.platform-sidebar-resizer { flex: 0 0 9px; cursor: col-resize; touch-action: none; border: 0; background: transparent; }
.platform-sidebar-resizer:hover, .platform-sidebar-resizer:focus-visible { background: #c9daff; }
.dev-content { flex: 1; width: 0; height: 100%; max-width: none; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; margin: 0; padding: 0 2px 8px; }
.platform-dashboard-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; color: #263b5c; font-size: 16px; font-weight: 650; }
.platform-dashboard-caption span { color: #8090a7; font-size: 11px; font-weight: 400; }
.dev-heading { margin-bottom: 12px; gap: 10px; }
.dev-heading h1 { font-size: 19px; color: #263b5c; }
.dev-heading p { color: #8090a7; font-size: 11px; }
.dev-metrics { margin-bottom: 12px; }
.dev-surface { border: 1px solid #e7ecf4; border-radius: 0; }
.dev-dashboard-grid { border: 0; gap: 12px; background: transparent; }
.dev-section-heading { padding: 11px 13px; }
.dev-section-heading h2 { font-size: 13px; color: #2f4466; }
.dev-table { font-size: 12px; }
.dev-table th { background: var(--erp-table-header); color: #2e4366; font-size: 12px; font-weight: 600; padding: 9px; border: 1px solid #e2eaf7; }
.dev-table td { padding: 9px; color: #425777; border: 1px solid #e7edf7; }
.dev-table tbody tr:hover { background: #f7faff; }
.dev-record-link { color: #326cd9; font-size: 12px; }
.dev-subline { font-size: 10px; }
.dev-toolbar { background: #fff; padding: 9px 11px; border: 1px solid #e4eaf3; border-radius: 0; margin-bottom: 10px; gap: 7px; flex-wrap: wrap; }
.dev-toolbar > input { min-width: 0; max-width: 100%; }
.dev-text-link, .dev-tabs button, .dev-tabs a { font-size: 12px; }
.platform-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; padding: 9px; color: #7d8a9e; font-size: 11px; border-top: 1px solid #e7edf7; }
.platform-pagination label { display: flex; align-items: center; gap: 5px; }
.platform-pagination input { width: 45px; min-width: 0; padding: 3px; border: 1px solid var(--erp-border); border-radius: 2px; color: #435777; }
.platform-pagination .dev-icon { width: 25px; height: 25px; }
.platform-pagination button:disabled { opacity: .35; cursor: default; }
.intake-filters { align-items: center; }
.intake-filters > input[type="search"] { width: 225px; }
.intake-filters label { display: inline-flex; align-items: center; gap: 5px; color: #72829b; font-size: 11px; min-width: 0; }
.intake-filters input[type="date"], .intake-filters input[type="month"] { min-width: 0; height: 28px; border: 1px solid var(--erp-border); border-radius: 3px; padding: 3px; color: #435777; }
.intake-import-counts { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0; }
#intake-preview { min-width: 0; max-width: 100%; }
#intake-preview .dev-table-wrap { max-height: 320px; overflow: auto; }
#intake-file { width: 100%; min-width: 0; max-width: 100%; }
#supplier-import-file { width: 100%; min-width: 0; max-width: 100%; }
#supplier-import-preview { min-width: 0; max-width: 100%; }
#supplier-import-preview .dev-table-wrap { max-height: 320px; overflow: auto; }
.dev-dialog button:disabled { opacity: .45; cursor: default; }
.dev-cost-grid { margin-top: 14px; max-width: 100%; }
.dev-cost-grid .dev-table input { width: 120px; min-width: 70px; }
.dev-cost-grid .dev-table td:first-child { min-width: 95px; }
.dev-cost-grid .dev-table select { width: 95px; }
.dev-cost-grid .dev-table td:nth-child(3) input { width: 70px; }
.dev-cost-live { padding: 10px 0; font-size: 12px; color: #5c7189; overflow-wrap: anywhere; }
.dev-map-modes { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--erp-border); border-radius: 3px; }
.dev-map-modes button { display: flex; align-items: center; gap: 5px; padding: 5px 8px; background: #fff; color: #5e6e87; font-size: 12px; }
.dev-map-modes button[aria-pressed="true"] { color: #326cd9; background: #eaf1ff; }
.dev-map-tools, .dev-map-tools > div, .dev-map-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.dev-map-tools { justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--erp-border); color: #667a8f; font-size: 11px; }
.dev-map-tools label, .dev-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dev-map-legend i { width: 9px; height: 9px; border-radius: 50%; }
.dev-map-legend .first { background: #3478e5; }
.dev-map-legend .second { background: #16836d; }
.dev-geographic-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; }
.dev-geographic-map { position: relative; z-index: 0; height: 480px; min-width: 0; background: #dceff5; }
.dev-geographic-map .leaflet-overlay-pane svg { stroke-width: initial; }
.dev-geographic-map .leaflet-bottom.leaflet-right { max-width: calc(100% - 10px); }
.dev-geographic-map .leaflet-control-attribution { font-size: 10px; max-width: 100%; overflow-wrap: anywhere; }
.dev-geographic-map .leaflet-control-scale { margin-bottom: 36px; }
.dev-map-points { height: 480px; overflow: auto; border-left: 1px solid var(--erp-border); }
.dev-map-points > button { display: flex; flex-direction: column; gap: 4px; padding: 12px; width: 100%; text-align: left; border-bottom: 1px solid var(--erp-border); background: #fff; color: #435777; overflow-wrap: anywhere; }
.dev-map-points > button:hover { background: #f1f6ff; }
.dev-map-points small, .dev-map-points span { font-size: 10px; color: #7a8ba0; }
.dev-map-points strong { font-size: 12px; font-weight: 500; }
.dev-map-caption { padding: 7px 12px; color: #7a8ba0; font-size: 10px; border-top: 1px solid var(--erp-border); }
.dev-relation-graph { padding: 0 12px; overflow-x: auto; }
.dev-relation-row { display: grid; grid-template-columns: minmax(150px, 1fr) 18px minmax(120px, 1fr) 18px minmax(150px, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--erp-border); min-width: 620px; }
.dev-relation-row > div { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 4px; }
.dev-relation-row strong { font-size: 12px; font-weight: 500; }
.dev-relation-row small, .dev-relation-row span { color: #7a8ba0; font-size: 10px; }
.dev-map-change { margin-top: 12px; border-top: 1px solid var(--erp-border); }
@media (max-width: 1000px) {
  .dev-geographic-layout { grid-template-columns: minmax(0, 1fr); }
  .dev-map-points { height: auto; max-height: 180px; border-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-map-points > button { min-width: 0; }
  .dev-map-points > .dev-empty { grid-column: 1 / -1; }
  .dev-geographic-map { height: 400px; }
}
.dev-page-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; padding: 6px 12px; font-size: 10px; color: #8897ae; }
.dev-app :focus-visible { outline: 2px solid #78a5ff; outline-offset: -2px; }
@media (max-width: 1200px) { .dev-topbar #dev-search-form { display: none; } .dev-topbar { flex-wrap: wrap; } }
@media (max-width: 650px) {
  .dev-map-points { grid-template-columns: minmax(0, 1fr); }
  .platform-header { padding: 0 8px; gap: 8px; }
  .platform-account strong, .platform-environment, .dev-demo-tag { display: none; }
  .platform-mega { left: 8px; width: calc(100vw - 16px); padding: 0 12px 14px; }
  .platform-page-tabs { padding: 0 5px; }
  .platform-body { margin: 0 5px; }
  .platform-context-heading { padding: 9px 6px; }
  .platform-tree-parent { padding: 6px 3px; gap: 3px; }
  .platform-tree-parent > svg:first-child { display: none; }
  .platform-body .platform-tree-child { padding-left: 10px; }
  .dev-topbar { padding: 5px 7px; gap: 4px; }
  .dev-breadcrumb { width: 100%; }
  .dev-global-tools { width: 100%; justify-content: flex-end; }
  .dev-global-tools > .dev-primary span { display: inline; }
  .dev-heading h1 { font-size: 17px; }
  .dev-heading-actions, .dev-scope { flex-wrap: wrap; min-width: 0; }
  .dev-app select { max-width: 100%; }
  .dev-page-footer { padding: 4px 7px; }
}