/* --------------------------------------------------------------------------
 * App theme overrides
 * --------------------------------------------------------------------------
 * The classic (neumorphic) palette remains the default thanks to the values
 * defined in main.css.  The declarations below override the shared CSS custom
 * properties when the body has a theme modifier class.
 * -------------------------------------------------------------------------- */

body.theme-classic {
  color-scheme: light;
}

/* --------------------------------------------------------------------------
 * Modern light theme — matches the marketing site aesthetic.
 * -------------------------------------------------------------------------- */
body.theme-modern-light {
  color-scheme: light;
}

/* --------------------------------------------------------------------------
 * Modern dark theme — shares tokens with the dark marketing/landing pages.
 * -------------------------------------------------------------------------- */
body.theme-modern-dark {
  color-scheme: dark;
}

body.theme-modern-red-alert {
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
 * Shared structural polish for the modern themes.  We target the primary
 * surfaces so that the updated tokens take effect even where the legacy CSS
 * still sets hard-coded colours.
 * -------------------------------------------------------------------------- */
body[class*="theme-modern"] .row-top,
body[class*="theme-modern"] .row-bottom,
body[class*="theme-modern"] .room-toolbar,
body[class*="theme-modern"] .column_Left,
body[class*="theme-modern"] .column_Centre,
body[class*="theme-modern"] .column_Right,
body[class*="theme-modern"] .projectPackContainer,
body[class*="theme-modern"] .textPackContainer,
body[class*="theme-modern"] .voiceSelectDialog,
body[class*="theme-modern"] .admin-page-container {
  background: var(--color-surface-primary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: var(--box-shadow-1);
  border: none;
}

body[class*="theme-modern"] .projectPack,
body[class*="theme-modern"] .center-container {
  border-color: var(--color-border-strong)  !important;
  background: var(--color-surface-primary) !important;
    box-shadow: none;

}

body[class*="theme-modern"] .projectPackRow,
body[class*="theme-modern"] .textPackRow,
body[class*="theme-modern"] .textPack {
  background: var(--color-surface-primary) !important;
  color: var(--color-text-primary);
  border: none;
}


body[class*="theme-modern"] .voiceSelectDialogMenu,
body[class*="theme-modern"] .voiceSelectDialogVoices,
body[class*="theme-modern"] .sidePanel_Left_OuterLeft,
body[class*="theme-modern"] .sidePanel_Left_InnerLeft {
  background: var(--color-surface-secondary) !important;
  box-shadow: var(--box-shadow-2);
  border: none;
}

body[class*="theme-modern"] .admin-summary-card,
body[class*="theme-modern"] .admin-elevenlabs-card,
body[class*="theme-modern"] .admin-users-table {
  background: var(--color-surface-secondary) !important;
  box-shadow: var(--box-shadow-2);
  border: none;
}
body[class*="theme-modern"] .projectPack_addProject {
  background: var(--color-surface-primary) !important;
  color: var(--color-text-primary);
  box-shadow: var(--box-shadow-2);
  border: none;
}

body[class*="theme-modern"] .button-outer button,
body[class*="theme-modern"] .room-rename-button,
body[class*="theme-modern"] .room-chip,
body[class*="theme-modern"] .room-control-button,
body[class*="theme-modern"] .voiceSelectDialog button,
body[class*="theme-modern"] .admin-refresh-button,
body[class*="theme-modern"] .admin-modal-button {
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
  border: none;
}

body.theme-modern-dark .button-outer button,
body.theme-modern-dark .room-control-button,
body.theme-modern-dark .room-rename-button {
  color: var(--color-text-primary);
}


body[class*="theme-modern"] .room-chip.active,
body[class*="theme-modern"] .room-chip:focus-within {
  box-shadow: var(--box-shadow-2);
  border-color: var(--color-accent-primary);
}

body[class*="theme-modern"] .voiceSelectDialogMenu .individualSelectButton {
  background: var(--color-surface-tertiary);
  border: none;
  color: var(--color-text-primary);
}

body[class*="theme-modern"] .voiceSelectDialogMenu .individualSelectButton:hover {
  box-shadow: 0 0 0 1px var(--color-accent-primary);
}

body[class*="theme-modern"] .select-outer {
  background: var(--color-surface-secondary);
  border: none;
  box-shadow: var(--box-shadow-3);
}

body[class*="theme-modern"] select {
  background: var(--color-surface-secondary);
  box-shadow: none;
}

body[class*="theme-modern"] .select-container {
  background: transparent;
}

body[class*="theme-modern"] .admin-section-header,
body[class*="theme-modern"] .admin-section-title,
body[class*="theme-modern"] .admin-modal {
  color: var(--color-text-primary);
}

body.theme-modern-dark .admin-users-table thead th,
body.theme-modern-dark .admin-summary-label {
  color: var(--color-text-muted);
}

/* Provide a subtle divider hue that respects the selected theme. */
body[class*="theme-modern"] .row-top-divider {
  background: var(--color-border-soft);
}

/* Text inputs adopt the surface tokens so they blend with the theme. */
body[class*="theme-modern"] input,
body[class*="theme-modern"] textarea,
body[class*="theme-modern"] select {
  background: var(--color-surface-tertiary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--box-shadow-inset-1);
}

body.theme-modern-dark input::placeholder,
body.theme-modern-dark textarea::placeholder {
  color: var(--color-text-muted);
}

body.theme-modern-red-alert input::placeholder,
body.theme-modern-red-alert textarea::placeholder {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
 * Red Alert interaction styling.
 * -------------------------------------------------------------------------- */
body.theme-modern-red-alert .button-outer button,
body.theme-modern-red-alert .room-rename-button,
body.theme-modern-red-alert .room-chip,
body.theme-modern-red-alert .room-control-button,
body.theme-modern-red-alert .voiceSelectDialog button,
body.theme-modern-red-alert .admin-refresh-button,
body.theme-modern-red-alert .admin-modal-button,
body.theme-modern-red-alert .settings-button,
body.theme-modern-red-alert .settings-action-button,
body.theme-modern-red-alert .menu-item,
body.theme-modern-red-alert .main-menu-item {
  border: 1px solid var(--color-border-soft);
  box-shadow:
    0 0 0 1px rgba(255, 0, 0, 0.16) inset,
    0 0 8px rgba(255, 0, 0, 0.14);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

body.theme-modern-red-alert .button-outer button:hover,
body.theme-modern-red-alert .room-rename-button:hover,
body.theme-modern-red-alert .room-chip:hover,
body.theme-modern-red-alert .room-control-button:hover,
body.theme-modern-red-alert .voiceSelectDialog button:hover,
body.theme-modern-red-alert .admin-refresh-button:hover,
body.theme-modern-red-alert .admin-modal-button:hover,
body.theme-modern-red-alert .settings-button:hover,
body.theme-modern-red-alert .settings-action-button:hover,
body.theme-modern-red-alert .menu-item:hover,
body.theme-modern-red-alert .main-menu-item:hover {
  border-color: var(--color-border-strong);
  box-shadow:
    0 0 0 1px rgba(255, 0, 0, 0.24) inset,
    0 0 14px rgba(255, 0, 0, 0.24);
  filter: brightness(1.1);
}

body.theme-modern-red-alert .button-outer button:active,
body.theme-modern-red-alert .room-control-button:active,
body.theme-modern-red-alert .voiceSelectDialog button:active,
body.theme-modern-red-alert .settings-button:active,
body.theme-modern-red-alert .settings-action-button:active,
body.theme-modern-red-alert .menu-item-active,
body.theme-modern-red-alert .main-menu-item-active,
body.theme-modern-red-alert .main-menu-item.active,
body.theme-modern-red-alert .room-chip.active,
body.theme-modern-red-alert .room-chip:focus-within {
  border-color: var(--color-border-strong);
  box-shadow:
    0 0 0 1px rgba(255, 0, 0, 0.32) inset,
    0 0 17px rgba(255, 0, 0, 0.32);
  filter: brightness(1.12);
}

body.theme-modern-red-alert .editor-toggle-btn:hover,
body.theme-modern-red-alert .editor-toggle-btn.active,
body.theme-modern-red-alert .editor-tool-btn.active,
body.theme-modern-red-alert .templates-toggle-btn.active {
  background: rgba(255, 0, 0, 0.2);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  box-shadow:
    0 0 0 1px rgba(255, 0, 0, 0.24) inset,
    0 0 14px rgba(255, 0, 0, 0.28);
}

body.theme-modern-red-alert .editor-track-ctrl-btn.active,
body.theme-modern-red-alert .editor-track-ctrl-btn.solo.active,
body.theme-modern-red-alert .editor-track-ctrl-btn.remove:hover,
body.theme-modern-red-alert .tmpl-generate-text-btn,
body.theme-modern-red-alert .tmpl-generate-all-btn:hover,
body.theme-modern-red-alert .templates-toggle-btn.active {
  background: rgba(255, 0, 0, 0.2);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

body.theme-modern-red-alert .tmpl-generate-text-btn:hover,
body.theme-modern-red-alert .tmpl-generate-all-btn {
  background: rgba(255, 0, 0, 0.12);
  border-color: var(--color-border-soft);
  color: var(--color-text-primary);
}

body.theme-modern-red-alert .room-row-control-btn--active,
body.theme-modern-red-alert .tmpl-generated-row.done .tmpl-gen-status .material-symbols-outlined,
body.theme-modern-red-alert .tmpl-generated-row.error .tmpl-gen-status .material-symbols-outlined {
  color: var(--color-accent-primary);
  border-color: var(--color-border-strong);
}

body.theme-modern-red-alert .tmpl-generated-row.done,
body.theme-modern-red-alert .tmpl-generated-row.error,
body.theme-modern-red-alert .tmpl-generated-row.generating {
  border-color: var(--color-border-strong);
}

body.theme-modern-red-alert .editor-clip {
  border-color: rgba(255, 0, 0, 0.45);
}

body.theme-modern-red-alert .editor-clip-header {
  color: #ff2a2a;
}

body.theme-modern-red-alert .editor-clip-waveform {
  background: #120000;
}

body.theme-modern-red-alert .editor-clip.selected {
  box-shadow:
    0 0 0 2px rgba(255, 0, 0, 0.76),
    0 0 12px rgba(255, 0, 0, 0.24);
}

body.theme-modern-red-alert .editor-clip-handle:hover,
body.theme-modern-red-alert .editor-clip-handle.active {
  background: rgba(255, 0, 0, 0.26);
}

body.theme-modern-red-alert .audio-button-outer.playing {
  border-color: #ff0000 !important;
}

body.theme-modern-red-alert .audio-button-outer.paused {
  border-color: #990000 !important;
}

body.theme-modern-red-alert .material-symbols-outlined.playing {
  color: #ff0000;
}

body.theme-modern-red-alert .material-symbols-outlined.paused {
  color: #cc0000;
}

body.theme-modern-red-alert .editor-save-dialog-actions button.primary {
  color: #140000;
}



/* Red Alert expressive/tag styling: keep all chips and dialogs monochrome red. */
body.theme-modern-red-alert .xai-tag-inline {
  background: rgba(120, 0, 0, 0.28);
  color: #ff2a2a;
  border: 1px solid rgba(255, 0, 0, 0.42);
}

body.theme-modern-red-alert .xai-tag-inline .xai-tag-remove {
  color: #ff2a2a;
  opacity: 0.82;
}

body.theme-modern-red-alert .xai-tag-inline[data-category="pauses"],
body.theme-modern-red-alert .xai-tag-inline[data-category="emotion"],
body.theme-modern-red-alert .xai-tag-inline[data-category="mouth"],
body.theme-modern-red-alert .xai-tag-inline[data-category="breathing"] {
  background: rgba(120, 0, 0, 0.28);
  color: #ff2a2a;
  border-color: rgba(255, 0, 0, 0.42);
}

body.theme-modern-red-alert .xai-tag-wrapper {
  border-color: rgba(255, 0, 0, 0.62);
  background: rgba(20, 0, 0, 0.44);
}

body.theme-modern-red-alert .xai-tag-wrapper .xai-tag-label {
  background: rgba(95, 0, 0, 0.86);
  color: #ff2a2a;
  border: 1px solid rgba(255, 0, 0, 0.44);
}

body.theme-modern-red-alert .xai-tag-wrapper[data-category="volume"],
body.theme-modern-red-alert .xai-tag-wrapper[data-category="pitch"],
body.theme-modern-red-alert .xai-tag-wrapper[data-category="vocal"] {
  border-color: rgba(255, 0, 0, 0.62);
}

body.theme-modern-red-alert .xai-tag-wrapper[data-category="volume"] .xai-tag-label,
body.theme-modern-red-alert .xai-tag-wrapper[data-category="pitch"] .xai-tag-label,
body.theme-modern-red-alert .xai-tag-wrapper[data-category="vocal"] .xai-tag-label {
  background: rgba(95, 0, 0, 0.86);
  color: #ff2a2a;
}

body.theme-modern-red-alert .xai-tag-pick {
  border-color: rgba(255, 0, 0, 0.4);
  color: #ff2a2a;
}

body.theme-modern-red-alert .xai-tag-pick:hover {
  background: rgba(120, 0, 0, 0.2);
  box-shadow:
    0 0 0 1px rgba(255, 0, 0, 0.22) inset,
    0 0 10px rgba(255, 0, 0, 0.18);
}

body.theme-modern-red-alert .xai-tag-pick.is-selected {
  background: rgba(130, 0, 0, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.62);
}

body.theme-modern-red-alert .xai-tag-pick[data-category="pauses"],
body.theme-modern-red-alert .xai-tag-pick[data-category="emotion"],
body.theme-modern-red-alert .xai-tag-pick[data-category="mouth"],
body.theme-modern-red-alert .xai-tag-pick[data-category="breathing"],
body.theme-modern-red-alert .xai-tag-pick[data-category="volume"],
body.theme-modern-red-alert .xai-tag-pick[data-category="pitch"],
body.theme-modern-red-alert .xai-tag-pick[data-category="vocal"] {
  border-color: rgba(255, 0, 0, 0.52);
}

body.theme-modern-red-alert .xai-info-card {
  border-color: rgba(255, 0, 0, 0.54);
  background: linear-gradient(135deg, rgba(34, 0, 0, 0.95) 0%, rgba(12, 0, 0, 0.98) 100%);
  color: #ff2a2a;
}

body.theme-modern-red-alert .xai-info-card .material-symbols-outlined,
body.theme-modern-red-alert .xai-info-card-body strong,
body.theme-modern-red-alert .xai-info-card-body p,
body.theme-modern-red-alert .xai-info-card-disclaimer {
  color: #ff2a2a;
}

body.theme-modern-red-alert .xai-info-card-btn {
  border-color: rgba(255, 0, 0, 0.56);
  background: rgba(70, 0, 0, 0.42);
  color: #ff2a2a;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.16);
}

body.theme-modern-red-alert .xai-info-card-btn:hover {
  background: rgba(110, 0, 0, 0.5);
}

body.theme-modern-red-alert .xai-instructions-dialog code {
  background: rgba(90, 0, 0, 0.32);
  color: #ff2a2a;
}

/* Templates page text that still showed neutral/gray tones. */
body.theme-modern-red-alert .tmpl-label,
body.theme-modern-red-alert .tmpl-table-empty,
body.theme-modern-red-alert .tmpl-row-num,
body.theme-modern-red-alert .tmpl-variable-table th {
  color: #a90000;
}

body.theme-modern-red-alert .tmpl-cell-input::placeholder,
body.theme-modern-red-alert .tmpl-template-input:empty::before {
  color: #8d0000;
}

/* Red Alert editor zoom slider: remove white native track rendering. */
body.theme-modern-red-alert .editor-zoom-slider,
body.theme-modern-red-alert #editor-zoom-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  background: transparent;
}

body.theme-modern-red-alert .editor-zoom-slider::-webkit-slider-runnable-track,
body.theme-modern-red-alert #editor-zoom-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 0, 0.45);
  background: linear-gradient(90deg, rgba(110, 0, 0, 0.85), rgba(40, 0, 0, 0.95));
  box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.18);
}

body.theme-modern-red-alert .editor-zoom-slider::-webkit-slider-thumb,
body.theme-modern-red-alert #editor-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 0, 0, 0.7);
  background: #ff0000;
  box-shadow:
    0 0 0 2px rgba(40, 0, 0, 0.9),
    0 0 10px rgba(255, 0, 0, 0.28);
}

body.theme-modern-red-alert .editor-zoom-slider::-moz-range-track,
body.theme-modern-red-alert #editor-zoom-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 0, 0.45);
  background: linear-gradient(90deg, rgba(110, 0, 0, 0.85), rgba(40, 0, 0, 0.95));
  box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.18);
}

body.theme-modern-red-alert .editor-zoom-slider::-moz-range-thumb,
body.theme-modern-red-alert #editor-zoom-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 0, 0, 0.7);
  background: #ff0000;
  box-shadow:
    0 0 0 2px rgba(40, 0, 0, 0.9),
    0 0 10px rgba(255, 0, 0, 0.28);
}

/* --------------------------------------------------------------------------
 * Red Alert CRT scanline overlay.
 * -------------------------------------------------------------------------- */
@keyframes red-alert-crt-scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(4px);
  }
}

@keyframes red-alert-crt-flicker {
  0%,
  100% {
    opacity: 0.2;
  }
  35% {
    opacity: 0.26;
  }
  70% {
    opacity: 0.16;
  }
}

body.theme-modern-red-alert.theme-red-alert-crt::before,
body.theme-modern-red-alert.theme-red-alert-crt::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483645;
}

body.theme-modern-red-alert.theme-red-alert-crt::before {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 0, 0, 0.24) 0px,
      rgba(255, 0, 0, 0.24) 1px,
      rgba(8, 0, 0, 0) 2px,
      rgba(8, 0, 0, 0) 4px
    );
  mix-blend-mode: screen;
  opacity: 0.18;
  animation: red-alert-crt-scan 8s linear infinite;
}

body.theme-modern-red-alert.theme-red-alert-crt::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 0, 0, 0.08) 0%,
      rgba(255, 0, 0, 0.03) 48%,
      rgba(0, 0, 0, 0.42) 100%
    );
  opacity: 0.2;
  animation: red-alert-crt-flicker 3.2s steps(3, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.theme-modern-red-alert.theme-red-alert-crt::before,
  body.theme-modern-red-alert.theme-red-alert-crt::after {
    animation: none;
    opacity: 0.14;
  }
}