@font-face { font-family: 'Dashboard Han Sans Core'; src: url('/assets/fonts/DashboardHanSansCore.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Source Han Sans SC'; src: url('/assets/fonts/SourceHanSansCN-VF.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --ice: #b1efff; --cyan: #47e3ff; --muted: #88b9cf; }
.design-content-mask { position: absolute; inset: 230px 40px 85px; background: #00162c; pointer-events: none; }
button { font-family: inherit; }
.live-component { position: absolute; color: #d9f5ff; background: #001c34; isolation: isolate; }
.framed-component { background: linear-gradient(135deg, #062b4c, #00182e 65%); clip-path: polygon(28px 0, calc(100% - 55px) 0, 100% 48px, 100% calc(100% - 40px), calc(100% - 42px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px); box-shadow: inset 0 0 70px #0078d13d; }
.flat-component { background: #001c34; }
.component-chrome { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.component-heading { position: absolute; left: 8px; top: 8px; width: calc(100% - 16px); height: 112px; display: flex; align-items: center; gap: 22px; border: 0; border-bottom: 2px solid #167bab; padding: 12px 32px; background: linear-gradient(110deg, #064576, #042b50 75%); color: #effbff; font-size: 45px; font-weight: 700; text-align: left; cursor: pointer; text-shadow: 0 0 12px #49baff55; }
.component-heading:hover { background: linear-gradient(110deg, #075888, #043356); }
.heading-bars { display: flex; align-items: end; gap: 7px; width: 70px; height: 48px; flex: 0 0 70px; }
.heading-bars i { width: 12px; height: 21px; background: linear-gradient(#42edff, #2382ee); }
.heading-bars i:nth-child(2) { height: 29px; }.heading-bars i:nth-child(3) { height: 38px; }.heading-bars i:nth-child(4) { height: 48px; }
.component-body { position: absolute; inset: 22px; overflow: hidden; }
.component-heading ~ .component-body { top: 126px; }
.flat-component > .component-body { inset: 0; }
.flat-component > .component-heading { top: 0; left: 0; width: 100%; height: 82px; padding: 10px 20px; font-size: 35px; background: #032440; }
.flat-component > .component-heading ~ .component-body { top: 88px; }
.flat-component .heading-bars { transform: scale(.7); transform-origin: left center; margin-right: -15px; }
.live-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.live-chart svg { overflow: hidden; }
.night-map svg image { filter: grayscale(1) sepia(1) saturate(3) hue-rotate(165deg) brightness(1.75); }
.live-component:has(.night-map), .night-map { background: #020b13; }
.live-component button { -webkit-tap-highlight-color: transparent; }
.live-component button:focus-visible, .live-component tr:focus-visible, .chart-keyboard-items button:focus-visible { outline: 5px solid #c4fbff; outline-offset: -6px; }
.data-button { position: relative; width: 100%; height: 100%; display: flex; align-items: center; gap: 28px; padding: 25px 42px; border: 1px solid #1782a9; background: linear-gradient(125deg, #063755, #001b32); color: #c7f2ff; text-align: left; cursor: pointer; transition: background 250ms ease, box-shadow 250ms ease, transform 300ms ease; }
.data-button:hover, .data-button.is-selected { background: linear-gradient(125deg, #095276, #032d49); box-shadow: inset 0 0 40px #18c2ff28; }
.data-button:hover { transform: translateY(-3px); }
.data-button-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.data-button-label { color: #c7edf7; font-size: 34px; font-weight: 600; }
.data-button-value { color: #89f5ff; font-size: 63px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 20px #1bcaff30; }
.data-icon { width: 100px; height: 100px; object-fit: contain; }
.stat-component > .component-body { inset: 8px; }
.stat-component .data-button { border: 0; padding: 20px 35px; }
.stat-component .data-button-label { font-size: 37px; }
.stat-component .data-button-value { font-size: 64px; }
.annual-revenue .data-button { justify-content: space-between; }
.annual-revenue .data-button-copy { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 35px; }
.annual-revenue .data-button-label { font-size: 46px; border-right: 2px solid #19bad1; padding: 15px 40px 15px 0; }
.annual-revenue .data-button-value { font-size: 112px; color: #f1fcff; }
.screen-title { z-index: 6; text-shadow: 0 0 8px #58a6d04d, 0 5px 10px #0007; }
.screen-date { position: absolute; top: 94px; right: 180px; color: #d9f9ff; font-size: 41px; font-weight: 600; z-index: 6; pointer-events: none; }
.screen-date.overview-date { top: 1590px; right: 156px; font-size: 35px; }
.screen-canvas::after { z-index: 2; opacity: .55; animation-duration: 20s; }
.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; height: 100%; padding: 8px 6px; }
.asset-card { min-width: 0; display: grid; grid-template-columns: 36% 64%; border: 2px solid #168db9; background: linear-gradient(130deg, #042b48, #00162c); box-shadow: inset 0 0 20px #1489b32e; clip-path: polygon(27px 0, calc(100% - 27px) 0, 100% 27px, 100% calc(100% - 27px), calc(100% - 27px) 100%, 27px 100%, 0 calc(100% - 27px), 0 27px); }
.asset-card.is-selected { background: #073f5b; }
.asset-identity { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: transparent; color: #e1f8ff; border: 0; border-right: 2px solid #126187; font-size: 43px; cursor: pointer; }
.asset-identity:hover { background: #09507366; }
.asset-identity img { width: 140px; height: 130px; object-fit: contain; }
.asset-values { display: grid; grid-template-rows: 1fr 1fr; min-width: 0; }
.asset-values .data-button { padding: 14px 24px; border: 0; border-bottom: 1px solid #176384; background: transparent; }
.asset-values .data-button-label { font-size: 29px; }.asset-values .data-button-value { font-size: 53px; }
.income-body .pie-3d-chart { inset: 0 175px 0; width: calc(100% - 350px); }
.income-label { position: absolute; display: flex; flex-direction: column; border: 0; background: transparent; color: #d3f1fc; cursor: pointer; font-size: 32px; text-align: left; z-index: 2; padding: 12px; }
.income-label-0 { right: 12px; top: 140px; }.income-label-1 { left: 6px; top: 25px; }
.income-label strong { font-size: 62px; color: #a6f6ff; }.income-label small { font-size: 30px; color: #91d8ef; }
.income-label.is-selected { background: #08436299; outline: 2px solid #53d2ed; }
.ring-center { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 10px; text-align: center; pointer-events: none; max-width: 440px; }
.ring-center span { font-size: 37px; color: #b4ddeb; }.ring-center strong { font-size: 82px; color: #bff9ff; font-variant-numeric: tabular-nums; }
.empty-chart-action { position: absolute; transform: translateX(-50%); background: #063750; color: #90d2e8; border: 1px solid #187392; padding: 12px 22px; font-size: 29px; cursor: pointer; }
.industry-matrix { position: absolute; left: 54%; right: 35px; top: 55px; bottom: 35px; display: grid; grid-template-rows: 80px repeat(6, minmax(0, 1fr)); gap: 22px; }
.industry-table-heading { display: grid; grid-template-columns: 1fr 150px 170px; color: #b4d4e4; font-size: 32px; align-items: center; padding: 0 25px; }
.industry-table-heading span:not(:first-child) { text-align: right; }
.metric-row { position: relative; display: grid; align-items: center; min-width: 0; border: 2px solid #10688f; color: #d4f4fc; background: linear-gradient(100deg, #08446b, #022443); padding: 20px 24px; text-align: left; cursor: pointer; overflow: hidden; transition: box-shadow 300ms, background 300ms; }
.metric-row:hover, .metric-row.is-selected { background: linear-gradient(100deg, #086b91, #063551); box-shadow: inset 0 0 25px #36dfff33; border-color: #67e9ff; }
.metric-name { color: #d4f4fc; font-size: 36px; font-weight: 600; }
.metric-share { color: var(--row-color, #6eeaff); font-size: 43px; font-variant-numeric: tabular-nums; }
.metric-value { color: #c6efff; font-size: 38px; font-variant-numeric: tabular-nums; }
.metric-progress { display: block; height: 17px; border: 1px solid #237798; background: #092d48; overflow: hidden; }
.metric-progress i { display: block; height: 100%; background: linear-gradient(90deg, #15acdc, var(--row-color, #74efff)); transition: width 1600ms ease; }
.metric-rank { border: 2px solid #3bb4dd; border-radius: 9px; width: 61px; padding: 4px; text-align: center; font-size: 36px; color: #c9f8ff; background: #0b5680; }
.industry-matrix .metric-row { grid-template-columns: 62px 1fr 155px 170px; gap: 20px; }
.industry-matrix .metric-name { font-size: 31px; padding-bottom: 25px; }
.industry-matrix .metric-share, .industry-matrix .metric-value { text-align: right; font-size: 35px; }
.industry-matrix .metric-progress { position: absolute; left: 107px; bottom: 25px; width: 31%; }
.project-image { position: absolute; left: 25px; top: 20px; right: 25px; bottom: 130px; width: calc(100% - 50px); height: calc(100% - 150px); border: 0; padding: 0; background: #052d49; cursor: zoom-in; overflow: hidden; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }.project-image:hover img { transform: scale(1.025); }
.project-caption { position: absolute; bottom: 12px; height: 90px; width: 100%; color: #29e5fb; background: transparent; border: 0; font-size: 41px; font-weight: 600; cursor: pointer; }
.project-pager { position: absolute; bottom: 20px; right: 30px; display: flex; gap: 10px; }.project-pager button { border: 1px solid #3eb5d3; background: #063654; color: #b9f7ff; font-size: 42px; padding: 0 20px; cursor: pointer; }
.period-display { width: 100%; height: 100%; border: 2px solid #1a98bf; background: #063954; color: #c5f4ff; font-size: 43px; cursor: pointer; }
.order-hub { position: absolute; left: 20px; top: 40%; width: 385px; height: 385px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 9px double #25c6f0; border-radius: 50%; color: #b9f8ff; background: radial-gradient(circle, #054a72, #012c47); box-shadow: 0 0 50px #0ecfff42, inset 0 0 55px #1baef359; cursor: pointer; }
.order-hub span { font-size: 37px; }.order-hub strong { font-size: 62px; }
.order-industry-list { position: absolute; left: 440px; top: 15px; right: 25px; bottom: 25px; display: grid; grid-template-rows: repeat(6, 1fr); gap: 28px; }
.order-industry-list .metric-row { grid-template-columns: 1fr 205px; grid-template-rows: 1fr 1fr; padding: 10px 28px; }
.order-industry-list .metric-name { font-size: 38px; }.order-industry-list .metric-share { text-align: right; }.order-industry-list .metric-value { grid-column: 2; text-align: right; font-size: 34px; }.order-industry-list .metric-progress { grid-column: 1; grid-row: 2; width: 90%; }
.ranked-map { position: absolute; left: 0; top: 0; width: 74%; height: 100%; }
.map-ranking { position: absolute; right: 20px; top: 25px; bottom: 25px; width: 24%; display: flex; flex-direction: column; gap: 17px; background: #032740; padding: 20px; }
.map-ranking h3 { font-size: 29px; color: #a7d6eb; margin: 0 0 15px; }.map-ranking button { border: 1px solid #1d6582; background: #074265; color: #c4f4ff; padding: 18px 14px; font-size: 31px; cursor: pointer; }.map-ranking button:hover { background: #0a6185; }
.map-controls { position: absolute; right: 30px; bottom: 44px; display: flex; flex-direction: column; z-index: 6; box-shadow: 0 0 20px #0006; }
.map-controls button { min-width: 76px; min-height: 67px; border: 1px solid #137ba2; background: #022b46e8; color: #9cf5ff; font-size: 31px; cursor: pointer; padding: 0 8px; }.map-controls button:hover { background: #116088; }
.map-note { position: absolute; bottom: 15px; left: 25px; pointer-events: none; color: #93bbd0; font-size: 27px; background: #00223bd9; padding: 10px 16px; }
.map-credit { position: absolute; left: 35px; bottom: 32px; font-size: 22px; color: #6b9fb7; pointer-events: none; letter-spacing: 3px; }
.map-tabs { position: absolute; left: 25px; top: 15px; display: flex; gap: 13px; z-index: 6; }.map-tabs button { border: 2px solid #11769b; padding: 12px 25px; font-size: 31px; color: #81cbe0; background: #033150; cursor: pointer; }.map-tabs button.is-selected { background: #095d86; color: #c1f9ff; border-color: #4ad5f0; }
.dispatch-map-content { position: absolute; left: 0; right: 0; top: 70px; bottom: 0; }
.small-stat .data-button-label { font-size: 29px; }.small-stat .data-button-value { font-size: 65px; }
.small-chart-title { color: #aad5e8; font-size: 30px; padding: 0 15px; }.horizontal-chart { top: 55px; height: calc(100% - 55px); }
.route-tag { position: absolute; top: 10px; left: 25px; right: 25px; height: 65px; border: 1px solid #217e9b; background: #073850; color: #9dddf2; font-size: 28px; cursor: pointer; }
.route-map-content { position: absolute; left: 0; right: 0; top: 80px; bottom: 0; }
.data-table-wrap { height: 100%; display: flex; flex-direction: column; padding: 14px 20px 7px; }
.data-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #b9e3f4; font-size: 28px; line-height: 1.4; }
.data-table th { padding: 8px 0; border-bottom: 2px solid #15b3db; background: #075985; color: #def8ff; }
.data-table th button { width: 100%; border: 0; padding: 9px 5px; font-size: 29px; font-weight: 600; background: transparent; color: inherit; cursor: pointer; }
.data-table th[aria-sort="ascending"] button::after { content: ' ↑'; }.data-table th[aria-sort="descending"] button::after { content: ' ↓'; }
.data-table td { padding: 13px 15px; border-bottom: 1px solid #105471; word-break: break-word; }
.data-table tr:nth-child(even) td { background: #073958; }.data-table tr:nth-child(odd) td { background: #042c47; }
.data-table tbody tr { cursor: pointer; }.data-table tbody tr:hover td, .data-table tbody tr.is-selected td { background: #0a5775; color: #d2fcff; }
.data-table th:first-child, .data-table td:first-child { width: 28%; }.data-table th:last-child, .data-table td:last-child { width: 19%; }
.table-footer { margin-top: auto; padding-top: 12px; display: flex; flex-shrink: 0; gap: 22px; justify-content: flex-end; align-items: center; color: #7cb2c9; font-size: 24px; }
.table-footer button { border: 1px solid #26799a; padding: 0 16px; font-size: 34px; color: #a0e5fa; background: #06324b; cursor: pointer; }.table-footer button:disabled { opacity: .35; cursor: default; }
.empty-records { width: 100%; padding: 125px 25px; border: 0; background: transparent; color: #81adc5; font-size: 36px; cursor: pointer; }
.status-legends { position: absolute; right: 32px; top: 50px; bottom: 50px; width: 35%; display: flex; flex-direction: column; gap: 45px; }
.status-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; flex: 1; padding: 30px; border: 2px solid #118dc1; border-radius: 20px; background: linear-gradient(140deg, #0b497a, #002c4b); box-shadow: inset 0 0 40px #068dd743; color: #b4effa; font-size: 34px; cursor: pointer; }.status-summary h3 { width: 100%; font-size: 39px; color: #e7fbff; margin: 0; }.status-summary:hover { border-color: #a9f9ff; }
.status-track { width: 100%; background: #052036; height: 19px; }.status-track i { display: block; height: 100%; background: linear-gradient(90deg, #2182d6, #4ef2ff); }
.equipment-icon { position: absolute; width: 220px; height: 210px; object-fit: contain; left: 50%; top: 46%; transform: translate(-50%, -35%); pointer-events: none; filter: drop-shadow(0 0 28px #00bfff85); }
.equipment-status .ring-center { top: 25% !important; }.equipment-status .ring-center span { font-size: 34px; }
.work-metrics { position: absolute; top: 15px; left: 20px; right: 20px; height: 208px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.work-metrics .data-button { padding: 20px 30px; }.work-metrics .data-button-label { font-size: 31px; }.work-metrics .data-button-value { font-size: 65px; }
[data-component-id="hourly-work-orders"] .time-chart { top: -38px; height: calc(100% + 65px); }
.type-legends { position: absolute; right: 35px; top: 30px; bottom: 35px; width: 30%; display: flex; flex-direction: column; gap: 22px; }.type-legend { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 15px 24px; background: #05314e; border: 2px solid #166c8c; border-left: 7px solid var(--row-color); color: #afdcec; font-size: 29px; cursor: pointer; }.type-legend strong { color: var(--row-color); font-size: 43px; }.type-legend:hover, .type-legend.is-selected { background: #095273; border-color: #5cd9ed; }
[data-component-id="work-order-types"] .ring-center span { max-width: 250px; font-size: 25px; }[data-component-id="work-order-types"] .ring-center strong { font-size: 60px; }
.invoice-stat .data-button { padding: 14px 30px; }.invoice-stat .data-button-label { font-size: 26px; }.invoice-stat .data-button-value { font-size: 57px; }
.settlement-map > .component-heading { font-size: 30px; }.settlement-map > .component-heading .heading-bars { display: none; }
.chart-keyboard-items { position: absolute; inset: auto 20px 20px; z-index: 8; pointer-events: none; }
.chart-keyboard-items button { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); opacity: 0; overflow: hidden; }
.chart-keyboard-items button:focus-visible { position: relative; width: auto; height: auto; clip-path: none; opacity: 1; padding: 15px 25px; font-size: 32px; color: #dcfcff; background: #08516d; border: 2px solid #9aefff; pointer-events: auto; }
.data-dialog { width: min(820px, 90vw); max-height: 85vh; border: 1px solid #38b7df; border-radius: 10px; padding: 0; background: linear-gradient(135deg, #082c49, #00182c); color: #d7f5ff; box-shadow: 0 35px 110px #0009, 0 0 50px #00aaff26; font-family: 'Source Han Sans SC', sans-serif; }
.data-dialog::backdrop { background: #000f21a3; backdrop-filter: blur(4px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 26px; border-bottom: 1px solid #216582; }.dialog-header h2 { margin: 0; font-size: clamp(20px, 1.25vw, 38px); }.dialog-close { border: 1px solid #338aaa; border-radius: 4px; padding: 7px 12px; background: #06344d; color: #bdefff; cursor: pointer; font-size: 16px; }
.detail-list { margin: 0; padding: 10px 26px; }.detail-field { display: grid; grid-template-columns: minmax(100px, 35%) 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid #15445d; font-size: clamp(15px, .8vw, 25px); }.detail-field dt { color: #83b7cf; }.detail-field dd { margin: 0; color: #c0f9ff; overflow-wrap: anywhere; }.dialog-footer { padding: 18px 26px; color: #6fa6bd; font-size: 14px; }
.project-full-image { display: block; max-width: 100%; max-height: 48vh; margin: auto; object-fit: contain; }
.gallery-card .gallery-stage { pointer-events: none; }.gallery-card .gallery-caption { z-index: 8; }
.gallery-card .screen-canvas .component-heading span { position: static; padding: 0; font-size: inherit; color: inherit; background: transparent; border: 0; }
.preview-canvas * { animation: none !important; }.preview-canvas .chart-keyboard-items, .preview-canvas .map-controls, .preview-canvas .table-footer { display: none; }
.preview-canvas .screen-background { object-fit: fill; }.preview-canvas img.data-icon { object-fit: contain; }
.refresh-warning { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 10; border: 1px solid #cf9a4f; padding: 8px 16px; color: #ffe0a8; background: #34301eed; cursor: pointer; }
.data-failure { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 17px; color: #8fc6df; }.data-failure strong { color: #d4f6ff; }.data-failure p { margin: 0; }.data-failure button { background: #063b57; border: 1px solid #2f9ec1; color: #b8f4ff; padding: 10px 22px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .live-component *, .live-component *::before, .live-component *::after { transition: none !important; }.data-button:hover { transform: none; } }