/* Sidebar geometry and navigation are owned by the shared UI-01 shell. */ @media (min-width: 821px) { #appView.automats-v2-active .topbar { display: none; } } #appView.automats-v2-active .main-content { min-width: 0; } #appView.automats-v2-active .page-view { width: 100%; max-width: none; margin: 0; padding: 14px 18px 20px 10px; } #appView.automats-v2-active #pageView .automats-stage-a { position: relative; display: grid; grid-template-rows: auto auto auto auto auto; gap: 0; min-width: 0; color: var(--oxy-text-primary); font-family: var(--oxy-font-family); font-size: 13px; } #appView.automats-v2-active #pageView .stage-fixture-banner { position: fixed; z-index: 45; left: 10px; bottom: 190px; width: 134px; padding: 4px 6px; border: 1px solid #f3d187; border-radius: 5px; color: #78540a; background: rgba(255, 248, 224, .96); font-size: 9px; font-weight: 750; letter-spacing: .015em; line-height: 12px; pointer-events: none; } #appView.automats-v2-active #pageView .stage-page-head { position: relative; display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; } #appView.automats-v2-active #pageView .stage-title { min-width: 300px; } #appView.automats-v2-active #pageView .stage-eyebrow { margin: 0 0 1px; color: var(--oxy-text-secondary); font-size: 11px; font-weight: 600; line-height: 15px; } #appView.automats-v2-active #pageView .stage-title h1 { margin: 0; color: var(--oxy-text-primary); font-size: 32px; font-weight: 800; letter-spacing: normal; line-height: 40px; } #appView.automats-v2-active #pageView .stage-title > p:last-child { margin: 0; color: var(--oxy-text-secondary); font-size: 14px; font-weight: 500; line-height: 20px; } #appView.automats-v2-active #pageView .stage-head-side { position: relative; display: grid; justify-items: end; gap: 8px; } #appView.automats-v2-active #pageView .stage-global-controls, #appView.automats-v2-active #pageView .stage-actions { display: flex; align-items: center; gap: 9px; } #appView.automats-v2-active #pageView .stage-control, #appView.automats-v2-active #pageView .stage-button, #appView.automats-v2-active #pageView .stage-filter-button, #appView.automats-v2-active #pageView .stage-chip, #appView.automats-v2-active #pageView .stage-open, #appView.automats-v2-active #pageView .stage-more, #appView.automats-v2-active #pageView .stage-pagination button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--oxy-border-strong); color: var(--oxy-text-secondary); background: #fff; font-family: var(--oxy-font-family); font-size: 12px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: border-color var(--oxy-motion-fast), background-color var(--oxy-motion-fast), color var(--oxy-motion-fast), box-shadow var(--oxy-motion-fast); } #appView.automats-v2-active #pageView .stage-control { height: 32px; padding: 0 10px; border-radius: 9px; box-shadow: 0 3px 9px rgba(42, 76, 140, .05); } #appView.automats-v2-active #pageView .stage-control .stage-icon { width: 16px; height: 16px; color: var(--oxy-primary); } #appView.automats-v2-active #pageView .stage-notifications { position: relative; width: 35px; padding: 0; } #appView.automats-v2-active #pageView .stage-notifications i { position: absolute; top: -5px; right: -3px; display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; color: #fff; background: var(--oxy-danger); font-size: 9px; font-style: normal; } #appView.automats-v2-active #pageView .stage-button { min-height: 34px; padding: 0 13px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 18.85px; } #appView.automats-v2-active #pageView .stage-button .stage-icon, #appView.automats-v2-active #pageView .stage-filter-button .stage-icon { width: 16px; height: 16px; } #appView.automats-v2-active #pageView .stage-refresh { color: var(--oxy-primary); border-color: #cfe5ff; } #appView.automats-v2-active #pageView .stage-add { color: #fff; border-color: transparent; background: var(--oxy-gradient-primary); } #appView.automats-v2-active #pageView .stage-control:hover, #appView.automats-v2-active #pageView .stage-button:hover, #appView.automats-v2-active #pageView .stage-filter-button:hover, #appView.automats-v2-active #pageView .stage-open:hover, #appView.automats-v2-active #pageView .stage-more:hover { border-color: var(--oxy-primary); box-shadow: 0 3px 9px rgba(47, 140, 255, .12); } #appView.automats-v2-active #pageView .stage-add:hover { background: var(--oxy-primary-hover); } #appView.automats-v2-active #pageView .stage-control:focus-visible, #appView.automats-v2-active #pageView .stage-button:focus-visible, #appView.automats-v2-active #pageView .stage-filter-button:focus-visible, #appView.automats-v2-active #pageView .stage-chip:focus-visible, #appView.automats-v2-active #pageView .stage-open:focus-visible, #appView.automats-v2-active #pageView .stage-more:focus-visible, #appView.automats-v2-active #pageView .stage-search input:focus-visible, #appView.automats-v2-active #pageView .stage-group-select select:focus-visible { outline: 2px solid var(--oxy-primary); outline-offset: 2px; } #appView.automats-v2-active #pageView .stage-popover-root:not([hidden]) { position: absolute; z-index: 30; top: 74px; right: 0; } #appView.automats-v2-active #pageView .stage-period-popover, #appView.automats-v2-active #pageView .stage-notice-popover, #appView.automats-v2-active #pageView .stage-filter-popover { display: grid; min-width: 210px; gap: 5px; padding: 10px; border: 1px solid var(--oxy-border-strong); border-radius: 10px; background: #fff; box-shadow: var(--oxy-shadow-floating); } #appView.automats-v2-active #pageView .stage-period-popover button { padding: 7px 9px; border: 0; border-radius: 6px; color: var(--oxy-text-secondary); background: #fff; text-align: left; cursor: pointer; } #appView.automats-v2-active #pageView .stage-period-popover button:hover { color: var(--oxy-primary); background: var(--oxy-primary-soft); } #appView.automats-v2-active #pageView .stage-filter-popover label { display: grid; gap: 5px; color: var(--oxy-text-secondary); font-size: 12px; } #appView.automats-v2-active #pageView .stage-filter-popover select { min-height: 34px; border: 1px solid var(--oxy-border-strong); border-radius: 7px; background: #fff; color: var(--oxy-text-primary); } #appView.automats-v2-active #pageView .stage-reset { padding: 7px 9px; border: 0; border-radius: 6px; color: var(--oxy-primary); background: var(--oxy-info-soft); text-align: left; cursor: pointer; } #appView.automats-v2-active #pageView .stage-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; min-width: 0; } #appView.automats-v2-active #pageView .stage-kpi, #appView.automats-v2-active #pageView .stage-card, #appView.automats-v2-active #pageView .stage-registry-card { min-width: 0; border: 1px solid var(--oxy-border); border-radius: var(--oxy-radius-card-sm); background: #fff; box-shadow: 0 5px 17px rgba(42, 76, 140, .055); } #appView.automats-v2-active #pageView .stage-kpi { display: flex; height: 93px; align-items: flex-start; gap: 8px; padding: 10px 12px; overflow: hidden; } #appView.automats-v2-active #pageView .stage-kpi-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 50%; color: var(--oxy-primary); background: var(--oxy-info-soft); } #appView.automats-v2-active #pageView .stage-kpi.blue .stage-kpi-icon, #appView.automats-v2-active #pageView .stage-kpi.purple .stage-kpi-icon { background: transparent; } #appView.automats-v2-active #pageView .stage-kpi-art { display: block; width: 40px; height: 40px; } #appView.automats-v2-active #pageView .stage-kpi-glyph { display: block; width: 22px; height: 22px; overflow: visible; } #appView.automats-v2-active #pageView .stage-kpi-warning-shape { fill: currentColor; } #appView.automats-v2-active #pageView .stage-kpi-warning-mark { fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; } #appView.automats-v2-active #pageView .stage-kpi-active-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: currentColor; } #appView.automats-v2-active #pageView .stage-kpi-document { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #appView.automats-v2-active #pageView .stage-kpi.green .stage-kpi-icon { color: #13bd8a; background: #e6faf4; } #appView.automats-v2-active #pageView .stage-kpi.orange .stage-kpi-icon { color: #f3a400; background: #fff5df; } #appView.automats-v2-active #pageView .stage-kpi.red .stage-kpi-icon { color: #ef536d; background: #ffedf0; } #appView.automats-v2-active #pageView .stage-kpi.slate .stage-kpi-icon { color: #71809b; background: #edf2fb; } #appView.automats-v2-active #pageView .stage-kpi.purple .stage-kpi-icon { color: #9856ed; } #appView.automats-v2-active #pageView .stage-kpi-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 0; padding-top: 2px; } #appView.automats-v2-active #pageView .stage-kpi-label { overflow: visible; color: var(--oxy-text-secondary); font-size: 14px; font-weight: 650; line-height: 20px; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-kpi-value { display: flex; align-items: center; gap: 6px; color: var(--oxy-text-primary); font-size: 28px; font-weight: 800; letter-spacing: normal; line-height: 34px; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-kpi-copy small { overflow: hidden; color: var(--oxy-text-secondary); font-size: 12px; font-weight: 400; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-kpi-icon .stage-kpi-art { width: 25px; height: 25px; } #appView.automats-v2-active #pageView .stage-kpi-icon .stage-kpi-glyph { width: 21px; height: 21px; } #appView.automats-v2-active #pageView .stage-kpi-tag { padding: 2px 6px; border-radius: 99px; color: #0aa779; background: #dcfaf0; font-size: 10px; font-weight: 750; letter-spacing: 0; } #appView.automats-v2-active #pageView .stage-mini-bars { display: flex; height: 57px; align-items: flex-end; gap: 2px; flex: none; margin: 15px 0 0 auto; } #appView.automats-v2-active #pageView .stage-mini-bars i { width: 3px; min-height: 12px; border-radius: 3px 3px 0 0; background: var(--oxy-primary); } #appView.automats-v2-active #pageView .stage-kpi.green .stage-mini-bars i { background: #0bcb82; } #appView.automats-v2-active #pageView .stage-kpi.orange .stage-mini-bars i { background: #f8ae2b; } #appView.automats-v2-active #pageView .stage-kpi.red .stage-mini-bars i { background: #f94b68; } #appView.automats-v2-active #pageView .stage-kpi.purple .stage-mini-bars i { background: #9b55f6; } #appView.automats-v2-active #pageView .stage-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; margin-bottom: 10px; } #appView.automats-v2-active #pageView .stage-card { height: 102px; padding: 10px 16px; } #appView.automats-v2-active #pageView .stage-card h2 { margin: 0; color: var(--oxy-text-primary); font-size: 16px; font-weight: 700; line-height: 24px; } #appView.automats-v2-active #pageView .stage-segments { display: grid; height: 16px; gap: 2px; margin: 7px 0 9px; overflow: hidden; border-radius: 99px; background: #e7eef9; } #appView.automats-v2-active #pageView .stage-segments i { display: block; min-width: 0; height: 100%; border-radius: inherit; } #appView.automats-v2-active #pageView .stage-segments .working, #appView.automats-v2-active #pageView .stage-legend .working { background: #0bcb82; } #appView.automats-v2-active #pageView .stage-segments .no-sales, #appView.automats-v2-active #pageView .stage-legend .no-sales { background: #f8ae2b; } #appView.automats-v2-active #pageView .stage-segments .not-working, #appView.automats-v2-active #pageView .stage-legend .not-working { background: #f94b68; } #appView.automats-v2-active #pageView .stage-segments .attention, #appView.automats-v2-active #pageView .stage-legend .attention { background: #f8ae2b; } #appView.automats-v2-active #pageView .stage-segments .inactive, #appView.automats-v2-active #pageView .stage-legend .inactive { background: #9aa8c2; } #appView.automats-v2-active #pageView .stage-segments .offline, #appView.automats-v2-active #pageView .stage-legend .offline { background: #7e94bd; } #appView.automats-v2-active #pageView .stage-segments .error, #appView.automats-v2-active #pageView .stage-legend .error { background: #f97316; } #appView.automats-v2-active #pageView .stage-segments .stale, #appView.automats-v2-active #pageView .stage-legend .stale { background: #f94b68; } #appView.automats-v2-active #pageView .stage-segments .unknown, #appView.automats-v2-active #pageView .stage-legend .unknown { background: #9b55f6; } #appView.automats-v2-active #pageView .stage-legend { display: grid; align-items: start; column-gap: 2px; color: var(--oxy-text-secondary); font-size: clamp(9px, 0.75vw, 11px); font-weight: 400; line-height: 13px; } #appView.automats-v2-active #pageView .stage-legend span { display: grid; min-width: 0; grid-template-rows: minmax(13px, auto) 12px; justify-items: center; gap: 0; text-align: center; } #appView.automats-v2-active #pageView .stage-legend-label { min-width: 0; font-size: inherit; font-weight: 500; line-height: 13px; overflow-wrap: anywhere; } #appView.automats-v2-active #pageView .stage-legend-count { color: var(--oxy-text-secondary); font-size: clamp(9px, 0.68vw, 10px); line-height: 12px; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-legend span > i { display: none; } #appView.automats-v2-active #pageView .stage-toolbar { position: relative; display: flex; min-width: 0; align-items: center; gap: 8px; margin-bottom: 10px; } #appView.automats-v2-active #pageView .stage-search { display: flex; height: 36px; min-width: 320px; max-width: 390px; flex: 0 1 clamp(320px, 29.36%, 390px); align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--oxy-border-strong); border-radius: 8px; background: #fff; } #appView.automats-v2-active #pageView .stage-search .stage-icon { width: 16px; height: 16px; flex: none; color: var(--oxy-text-muted); } #appView.automats-v2-active #pageView .stage-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--oxy-text-primary); background: transparent; font-family: var(--oxy-font-family); font-size: 12px; } #appView.automats-v2-active #pageView .stage-search input::placeholder { color: var(--oxy-text-muted); opacity: 1; } #appView.automats-v2-active #pageView .stage-quick-filters { display: flex; min-width: 0; align-items: center; gap: 6px; } #appView.automats-v2-active #pageView .stage-chip { min-height: 34px; padding: 0 9px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 18.85px; } #appView.automats-v2-active #pageView .stage-chip.active { color: var(--oxy-primary); border-color: #a8d5ff; background: var(--oxy-primary-soft); } #appView.automats-v2-active #pageView .stage-chip:hover { border-color: var(--oxy-primary); } #appView.automats-v2-active #pageView .stage-group-select select { width: 148px; height: 34px; padding: 0 10px; border: 1px solid var(--oxy-border-strong); border-radius: 8px; color: var(--oxy-text-secondary); background: #fff; font-family: var(--oxy-font-family); font-size: 13px; font-weight: 600; line-height: 18.85px; } #appView.automats-v2-active #pageView .stage-group-select { margin-left: auto; } #appView.automats-v2-active #pageView .stage-filter-button { height: 34px; padding: 0 10px; border-radius: 8px; color: var(--oxy-primary); font-size: 13px; font-weight: 600; line-height: 18.85px; } #appView.automats-v2-active #pageView .stage-registry-card { position: relative; overflow: hidden; padding: 0 13px 10px; border-radius: 12px; } #appView.automats-v2-active #pageView .stage-table-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } #appView.automats-v2-active #pageView .stage-table-scroll { width: 100%; min-width: 0; overflow-x: auto; } #appView.automats-v2-active #pageView .stage-table { display: block; width: 100%; min-width: 0; border-collapse: collapse; } #appView.automats-v2-active #pageView .stage-table thead, #appView.automats-v2-active #pageView .stage-table tbody { display: block; width: 100%; } #appView.automats-v2-active #pageView .stage-table tr { display: grid; width: 100%; grid-template-columns: minmax(215px,1.45fr) minmax(130px,.9fr) minmax(145px,1fr) minmax(125px,.9fr) minmax(82px,.55fr) minmax(205px,1.3fr) minmax(130px,.9fr); } #appView.automats-v2-active #pageView .stage-table th, #appView.automats-v2-active #pageView .stage-table td { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; } #appView.automats-v2-active #pageView .stage-table th { height: 39px; padding: 0 10px; border-bottom: 1px solid #eaf0fa; color: var(--oxy-text-secondary); background: #f8fbff; font-size: 12px; font-weight: 650; line-height: 17.4px; text-align: left; } #appView.automats-v2-active #pageView .stage-table td { height: 58px; min-height: 58px; padding: 6px 10px; border-bottom: 1px solid #e8eef7; color: var(--oxy-text-secondary); font-size: 13px; font-weight: 400; line-height: 19px; } #appView.automats-v2-active #pageView .stage-table tbody tr { height: auto; min-height: 58px; } #appView.automats-v2-active #pageView .stage-table tbody tr td { height: auto; } #appView.automats-v2-active #pageView .stage-table tbody tr:last-child td { border-bottom: 0; } #appView.automats-v2-active #pageView .stage-table tbody tr:hover td { background: #f9fcff; } #appView.automats-v2-active #pageView .stage-table td:first-child { overflow: hidden; } #appView.automats-v2-active #pageView .stage-table td.stage-tags-cell { overflow: visible; } #appView.automats-v2-active #pageView .stage-table td.stage-tags-cell .machine-tags { margin-top: 0; } #appView.automats-v2-active #pageView .stage-table td small { display: block; overflow: hidden; margin-top: 4px; color: var(--oxy-text-secondary); font-size: 12px; font-weight: 400; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-machine-name { display: block; overflow: hidden; color: var(--oxy-text-primary); font-size: 14px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-table .machine-tags, #appView.automats-v2-active #pageView .machine-mobile-card .machine-tags { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; margin-top: 2px; } #appView.automats-v2-active #pageView .stage-table .machine-tag, #appView.automats-v2-active #pageView .machine-mobile-card .machine-tag { max-width: 100%; padding: 1px 6px; border: 1px solid #e3e9f1; border-radius: 999px; color: #59677a; background: #f4f6f9; font-size: 10px; font-weight: 500; line-height: 14px; overflow-wrap: anywhere; white-space: normal; } #appView.automats-v2-active #pageView .stage-sales-value { display: block; overflow: hidden; color: var(--oxy-text-primary); font-size: 13px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-status { display: flex; width: 100%; align-items: center; min-width: 0; } #appView.automats-v2-active #pageView .stage-status-primary { display: flex; width: 100%; min-width: 0; align-items: center; gap: 7px; } #appView.automats-v2-active #pageView .stage-status-icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; } #appView.automats-v2-active #pageView .stage-status-primary .oxy-icon { width: 18px; height: 18px; flex: 0 0 18px; } #appView.automats-v2-active #pageView .stage-row-reason { margin-top: 4px !important; } #appView.automats-v2-active #pageView .stage-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; } #appView.automats-v2-active #pageView .stage-dot.green { background: #0bcb82; box-shadow: 0 0 0 4px #e4faf3; } #appView.automats-v2-active #pageView .stage-dot.orange { background: #f8ae2b; box-shadow: 0 0 0 4px #fff4df; } #appView.automats-v2-active #pageView .stage-dot.red { background: #f94b68; box-shadow: 0 0 0 4px #ffebef; } #appView.automats-v2-active #pageView .stage-dot.error { background: #f97316; box-shadow: 0 0 0 4px #fff0e5; } #appView.automats-v2-active #pageView .stage-dot.stale { background: #f94b68; box-shadow: 0 0 0 4px #ffeaee; } #appView.automats-v2-active #pageView .stage-dot.unknown { background: #9b55f6; box-shadow: 0 0 0 4px #f3eaff; } #appView.automats-v2-active #pageView .stage-dot.slate { background: #9aa8c2; box-shadow: 0 0 0 4px #edf2fb; } #appView.automats-v2-active #pageView .stage-dot.gray { background: #8297bd; box-shadow: 0 0 0 4px #edf2fb; } #appView.automats-v2-active #pageView .stage-status-label { display: inline-block; overflow: hidden; max-width: 100%; padding: 1px 6px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-status-label.green { color: #06986d; background: #e7faf3; } #appView.automats-v2-active #pageView .stage-status-label.orange { color: #d57e00; background: #fff3dc; } #appView.automats-v2-active #pageView .stage-status-label.stale { color: #c9435c; background: #ffeaee; } #appView.automats-v2-active #pageView .stage-status-label.slate { color: #596c91; background: #edf2fb; } #appView.automats-v2-active #pageView .stage-status-label.error { color: #c2410c; background: #fff0e5; } #appView.automats-v2-active #pageView .stage-status-label.stale { color: #c42e4c; background: #ffeaee; } #appView.automats-v2-active #pageView .stage-status-label.unknown { color: #7b35cf; background: #f3eaff; } #appView.automats-v2-active #pageView .stage-connection { display: flex; align-items: center; gap: 6px; color: var(--oxy-text-secondary); font-size: 13px; font-weight: 400; line-height: 18px; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-connection b { font-weight: 400; } #appView.automats-v2-active #pageView .stage-connection small { margin-left: 14px; } #appView.automats-v2-active #pageView .stage-stock { color: var(--oxy-text-secondary); font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-last { display: block; overflow: hidden; color: var(--oxy-text-secondary); font-size: 13px; font-weight: 400; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-table td.stage-actions-cell { flex-direction: row; align-items: center; justify-content: flex-end; gap: 7px; padding-inline: 8px; } #appView.automats-v2-active #pageView .stage-open { flex: 0 0 auto; min-width: 78px; height: 28px; padding: 0 10px; border-color: var(--oxy-primary); border-radius: 7px; color: var(--oxy-primary); font-size: 13px; font-weight: 600; line-height: 18.85px; } #appView.automats-v2-active #pageView .stage-more { width: 21px; height: 27px; margin-left: 2px; padding: 0; border-color: transparent; background: transparent; } #appView.automats-v2-active #pageView .stage-more .stage-icon { width: 15px; height: 15px; } #appView.automats-v2-active #pageView .stage-table .stage-empty { grid-column: 1 / -1; height: 120px; align-items: center; text-align: center; } #appView.automats-v2-active #pageView .stage-table-foot { display: flex; min-height: 39px; align-items: center; justify-content: space-between; padding: 3px 4px 0; color: var(--oxy-text-muted); font-size: 11px; } #appView.automats-v2-active #pageView .stage-pagination { display: flex; align-items: center; gap: 7px; } #appView.automats-v2-active #pageView .stage-pagination button { width: 31px; height: 30px; padding: 0; border-radius: 8px; color: var(--oxy-primary); } #appView.automats-v2-active #pageView .stage-pagination button.current { color: #fff; border-color: var(--oxy-primary); background: var(--oxy-primary); } #appView.automats-v2-active #pageView .stage-pagination .stage-icon { width: 17px; height: 17px; } #appView.automats-v2-active #pageView .stage-live-message { position: fixed; z-index: 55; right: 18px; bottom: 20px; padding: 9px 12px; border: 1px solid var(--oxy-border-strong); border-radius: 8px; color: var(--oxy-text-primary); background: #fff; box-shadow: var(--oxy-shadow-floating); opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .15s, transform .15s; } #appView.automats-v2-active #pageView .stage-live-message.visible { opacity: 1; transform: translateY(0); } #appView.automats-v2-active #pageView .stage-modal-root[hidden] { display: none; } #appView.automats-v2-active #pageView .stage-modal-backdrop { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(27, 37, 89, .22); } #appView.automats-v2-active #pageView .stage-modal { position: relative; width: min(380px, 100%); padding: 25px; border: 1px solid var(--oxy-border); border-radius: 16px; background: #fff; box-shadow: var(--oxy-shadow-floating); } #appView.automats-v2-active #pageView .stage-modal h2 { margin: 0 25px 8px 0; color: var(--oxy-text-primary); font-size: 19px; } #appView.automats-v2-active #pageView .stage-modal p { margin: 0 0 18px; color: var(--oxy-text-secondary); line-height: 1.5; } #appView.automats-v2-active #pageView .stage-modal-close { position: absolute; top: 11px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; color: var(--oxy-text-secondary); background: transparent; font-size: 22px; cursor: pointer; } #appView.automats-v2-active #pageView .stage-route-placeholder { display: block; min-height: 300px; padding: 24px; border: 1px solid var(--oxy-border); border-radius: var(--oxy-radius-card); background: #fff; } #appView.automats-v2-active #pageView .stage-route-placeholder .stage-fixture-banner { position: static; display: inline-block; margin-bottom: 18px; } #appView.automats-v2-active #pageView .stage-route-placeholder h1 { color: var(--oxy-text-primary); } #appView.automats-v2-active #pageView .stage-route-placeholder p { color: var(--oxy-text-secondary); } #appView.automats-v2-active #pageView .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } @media (max-width: 1280px) and (min-width: 861px) { #appView.automats-v2-active #pageView .stage-table tr { grid-template-columns: minmax(180px,1.2fr) minmax(115px,.9fr) minmax(130px,1fr) minmax(115px,.9fr) minmax(74px,.55fr) minmax(170px,1.25fr) minmax(122px,.9fr); } #appView.automats-v2-active #pageView .stage-kpi { gap: 7px; padding-inline: 8px; } #appView.automats-v2-active #pageView .stage-mini-bars { gap: 2px; } #appView.automats-v2-active #pageView .stage-toolbar { gap: 5px; } #appView.automats-v2-active #pageView .stage-chip { padding-inline: 6px; font-size: 9px; } #appView.automats-v2-active #pageView .stage-search { flex-basis: 24%; } } @media (max-width: 860px) { #appView.automats-v2-active .page-view { padding: 8px 10px 22px; } #appView.automats-v2-active #pageView .automats-stage-a { grid-template-rows: auto auto auto auto auto; gap: 10px; } #appView.automats-v2-active #pageView .stage-page-head, #appView.automats-v2-active #pageView .stage-kpis, #appView.automats-v2-active #pageView .stage-overview, #appView.automats-v2-active #pageView .stage-toolbar { margin-bottom: 0; } #appView.automats-v2-active #pageView .stage-fixture-banner { position: static; order: 9; width: fit-content; max-width: 100%; margin: 4px 0; white-space: normal; } #appView.automats-v2-active #pageView .stage-page-head { display: grid; grid-template-columns: 1fr; gap: 10px; } #appView.automats-v2-active #pageView .stage-title { min-width: 0; } #appView.automats-v2-active #pageView .stage-head-side { justify-items: start; } #appView.automats-v2-active #pageView .stage-global-controls { max-width: 100%; flex-wrap: wrap; } #appView.automats-v2-active #pageView .stage-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #appView.automats-v2-active #pageView .stage-kpi { height: 84px; padding: 8px; } #appView.automats-v2-active #pageView .stage-kpi-icon { width: 34px; height: 34px; flex-basis: 34px; } #appView.automats-v2-active #pageView .stage-kpi-value { font-size: 19px; } #appView.automats-v2-active #pageView .stage-mini-bars { display: none; } #appView.automats-v2-active #pageView .stage-overview { grid-template-columns: minmax(0, 1fr); gap: 8px; } #appView.automats-v2-active #pageView .stage-card { height: auto; min-height: 97px; } #appView.automats-v2-active #pageView .stage-legend { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 12px; } #appView.automats-v2-active #pageView .stage-legend span { grid-template-columns: 8px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; column-gap: 6px; text-align: left; } #appView.automats-v2-active #pageView .stage-legend span > i { display: block; grid-row: 1 / 3; width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; } #appView.automats-v2-active #pageView .stage-legend-label { overflow-wrap: normal; } #appView.automats-v2-active #pageView .stage-connectivity-card { min-height: 90px; } #appView.automats-v2-active #pageView .stage-signal-bars { gap: 4px; } #appView.automats-v2-active #pageView .stage-toolbar { align-items: stretch; flex-wrap: wrap; } #appView.automats-v2-active #pageView .stage-search { min-width: 0; max-width: none; flex-basis: 100%; } #appView.automats-v2-active #pageView .stage-quick-filters { flex-wrap: wrap; } #appView.automats-v2-active #pageView .stage-group-select select { width: 130px; } #appView.automats-v2-active #pageView .stage-registry-card { padding-inline: 5px; } #appView.automats-v2-active #pageView .stage-table { min-width: 1100px; } #appView.automats-v2-active #pageView .stage-table th, #appView.automats-v2-active #pageView .stage-table td { padding-inline: 6px; } } #appView.automats-v2-active #pageView .stage-connectivity-copy h2 { margin: 0; color: var(--oxy-text-primary); font-size: 13px; font-weight: 700; line-height: 18px; } #appView.automats-v2-active #pageView .stage-legend small { color: var(--oxy-text-secondary); font-weight: 400; } #appView.automats-v2-active #pageView .stage-row-reason { max-width: 100%; } #appView.automats-v2-active #pageView .stage-status-label { max-width: calc(100% - 15px); } #appView.automats-v2-active #pageView .stage-advanced { position: relative; flex: 0 0 auto; } #appView.automats-v2-active #pageView .stage-advanced > summary { display: inline-flex; height: 34px; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--oxy-border-strong); border-radius: 8px; color: var(--oxy-primary); background: #fff; font-size: 13px; font-weight: 600; line-height: 18.85px; list-style: none; cursor: pointer; } #appView.automats-v2-active #pageView .stage-advanced > summary::-webkit-details-marker { display: none; } #appView.automats-v2-active #pageView .stage-advanced[open] > div { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; display: grid; min-width: 230px; gap: 5px; padding: 9px; border: 1px solid var(--oxy-border-strong); border-radius: 10px; background: #fff; box-shadow: var(--oxy-shadow-floating); } #appView.automats-v2-active #pageView .stage-advanced .stage-chip { justify-content: space-between; } #appView.automats-v2-active #pageView .stage-chip b { font-size: 10px; font-weight: 700; } #appView.automats-v2-active #pageView .stage-chip.active { color: var(--oxy-primary); border-color: #a8d5ff; background: var(--oxy-primary-soft); } #appView.automats-v2-active #pageView .stage-connection small { margin-left: 14px; } #appView.automats-v2-active #pageView .stage-stock.has-snapshot { color: #14835d; } #appView.automats-v2-active #pageView .stage-more-menu { position: relative; flex: 0 0 24px; } #appView.automats-v2-active #pageView .stage-more-menu > summary { display: grid; width: 24px; height: 28px; place-items: center; border-radius: 5px; color: var(--oxy-primary); cursor: pointer; list-style: none; } #appView.automats-v2-active #pageView .stage-more-menu > summary::-webkit-details-marker { display: none; } #appView.automats-v2-active #pageView .stage-more-menu > summary .oxy-icon { width: 15px; height: 15px; } #appView.automats-v2-active #pageView .stage-more-menu[open] > div { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 115px; padding: 5px; border: 1px solid var(--oxy-border-strong); border-radius: 8px; background: #fff; box-shadow: var(--oxy-shadow-floating); } #appView.automats-v2-active #pageView .stage-more-menu a { display: block; padding: 6px 8px; border-radius: 5px; color: var(--oxy-text-secondary); font-size: 11px; text-decoration: none; white-space: nowrap; } #appView.automats-v2-active #pageView .stage-more-menu a:hover { color: var(--oxy-primary); background: var(--oxy-primary-soft); } body > .stage-more-menu-popup { position: fixed; z-index: 1000; display: block; box-sizing: border-box; min-width: 115px; max-width: calc(100vw - 16px); padding: 5px; border: 1px solid var(--oxy-border-strong); border-radius: 8px; background: #fff; box-shadow: var(--oxy-shadow-floating); } body > .stage-more-menu-popup a { display: block; padding: 6px 8px; border-radius: 5px; color: var(--oxy-text-secondary); font-size: 11px; text-decoration: none; white-space: nowrap; } body > .stage-more-menu-popup a:hover { color: var(--oxy-primary); background: var(--oxy-primary-soft); } #appView.automats-v2-active #pageView .stage-date { cursor: default; } #appView.automats-v2-active #pageView .stage-date .stage-icon { color: var(--oxy-primary); } #appView.automats-v2-active #pageView .stage-pagination button:disabled { opacity: .45; cursor: default; } #appView.automats-v2-active #pageView .stage-pagination button:not(.current) { font-size: 17px; } #appView.automats-v2-active #pageView .stage-loading { min-height: 180px; display: grid; place-items: center; color: var(--oxy-text-muted); } #appView.automats-v2-active #pageView .stage-loading-row { height: 42px; padding: 12px; border-bottom: 1px solid var(--oxy-border); color: var(--oxy-text-muted); font-size: 11px; } #appView.automats-v2-active #pageView .stage-sync-message { position: absolute; z-index: 20; right: 0; top: 70px; max-width: 360px; padding: 7px 10px; border: 1px solid var(--oxy-border-strong); border-radius: 8px; color: var(--oxy-text-secondary); background: #fff; box-shadow: var(--oxy-shadow-floating); font-size: 11px; } @media (max-width: 1280px) and (min-width: 861px) { #appView.automats-v2-active #pageView .stage-quick-filters { flex-wrap: wrap; } #appView.automats-v2-active #pageView .stage-toolbar { align-items: center; } #appView.automats-v2-active #pageView .stage-advanced { margin-left: auto; } } #appView.automats-v2-active #pageView .stage-last > span { display: block; overflow: hidden; text-overflow: ellipsis; } #appView.automats-v2-active #pageView .stage-no-states { color: var(--oxy-text-muted); } #appView.automats-v2-active #pageView .stage-table td.stage-connection-cell { gap: 1px; overflow: visible; } #appView.automats-v2-active #pageView .stage-table td.stage-connection-cell > small { width: 100%; margin: 0 !important; overflow: visible; color: var(--oxy-text-secondary); font-size: 11px; line-height: 14px; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; } #appView.automats-v2-active #pageView .stage-table td.stage-connection-cell > small.stage-connection-error { color: #c2410c; }