/*!
 * PersonifAI Dark Theme CSS
 * Dark mode styles for PersonifAI application
 */

/* Dark theme variables */
[data-theme="dark"] {
  /* Background colors - Custom dark theme */
  --bs-body-bg: #201c1c;  /* Main dark background */
  --bs-body-color: #E8EAED;  /* Light gray text */
  
  /* Surface colors - Custom color scheme */
  --bs-surface-primary: #201c1c;  /* Main background */
  --bs-surface-secondary: #181414;  /* Card backgrounds (was white) */
  --bs-surface-tertiary: #403c3c;  /* Elevated surfaces */
  --bs-surface-light: #504c4c;  /* Hover states */
  --bs-surface-dark: #080808;  /* Darker surfaces */
  
  /* Text colors */
  --bs-text-muted: #E8EAED;  /* Light gray text for better contrast */
  --bs-headings-color: #FFFFFF;  /* Pure white headings for maximum contrast */
  
  /* Component colors */
  --bs-card-bg: #201c1c;  /* Card background (was white) */
  --bs-card-border-color: #201c1c;  /* Card borders - match background */
  
  --bs-input-bg: #201c1c;  /* Input backgrounds */
  --bs-input-border-color: #504c4c;  /* Input borders */
  --bs-input-color: #E8EAED;  /* Input text */
  
  --bs-dropdown-bg: #201c1c;  /* Dropdown backgrounds */
  --bs-dropdown-border-color: #403c3c;  /* Dropdown borders */
  --bs-dropdown-link-color: #E8EAED;  /* Dropdown text */
  --bs-dropdown-link-hover-color: #F9FAFB;  /* Dropdown hover text */
  --bs-dropdown-link-hover-bg: #403c3c;  /* Dropdown hover background */
  
  --bs-navbar-light-bg: #201c1c;  /* Navbar background */
  --bs-navbar-light-color: #E8EAED;  /* Navbar text */
  --bs-navbar-light-hover-color: #F9FAFB;  /* Navbar hover text */
  --bs-navbar-light-active-color: #F9FAFB;  /* Navbar active text */
  
  --bs-table-bg: #201c1c;  /* Table background */
  --bs-table-border-color: #403c3c;  /* Table borders */
  --bs-table-striped-bg: #282424;  /* Table striped rows */
  
  --bs-modal-content-bg: #201c1c;  /* Modal background */
  --bs-modal-header-border-color: #403c3c;  /* Modal header border */
  --bs-modal-footer-border-color: #403c3c;  /* Modal footer border */
  
  --bs-popover-bg: #201c1c;  /* Popover background */
  --bs-popover-border-color: #403c3c;  /* Popover border */
  
  --bs-tooltip-bg: #403c3c;  /* Tooltip background */
}

/* Dark theme specific component styles */
[data-theme="dark"] {
  /* Global page background */
  html {
    background-color: var(--bs-body-bg) !important;
  }
  
  body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
  }
  
  /* Main content areas - FIXED */
  .bg-surface-secondary {
    background-color: var(--bs-surface-secondary) !important;
  }
  
  /* Sidebar should use primary color in dark mode */
  .collapse.bg-surface-secondary {
    background-color: var(--bs-surface-primary) !important;
    border-left: 1px solid var(--bs-surface-tertiary) !important;
  }
  
  /* Chat input container should use surface-secondary in dark mode */
  .d-flex.align-items-center.bg-surface-secondary {
    background-color: var(--bs-surface-secondary) !important;
  }
  
  /* Chat container should use body background in dark mode */
  #chatContainer {
    background-color: var(--bs-body-bg) !important;
  }
  
  .bg-surface-primary {
    background-color: var(--bs-surface-primary) !important;
  }
  
  /* Override bg-light for dark mode */
  .bg-light {
    background-color: var(--bs-surface-secondary) !important;
    color: var(--bs-body-color) !important;
  }
  
  /* Keep primary color for specific icon elements */
  .icon-shape.bg-primary {
    background-color: #5C60F5 !important;
  }
  
  /* Keep primary color for badges with bg-primary */
  .badge.bg-primary {
    background-color: #5C60F5 !important;
  }
  
  /* Keep primary color for badges with bg-primary and bg-opacity-30 */
  .badge.bg-opacity-30.bg-primary {
    background-color: rgba(92, 96, 245, 0.3) !important;
  }
  
  /* Keep primary text color for badges with text-primary */
  .badge.text-primary {
    color: #5C60F5 !important;
  }
  
  /* Keep colored text for status badges in dark mode */
  .badge.text-success {
    color: #198754 !important;
  }
  
  .badge.text-warning {
    color: #ffc107 !important;
  }
  
  /* Specific override for h5 with text-warning class */
  .h5.text-warning,
  h5.text-warning {
    color: #ff8c00 !important;
  }
  
  .badge.text-info {
    color: #0dcaf0 !important;
  }
  
  .badge.text-secondary {
    color: #6c757d !important;
  }
  
  /* Main container background - FIXED */
  .d-flex.flex-column.flex-xl-row.bg-surface-secondary {
    background-color: var(--bs-surface-secondary) !important;
  }
  
  /* Header elements with bg-surface-primary - FIXED */
  header.bg-surface-primary:not(#homeHeader) {
    background-color: var(--bs-navbar-light-bg) !important;
    border-bottom-color: var(--bs-card-border-color) !important;
  }
  
  /* Home page header should use surface-secondary */
  #homeHeader {
    background-color: var(--bs-surface-primary) !important;
    border-bottom-color: var(--bs-card-border-color) !important;
  }
  
  /* Ensure header text is properly colored */
  header.bg-surface-primary h1,
  header.bg-surface-primary h2,
  header.bg-surface-primary h3,
  header.bg-surface-primary h4,
  header.bg-surface-primary h5,
  header.bg-surface-primary h6 {
    color: var(--bs-headings-color) !important;
  }
  
  /* Header close button styling */
  header.bg-surface-primary .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
  
  /* Header divider styling */
  header.bg-surface-primary .vr {
    background-color: var(--bs-text-muted) !important;
  }
  
  /* General divider styling for dark mode */
  .vr {
    background-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Border dividers */
  .border,
  .border-top,
  .border-bottom,
  .border-start,
  .border-end {
    border-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Light borders - make them darker in dark mode */
  .border-light {
    border-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Divider elements */
  hr {
    border-color: var(--bs-surface-tertiary) !important;
    background-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Section dividers */
  .divider,
  .section-divider {
    background-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Bootstrap divider utilities */
  .border-white {
    border-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Custom divider classes */
  .divider-line,
  .separator,
  .section-separator {
    background-color: var(--bs-surface-tertiary) !important;
    border-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Navbar dividers */
  .navbar .vr,
  .navbar .divider {
    background-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Card dividers */
  .card .vr,
  .card .divider {
    background-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Card styles - EXTREMELY SPECIFIC to override any conflicts */
  .card,
  div.card,
  .card.border-0,
  .card.shadow,
  .card.shadow-4-hover,
  .card.h-100,
  .card.d-flex,
  .card.flex-column,
  .card.border-0.shadow,
  .card.border-0.shadow.shadow-4-hover,
  .card.border-0.shadow.shadow-4-hover.h-100,
  .card.border-0.shadow.shadow-4-hover.h-100.d-flex,
  .card.border-0.shadow.shadow-4-hover.h-100.d-flex.flex-column {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-surface-tertiary) !important;
    border-radius: inherit !important;
  }
  
  /* Force card background with maximum specificity */
  [data-theme="dark"] .card,
  [data-theme="dark"] div.card,
  [data-theme="dark"] .card.border-0,
  [data-theme="dark"] .card.shadow,
  [data-theme="dark"] .card.shadow-4-hover,
  [data-theme="dark"] .card.h-100 {
    background-color: #302c2c !important;
    border-color: var(--bs-surface-tertiary) !important;
    border-radius: inherit !important;
  }
  
  /* Card headers and bodies */
  .card-header {
    background-color: var(--bs-card-bg) !important;
    border-bottom-color: var(--bs-surface-tertiary) !important;
  }
  
  .card-body {
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-body-color) !important;
  }
  
  .card-footer {
    background-color: var(--bs-card-bg) !important;
    border-top-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Table container cards */
  .card.table-container {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-card-border-color) !important;
  }
  
  /* Form controls */
  .form-control,
  .form-select {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-input-border-color);
    color: var(--bs-input-color);
  }
  
  .form-control:focus,
  .form-select:focus {
    background-color: var(--bs-input-bg);
    border-color: #5C60F5;
    color: var(--bs-input-color);
    box-shadow: 0 0 0 0.25rem rgba(92, 96, 245, 0.25);
  }
  
  .form-control::placeholder,
  .form-select::placeholder {
    color: var(--bs-text-muted);
  }
  
  /* Comprehensive form input styling for dark mode */
  input.form-control,
  textarea.form-control,
  select.form-select,
  .secure-textarea,
  .secure-text-input-component textarea,
  .secure-text-input-component .secure-textarea {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border-color) !important;
    color: var(--bs-input-color) !important;
  }
  
  input.form-control:focus,
  textarea.form-control:focus,
  select.form-select:focus,
  .secure-textarea:focus,
  .secure-text-input-component textarea:focus,
  .secure-text-input-component .secure-textarea:focus {
    background-color: var(--bs-input-bg) !important;
    border-color: #5C60F5 !important;
    color: var(--bs-input-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(92, 96, 245, 0.25) !important;
  }
  
  input.form-control::placeholder,
  textarea.form-control::placeholder,
  select.form-select::placeholder,
  .secure-textarea::placeholder,
  .secure-text-input-component textarea::placeholder,
  .secure-text-input-component .secure-textarea::placeholder {
    color: var(--bs-text-muted) !important;
  }
  
  /* Form select options styling for dark mode - Multiple approaches for better browser support */
  .form-select option {
    background-color: var(--bs-dropdown-bg) !important;
    color: var(--bs-dropdown-link-color) !important;
  }
  
  /* Alternative approach for form-select in dark mode */
  select.form-select {
    background-color: var(--bs-input-bg) !important;
    color: var(--bs-input-color) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  /* Specific targeting for action type dropdown */
  #actionType,
  #actionAgent {
    background-color: var(--bs-input-bg) !important;
    color: var(--bs-input-color) !important;
  }
  
  #actionType option,
  #actionAgent option {
    background-color: var(--bs-dropdown-bg) !important;
    color: var(--bs-dropdown-link-color) !important;
  }
  
  /* Specific targeting for secure text input components */
  #actionPrompt,
  #actionOutputName,
  .secure-text-input-component {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border-color) !important;
    color: var(--bs-input-color) !important;
  }
  
  /* Ensure all modal form inputs are dark themed */
  .modal .form-control,
  .modal .form-select,
  .modal textarea,
  .modal input[type="text"],
  .modal input[type="email"],
  .modal input[type="password"],
  .modal .secure-textarea {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border-color) !important;
    color: var(--bs-input-color) !important;
  }
  
  /* Input group text (search icons) - FIXED */
  .input-group-text {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border-color) !important;
    color: var(--bs-text-muted) !important;
  }
  
  /* Dropdowns */
  .dropdown-menu {
    background-color: var(--bs-dropdown-bg);
    border-color: var(--bs-dropdown-border-color);
  }
  
  .dropdown-item {
    color: var(--bs-dropdown-link-color);
  }
  
  .dropdown-item:hover {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color);
  }
  
  /* Navbar - Override bg-white class - FIXED */
  .navbar-light,
  .navbar.navbar-light {
    background-color: var(--bs-navbar-light-bg) !important;
  }
  
  /* Navbar nav items - FIXED */
  .navbar-light .navbar-nav .nav-link,
  .navbar.navbar-light .navbar-nav .nav-link {
    color: var(--bs-navbar-light-color) !important;
    background-color: transparent !important;
  }
  
  .navbar-light .navbar-nav .nav-link:hover,
  .navbar.navbar-light .navbar-nav .nav-link:hover {
    color: var(--bs-navbar-light-hover-color) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  .navbar-light .navbar-nav .nav-link.active,
  .navbar.navbar-light .navbar-nav .nav-link.active {
    color: var(--bs-navbar-light-active-color) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
  }
  
  /* Navbar brand and text */
  .navbar-brand {
    color: var(--bs-navbar-light-color) !important;
  }
  
  .navbar-heading,
  .nav-link-text {
    color: var(--bs-navbar-light-color) !important;
  }
  
  /* Primary buttons - ensure text stays white - FIXED */
  .btn-primary,
  .btn.btn-primary {
    color: #FFFFFF !important;
  }
  
  .btn-primary:hover,
  .btn.btn-primary:hover {
    color: #FFFFFF !important;
  }
  
  .btn-primary:focus,
  .btn.btn-primary:focus {
    color: #FFFFFF !important;
  }
  
  .btn-primary:active,
  .btn.btn-primary:active {
    color: #FFFFFF !important;
  }
  
  /* Text colors - FIXED */
  .text-muted {
    color: var(--bs-text-muted) !important;
  }
  
  .text-heading {
    color: var(--bs-headings-color) !important;
  }
  
  .text-primary {
    color: #5C60F5 !important;
  }
  
  /* More specific override for primary text in dark mode */
  [data-theme="dark"] .text-primary,
  [data-theme="dark"] a.text-primary,
  [data-theme="dark"] span.text-primary {
    color: #5C60F5 !important;
  }
  
  /* Persona card text - ensure visibility */
  .persona-name,
  .card h6,
  .card .font-semibold {
    color: #FFFFFF !important;
  }
  
  /* Card body text */
  .card-body {
    color: #E8EAED !important;
  }
  
  /* Small text in cards */
  .card small,
  .card .text-xs {
    color: #D1D5DB !important;
  }
  
  /* Workflow titles and headings - ensure visibility */
  .title-display h4,
  .editable-title,
  .h1, .h2, .h3, .h4, .h5, .h6,
  h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF !important;
  }
  
  /* Form controls in dark mode */
  .form-control {
    color: #E8EAED !important;
  }
  
  /* Audio control labels should be white in dark mode */
  .form-check-label {
    color: #FFFFFF !important;
  }

  
  /* Flow settings descriptions and help text */
  .flow-settings .text-muted,
  .workflow-settings .text-muted,
  .settings-section .text-muted,
  .flow-settings small,
  .workflow-settings small,
  .settings-section small {
    color: #E8EAED !important;
  }
  
  /* Specific form labels and text in flow settings */
  .form-check-label,
  .form-label,
  label {
    color: #FFFFFF !important;
  }
  
  /* Flow settings specific text */
  .card-body label,
  .card-body .form-label,
  .card-body .form-check-label {
    color: #FFFFFF !important;
  }
  
  /* Any text in flow settings cards (exclude workflow diagram nodes and containers) */
  .card-body p:not(.workflow-diagram-container p):not(.workflow-diagram-container-desktop p),
  .card-body span:not(.node-icon):not(.node-icon-desktop):not(.workflow-diagram-container span):not(.workflow-diagram-container-desktop span),
  .card-body div:not(.node-icon):not(.node-icon-desktop):not(.workflow-node):not(.workflow-node-desktop):not(.workflow-diagram-container):not(.workflow-diagram-container-desktop) {
    color: #FFFFFF !important;
  }
  
  /* Override for primary text in card-body */
  .card-body .text-primary,
  .card-body span.text-primary,
  .card-body a.text-primary {
    color: #5C60F5 !important;
  }
  
  /* More specific override for primary text in any context */
  .text-primary,
  span.text-primary,
  a.text-primary,
  .h6.text-primary,
  .d-block.h6.text-primary {
    color: #5C60F5 !important;
  }
  
  /* Override for h6 elements with text-primary in dark mode */
  [data-theme="dark"] .h6.text-primary,
  [data-theme="dark"] h6.text-primary,
  [data-theme="dark"] .d-block.h6.text-primary {
    color: #5C60F5 !important;
  }
  
  /* Badge text in dark mode */
  .badge {
    color: #FFFFFF !important;
  }
  
  .badge.bg-secondary {
    background-color: #504c4c !important;
    color: #FFFFFF !important;
  }
  
  /* Navbar badges - keep original colors */
  .navbar .badge.bg-success {
    background-color: #198754 !important;
    color: #FFFFFF !important;
  }
  
  .navbar .badge.text-success {
    color: #198754 !important;
  }
  
  /* Navbar badges with bg-opacity-30 - match the "New!" badges */
  .navbar .badge.bg-opacity-30.bg-success {
    background-color: rgba(25, 135, 84, 0.3) !important;
    color: #198754 !important;
  }
  
  /* Tables */
  .table {
    background-color: var(--bs-table-bg);
    color: var(--bs-body-color);
  }
  
  .table th,
  .table td {
    border-color: var(--bs-table-border-color);
  }
  
  .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bs-table-striped-bg);
  }
  
  /* Modals */
  .modal-content {
    background-color: var(--bs-modal-content-bg);
    border-color: var(--bs-modal-header-border-color);
  }
  
  .modal-header {
    border-bottom-color: var(--bs-modal-header-border-color);
  }
  
  .modal-footer {
    border-top-color: var(--bs-modal-footer-border-color);
  }
  
  /* Popovers */
  .popover {
    background-color: var(--bs-popover-bg);
    border-color: var(--bs-popover-border-color);
  }
  
  /* Tooltips */
  .tooltip .tooltip-inner {
    background-color: var(--bs-tooltip-bg);
  }
  
  /* PersonifAI specific components */
  
  /* Chat bubbles */
  .bg-gray-100 {
    background-color: var(--bs-surface-secondary) !important;
    color: var(--bs-body-color) !important;
  }
  
  /* Persona cards */
  .persona-item {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-card-border-color);
  }
  
  /* Workflow components */
  .workflow-step {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-card-border-color);
  }
  
  /* Loading animations */
  .loading-spinner {
    border-color: var(--bs-text-muted);
  }
  
  /* Overlays */
  .overlay {
    background-color: var(--bs-input-bg);
  }
  
  /* Form validation */
  .is-invalid {
    border-color: #dc3545 !important;
  }
  
  .invalid-feedback {
    color: #dc3545;
  }
  
  /* Alerts */
  .alert-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border-color: rgba(13, 202, 240, 0.3) !important;
    color: #0dcaf0 !important;
  }
  
  /* Enhanced tier info container styling for dark mode */
  .alert.alert-info,
  #tier-info-container.alert.alert-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border-color: rgba(13, 202, 240, 0.3) !important;
    color: #0dcaf0 !important;
  }
  
  .alert.alert-info strong,
  #tier-info-container.alert.alert-info strong {
    color: #FFFFFF !important;
  }
  
  .alert.alert-info .text-muted,
  .alert.alert-info small.text-muted,
  #tier-info-container.alert.alert-info .text-muted,
  #tier-info-container.alert.alert-info small.text-muted {
    color: rgba(232, 234, 237, 0.8) !important;
  }
  
  .alert.alert-info .btn-outline-primary,
  #tier-info-container.alert.alert-info .btn-outline-primary {
    border-color: #5C60F5 !important;
    color: #5C60F5 !important;
    background-color: transparent !important;
  }
  
  .alert.alert-info .btn-outline-primary:hover,
  #tier-info-container.alert.alert-info .btn-outline-primary:hover {
    background-color: #5C60F5 !important;
    border-color: #5C60F5 !important;
    color: #FFFFFF !important;
  }
  
  /* Icon styling for tier info */
  .alert.alert-info .bi-info-circle,
  #tier-info-container.alert.alert-info .bi-info-circle {
    color: #0dcaf0 !important;
  }
  
  .alert.alert-info .bi-star,
  #tier-info-container.alert.alert-info .bi-star {
    color: inherit !important;
  }
  
  /* Primary-bordered tier info container */
  .border-primary.border-opacity-50 {
    border-color: rgba(92, 96, 245, 0.5) !important;
  }
  
  /* Ensure text is visible in bordered container in dark mode */
  .border-primary strong {
    color: var(--bs-headings-color) !important;
  }
  
  .border-primary .text-muted {
    color: var(--bs-text-muted) !important;
  }
  
  .border-primary .text-primary {
    color: #5C60F5 !important;
  }

  .alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.2);
    color: #198754;
  }
  
  .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.2);
    color: #ffc107;
  }
  
  .alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
  }
  
  /* Progress bars */
  .progress {
    background-color: var(--bs-surface-tertiary);
  }
  
  /* List groups */
  .list-group-item {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-card-border-color);
    color: var(--bs-body-color);
  }
  
  /* Accordions */
  .accordion-item {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-card-border-color);
  }
  
  .accordion-button {
    background-color: var(--bs-card-bg);
    color: var(--bs-body-color);
  }
  
  .accordion-button:not(.collapsed) {
    background-color: var(--bs-surface-secondary);
    color: var(--bs-body-color);
  }
  
  /* Breadcrumbs */
  .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-text-muted);
  }
  
  /* Pagination */
  .page-link {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-card-border-color);
    color: var(--bs-body-color);
  }
  
  .page-link:hover {
    background-color: var(--bs-surface-secondary);
    border-color: var(--bs-card-border-color);
    color: var(--bs-body-color);
  }
  
  .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #FFFFFF;
  }
  
  /* Close buttons */
  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
  
  /* File inputs */
  .form-control[type="file"] {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-input-border-color);
    color: var(--bs-input-color);
  }

  .form-control[type="file"]:focus {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-input-focus-border-color);
    color: var(--bs-input-color);
  }

  .form-control[type="file"]::file-selector-button {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-input-border-color);
    color: var(--bs-btn-color);
  }

  .form-control[type="file"]:hover::file-selector-button {
    background-color: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
  }

  /* Secure media upload component */
  .secure-media-upload-component {
    border-color: var(--bs-surface-tertiary) !important;
    background-color: var(--bs-surface-secondary) !important;
  }

  .secure-media-upload-component:hover {
    border-color: #5C60F5 !important;
    background-color: var(--bs-surface-secondary) !important;
  }

  .secure-media-upload-component input[type="file"] {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-input-border-color);
    color: var(--bs-input-color);
  }

  .secure-media-upload-component .form-text {
    color: var(--bs-text-muted);
  }

  .multimodal-input-container {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
  }
  
  /* Textareas */
  textarea.form-control {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-input-border-color);
    color: var(--bs-input-color);
  }
  
  /* Select2 dropdowns */
  .select2-container--default .select2-selection--single {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-input-border-color);
    color: var(--bs-input-color);
  }
  
  .select2-container--default .select2-results__option {
    background-color: var(--bs-dropdown-bg);
    color: var(--bs-dropdown-link-color);
  }
  
  .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color);
  }
  
  /* Loop Controls - Dark mode styling */
  .loop-controls {
    background-color: #201c1c !important;
    border-color: var(--bs-surface-tertiary) !important;
    color: var(--bs-body-color) !important;
  }
  
  .loop-controls:hover {
    background-color: #403c3c !important;
    border-color: var(--bs-surface-tertiary) !important;
  }
  
  .loop-controls .loop-btn {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border-color) !important;
    color: var(--bs-text-muted) !important;
  }
  
  .loop-controls .loop-btn:hover {
    background-color: var(--bs-surface-secondary) !important;
    border-color: #5c60f5 !important;
    color: #5c60f5 !important;
  }
  
  .loop-controls .loop-btn.active {
    background-color: #5c60f5 !important;
    border-color: #5c60f5 !important;
    color: #fff !important;
  }
  
  .loop-controls .form-check-input:checked {
    background-color: #5c60f5 !important;
    border-color: #5c60f5 !important;
  }
  
  .loop-controls .form-check-input:focus {
    border-color: #5c60f5 !important;
    box-shadow: 0 0 0 0.25rem rgba(92, 96, 245, 0.25) !important;
  }
  
  .loop-controls .form-text {
    color: var(--bs-text-muted) !important;
  }
  
  .loop-controls .form-label {
    color: var(--bs-body-color) !important;
  }
  
  .loop-controls .form-check-label:hover {
    color: #5c60f5 !important;
  }
  
  /* Cost badge - Dark mode styling */
  .badge.bg-primary.bg-opacity-20 {
    background-color: rgba(92, 96, 245, 0.3) !important;
    color: #5c60f5 !important;
  }
  
  /* Chevron icons - make them white in dark mode (only in specific contexts) */
  .btn-link.text-muted .bi-chevron-down,
  .btn-link.text-muted .bi-chevron-up,
  [data-theme="dark"] .btn-link.text-muted .bi-chevron-down,
  [data-theme="dark"] .btn-link.text-muted .bi-chevron-up,
  .card-header .bi-chevron-down,
  .card-header .bi-chevron-up,
  .card-header .bi-chevron-bar-up,
  .card-header .bi-chevron-bar-down,
  .card-header .bi-chevron-bar-contract {
    color: #FFFFFF !important;
  }
  
  /* Action cards - Dark mode styling */
  .action-card {
    background-color: #201c1c !important;
    border-color: var(--bs-surface-tertiary) !important;
    color: var(--bs-body-color) !important;
  }
  
  /* Model selection table - Dark mode styling */
  #model_choices_tbody tr {
    transition: all 0.3s ease !important;
  }
  
  #model_choices_tbody tr:hover {
    box-shadow: 0 0 10px rgba(92, 96, 245, 0.3) !important;
    background-color: rgba(92, 96, 245, 0.05) !important;
  }
  
  #model_choices_tbody tr.selected {
    box-shadow: 0 0 15px rgba(92, 96, 245, 0.5) !important;
    background-color: rgba(92, 96, 245, 0.1) !important;
    color: #ffffff !important;
  }
  
  #model_choices_tbody tr.selected td {
    color: #ffffff !important;
  }
  
  #model_choices_tbody tr.selected .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  .action-card h6 {
    border-bottom-color: var(--bs-surface-tertiary) !important;
    color: var(--bs-body-color) !important;
  }
  
  .action-card .action-delete-btn {
    color: var(--bs-text-muted) !important;
  }
  
  .action-card .action-delete-btn:hover {
    color: #dc3545 !important;
  }
  
  /* Step display - Dark mode styling */
  .step-display {
    background-color: #201c1c !important;
    border-color: var(--bs-surface-tertiary) !important;
    color: var(--bs-body-color) !important;
  }
  
  .step-display .border-bottom {
    border-bottom-color: var(--bs-surface-tertiary) !important;
  }
  
  .step-display h6 {
    color: var(--bs-body-color) !important;
  }
  
  .step-display .delete-step {
    color: var(--bs-text-muted) !important;
  }
  
  .step-display .delete-step:hover {
    color: #dc3545 !important;
  }
  
  /* Badge text - inherit color from parent badge */
  .badge .badge-text {
    color: inherit !important;
  }
  
  /* Specific badge text colors for different badge types */
  .badge.bg-success .badge-text {
    color: #198754 !important;
  }
  
  .badge.bg-info .badge-text {
    color: #0dcaf0 !important;
  }
  
  .badge.bg-primary .badge-text {
    color: #5c60f5 !important;
  }
  
  .badge.bg-warning .badge-text {
    color: #ffc107 !important;
  }
  
  .badge.bg-danger .badge-text {
    color: #dc3545 !important;
  }
  
  .badge.bg-secondary .badge-text {
    color: #6c757d !important;
  }
  
  /* Stage/Rung borders - match navbar border color */
  .rung-container {
    border-color: var(--bs-surface-tertiary) !important;
  }
  
  .rung-container .rung-header {
    border-bottom-color: var(--bs-surface-tertiary) !important;
  }
  
  .branch-carousel .branch-container:not(:last-child) {
    border-right-color: var(--bs-surface-tertiary) !important;
  }
  
  .action-card {
    border-color: var(--bs-surface-tertiary) !important;
  }
  
  .action-card h6 {
    border-bottom-color: var(--bs-surface-tertiary) !important;
  }
  
  /* AI Co-Creator Sidebar - Dark mode styling */
  .ai-assistant-panel {
    background-color: var(--bs-body-bg) !important;
  }
  
  .ai-panel-container {
    background-color: var(--bs-card-bg) !important;
    border-left-color: var(--bs-surface-tertiary) !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3) !important;
  }
  
  .ai-panel-handle {
    background-color: var(--bs-surface-secondary) !important;
    border-right-color: var(--bs-surface-tertiary) !important;
  }
  
  .ai-panel-handle button {
    background-color: var(--bs-surface-secondary) !important;
    color: var(--bs-body-color) !important;
  }
  
  .ai-panel-handle button:hover {
    background-color: var(--bs-surface-tertiary) !important;
  }
  
  .ai-panel-content {
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-body-color) !important;
  }
  
  .panel-header {
    background-color: var(--bs-card-bg) !important;
    border-bottom-color: var(--bs-surface-tertiary) !important;
    color: var(--bs-body-color) !important;
  }
  
  .panel-header h6 {
    color: var(--bs-headings-color) !important;
  }
  
  .panel-header .text-muted {
    color: var(--bs-text-muted) !important;
  }
  
  #closeAIPanelBtn {
    color: var(--bs-text-muted) !important;
  }
  
  #closeAIPanelBtn:hover {
    color: #dc3545 !important;
  }
  
  .ai-chat-container {
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-body-color) !important;
  }
  
  .ai-chat-container::-webkit-scrollbar-track {
    background-color: var(--bs-surface-tertiary) !important;
  }
  
  .ai-chat-container::-webkit-scrollbar-thumb {
    background-color: var(--bs-surface-light) !important;
  }
  
  .ai-chat-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-text-muted) !important;
  }
  
  .ai-quick-actions {
    background-color: var(--bs-card-bg) !important;
    border-top-color: var(--bs-surface-tertiary) !important;
  }
  
  .ai-quick-actions .btn {
    background-color: var(--bs-surface-secondary) !important;
    border-color: var(--bs-surface-tertiary) !important;
    color: var(--bs-body-color) !important;
  }
  
  .ai-quick-actions .btn:hover {
    background-color: var(--bs-surface-tertiary) !important;
    border-color: var(--bs-surface-light) !important;
  }
  
  .ai-quick-actions .btn-primary {
    background-color: #5c60f5 !important;
    border-color: #5c60f5 !important;
    color: #FFFFFF !important;
  }
  
  .ai-quick-actions .btn-primary:hover {
    background-color: #4a4ed4 !important;
    border-color: #4a4ed4 !important;
  }
  
  .ai-chat-input {
    background-color: var(--bs-card-bg) !important;
    border-top-color: var(--bs-surface-tertiary) !important;
  }
  
  .ai-chat-input .form-control {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border-color) !important;
    color: var(--bs-input-color) !important;
  }
  
  .ai-chat-input .form-control:focus {
    background-color: var(--bs-input-bg) !important;
    border-color: #5c60f5 !important;
    color: var(--bs-input-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(92, 96, 245, 0.25) !important;
  }
  
  .ai-chat-input .form-control::placeholder {
    color: var(--bs-text-muted) !important;
  }
  
  .ai-chat-input .btn {
    background-color: #5c60f5 !important;
    border-color: #5c60f5 !important;
    color: #FFFFFF !important;
  }
  
  .ai-chat-input .btn:hover {
    background-color: #4a4ed4 !important;
    border-color: #4a4ed4 !important;
  }
  
  /* Chat message styling */
  .agent-state-chat-message {
    background-color: var(--bs-surface-primary) !important;
    border-color: var(--bs-surface-tertiary) !important;
    color: var(--bs-body-color) !important;
  }
  
  .agent-state-chat-message .border {
    border-color: var(--bs-surface-tertiary) !important;
  }
  
  .agent-state-chat-message .text-muted {
    color: var(--bs-text-muted) !important;
  }
  
  .agent-state-chat-message .agent-label {
    color: var(--bs-headings-color) !important;
  }
  
  .agent-number-badge {
    background-color: var(--bs-surface-tertiary) !important;
    color: var(--bs-body-color) !important;
  }
  
  /* Agent-specific styling */
  .agent-state-chat-message[data-agent-source*="flow_conductor"] .agent-label {
    color: #ff6b35 !important;
  }
  
  .agent-state-chat-message[data-agent-source*="flow_designer"] .agent-label {
    color: #5c60f5 !important;
  }
  
  .agent-state-chat-message[data-agent-source*="workflow_architect"] .agent-label {
    color: #28a745 !important;
  }
  
  .agent-state-chat-message[data-agent-source*="tool"] .agent-label {
    color: #17a2b8 !important;
  }
  
  /* Workflow details badges - Dark mode styling */
  .bg-white.border.rounded.px-3.py-1.font-semibold.text-muted.text-sm,
  a.bg-white.border.rounded.px-3.py-1.font-semibold.text-muted.text-sm {
    background-color: var(--bs-surface-secondary) !important;
    border-color: var(--bs-surface-tertiary) !important;
    color: var(--bs-text-muted) !important;
  }
  
  .bg-white.border.rounded.px-3.py-1.font-semibold.text-muted.text-sm:hover,
  a.bg-white.border.rounded.px-3.py-1.font-semibold.text-muted.text-sm:hover {
    background-color: var(--bs-surface-tertiary) !important;
    border-color: var(--bs-surface-light) !important;
    color: var(--bs-body-color) !important;
  }
  
  /* Secure Text Input Character Counter - Dark mode styling */
  .secure-text-input-component .char-counter {
    background-color: rgba(32, 28, 28, 0.9) !important;
    color: var(--bs-text-muted) !important;
    border: 1px solid var(--bs-surface-tertiary) !important;
  }
  
  .secure-text-input-component.chat-bar-mode .char-counter.chat-bar-counter {
    background-color: rgba(32, 28, 28, 0.8) !important;
    color: var(--bs-text-muted) !important;
    border: 1px solid var(--bs-surface-tertiary) !important;
  }
  
  /* Secure text input component background for chat-bar-mode in dark mode */
  .secure-text-input-component.chat-bar-mode {
    background-color: var(--bs-surface-secondary) !important;
  }
  
  .secure-text-input-component.chat-bar-mode .text-input-container {
    background-color: var(--bs-surface-secondary) !important;
  }
  
  /* Override form control styling specifically for chat-bar-mode secure text inputs */
  .secure-text-input-component.chat-bar-mode textarea.secure-textarea,
  .secure-text-input-component.chat-bar-mode .secure-textarea {
    background-color: var(--bs-surface-secondary) !important;
  }
  
  .secure-text-input-component .char-counter.warning {
    background-color: rgba(92, 96, 245, 0.2) !important;
    color: #ffc107 !important;
    border: 1px solid #ffc107 !important;
  }
  
  .secure-text-input-component .char-counter.danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
  }
  
  /* Security indicators for secure text inputs - Dark mode styling */
  .secure-text-input-component .security-indicator.warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #ffc107 !important;
    border-color: #ffc107 !important;
  }
  
  .secure-text-input-component .security-indicator.danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
  }
  
  .secure-text-input-component .security-indicator.safe {
    background-color: rgba(25, 135, 84, 0.2) !important;
    color: #198754 !important;
    border-color: #198754 !important;
  }
  
  /* Media type icons and workflow icons - Use natural colors (no overrides needed) */
  
  /* Ensure workflow diagram icons use their natural semantic colors */
  .workflow-node .node-icon i,
  .workflow-node-desktop .node-icon-desktop i,
  .node-icon i,
  .node-icon-desktop i {
    color: inherit !important;
  }
  
  /* Word cloud container - Dark mode styling */
  #wordCloudContainer {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Workflow diagram containers - Dark mode styling */
  .workflow-diagram-container,
  .workflow-diagram-container-desktop {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-surface-tertiary) !important;
  }
  
  /* Workflow section badges - Dark mode styling (collapsed card state) */
  .workflow-badge,
  span.workflow-badge {
    background-color: var(--bs-surface-secondary) !important;
    border: 1px solid var(--bs-surface-tertiary) !important;
    color: var(--bs-text-muted) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
  }
  
  .workflow-badge:hover,
  span.workflow-badge:hover {
    background-color: var(--bs-surface-tertiary) !important;
    border-color: var(--bs-surface-light) !important;
    color: var(--bs-body-color) !important;
  }
  
  /* Workflow sections - Dark mode styling */
  .workflow-section {
    color: var(--bs-body-color) !important;
  }
  
  .workflow-section p,
  .workflow-section .text-sm {
    color: var(--bs-body-color) !important;
  }
  
  .workflow-section a {
    color: var(--bs-body-color) !important;
  }
  
  .workflow-section a:hover {
    color: #5C60F5 !important;
  }
  
  /* API Provider Button Styling - Dark mode fix for form-item-checkable */
  .form-item-checkable .form-item-click {
    background-color: var(--bs-surface-secondary) !important;
    border-color: var(--bs-surface-tertiary) !important;
    color: var(--bs-body-color) !important;
  }
  
  .form-item-checkable .form-item-click:hover {
    background-color: rgba(92, 96, 245, 0.1) !important;
    border-color: var(--x-primary) !important;
    color: var(--bs-body-color) !important;
  }
  
  .form-item-checkable input[type="radio"]:checked + label .form-item-click {
    background-color: rgba(92, 96, 245, 0.15) !important;
    border-color: var(--x-primary) !important;
    color: var(--x-primary) !important;
  }
  
  /* Ensure icons and images in selected API provider buttons are visible */
  .form-item-checkable input[type="radio"]:checked + label .form-item-click img,
  .form-item-checkable input[type="radio"]:checked + label .form-item-click i {
    opacity: 1 !important;
    filter: none !important;
  }
  
  /* Ensure API provider button text is visible in dark mode */
  .form-item-checkable .form-item-click span {
    color: inherit !important;
  }
  
  /* User Message Bubbles - Maintain primary color in dark mode */
  .user-message-bubble {
    background-color: rgba(92, 96, 245, 0.85) !important;
    color: white !important;
  }
  
  /* Assistant Message Bubbles - Dark mode styling */
  .assistant-message-bubble {
    background-color: var(--bs-surface-secondary) !important;
    color: var(--bs-body-color) !important;
  }
  
  /* AI Panel Chat Messages - User messages maintain primary color in dark mode */
  #aiPanelChatMessages .bg-primary {
    background-color: #5C60F5 !important;
    color: white !important;
  }
  
  /* AI Panel Chat Messages - User message bubbles with primary background */
  #aiPanelChatMessages .bg-primary.text-white {
    background-color: #5C60F5 !important;
    color: white !important;
  }
  
  /* AI Panel Chat Messages - Circular avatars with primary background */
  #aiPanelChatMessages .avatar.rounded-circle.bg-primary {
    background-color: #5C60F5 !important;
    color: white !important;
  }
  
  /* Ensure all primary avatars (including in welcome message) maintain primary color */
  .avatar.avatar-xs.rounded-circle.bg-primary {
    background-color: #5C60F5 !important;
    color: white !important;
  }
  
  /* More specific targeting for primary avatars in AI panel */
  .ai-panel-content .avatar.rounded-circle.bg-primary,
  .ai-assistant-panel .avatar.rounded-circle.bg-primary {
    background-color: #5C60F5 !important;
    color: white !important;
  }
  
  /* Ensure icons inside primary avatars are white */
  .avatar.rounded-circle.bg-primary i,
  #aiPanelChatMessages .avatar.rounded-circle.bg-primary i {
    color: white !important;
  }
  
  /* Additional coverage for any chat message containers with primary background */
  .d-flex .bg-primary.text-white,
  .chat-message .bg-primary,
  .message-bubble.bg-primary {
    background-color: #5C60F5 !important;
    color: white !important;
  }
  
  /* Ensure welcome message avatar maintains primary color */
  #aiPanelChatMessages .d-flex .avatar.rounded-circle.bg-primary {
    background-color: #5C60F5 !important;
    color: white !important;
  }
  
  /* Override for any inline styles that might interfere */
  [data-theme="dark"] .bg-primary.rounded.text-white,
  [data-theme="dark"] .bg-primary[style*="max-width"] {
    background-color: #5C60F5 !important;
    color: white !important;
  }
}

/* API Logo Dark Mode Fixes - Site-wide (Generic approach) */
[data-bs-theme="dark"] img[src*="grok-logo"],
[data-bs-theme="dark"] img[src*="openai-logo"] {
  filter: invert(1) brightness(0.9);
}

[data-theme="dark"] img[src*="grok-logo"],
[data-theme="dark"] img[src*="openai-logo"] {
  filter: invert(1) brightness(0.9);
}

/* Smooth transition for logo color changes */
img[src*="grok-logo"],
img[src*="openai-logo"] {
  transition: filter 0.3s ease;
}

/* ============================================
   PLAY MODE DARK MODE FIXES
   ============================================ */
/* Override body background specifically for play mode to allow backdrop visibility */
[data-theme="dark"] body:has(#carouselContainer),
[data-theme="dark"] html:has(#carouselContainer) {
  background-color: transparent !important;
}

/* Ensure play mode containers are transparent to show backdrop images */
/* But EXCLUDE backgroundLayer and videoLayer from this rule */
[data-theme="dark"] #carouselContainer,
[data-theme="dark"] #storyCarousel,
[data-theme="dark"] #carouselInner,
[data-theme="dark"] #carouselInner .carousel-item,
[data-theme="dark"] #storyCarousel .row,
[data-theme="dark"] #storyCarousel .col-md-8,
[data-theme="dark"] #storyCarousel .col-lg-8,
[data-theme="dark"] #storyCarousel .col-sm-12,
[data-theme="dark"] .min-w-0.flex-fill.d-flex.flex-column {
  background-color: transparent !important;
  background-image: none !important;
}

/* Explicitly exclude backgroundLayer and videoLayer from carouselContainer child rules */
[data-theme="dark"] #carouselContainer > *:not(#backgroundLayer):not(#videoLayer) {
  background-color: transparent !important;
}

/* Ensure play mode main container doesn't block backdrop */
[data-theme="dark"] #mainContainer,
[data-theme="dark"] #mainContainer.d-flex.flex-row.flex-grow-1.bg-surface-primary {
  background-color: transparent !important;
}

/* Override any .d-flex with bg classes in play mode */
[data-theme="dark"] #carouselContainer .d-flex,
[data-theme="dark"] .min-w-0.flex-fill {
  background-color: transparent !important;
}

/* CRITICAL: Do NOT hide backgroundLayer or videoLayer in dark mode */
/* Let JavaScript control opacity for fade-in effects */
[data-theme="dark"] #backgroundLayer,
[data-theme="dark"] #videoLayer {
  visibility: visible !important;
  display: block !important;
  /* Do NOT force opacity - let JS control it for fade-in */
}

/* Keep chat bubbles visible with dark mode styling */
[data-theme="dark"] .assistant-message-bubble,
[data-theme="dark"] .user-message-bubble {
  background-color: rgba(32, 28, 28, 0.9) !important; /* Semi-transparent dark background */
  backdrop-filter: blur(10px); /* Blur effect for readability */
}

/* Keep chat input footer properly styled in dark mode */
[data-theme="dark"] .position-sticky.bottom-0 .bg-surface-secondary {
  background-color: rgba(24, 20, 20, 0.95) !important; /* Semi-transparent for play mode */
  backdrop-filter: blur(10px);
}

/* Keep overlay properly styled in dark mode */
[data-theme="dark"] .overlay {
  background: rgba(0, 0, 0, 0) !important; /* Transparent overlay */
}