/* ═══════════════════════════════════════════════════════════ Kiosk / TV Mode CSS — Client Health Dashboard Activated when has class "kiosk-mode" ═══════════════════════════════════════════════════════════ */ body.kiosk-mode { cursor: none; overflow: hidden; height: 100vh; } /* Hide interactive controls in kiosk mode */ body.kiosk-mode #logout-btn, body.kiosk-mode .panel-refresh, body.kiosk-mode .ans-btn-ghost { display: none !important; } /* Scale up text for TV viewing distance */ body.kiosk-mode { font-size: 18px; } body.kiosk-mode .kpi-value { font-size: 2.4rem; } body.kiosk-mode .kpi-label { font-size: 13px; } body.kiosk-mode .ans-table { font-size: 15px; } body.kiosk-mode .ans-table td, body.kiosk-mode .ans-table th { padding: 14px 16px; } body.kiosk-mode .panel-header h2 { font-size: 1.1rem; } body.kiosk-mode .ticket-title { font-size: 15px; } body.kiosk-mode .ticket-meta, body.kiosk-mode .ticket-age, body.kiosk-mode .activity-time, body.kiosk-mode .announcement-date { font-size: 13px; } /* Kiosk panel cycling — panels fade in/out on rotation */ body.kiosk-mode .kiosk-panel { opacity: 0; transition: opacity 0.8s ease-in-out; pointer-events: none; } body.kiosk-mode .kiosk-panel.kiosk-active { opacity: 1; } /* Progress bar showing time until next panel rotation */ .kiosk-progress-bar { position: fixed; bottom: 0; left: 0; height: 3px; background: var(--ans-cyan); transition: width linear; z-index: 999; } /* Kiosk header: bigger, bolder */ body.kiosk-mode .ans-header { padding: 16px 32px; } body.kiosk-mode .header-logo { height: 40px; } body.kiosk-mode .header-title { font-size: 1.2rem; } body.kiosk-mode .header-time { font-size: 1.2rem; color: var(--ans-soft-gray); } body.kiosk-mode .header-user { font-size: 1rem; } /* Kiosk main: fill screen tightly */ body.kiosk-mode .dashboard-main { padding: 16px 24px; height: calc(100vh - 58px - 3px); /* header + divider */ overflow: hidden; gap: 16px; } body.kiosk-mode .panel-scroll { max-height: none; } /* On very wide TV resolutions, use 3-column grid */ @media (min-width: 1920px) { body.kiosk-mode .dashboard-grid { grid-template-columns: repeat(3, 1fr); } body.kiosk-mode .panel-wide { grid-column: 1 / -1; } }