/* Shared theme + text-size overrides for Piper admin/teacher surfaces. Applied via and . Scope: Settings, Safety Dashboard, Admin Dashboard. */ html[data-theme="dark"] body { background: #0f1020; color: #e8e8f0; } html[data-theme="dark"] .mesh-bg { opacity: 0.35; } html[data-theme="dark"] .dash-header, html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .metric-card { background: #1a1b2e; border-color: rgba(255, 255, 255, 0.08); color: #e8e8f0; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .dash-title p, html[data-theme="dark"] .card .muted, html[data-theme="dark"] .stat-card .label, html[data-theme="dark"] .metric-card .label, html[data-theme="dark"] .metric-card .sub, html[data-theme="dark"] .filter-row label, html[data-theme="dark"] .trend-labels span { color: #8a94a7; } html[data-theme="dark"] .stat-card .value, html[data-theme="dark"] .metric-card .value, html[data-theme="dark"] .card h2, html[data-theme="dark"] .classroom-row .name { color: #e8e8f0; } html[data-theme="dark"] .metric-card.high .value, html[data-theme="dark"] .stat-card.high .value { color: #ff7a7a; } html[data-theme="dark"] .metric-card.medium .value, html[data-theme="dark"] .stat-card.medium .value { color: #f0b060; } html[data-theme="dark"] .metric-card.low .value, html[data-theme="dark"] .stat-card.low .value { color: #7bd4ae; } html[data-theme="dark"] .btn.secondary { background: #1a1b2e; color: #e8e8f0; border-color: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .btn.secondary:hover { background: #e8e8f0; color: #0f1020; border-color: #e8e8f0; } html[data-theme="dark"] .btn.ghost { background: rgba(255, 255, 255, 0.08); color: #e8e8f0; border-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .btn.ghost:hover { background: #e8e8f0; color: #0f1020; } html[data-theme="dark"] table.events thead th { color: #8a94a7; border-color: rgba(255,255,255,0.08); } html[data-theme="dark"] table.events tbody tr { border-color: rgba(255,255,255,0.05); } html[data-theme="dark"] table.events tbody tr:hover { background: rgba(78, 205, 196, 0.06); } html[data-theme="dark"] table.events tbody td { color: #e8e8f0; } html[data-theme="dark"] .snippet em { color: #8a94a7; } html[data-theme="dark"] .filter-row select { background: #1a1b2e; color: #e8e8f0; border-color: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .category-chip { background: rgba(255, 255, 255, 0.08); color: #bfc4d1; } html[data-theme="dark"] .status-new { background: rgba(255, 255, 255, 0.1); color: #e8e8f0; border-color: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .classroom-row { border-color: rgba(255,255,255,0.06); } html[data-theme="dark"] .classroom-row .bar-wrap { background: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .trend { border-color: rgba(255, 255, 255, 0.08); } /* Text size — scales up global and key table text */ html[data-text-size="large"] body { font-size: 17px; } html[data-text-size="large"] table.events tbody td { font-size: 15px; } html[data-text-size="large"] .stat-card .value, html[data-text-size="large"] .metric-card .value { font-size: 42px; } html[data-text-size="large"] .dash-title h1 { font-size: 36px; } html[data-text-size="large"] .card h2 { font-size: 24px; } html[data-text-size="large"] .snippet { font-size: 15px; max-width: 420px; } /* Shared learner/teacher dark-mode readability fixes */ html[data-theme="dark"] .app-header, html[data-theme="dark"] .chat, html[data-theme="dark"] .tools, html[data-theme="dark"] .tool-group, html[data-theme="dark"] .notice, html[data-theme="dark"] .gate-card, html[data-theme="dark"] .chat-log, html[data-theme="dark"] .chat-form, html[data-theme="dark"] textarea, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] .intro { background: #1a1b2e; color: #e8e8f0; border-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .muted, html[data-theme="dark"] .subtitle, html[data-theme="dark"] .setting-help, html[data-theme="dark"] .card .muted, html[data-theme="dark"] .intro { color: #b8c1d3; } html[data-theme="dark"] .seg span, html[data-theme="dark"] .btn.secondary, html[data-theme="dark"] .btn.ghost, html[data-theme="dark"] .quick-actions-label, html[data-theme="dark"] .tools-label { color: #e8e8f0; } html[data-theme="dark"] .btn.secondary, html[data-theme="dark"] .btn.ghost, html[data-theme="dark"] .seg, html[data-theme="dark"] .quick-action, html[data-theme="dark"] .quick-category-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); } html[data-theme="dark"] .intro { background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(78, 205, 196, 0.14)); border-color: rgba(255, 166, 124, 0.45); }