/* Canonical Factory OS shell. Business workspace styles remain in app.css. */
.factory-os { --os-blue:#246bd4; --os-text:#192334; --os-muted:#778295; --os-line:#e5eaf1; --os-bg:#f3f5f9; --os-nav:#111c2e; background:var(--os-bg); color:var(--os-text); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.factory-os *, .factory-os *::before, .factory-os *::after { box-sizing:border-box; }
.factory-os button { font-family:inherit; }
.factory-os button:focus-visible, .factory-os a:focus-visible { outline:3px solid #75aaff; outline-offset:3px; }
.factory-os .sidebar { width:216px; padding:24px 12px 12px; background:var(--os-nav); border:0; color:#c1ccdc; display:flex; flex-direction:column; }
.factory-os .sidebar .logo { gap:12px; min-height:54px; margin:0; padding:0 12px 20px; border:0; flex-shrink:0; }
.factory-os .os-brand-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:9px; background:#fff; color:#15213a; font-size:28px; font-weight:900; font-style:italic; }
.factory-os .sidebar .logo-title { color:#fff; font-size:16px; font-weight:750; letter-spacing:1.6px; }
.factory-os .sidebar .logo-subtitle { color:#8494ad; font-size:11px; letter-spacing:.5px; margin-top:3px; }
.factory-os .sidebar .menu { flex:1; min-height:0; overflow:auto; padding:8px 0 16px; scrollbar-width:thin; scrollbar-color:#354156 transparent; }
.factory-os .sidebar .menu-main { display:flex; align-items:center; gap:10px; width:100%; min-height:34px; padding:8px 11px; margin:2px 0; color:#c2ccda; border:0; border-radius:5px; background:transparent; font-size:11px; font-weight:450; text-align:left; line-height:1.2; box-shadow:none; }
.factory-os .sidebar .menu-main:hover:not(:disabled) { color:#fff; background:#1c2b43; }
.factory-os .sidebar .menu-main.active { color:#fff; background:#26364f; box-shadow:inset 2px 0 #6da5ff; }
.factory-os .sidebar .menu-main { height:auto; }
.factory-os .topbar::before { content:none; }
.factory-os .topbar { color:var(--os-text); }
.factory-os .profile-user-button { color:var(--os-text); }
.factory-os .current-user-copy strong { color:#344563 !important; }
.factory-os .current-user-copy span { color:#7e8ba0 !important; }
.factory-os .sidebar .menu-icon { width:16px; height:16px; flex:0 0 16px; display:flex; color:inherit; }
.factory-os svg { width:18px; height:18px; flex-shrink:0; }
.factory-os .sidebar .menu-icon svg { width:16px; height:16px; }
.factory-os .os-nav-label { color:#7d8da7; font-size:9px; letter-spacing:.9px; text-transform:uppercase; padding:19px 11px 7px; }
.factory-os .sidebar .menu-main:disabled { color:#7d8ca4; cursor:default; }
.factory-os .os-soon { font-size:8px; color:#8494ac; margin-left:auto; opacity:.8; }
.factory-os .sidebar-footer { padding:11px 10px 0; border-top:1px solid #28364a; font-size:10px; color:#94a1b6; flex-shrink:0; }
.factory-os .sidebar-sync { display:none; }
.factory-os .sidebar-version { color:#72839f; font-size:9px; }
.factory-os .sidebar-status { color:#a1adc0; margin-top:8px; font-size:10px; }
.factory-os .workspace { margin-left:216px; min-width:0; background:var(--os-bg); }
.factory-os .topbar { height:62px; padding:0 28px; background:#fff; border-bottom:1px solid var(--os-line); box-shadow:none; backdrop-filter:none; }
.os-breadcrumb { display:flex; align-items:center; gap:10px; font-size:11px; color:#8290a4; }
.os-breadcrumb strong { font-weight:500; color:#39465a; }
.factory-os .factory-select { background:transparent; border:0; padding:0; font-size:11px; color:#7b8798; }
.factory-os .factory-select span:last-child { display:none; }
.factory-os .current-user-avatar { border-radius:50%; width:31px; height:31px; background:#e9eff9; color:#315889; }
.factory-os .current-user-copy strong { font-size:11px; }
.factory-os .current-user-copy span { font-size:10px; }
.factory-os .topbar-right { gap:24px; }
.factory-os #dashboardPage { padding:26px 28px 30px; max-width:1800px; margin:0 auto; }
.os-page-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:21px; }
.os-eyebrow { font-size:9px; letter-spacing:1.3px; color:#7a879c; font-weight:650; display:flex; align-items:center; gap:8px; margin-bottom:7px; }
#osEnvironment { color:#9b6017; background:#fff0d8; padding:3px 5px; border-radius:3px; letter-spacing:.6px; }
.os-page-heading h1 { color:#172236; font-size:25px; letter-spacing:-.7px; margin:0 0 7px; font-weight:720; line-height:1.2; }
.os-page-heading p { font-size:11px; color:var(--os-muted); margin:0; }
.os-refresh { display:flex; align-items:center; gap:14px; color:#7f8a9a; font-size:10px; }
.os-button { display:inline-flex; gap:7px; align-items:center; justify-content:center; border:1px solid #dbe2eb; border-radius:5px; min-height:33px; background:#fff; color:#344563; font-size:11px; font-weight:550; padding:7px 11px; cursor:pointer; }
.os-button svg { width:14px; height:14px; }
.os-button:hover { background:#f8faff; border-color:#a5c0e8; }
.os-button:disabled { opacity:.5; cursor:wait; }
.os-notice { background:#fff5e6; border:1px solid #efd0a7; border-radius:6px; padding:13px; color:#885514; font-size:12px; margin-bottom:16px; }
.os-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.os-metric { background:#fff; border:1px solid var(--os-line); border-radius:7px; padding:15px 16px 14px; }
.os-metric-top { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; color:#536178; font-weight:500; }
.os-metric-icon { width:26px; height:26px; display:grid; place-items:center; border-radius:5px; background:#edf4ff; color:#3c79d4; }
.os-metric-icon svg { width:15px; height:15px; }
.os-metric-icon.amber { color:#cb902b; background:#fff5df; }
.os-metric-icon.green { color:#339263; background:#ecf8f0; }
.os-metric-icon.red { color:#cc635d; background:#fff0ef; }
.os-metric > strong { display:block; font-size:32px; font-weight:650; letter-spacing:-1px; line-height:1.2; margin:9px 0 7px; color:#1f2c43; font-variant-numeric:tabular-nums; }
.os-metric small { font-size:9px; color:#8a95a5; display:block; }
.os-dashboard-grid { display:grid; grid-template-columns:minmax(0,2.15fr) minmax(270px,1fr); gap:18px; align-items:start; }
.os-main-column,.os-side-column { display:flex; flex-direction:column; gap:18px; min-width:0; }
.os-panel { border:1px solid var(--os-line); border-radius:7px; background:#fff; min-width:0; overflow:hidden; }
.os-panel > header { min-height:66px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:17px 18px; border-bottom:1px solid #edf0f5; }
.os-panel h2 { font-size:13px; color:#202c40; margin:0; font-weight:650; }
.os-panel header p { font-size:10px; line-height:1.4; margin:5px 0 0; color:#8993a4; }
.os-segments { border:1px solid #dfe5ed; display:flex; padding:3px; gap:3px; border-radius:5px; }
.os-segments button { background:#fff; color:#718098; border:0; font-size:10px; border-radius:3px; padding:6px 10px; cursor:pointer; }
.os-segments button[aria-pressed="true"] { background:var(--os-blue); color:#fff; }
.os-plan-stats { display:grid; grid-template-columns:repeat(3,1fr); padding:18px 20px; border-bottom:1px solid #edf0f5; }
.os-plan-stats > div { border-right:1px solid var(--os-line); padding-left:22px; }
.os-plan-stats > div:first-child { padding-left:0; }
.os-plan-stats > div:last-child { border:0; }
.os-plan-stats strong { display:block; font-size:25px; color:#21324d; font-weight:650; font-variant-numeric:tabular-nums; }
.os-plan-stats span { display:block; font-size:10px; margin-top:5px; color:#8a94a3; }
.os-table-wrap { overflow-x:auto; }
.os-table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; color:#48566b; }
.os-table th { padding:10px 17px; color:#8a95a8; font-size:9px; font-weight:500; background:#fafbfd; border-bottom:1px solid #edf0f5; white-space:nowrap; }
.os-table td { padding:13px 17px; border-bottom:1px solid #eff2f6; line-height:1.5; }
.os-table tr:last-child td { border:0; }
.os-table td small { display:block; color:#8390a3; font-size:10px; margin-top:3px; }
.os-order-link { padding:0; border:0; background:none; color:#2b64b6; font-size:11px; font-weight:550; cursor:pointer; text-align:left; max-width:230px; overflow-wrap:anywhere; }
.os-order-link:hover { text-decoration:underline; }
.os-status { display:inline-flex; align-items:center; font-size:9px; font-weight:500; border-radius:4px; padding:4px 7px; background:#edf1f7; color:#66758e; }
.os-status.shipped,.os-status.completed { background:#edf8f1; color:#31835d; }
.os-status.production,.os-status.planned,.os-status.new { background:#edf4ff; color:#3d72bb; }
.os-status.accepted,.os-status.picking,.os-status.shipment_planned { background:#fff4de; color:#a37a26; }
.os-status.attention,.os-status.error { background:#fff0ef; color:#c15d52; }
.os-panel-foot { display:flex; justify-content:space-between; gap:12px; align-items:center; background:#fdfdfe; border-top:1px solid #edf0f5; padding:12px 17px; font-size:9px; color:#8390a5; line-height:1.5; }
.os-panel-foot b { color:#4a6080; padding-left:3px; }
.os-link { background:none; border:0; color:#356bbb; font-size:10px; cursor:pointer; white-space:nowrap; padding:0; }
.os-empty { min-height:116px; padding:22px 18px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; text-align:center; color:#8895a9; font-size:10px; line-height:1.5; }
.os-empty strong { color:#687a92; font-size:11px; font-weight:500; }
.os-empty-symbol { font-size:26px; color:#a7b6cb; line-height:1; margin-bottom:3px; }
.os-flow { display:grid; grid-template-columns:repeat(4,1fr); padding:19px 18px 20px; gap:12px; }
.os-flow > div { position:relative; display:flex; flex-direction:column; gap:9px; align-items:flex-start; font-size:10px; color:#7e8ca2; }
.os-flow > div:not(:last-child)::after { content:""; position:absolute; height:1px; background:#e4eaf4; top:12px; left:36px; right:0; }
.os-step { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#eff4fc; color:#6e8ab4; font-size:9px; z-index:1; }
.os-flow strong { color:#314760; font-size:24px; font-weight:600; }
.os-chip { color:#75859d; background:#f0f3f8; border:1px solid #e7ecf3; border-radius:4px; padding:4px 7px; font-size:9px; white-space:nowrap; }
.os-attention-clear { text-align:center; padding:24px 16px; }
.os-attention-clear > span { display:grid; place-items:center; margin:0 auto 12px; width:34px; height:34px; background:#edf8f0; color:#42a475; border-radius:50%; font-size:19px; }
.os-attention-clear strong { display:block; font-size:11px; font-weight:550; color:#52667b; }
.os-attention-clear p { font-size:10px; color:#91a0b2; margin:7px 0 0; }
.os-attention-item { border:0; border-bottom:1px solid #f0e8e4; background:#fffcf9; width:100%; padding:16px; display:flex; align-items:flex-start; gap:11px; text-align:left; font-size:10px; color:#b47c53; cursor:pointer; }
.os-attention-item > span:nth-child(2) { flex:1; overflow-wrap:anywhere; }
.os-attention-item strong { display:block; font-size:11px; color:#655448; font-weight:600; }
.os-attention-item small { display:block; color:#9d8c80; margin:4px 0; }
.os-attention-dot { color:#cd765a; background:#fff0e9; border-radius:50%; width:18px; height:18px; text-align:center; }
.os-integration-list { padding:8px 18px; }
.os-integration-list > div { display:flex; align-items:center; justify-content:space-between; padding:11px 0; font-size:10px; color:#718096; border-bottom:1px solid #f0f3f7; }
.os-integration-list > div:last-child { border:0; }
.os-integration-list strong { font-size:12px; color:#3f536e; font-weight:600; }
.os-system-note { font-size:9px; color:#95a0b0; padding:6px 18px 14px; line-height:1.5; }
.os-workspaces > button { display:flex; align-items:center; gap:12px; width:100%; border:0; border-bottom:1px solid #eef1f6; background:white; padding:16px 18px; text-align:left; color:#5380b8; cursor:pointer; }
.os-workspaces > button:hover { background:#f8fbff; }
.os-workspaces > button > span:nth-child(2) { flex:1; }
.os-workspaces strong { font-weight:550; font-size:11px; color:#445775; display:block; }
.os-workspaces small { font-size:9px; color:#8b99ac; display:block; margin-top:5px; }
.os-next { padding:16px 18px; background:#fafbfd; }
.os-next > span { font-size:9px; color:#919fb1; display:block; margin-bottom:7px; }
.os-next strong { font-size:10px; color:#667b99; font-weight:500; }
.os-inline-stats { padding:13px 18px; font-size:10px; color:#7c8ca3; border-bottom:1px solid #eef1f6; }
.os-quantity { white-space:nowrap; color:#3b5474; font-weight:550; }
.os-mrp-note { padding:15px 18px; background:#f9fbff; color:#6988b4; border-top:1px solid #eaf0f9; font-size:10px; line-height:1.6; }
.os-mrp-note span { display:block; color:#93a0b1; font-size:9px; margin-top:4px; }
.factory-os .footer { color:#a2adbc; font-size:10px; padding:16px; }
.factory-os [hidden] { display:none !important; }
@media(min-width:1600px) { .factory-os #dashboardPage { padding:30px 36px; } .os-metric { padding:20px; } .os-table td { padding-top:16px; padding-bottom:16px; } }
@media(max-width:1150px) { .os-dashboard-grid { grid-template-columns:minmax(0,1fr); } .os-side-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } .os-workspaces { grid-column:1/-1; } .os-metrics { gap:8px; } .os-metric { padding:12px; } .os-metric-top { font-size:10px; } .os-metric-icon { display:none; } .os-refresh > span { display:none; } .os-breadcrumb { display:none; } }
@media(max-width:800px) { .factory-os .workspace { margin-left:0; } .factory-os .topbar { display:none; } .factory-os #dashboardPage { padding:20px 16px; } .factory-os .sidebar { width:244px; padding-top:20px; } .factory-os .sidebar .menu-main { min-height:42px; font-size:12px; } .factory-os .mobile-appbar { background:#111c2e; } .factory-os .app.auth-pending .mobile-appbar { display:none; } .os-page-heading h1 { font-size:23px; } .os-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; } .os-metric-icon { display:grid; } .os-metric { padding:12px; } .os-metric-top { min-height:26px; } .os-metric small { line-height:1.5; } .os-metric > strong { font-size:28px; } }
@media(max-width:520px) { .os-page-heading { align-items:flex-end; } .os-page-heading p { font-size:10px; } .os-page-heading h1 { font-size:22px; } .os-refresh .os-button { width:34px; overflow:hidden; font-size:0; padding:8px; gap:0; } .os-refresh .os-button svg { width:16px; height:16px; } .os-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .os-metric:last-child { grid-column:1/-1; display:grid; grid-template-columns:1fr auto; gap:0 15px; } .os-metric:last-child > strong { grid-column:2; grid-row:1/3; margin:0; } .os-metric:last-child small { grid-row:2; } .os-metric:last-child .os-metric-icon { display:none; } .os-side-column { display:flex; } .os-flow { gap:8px; padding:16px 13px; } .os-flow > div { font-size:9px; line-height:1.4; } .os-panel > header { padding:15px 13px; } .os-panel h2 { font-size:12px; } .os-panel header .os-link { font-size:9px; } .os-panel-foot { padding:11px 13px; gap:8px; } .os-table { min-width:480px; } .os-plan-stats { padding:16px; } .os-plan-stats > div { padding-left:15px; } .os-plan-stats span { font-size:9px; } .os-order-link { max-width:190px; } }