.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr); gap: 12px; align-items: stretch; } .dashboard-grid.group-overview { align-items: stretch; } .dashboard-grid.enterprise-overview { grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr); gap: 12px; } .dashboard-grid.enterprise-overview .panel { min-height: 290px; } .dashboard-grid.enterprise-overview .risk-summary { gap: 7px; max-height: 226px; overflow-y: auto; padding-right: 4px; } .dashboard-grid.enterprise-overview .risk-item { grid-template-columns: 64px 1fr; gap: 9px; padding: 7px 9px; } .dashboard-grid.enterprise-overview .mini-bar { grid-template-columns: 42px 1fr 38px; gap: 6px; font-size: 11px; } .dashboard-grid.enterprise-overview .mini-track { height: 5px; } .dashboard-grid.equal { grid-template-columns: 1fr 1fr; } .subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .panel { min-height: 360px; padding: 16px; } .panel.compact { min-height: 270px; } .panel.tall { min-height: 450px; } .trend-panel { min-height: 198px; padding: 12px 14px; } .trend-panel .panel-header { margin-bottom: 4px; } .panel-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; z-index: 1; } .panel-title { margin: 0; color: #f1fbff; font-size: 20px; font-weight: 900; letter-spacing: 0.02em; } .panel-note { margin-top: 6px; color: #9fc2d9; font-size: 12px; line-height: 1.45; } .legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; color: #a9cde2; font-size: 12px; white-space: nowrap; } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .chart-box { position: relative; z-index: 1; overflow-x: auto; overflow-y: hidden; scrollbar-color: rgba(86, 151, 239, 0.72) rgba(30, 89, 130, 0.42); scrollbar-width: thin; padding-bottom: 2px; } .chart-box::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { height: 9px; width: 9px; } .chart-box::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb { background: rgba(78, 145, 226, 0.74); border-radius: 999px; } .chart-box::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track { background: rgba(22, 69, 105, 0.42); border-radius: 999px; } svg { display: block; max-width: none; font-family: var(--font); } .axis { stroke: rgba(155, 211, 247, 0.28); stroke-width: 1; } .grid-line { stroke: rgba(155, 211, 247, 0.16); stroke-width: 1; } .axis-label { fill: #a8c7db; font-size: 12px; } .bar-label, .point-label { fill: #dff7ff; font-size: 12px; font-family: var(--num); font-weight: 700; } .chart-click { cursor: pointer; transition: 0.16s ease; } .chart-click:hover { filter: brightness(1.2) drop-shadow(0 0 8px rgba(91, 217, 255, 0.46)); } .risk-summary { position: relative; z-index: 1; display: grid; gap: 10px; } .risk-item { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 10px 11px; border: 1px solid rgba(91, 180, 255, 0.14); border-radius: 13px; background: rgba(1, 21, 42, 0.42); cursor: pointer; } .risk-item:hover { border-color: rgba(91, 214, 255, 0.46); background: rgba(12, 62, 98, 0.62); } .risk-panel { min-height: 450px; height: 100%; } .risk-panel .risk-summary { gap: 8px; max-height: 366px; overflow-y: auto; padding-right: 4px; } .risk-panel .risk-item { grid-template-columns: 64px 1fr; gap: 10px; padding: 8px 10px; } .risk-panel .mini-bar { grid-template-columns: 42px 1fr 40px; gap: 6px; font-size: 11px; } .risk-panel .mini-track { height: 5px; } .risk-panel .risk-badge { padding: 4px 8px; font-size: 11px; } .risk-name { color: #e8f8ff; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .risk-bars { display: grid; gap: 6px; } .mini-bar { display: grid; grid-template-columns: 52px 1fr 34px; gap: 8px; align-items: center; color: #9fc4dc; font-size: 12px; } .mini-track { height: 7px; border-radius: 999px; background: rgba(126, 184, 219, 0.16); overflow: hidden; } .mini-track span { display: block; height: 100%; border-radius: inherit; } .risk-badge { padding: 5px 9px; border-radius: 999px; color: white; font-size: 12px; font-weight: 800; white-space: nowrap; } .risk-badge.red { background: rgba(255, 92, 102, 0.22); border: 1px solid rgba(255, 92, 102, 0.42); color: #ffc2c7; } .risk-badge.orange { background: rgba(255, 139, 61, 0.2); border: 1px solid rgba(255, 139, 61, 0.44); color: #ffd1ad; } .risk-badge.green { background: rgba(94, 225, 181, 0.16); border: 1px solid rgba(94, 225, 181, 0.42); color: #bdf9e4; } .table-wrap { position: relative; z-index: 1; overflow: auto; max-height: 545px; border: 1px solid rgba(91, 180, 255, 0.18); border-radius: 14px; background: rgba(1, 18, 36, 0.34); }