/* INFI-BOARD Performance Mode & Android WebView Styles */

/* --- Performance Mode: disable expensive CSS on Android WebView --- */
body.perf-mode *,
body.perf-mode *::before,
body.perf-mode *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}

body.perf-mode .co-logo-icon,
body.perf-mode .co-card,
body.perf-mode .topbar,
body.perf-mode .sidebar,
body.perf-mode .right-sidebar,
body.perf-mode .tool-panel,
body.perf-mode .floating-widget,
body.perf-mode .app-dialog,
body.perf-mode .popover,
body.perf-mode .drawPopover,
body.perf-mode .shapePopover,
body.perf-mode .linePopover,
body.perf-mode .eraserPopover,
body.perf-mode .object-editor,
body.perf-mode .history-panel,
body.perf-mode .modal,
body.perf-mode .card,
body.perf-mode .btn,
body.perf-mode .top-datetime,
body.perf-mode .fullscreen-datetime {
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
  background-image: none !important;
}

/* Simplify gradients & blur backgrounds to solid lightweight dark colors */
body.perf-mode #classroomOnboarding,
body.perf-mode .class-open-splash {
  background: #060a12 !important;
}

body.perf-mode .co-card,
body.perf-mode .topbar,
body.perf-mode .right-sidebar,
body.perf-mode .tool-popover,
body.perf-mode .app-dialog,
body.perf-mode .history-panel,
body.perf-mode .object-editor,
body.perf-mode .save-status-container,
body.perf-mode .top-datetime,
body.perf-mode .fullscreen-datetime {
  background-color: #0a0e16 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Disable infinite & heavy GPU animations in performance mode */
body.perf-mode .co-logo-icon,
body.perf-mode .class-open-logo-ring::before,
body.perf-mode .class-open-logo-ring::after,
body.perf-mode .save-status-dot,
body.perf-mode .save-spinner,
body.perf-mode [class*="pulse"],
body.perf-mode [class*="spin"],
body.perf-mode [class*="blink"] {
  animation: none !important;
}

/* Reduce will-change in perf mode to let browser decide */
body.perf-mode * {
  will-change: auto !important;
}

/* Disable canvas image smoothing overhead on low-end hardware if requested */
body.perf-mode canvas {
  image-rendering: auto;
}

/* Simplify transitions in perf mode */
body.perf-mode * {
  transition-duration: 0.05s !important;
}

#perfModeToggleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  margin-top: 6px;
}

#perfModeToggleRow label {
  font-weight: 700;
  color: #fbbf24;
  font-size: 13px;
  cursor: pointer;
  flex: 1;
}

#perfModeToggleRow .perf-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
  letter-spacing: 0.04em;
}

/* Date/time display replaces visible perf and sync status badges */
#perfModeIndicator,
#saveStatusContainer,
#topDateTimeLeft,
#testINFI-CLOUDBtn {
  display: none !important;
}

.top-datetime {
  position: fixed;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(8, 13, 24, 0.82);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.top-datetime-left {
  top: 4px;
  left: 4px;
  color: #fbbf24;
}

.fullscreen-datetime {
  position: fixed;
  top: max(16px, calc(var(--safe-top) + 12px));
  right: max(14px, calc(var(--safe-right) + 10px));
  z-index: 98;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 210px;
  height: 38px;
  padding: 0 13px;
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(8, 13, 24, 0.78);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.fullscreen-active .top-datetime-left {
  display: none;
}

body.fullscreen-active .fullscreen-datetime {
  display: inline-flex;
}