:root {
    --bg-color: #f0f2f5; --panel-bg: #ffffff; --primary: #004b87;
    --secondary: #0066cc; --safe-green: #00cc66; --warn-yellow: #ffcc00;
    --danger-red: #ff3333; --default-gray: #d1d5db; --text-dark: #333333;
    --text-light: #666666; --border-color: #d9d9d9; --shadow: 0 4px 12px rgba(0,0,0,0.1);
}
body { font-family: 'Segoe UI', 'Arial', sans-serif; background-color: var(--bg-color); margin: 0; padding: 20px; color: var(--text-dark); display: flex; flex-direction: column; align-items: center; min-height: 100vh; }
.controls-container { width: 100%; max-width: 1350px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; border-top: 4px solid var(--primary); }
.control-group { display: flex; flex-direction: column; gap: 5px; }
.control-group label { font-size: 12px; font-weight: bold; color: var(--text-light); }
.controls-container input, .controls-container select { padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; }
.btn-group { display: flex; gap: 10px; margin-left: auto; }
.btn { padding: 10px 20px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; transition: all 0.3s; color: white; display: flex; align-items: center; font-size: 15px;}
.btn-fullscreen { background-color: var(--primary); }
.btn-fullscreen:hover { background-color: var(--secondary); }
.btn-export { background-color: var(--safe-green); }
.btn-export:hover { background-color: #00b359; }
.dashboard-wrapper { width: 100%; max-width: 1350px; background-color: var(--panel-bg); border-radius: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; padding-bottom: 2%; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5% 3%; border-bottom: 2px solid var(--primary); background-color: #ffffff; }
.header-left, .header-center, .header-right { flex: 1; }
.header-left { display: flex; align-items: center; justify-content: flex-start; }
.company-logo img { max-height: clamp(40px, 5vw, 60px); max-width: 100%; object-fit: contain; }
.header-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.header-center h2 { margin: 0; color: var(--primary); font-size: clamp(20px, 2.2vw, 32px); letter-spacing: 2px; white-space: nowrap; }
.header-center p { margin: 4px 0 0; color: var(--text-light); font-size: clamp(12px, 1vw, 16px); text-transform: uppercase; white-space: nowrap; }
.header-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; }
.header-right h1 { margin: 0; color: var(--primary); font-size: clamp(16px, 1.8vw, 24px); white-space: nowrap;}
.header-right p { margin: 4px 0 0; color: var(--text-light); font-size: clamp(10px, 0.9vw, 12px); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;}
.dashboard-content { flex-grow: 1; display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 3%; padding: 2% 3%; }
.kpi-container { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 20px; }
.kpi-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 8px; padding: 4% 5%; text-align: center; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.02); flex-grow: 1; display: flex; flex-direction: column; justify-content: center; min-height: 120px; }
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background-color: var(--primary); }
.kpi-card.safe-days-card::before { background-color: var(--safe-green); }
.kpi-card-header h3 { margin: 0; color: var(--primary); font-size: clamp(16px, 1.5vw, 22px); letter-spacing: 1px; }
.kpi-card-header span { font-size: clamp(12px, 1.2vw, 18px); color: var(--text-light); display: block; margin-top: 5px; }
.kpi-value { font-size: clamp(36px, 4vw, 60px); font-weight: bold; color: var(--text-dark); line-height: 1; margin-top: 15px; }
.kpi-value.green { color: var(--safe-green); }
.kpi-date { font-size: clamp(18px, 1.8vw, 24px); font-weight: bold; color: var(--danger-red); margin-top: 15px; }
.cross-container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; }
.cross-title { width: 100%; text-align: center; margin-bottom: 2%; line-height: 1.4; }
.cross-title h3 { margin: 0; color: var(--primary); font-size: clamp(20px, 2vw, 26px); }
.cross-title p { margin: 5px 0 0; color: var(--text-light); font-size: clamp(14px, 1.4vw, 18px); font-weight: bold; }
.safety-cross { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(10, 1fr); gap: 3px; width: 100%; max-width: 320px; aspect-ratio: 8 / 10; margin: auto 0; }
.day-cell { display: flex; justify-content: center; align-items: center; background-color: var(--default-gray); color: white; border-radius: 4px; font-weight: bold; font-size: clamp(12px, 1.4vw, 18px); cursor: pointer; user-select: none; transition: transform 0.1s; }
.day-cell:active { transform: scale(1.5); }
.legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; font-size: clamp(10px, 1vw, 14px); font-weight: bold; align-items: flex-start; margin-top: auto; padding-top: 15px;}
.legend-item { display: flex; align-items: center; gap: 6px; text-align: left; }
.color-box { width: clamp(12px, 1.2vw, 18px); height: clamp(12px, 1.2vw, 18px); border-radius: 3px; flex-shrink: 0; }
.right-panel { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 20px; }
.body-map-wrapper { background: #ffffff; border: 1px solid var(--border-color); border-radius: 8px; padding: 4% 5%; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.02); flex-grow: 1; display: flex; flex-direction: column; justify-content: center; min-height: 250px; }
.right-panel h3 { font-size: clamp(18px, 1.8vw, 24px); margin: 0 0 5px 0; color: var(--primary); }
.svg-container { display: flex; justify-content: space-around; align-items: center; flex-grow: 1; min-height: 0; margin-bottom: 5px; }
.svg-container svg { height: 100%; width: 45%; max-height: 38vh; }
.body-part { fill: #cadbe9; stroke: #ffffff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; cursor: pointer; transition: fill 0.2s; }
.body-part:hover { fill: #b0c9dd; }
.body-part.injured { fill: var(--danger-red); stroke: #ffffff; }
.view-label-container { display: flex; width: 100%; margin-top: 5px; }
.view-label { flex: 1; text-align: center; font-size: clamp(14px, 1.5vw, 20px); color: var(--text-light); font-weight: bold; }
.trir-card { background-color: var(--primary); color: white; border-radius: 8px; padding: 4% 5%; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.trir-label { font-size: clamp(14px, 1.4vw, 18px); font-weight: bold; margin-bottom: 5px; }
.trir-sub { font-size: clamp(10px, 1vw, 14px); opacity: 0.85; margin-bottom: 10px; }
.trir-value { font-size: clamp(32px, 3.5vw, 48px); font-weight: bold; color: var(--warn-yellow); line-height: 1; }
.dashboard-wrapper:fullscreen, .dashboard-wrapper:-webkit-full-screen { background-color: #ffffff; border-radius: 0; margin: auto; width: 100%; height: 100%; max-width: calc(100vh * 16 / 9); max-height: calc(100vw * 9 / 16); padding-bottom: 0; overflow: hidden; }
.dashboard-wrapper::backdrop { background-color: #111; }