/* Light Theme Overrides - only active when :root.light */

:root.light {
  --color-header-arrow: rgba(0, 0, 0, 0.7);
  --color-sidebar-default-background: #F3F4F6;
  --color-sidebar-default-background-light: #E5E7EB;
  --color-background-content-light-dark: #F9FAFB;
  --color-background-content-light: #F9FAFB;
  --color-background-content-lighter: #f3f3f3;
  --color-background-content-lighter-2: #ffffff;
  --color-background-content-lighter-3: #D1D5DB;
  --color-background-content-selected: #ececec;
  --color-background-content-selected-2: #e8eaed;
  --color-background-content: #FAFAFA;
  --color-background-content-2: #EDEEF0;
  --color-background-content-3: rgba(237, 238, 240, 0.7);
  --color-background-content-4: rgba(237, 238, 240, 0.85);
  --color-background-black: #FFFFFF;
  --color-border-color: #e9e6e6;
  --color-border-color-light: #9CA3AF;
  --color-border-color-lighter: #C9CCD1;
  --color-border-color-light-2: rgba(0, 0, 0, 0.12);
  --color-border-color-light-2-hover: rgba(0, 0, 0, 0.2);
  --color-border-color-light-3: #C9CCD1;
  --color-border-color-selected: #B0B7C3;
  --color-border-color-selected-green: #09b01f;
  --color-shadow-inset: 0 0 transparent;
  --color-header-font-grey: rgba(0, 0, 0, 0.5);
  --color-header-font: rgb(28, 28, 28);
  --color-header-font-white-50: rgba(28, 28, 28, 0.50);
  --color-header-font-white-90: rgba(28, 28, 28, 0.90);
  --color-header-font-white-95: rgba(28, 28, 28, 0.95);
  --color-header-font-white: rgba(0, 0, 0, 1);
  --color-text-default: #24292f;
  --color-text-default-lighter: #4b5563;
  --color-header-background: #FFFFFF;
  --color-header-box-background: #F5F6F8;
  --color-tab-border-selected: rgba(247, 45, 43, 0.9);
  --color-tab-border: rgba(247, 45, 43, 0.4);
  --color-background-green-light: #08dd24;
  --color-background-green: #079b1b;
  --color-background-green-dimmed: rgba(7, 155, 27, 0.15);
  --color-background-green-dark: #0b7019;
  --color-background-red: rgb(210, 40, 39);
  --color-background-red-dark: rgb(128, 24, 23);
  --color-background-red-selected: rgba(247, 45, 43, 1);
  --color-background-orange: rgb(255, 166, 1);
  --color-background-orange-dimmed: rgba(255, 166, 1, 0.1);
  --color-background-blue: rgb(0, 114, 210);
  --color-background-blue-dimmed: rgba(0, 114, 210, 0.1);
  --color-dark-grey-1: #e5e7eb;
  --color-dark-grey-2: #d1d5db;
  --color-dark-grey-3: #9ca3af;
  --color-dark-grey-4: #6b7280;
  --color-dark-grey-5: #4b5563;
  --color-dark-grey-6: #374151;
  --color-dark-grey-7: #1f2937;
}

/* Body & main containers */
:root.light body {
  background-color: #eaecee !important;
  color: #24292f;
}

:root.light .topbarContainer {
  background: #FFFFFF !important;
}

:root.light .header-menu {
  background: none;
}

:root.light .header-menu svg {
  opacity: 1;
}

:root.light .containerNew {
  background: linear-gradient(0deg, #F0F1F3 0%, #FAFAFA 43%, #FAFAFA 100%) !important;
  background-color: #FAFAFA !important;
}

:root.light .content-wrapper .row-container-streams {
  background: linear-gradient(0deg, #F0F1F3 0%, #FAFAFA 43%, #FAFAFA 100%) !important;
}

/* Header / navbar */
:root.light .header-new {
  background-color: #FFFFFF !important;
  border-bottom-color: #D8DAE0 !important;
  color: #24292f !important;
}

:root.light .nav-left-side,
:root.light .nav-right-side {
  color: #24292f !important;
}

:root.light .span-topbar {
  color: #24292f !important;
}

:root.light button#account,
:root.light .btn-header {
  border-color: #C9CCD1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  color: #24292f !important;
  background-color: #FFFFFF !important;
}

:root.light button#createNavbar {
  background-color: var(--green) !important;
  border-color: var(--green) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(54, 165, 9, 0.3) !important;
}

:root.light button#createNavbar:hover {
  background-color: var(--greendark) !important;
  border-color: var(--greendark) !important;
}

:root.light button#createNavbar svg,
:root.light button#createNavbar .plus-icon {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

:root.light .card-symbol-item-2 {
  border-color: #C9CCD1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  background-color: #FFFFFF !important;
}

:root.light .show-sidebar-right {
  color: #57606a !important;
}

/* Dropdown menus */
:root.light .dropdown-menu-topbar {
  background-color: #FFFFFF !important;
  border-color: #D8DAE0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  color: #24292f !important;
}

:root.light .dropdown-menu-topbar li a,
:root.light .dropdown-menu-topbar .menu-link,
:root.light .menu-link,
:root.light .menu-link .text,
:root.light .menu-link .icon-menu {
  color: #24292f !important;
  background-color: transparent !important;
}

:root.light .dropdown-menu-topbar li a:hover,
:root.light .dropdown-menu-topbar .menu-link:hover,
:root.light .menu-link:hover {
  background-color: #F3F4F6 !important;
}

:root.light .menu-link svg,
:root.light .menu-link .icon-menu {
  fill: #57606a !important;
  color: #57606a !important;
}

:root.light .menu-link svg path {
  fill: inherit !important;
  stroke: currentColor;
}

/* Sidebar */
:root.light .side-nav {
  color: #24292f !important;
  border-right-color: #D8DAE0 !important;
}

:root.light .sidebar {
  background-color: #FFFFFF !important;
}

/* SVG icons: invert fill for icons that use white/light colors */
:root.light .icon-menu {
  fill: #24292f !important;
}

:root.light .icon-menu-selector {
  color: #57606a !important;
  fill: #57606a !important;
}

:root.light svg.plus-icon {
  fill: #24292f !important;
}

:root.light .cog {
  background-color: #57606a !important;
  color: #57606a !important;
}

:root.light .cog::before {
  color: #57606a !important;
}

:root.light .account-user::before {
  color: #57606a !important;
}

:root.light .sidebar-toggle {
  border-color: #C9CCD1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* Loading page */
:root.light .loadingPageInitial {
  background-color: #FAFAFA !important;
}

:root.light .spinner i {
  background-color: transparent !important;
}

:root.light #logo-loading {
  filter: invert(1) !important;
}

/* Sidebar right (settings panel) */
:root.light .side-bar-content,
:root.light .side-bar-content-integrations {
  background-color: #FFFFFF !important;
  border-left-color: #D8DAE0 !important;
}

/* Integrations list sidebar */
:root.light .integrations-list-item {
  border-color: rgba(0, 0, 0, 0.06) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

:root.light .integrations-list-icon img {
  filter: none !important;
}

:root.light .integrations-list-arrow {
  color: #9CA3AF !important;
}

:root.light .integration-drop-down {
  border-color: rgba(0, 0, 0, 0.08) !important;
  background-color: #F3F4F6 !important;
}

:root.light .integrations-list-item:hover {
  border-color: var(--color-background-green, #079b1b) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
}

:root.light .integrations-back-link {
  border-color: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.03) !important;
  color: #1F2328 !important;
}

:root.light .integrations-back-link:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Integration connect/disconnect buttons */
:root.light .all-integrations-wrapper a.rounded-button-small {
  color: #1F2328 !important;
  text-shadow: none !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

:root.light .all-integrations-wrapper .check-google-calendar.google-calendar-connected {
  color: #ff4444 !important;
}

/* Integration panel buttons consistency */
:root.light .all-integrations-wrapper .button-primary,
:root.light .all-integrations-wrapper .button-secondary {
  color: #FFFFFF !important;
}

:root.light .all-integrations-wrapper .import-button-google-calendar {
  color: #FFFFFF !important;
}

/* Task items */
:root.light .task-item {
  border-color: #D8DAE0 !important;
}

:root.light .left-container-top {
  text-shadow: none !important;
}

:root.light .left-container-top-menu {
  text-shadow: none !important;
}

/* Widget boxes / cards */
:root.light .widget-box-new {
  border-color: #D8DAE0 !important;
}

/* Scrollbar styling for webkit */
:root.light ::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
}

:root.light ::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}

:root.light ::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Global text shadows removal in light mode */
:root.light * {
  text-shadow: none !important;
}

/* Ensure all text is dark in light mode */
:root.light .cd-faq-group > li,
:root.light .cd-faq-items li,
:root.light .results-container .cd-faq-group > li {
  background-color: #FFFFFF !important;
  color: #24292f !important;
}

/* Team list in dropdown */
:root.light .team-list-wrapper #teamList li a {
  color: #24292f !important;
}

:root.light .team-list-wrapper #teamList li a:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

:root.light .team-list-wrapper #teamList li a.selected-team {
  background: rgba(139, 92, 246, 0.15) !important;
  color: #5B21B6 !important;
}

/* Gritter notifications */
:root.light #gritter-notice-wrapper .gritter-item-wrapper {
  background-color: #FFFFFF !important;
  border: 1px solid #D8DAE0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

:root.light #gritter-notice-wrapper .gritter-item {
  background-color: #FFFFFF !important;
  color: #24292f !important;
}

:root.light #gritter-notice-wrapper .gritter-title {
  color: #24292f !important;
}

:root.light #gritter-notice-wrapper .gritter-item p {
  color: #57606a !important;
}

/* Modals */
:root.light .modal-content {
  background-color: #FFFFFF !important;
  border-color: #D8DAE0 !important;
}

:root.light .modal-header {
  border-bottom-color: #D8DAE0 !important;
}

:root.light .modal-footer {
  border-top-color: #D8DAE0 !important;
}

/* Inputs and textareas */
:root.light textarea.taskName {
  color: #24292f !important;
}

:root.light textarea::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
}

/* Sidebar toggle button */
:root.light .sidebar-toggle {
  color: #57606a !important;
}

:root.light .sidebar-toggle:hover {
  color: #24292f !important;
}

/* Tab navigation */
:root.light .nav-tabs > li.active {
  background: #FFFFFF !important;
}

:root.light .nav-tabs > li:first-of-type.active {
  background: #FFFFFF !important;
}

:root.light .nav-tabs > li:last-of-type.active {
  background: #FFFFFF !important;
}

/* Header menu in dropdown */
:root.light .header-menu svg {
  filter: none !important;
  background-color: transparent !important;
}

:root.light .header-menu .header-content-email {
  color: #57606a !important;
}

:root.light .header-menu .text-letters-logo {
  color: #24292f !important;
}

/* Manage seats icon */
:root.light .seatsmanagement svg path {
  stroke: #24292f !important;
}

/* Mask-image icons - background-color IS the icon fill color */
:root.light .icon-left-text-svg,
:root.light .icon-left-text-svg-2,
:root.light .icon-left-text-svg-3 {
  background-color: #57606a !important;
  color: #24292f !important;
}

:root.light .icon-left-text-svg.icon-check {
  background-color: rgb(54, 165, 9) !important;
}

/* Play icon in Start button - override hardcoded #ffffff */
:root.light i.svg-icon-play3 {
  background-color: #57606a !important;
}

/* Account user icon */
:root.light .account-user {
  background-color: #57606a !important;
}

/* Action icons (three-dot menu etc) - mask-image icons need dark fill */
:root.light .action-icon,
:root.light .svg-icon-more {
  background-color: #57606a !important;
}

/* Integrations content card - dark background */
:root.light .content-left,
:root.light .content-left-sm,
:root.light .container-intro {
  background-color: #F3F4F6 !important;
  color: #24292f !important;
}

/* Input fields */
:root.light .input-field {
  background-color: #FAFAFA !important;
  color: #24292f !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

:root.light .button-text.delete-stream,
:root.light .deleteButton {
  background-color: transparent !important;
  color: #D32727 !important;
}

:root.light .button-text.delete-stream:hover,
:root.light .deleteButton:hover {
  background-color: rgba(210, 40, 39, 0.08) !important;
}

/* Right container card text */
:root.light .card-symbol-item-2.card-symbol-item-3 {
  color: #24292f !important;
}

/* Integration panels - select dropdowns & inputs */
:root.light .select-dropdown-enhanced {
  background-color: #FAFAFA !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .text-input-enhanced {
  background-color: #FAFAFA !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .task-search {
  background-color: #FAFAFA !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .due-date-filter,
:root.light .priority-filter,
:root.light .status-filter {
  background-color: #FAFAFA !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

/* Filter inputs - templates search, etc */
:root.light .filter-input-large,
:root.light .filter-input,
:root.light .filter {
  color: #24292f !important;
}

:root.light #filterTemplates {
  color: #24292f !important;
}

/* AI input textareas */
:root.light #ai-input,
:root.light #ai-input-tasks {
  border-color: #D8DAE0 !important;
}

/* JSON config textarea */
:root.light #jsonconfig {
  color: #24292f !important;
  background-color: #FAFAFA !important;
  border-color: #D8DAE0 !important;
}

/* Private note description */
:root.light #privatenotedescription {
  border-color: #D8DAE0 !important;
}

/* Content sections - ensure light backgrounds */
:root.light .content-main,
:root.light .content-main-wrapper {
  background-color: #FAFAFA !important;
}

:root.light .right-container {
  background-color: #FAFAFA !important;
  color: #24292f !important;
}

:root.light .right-container-top {
  background-color: #FFFFFF !important;
  color: #24292f !important;
}

/* Left container top area */
:root.light .left-container-top,
:root.light .left-container-top-menu {
  color: #24292f !important;
}

/* Sidebar Home icon - fill-based */
:root.light .sidebar .nav-item .home-icon {
  fill: #57606a !important;
}

/* Sidebar toggle button - fill via currentColor */
:root.light .nav-left-side .sidebar-toggle svg {
  fill: #24292f !important;
}

/* Create button plus icon in navbar */
:root.light .nav-left-side .plus-icon {
  fill: #24292f !important;
}

/* Section headers - color for stroke='currentColor' icons */
:root.light .sidebar .section-header {
  color: #57606a !important;
}

/* Calendar icons - override inline stroke='#ffffff', keep fill='none' */
:root.light .sidebar .section-header svg rect,
:root.light .sidebar .section-header svg line {
  stroke: #57606a !important;
}

/* Projects header - plus icon (fill-based) */
:root.light .section-header-controls .plus-icon {
  fill: #57606a !important;
}

/* Mask-based icons in sidebar (archive, list) */
:root.light .archive-toggle .icon-archive,
:root.light .archive-toggle .icon-list {
  background-color: #57606a !important;
}

/* Header section buttons */
:root.light .header-section-button {
  color: #24292f !important;
}

:root.light .header-section-button:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Nav items */
:root.light .nav-item {
  color: #24292f !important;
}

:root.light .nav-item.selected-header {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Widget box header */
:root.light .widget-box-header {
  background-color: #FFFFFF !important;
  color: #24292f !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

:root.light .widget-box-footer {
  background-color: #F3F4F6 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Tab navigation */
:root.light .all-tab {
  background-color: #F3F4F6 !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .all-tab:hover {
  background-color: #E5E7EB !important;
}

:root.light .all-tab.active,
:root.light .all-tab.selected {
  background-color: #FFFFFF !important;
}

/* Dark gradient buttons (subscribe, add, import) */
:root.light .card-symbol-item-wide-white {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #24292f !important;
  border: 1px solid #D8DAE0 !important;
  box-shadow: none !important;
}

/* CKEditor overrides */
:root.light .cke_inner,
:root.light .cke_reset {
  background-color: #FFFFFF !important;
  color: #24292f !important;
}

:root.light .cke_top,
:root.light .cke_toolgroup {
  background-color: #F3F4F6 !important;
  border-color: #D8DAE0 !important;
}

:root.light .cke_toolgroup a.cke_button {
  color: #24292f !important;
}

:root.light .cke_editable,
:root.light .cke_contents {
  background-color: #FFFFFF !important;
  color: #24292f !important;
}

:root.light .cke_bottom {
  background-color: #F3F4F6 !important;
  border-color: #D8DAE0 !important;
}

:root.light .cke_chrome {
  border-color: #D8DAE0 !important;
}

/* Dropdown text overrides for team names */
:root.light .dropdown-menu-topbar .text,
:root.light .dropdown-menu-topbar span.text {
  color: #24292f !important;
}

/* Divider in stats */
:root.light .divider-small {
  background-color: #D8DAE0 !important;
}

/* ---- Comprehensive mask-image icon overrides ---- */
/* These icons use CSS mask-image with background-color as the fill color.
   In dark mode they're white (#fff). In light mode they need to be dark. */

/* Player/timer mask-image icons */
:root.light i.svg-icon-play,
:root.light i.svg-icon-play2,
:root.light i.svg-icon-play3,
:root.light i.svg-icon-play-task,
:root.light i.svg-icon-pause,
:root.light i.svg-icon-pause2,
:root.light i.svg-icon-x-check,
:root.light i.svg-energy,
:root.light i.svg-energy-low {
  background-color: #57606a !important;
}

/* Sidebar bottom section icons */
:root.light .show-templates-list i,
:root.light .show-settings i {
  background-color: #57606a !important;
}

/* Settings/nav panel mask-image icons */
:root.light .icon-settings,
:root.light .icon-bg-color,
:root.light .icon-home,
:root.light .icon-my-tasks,
:root.light .icon-projects,
:root.light .icon-timer,
:root.light .icon-templates,
:root.light .icon-invite-user,
:root.light .icon-tasks,
:root.light .icon-notes,
:root.light .icon-celebrations,
:root.light .icon-bg-color-video,
:root.light .icon-reset-pos,
:root.light .icon-stats,
:root.light .icon-energy,
:root.light .icon-reports,
:root.light .icon-list,
:root.light .icon-edit-pen {
  background-color: #57606a !important;
}

/* Integration mask-image icons */
:root.light i.integrations,
:root.light .icon-svg-todoist,
:root.light .icon-svg-asana,
:root.light .icon-svg-clickup,
:root.light .icon-svg-google-calendar,
:root.light .asana i {
  background-color: #57606a !important;
}

/* Add/complete/import mask-image icons */
:root.light .add-plus i,
:root.light .complete-icon i,
:root.light .button-import i {
  background-color: #57606a !important;
}

/* Sound icon */
:root.light .icon-sound {
  background-color: #57606a !important;
}

/* Right sidebar circular icon buttons - override hardcoded white masks */
:root.light .invite-users-icon i,
:root.light .templates-icon i,
:root.light .asana i,
:root.light .todoist i,
:root.light .icon-svg-asana {
  background-color: #57606a !important;
}

:root.light i.svg-icon-right-white {
  background-color: #57606a !important;
}

/* SVG container class - override hardcoded color: #fff */
:root.light .svg-img {
  color: #57606a !important;
}

:root.light .svg-img svg {
  fill: #57606a !important;
}

:root.light .svg-img svg path {
  fill: inherit !important;
  stroke: currentColor !important;
}

/* SVG icon buttons (chevrons, stopwatch, reset, sound) — mask-based icons */
:root.light .svg-icon-chevron-left,
:root.light .svg-icon-chevron-right,
:root.light .svg-icon-reset,
:root.light .svg-icon-stopwatch-minus,
:root.light .svg-icon-stopwatch-plus,
:root.light .sound-high,
:root.light .sound-low,
:root.light .sound-mute {
  background-color: #57606a !important;
}

/* Complete icon */
:root.light .complete-icon i {
  background-color: #57606a !important;
}

/* Sidebar bottom items */
:root.light .sidebar-bottom-item {
  color: #24292f !important;
}

:root.light .sidebar-bottom-item:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Draggable windows */
:root.light .resize-drag {
  background: rgba(255, 255, 255, 0.85) !important;
}

:root.light .resize-drag-2 {
  background-color: rgba(255, 255, 255, 0.92) !important;
}

/* Dropdown header area */
:root.light .header-content-container {
  background-color: transparent !important;
}

/* Hardcoded dark dropdowns in nav menus */
:root.light #user-nav .dropdown-menu > li > a,
:root.light #create-nav .dropdown-menu > li > a {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #24292f !important;
  border-left-color: #FFFFFF !important;
}

:root.light #user-nav .dropdown-menu > li > a:hover,
:root.light #create-nav .dropdown-menu > li > a:hover {
  background-color: #F3F4F6 !important;
}

:root.light #user-nav .dropdown-menu > li > a svg,
:root.light #create-nav .dropdown-menu > li > a svg,
:root.light #user-nav .dropdown-menu .icon-menu,
:root.light #create-nav .dropdown-menu .icon-menu {
  fill: #57606a !important;
  color: #57606a !important;
}

:root.light #user-nav .dropdown-menu > li > a svg path,
:root.light #create-nav .dropdown-menu > li > a svg path {
  fill: inherit !important;
}

:root.light #user-nav .dropdown-menu .icon-menu-white-fill {
  fill: #57606a !important;
}

:root.light .theme-selector,
:root.light .language-selector-header,
:root.light .team-selector-header,
:root.light .help-selector-header {
  background: #FFFFFF !important;
  border-left-color: #FFFFFF !important;
  border-bottom-color: #E5E7EB !important;
}

:root.light #user-nav .dropdown-menu li .list-title,
:root.light #create-nav .dropdown-menu li .list-title {
  color: #24292f !important;
  box-shadow: inset 0 -1px #D8DAE0 !important;
}

/* Context menus */
:root.light .task-item .dropdown-menu,
:root.light .template-item .dropdown-menu {
  background-color: #FFFFFF !important;
  border-color: #D8DAE0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

:root.light .task-item .dropdown-menu li,
:root.light .template-item .dropdown-menu li {
  background-color: #FFFFFF !important;
  color: #24292f !important;
}

:root.light .task-item .dropdown-menu li:hover,
:root.light .template-item .dropdown-menu li:hover {
  background-color: #F3F4F6 !important;
}

:root.light .task-item .dropdown-menu li a,
:root.light .template-item .dropdown-menu li a {
  color: #24292f !important;
}

/* Button header hover */
:root.light .btn-header:hover {
  background-color: #F3F4F6 !important;
  color: #24292f !important;
}

/* Card symbol items */
:root.light .card-symbol-item:not(.button-start):not(.add-new-task-icon):not(.btn-primary):not(.btn-success) {
  background-color: #FFFFFF !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .card-symbol-item:not(.button-start):not(.add-new-task-icon):not(.btn-primary):not(.btn-success):hover {
  background-color: #F3F4F6 !important;
}

/* Ensure green accent buttons keep their color */
:root.light .card-symbol-item.btn-primary,
:root.light .card-symbol-item.btn-success {
  background-color: rgb(54, 165, 9) !important;
  color: #FFFFFF !important;
  border-color: rgb(54, 165, 9) !important;
}

/* Right sidebar icons - dark fill */
:root.light .right-container-top svg,
:root.light .right-container-top img,
:root.light .right-container-top i {
  color: #57606a !important;
  fill: #57606a !important;
}

:root.light .right-container-top svg path {
  fill: inherit !important;
  stroke: currentColor !important;
}

:root.light .right-container-top .card-symbol-item-2 svg,
:root.light .right-container-top .card-symbol-item-2 img {
  filter: brightness(0.3) !important;
}

/* Settings panel - selected tab */
:root.light .nav-tabs > li > a {
  color: #24292f !important;
  background-color: transparent !important;
}

:root.light .nav-tabs > li.active > a,
:root.light .nav-tabs > li > a.active {
  background-color: #FFFFFF !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .tab-content {
  background-color: #FFFFFF !important;
  color: #24292f !important;
}

:root.light .tab-pane {
  background-color: #FFFFFF !important;
  color: #24292f !important;
}

/* Settings panel tabs */
:root.light .side-bar-content .nav-tabs {
  border-bottom-color: #D8DAE0 !important;
}

:root.light .side-bar-content .nav-tabs > li.active {
  background-color: #FFFFFF !important;
  border-bottom-color: #FFFFFF !important;
}

/* All tab borders should be light gray, not dark */
:root.light .nav-tabs > li {
  border-bottom-color: #D8DAE0 !important;
}

:root.light .nav-tabs {
  border-bottom-color: #D8DAE0 !important;
}

:root.light .tab-content,
:root.light .tab-pane {
  border-color: #D8DAE0 !important;
}

/* Seat management / upgrade promo in dropdown */
:root.light .seatsmanagement {
  background-color: #F3F4F6 !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .seatsmanagement a {
  color: #24292f !important;
}

/* Premium plan container - light theme */
:root.light .premium-plan-container {
  background: #F3F4F6 !important;
  background-image: none !important;
  color: #24292f !important;
}

:root.light .premium-plan-container.gradient-image {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7, #d1fae5) !important;
  background-image: none !important;
  border: 1px solid #bbf7d0 !important;
}

:root.light .premium-plan-container .content-overview-top h1 {
  color: #166534 !important;
}

:root.light .premium-plan-container .content-overview-top span {
  color: #374151 !important;
}

:root.light .premium-plan-container .title-intro {
  color: #15803d !important;
}

:root.light .premium-plan-container .new-line {
  color: #4b5563 !important;
}

:root.light .premium-plan-container .icon-svg-round {
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

:root.light .premium-plan-container .card-symbol-item-wide-white {
  background: linear-gradient(130deg, #166534, #15803d) !important;
  color: #fff !important;
  border: 1px solid #166534 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

:root.light .premium-plan-container .import-container {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
}

:root.light .premium-plan-container .import-container span {
  color: #374151 !important;
}

:root.light .premium-plan-container .open-weekly-or-premium {
  color: #15803d !important;
}

:root.light .premium-plan-container .open-weekly-or-premium:hover {
  color: #166534 !important;
}

/* Language selector options list */
:root.light .language-options-list {
  background: #F7F8FA;
}

:root.light .language-option:hover {
  background-color: #F3F4F6 !important;
}

/* Team list wrapper */
:root.light .team-list-wrapper {
  background: #F7F8FA;
}

/* Team selector border */
:root.light .dropdown-menu-topbar.with-header li.team-selector {
  border-bottom: 2px solid #D8DAE0 !important;
}

/* Help options list */
:root.light .help-options-list {
  background: #F7F8FA;
}

:root.light .help-options-list .menu-link .icon-menu {
  fill: #57606a !important;
  color: #57606a !important;
  stroke: #57606a;
}

/* ---- Insights timeline - fix white text ---- */
:root.light .container-timeline ul {
  color: #24292f !important;
}

:root.light .container-timeline ul:before {
  border-left-color: #D8DAE0 !important;
}

:root.light .container-timeline ul li {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

:root.light .container-timeline div .title {
  color: #24292f !important;
}

:root.light .container-timeline div .info {
  color: #57606a !important;
}

:root.light .container-timeline div .type {
  color: #24292f !important;
}

:root.light .container-timeline ul li > span {
  background: #D8DAE0 !important;
}

:root.light .container-timeline ul li > span:before,
:root.light .container-timeline ul li > span:after {
  border-color: #D8DAE0 !important;
}

/* ---- Notes page - fix white text ---- */
:root.light .note-title {
  color: #24292f !important;
}

:root.light .note-title label,
:root.light .note-title strong {
  color: #24292f !important;
}

:root.light .note-description {
  color: #24292f !important;
}

:root.light .header {
  color: #24292f !important;
}

:root.light .centre-container-load {
  color: #57606a !important;
}

/* Section headers - override hardcoded stroke=#ffffff */
:root.light .section-header svg rect,
:root.light .section-header svg line {
  stroke: #57606a !important;
}

:root.light .section-header svg path[stroke] {
  stroke: #57606a !important;
}

:root.light .section-header .item-bold {
  color: #24292f !important;
}

/* General white-color override */
:root.light .white-color {
  color: #24292f !important;
}

/* ---- LoadFocus-specific overrides ---- */

/* Test results / run containers */
:root.light .test-result-container,
:root.light .test-run-container {
  background-color: #FFFFFF !important;
  border-color: #D8DAE0 !important;
  color: #24292f !important;
}

/* Info boxes */
:root.light .info-box-2,
:root.light .info-box-4,
:root.light .info-box-5 {
  color: #6b7280 !important;
}

/* Select CSS styling */
:root.light .select-css {
  background-color: #FAFAFA !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

/* Select2 dropdown overrides */
:root.light .select2-container--default .select2-selection--single {
  background-color: #FAFAFA !important;
  border-color: #D8DAE0 !important;
  color: #24292f !important;
}

:root.light .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #24292f !important;
}

:root.light .select2-dropdown {
  background-color: #FFFFFF !important;
  border-color: #D8DAE0 !important;
}

:root.light .select2-results__option {
  color: #24292f !important;
}

:root.light .select2-results__option--highlighted {
  background-color: #F3F4F6 !important;
  color: #24292f !important;
}

/* Console / log output */
:root.light .console-output,
:root.light .console-container {
  background-color: #F5F5F5 !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

/* Chart containers */
:root.light .chart-container,
:root.light .chart-wrapper {
  background-color: #FFFFFF !important;
  border-color: #D8DAE0 !important;
}

/* Panel / accordion sections */
:root.light .panel {
  background-color: #FFFFFF !important;
  border-color: #D8DAE0 !important;
}

:root.light .panel-heading {
  background-color: #F3F4F6 !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .panel-body {
  background-color: #FFFFFF !important;
  color: #24292f !important;
}

/* Table styling */
:root.light table,
:root.light .table {
  color: #24292f !important;
}

:root.light .table > thead > tr > th {
  background-color: #F3F4F6 !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .table > tbody > tr > td {
  border-color: #D8DAE0 !important;
}

:root.light .table > tbody > tr:hover > td {
  background-color: #F9FAFB !important;
}

/* Form controls */
:root.light .form-control {
  background-color: #FAFAFA !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .form-control:focus {
  border-color: #9CA3AF !important;
}

/* Well containers */
:root.light .well {
  background-color: #F3F4F6 !important;
  border-color: #D8DAE0 !important;
  color: #24292f !important;
}

/* Tooltip overrides */
:root.light .tooltip-inner {
  background-color: #24292f !important;
  color: #FFFFFF !important;
}

/* Popover overrides */
:root.light .popover {
  background-color: #FFFFFF !important;
  border-color: #D8DAE0 !important;
}

:root.light .popover-title {
  background-color: #F3F4F6 !important;
  border-color: #D8DAE0 !important;
  color: #24292f !important;
}

:root.light .popover-content {
  color: #24292f !important;
}

/* AI analysis results */
:root.light .ai-analysis-container,
:root.light .ai-results-container {
  background-color: #FFFFFF !important;
  border-color: #D8DAE0 !important;
  color: #24292f !important;
}

:root.light .ai-analysis-container pre,
:root.light .ai-results-container pre {
  background-color: #F5F5F5 !important;
  color: #24292f !important;
  border-color: #D8DAE0 !important;
}

:root.light .ai-analysis-container code,
:root.light .ai-results-container code {
  background-color: #F5F5F5 !important;
  color: #24292f !important;
}

/* Credits display */
:root.light .credits-display,
:root.light .credits-container {
  color: #24292f !important;
}

/* Tech stack selector */
:root.light .tech-stack-item {
  background-color: #FFFFFF !important;
  border-color: #D8DAE0 !important;
  color: #24292f !important;
}

:root.light .tech-stack-item:hover {
  background-color: #F3F4F6 !important;
}

:root.light .tech-stack-item.selected {
  border-color: var(--color-background-green) !important;
}

/* =====================================================
   THEME TOGGLE — light-mode hover override
   ===================================================== */
:root.light .theme-option:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* =====================================================
   LIGHT MODE — restore Bootstrap/form defaults
   ===================================================== */
:root.light .btn-default,
:root.light .btn-default:focus,
:root.light a.btn-default {
  background-color: #fff !important;
  border-color: #ccc !important;
  color: #333 !important;
}

:root.light .btn-default:hover {
  background-color: #e6e6e6 !important;
}

:root.light input[type="text"],
:root.light input[type="email"],
:root.light input[type="password"],
:root.light input[type="number"],
:root.light input[type="search"],
:root.light input[type="url"],
:root.light input[type="tel"],
:root.light textarea,
:root.light select,
:root.light .form-control {
  background-color: #fff !important;
  border-color: #ccc !important;
  color: #333 !important;
}

:root.light input::placeholder,
:root.light textarea::placeholder {
  color: #999 !important;
}

:root.light .tab-content,
:root.light .tab-pane {
  background-color: #fff;
  color: #333;
}

:root.light .nav-tabs > li > a {
  color: #555 !important;
  background-color: #f5f5f5 !important;
  border-color: #ddd !important;
}

:root.light .nav-tabs > li.active > a,
:root.light .nav-tabs > li.active > a:focus,
:root.light .nav-tabs > li.active > a:hover {
  background-color: #fff !important;
  border-color: #ddd !important;
  border-bottom-color: transparent !important;
  color: #333 !important;
}

:root.light .tooltip-inner {
  background-color: #000 !important;
  color: #fff !important;
  border: none;
}

:root.light .tippy-box {
  background-color: #333 !important;
  color: #fff !important;
}

:root.light .tippy-box *,
:root.light .tippy-content,
:root.light .tippy-content * {
  color: #fff !important;
}

:root.light .tippy-arrow {
  color: #333 !important;
}

:root.light .select2-container--default .select2-selection--single {
  background-color: #fff !important;
  border-color: #ccc !important;
  color: #333 !important;
}

:root.light .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #333 !important;
}

:root.light .select2-dropdown {
  background-color: #fff !important;
  border-color: #ccc !important;
  color: #333 !important;
}

:root.light .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #ddd !important;
}

:root.light .loadingPageInitial {
  background-color: #eaecee !important;
}

:root.light pre.log-content {
  background-color: #f5f5f5 !important;
  color: #333 !important;
  border-color: #ccc !important;
}

:root.light #closeIframe {
  background-color: #efefef !important;
  color: #333 !important;
}

/* Restore sidebar icons for light mode */
:root.light .features-item-icon {
  color: #414141 !important;
}

:root.light .features-item-icon img {
  filter: none;
  opacity: 1;
}

/* Restore pagination */
:root.light .pagination > li > a,
:root.light .pagination > li > span {
  background-color: #fff !important;
  border-color: #ddd !important;
  color: #333 !important;
}

:root.light .show-sidebar-right {
  background-color: #f6f6f5 !important;
  color: #333 !important;
}

:root.light .slider-track {
  background-color: #f7f7f7 !important;
}

:root.light .bootstrap-switch-label {
  background-color: #fff !important;
}

:root.light input.filter,
:root.light input#filterItems {
  background-color: #fff !important;
  border-color: #ccc !important;
  color: #333 !important;
}

/* Restore Highcharts for light mode */
:root.light .highcharts-background {
  fill: #fff !important;
}

:root.light .highcharts-title,
:root.light .highcharts-subtitle {
  fill: #333 !important;
}

:root.light .highcharts-axis-labels text,
:root.light .highcharts-yaxis-title {
  fill: #666 !important;
}

:root.light .highcharts-legend-item text {
  fill: #333 !important;
}

:root.light .highcharts-grid .highcharts-grid-line {
  stroke: #e6e6e6 !important;
}

:root.light .highcharts-axis-line,
:root.light .highcharts-tick {
  stroke: #ccd6eb !important;
}

:root.light .highcharts-tooltip .highcharts-tooltip-box {
  fill: #fff !important;
  stroke: #ccc !important;
}

:root.light .highcharts-tooltip text {
  fill: #333 !important;
}

:root.light .highcharts-container,
:root.light #globalChartContent,
:root.light .chart-container,
:root.light [id*="chartContainer"],
:root.light [id*="container-chart"] {
  background-color: #fff !important;
}

:root.light .highcharts-legend-box {
  fill: #fff !important;
  stroke: #ccc !important;
}

:root.light .highcharts-tooltip > span {
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
}

:root.light select,
:root.light select option {
  color-scheme: light;
}

/* Restore sidebar/dropdown icons for light mode */
:root.light #addContainer img,
:root.light .menu-link img.round-svg,
:root.light .create-nav-dropdown img,
:root.light .dropdown-menu-topbar img {
  filter: none !important;
  opacity: 1;
}

/* Restore metric panel borders */
:root.light .span_1_of_5.panel4 {
  border: 1px solid #e8e4e4 !important;
}

/* Restore modal tables */
:root.light .modal table,
:root.light .modal td,
:root.light .modal th,
:root.light .modal-body table,
:root.light .modal-body td,
:root.light .modal-body th {
  color: #333 !important;
  background-color: #fff !important;
  border-color: #ddd !important;
}

:root.light .modal p,
:root.light .modal h1, :root.light .modal h2, :root.light .modal h3,
:root.light .modal h4, :root.light .modal h5,
:root.light .modal label,
:root.light .modal span,
:root.light .modal div,
:root.light .modal li {
  color: #333;
}

/* =====================================================
   LIGHT MODE — restore global text/icon defaults
   ===================================================== */
:root.light body, :root.light p, :root.light span, :root.light div,
:root.light li, :root.light td, :root.light th, :root.light label,
:root.light h1, :root.light h2, :root.light h3, :root.light h4,
:root.light h5, :root.light h6, :root.light dt, :root.light dd,
:root.light strong, :root.light em, :root.light b, :root.light i,
:root.light small, :root.light blockquote, :root.light pre,
:root.light code, :root.light figcaption, :root.light legend {
  color: #333 !important;
}

:root.light a { color: #333 !important; }
:root.light a:hover { color: #000 !important; }
:root.light a.header-link { color: #333 !important; }
:root.light .linkTextTitle { color: #333 !important; }
:root.light .linkTextDescription { color: #666 !important; }

/* Colored buttons must keep white text even in light mode */
:root.light .btn-primary,
:root.light .cta,
:root.light .cta-blue,
:root.light .cta-red,
:root.light .cta-grey,
:root.light .button-shine,
:root.light .completed-container,
:root.light .aborted-container,
:root.light .running-container,
:root.light .failed-container,
:root.light .btn-primary *,
:root.light .cta *,
:root.light .cta-blue *,
:root.light .cta-red *,
:root.light .cta-grey *,
:root.light .button-shine *,
:root.light .completed-container *,
:root.light .aborted-container *,
:root.light .running-container *,
:root.light .failed-container * {
  color: #fff !important;
}

:root.light .features-item-icon img,
:root.light .integration-icon img,
:root.light img[src*="integration"],
:root.light #addContainer img,
:root.light .create-nav-dropdown img,
:root.light .dropdown-services img,
:root.light a.header-link img {
  filter: none !important;
}

:root.light a {
  color: #333;
}

:root.light .dropdown-menu-topbar a,
:root.light .dropdown-menu-topbar span,
:root.light .dropdown-menu-topbar li {
  color: #333 !important;
}

:root.light .container-drag-item-wrap .item-name,
:root.light .container-drag-item-wrap h2,
:root.light .container-header-link,
:root.light .container-footer-link {
  color: #333 !important;
}

:root.light .container-drag-item-wrap .svg-icon-more,
:root.light .container-drag-item-wrap .action-icon,
:root.light img.action-icon,
:root.light img.svg-icon-more {
  filter: none !important;
}

/* Restore original production icon colors in light mode */
:root.light .svg-icon-more {
  background-color: #484848 !important;
}

:root.light i.svg-icon-right-small {
  background-color: #6056fc !important;
}

:root.light .svg-services {
  background-color: #4e4e4e !important;
}

:root.light .icon-delete {
  background-color: #0b0b0b !important;
}

:root.light .container-drag-item td.testName a:first-child {
  color: #222222 !important;
}

:root.light .label-table {
  color: #535353 !important;
}

:root.light .title-box {
  color: #646464 !important;
}

:root.light .account-settings-card-title {
  color: #363085 !important;
}

:root.light .account-settings-card-desc {
  color: #6266a6 !important;
}

:root.light .account-settings-card-icon {
  background-color: rgba(230, 252, 243, 1) !important;
}

:root.light .account-settings-card-icon-blue {
  color: rgb(6, 120, 182) !important;
  background-color: rgb(230, 246, 252) !important;
}

:root.light .card-icon {
  background-color: #dde2f7 !important;
}

:root.light .unlock-more {
  background-color: rgb(255, 241, 221) !important;
  color: #000 !important;
}

/* Restore light alert boxes */
:root.light .alert {
  background-color: #fcf8e3 !important;
  border-color: #faebcc !important;
  color: #8a6d3b !important;
}

:root.light .alert-success {
  background-color: #dff0d8 !important;
  border-color: #d6e9c6 !important;
  color: #3c763d !important;
}

:root.light .alert-danger, :root.light .alert-error {
  background-color: #f2dede !important;
  border-color: #ebccd1 !important;
  color: #a94442 !important;
}

:root.light .alert-info {
  background-color: #d9edf7 !important;
  border-color: #bce8f1 !important;
  color: #31708f !important;
}

:root.light .alert-warning {
  background-color: #fcf8e3 !important;
  border-color: #faebcc !important;
  color: #8a6d3b !important;
}

:root.light .well {
  background-color: #f5f5f5 !important;
  border-color: #e3e3e3 !important;
}

:root.light .feedback-section {
  background-color: #faf5ff !important;
}

:root.light .baseline-not-set::before {
  background-color: #6b6b6b !important;
}

/* Restore active tab text color for light mode */
:root.light .nav-tabs>li.active>a,
:root.light .nav-tabs>li.active>a:focus,
:root.light .nav-tabs>li.active>a:hover {
  color: #1d1d1d !important;
}

/* Restore settings sidebar for light mode */
:root.light .side-bar-content-settings {
  background-color: #f0f0f0 !important;
}

:root.light .side-bar-content-settings *:not(.cta):not(.cta-blue):not(.btn-primary):not(.button-shine):not(.badge):not(.label) {
  background-color: transparent;
}

:root.light .side-bar-content-settings .tab-pane,
:root.light .side-bar-content-settings .tab-pane .panel3,
:root.light .side-bar-content-settings .second-row,
:root.light .side-bar-content-settings .tab-content,
:root.light .side-bar-content-settings .nav-tabs > li > a,
:root.light .side-bar-content-settings li {
  background-color: #fff !important;
}

:root.light .side-bar-content-settings .nav-tabs > li.active > a {
  background-color: #fff !important;
  border-bottom-color: transparent !important;
}

:root.light .side-bar-content,
:root.light .side-bar-content .tab-pane {
  background-color: #fff !important;
}

/* Restore CSS mask icon colors to production originals */
:root.light [style*="mask-image"],
:root.light .icon-delete,
:root.light .icon-edit,
:root.light .icon-print,
:root.light .icon-archive {
  background-color: initial !important;
}

/* Restore Highcharts text for light mode */
:root.light .highcharts-container text,
:root.light .highcharts-container tspan {
  fill: initial !important;
  color: initial !important;
}

/* Restore light color-scheme */
:root.light {
  color-scheme: light !important;
}

/* Print mode — always use light colors regardless of theme */
@media print {
  .highcharts-background { fill: #fff !important; }
  .highcharts-container { background-color: #fff !important; }
  .highcharts-container text, .highcharts-container tspan { fill: #333 !important; color: #333 !important; }
  .highcharts-grid .highcharts-grid-line { stroke: #e6e6e6 !important; }
  .highcharts-axis-line, .highcharts-tick { stroke: #ccd6eb !important; }
  .highcharts-legend > rect:first-child { fill: #fff !important; stroke: #ccc !important; }
  .highcharts-tooltip path { fill: #fff !important; stroke: #ccc !important; }
  .highcharts-tooltip text, .highcharts-tooltip tspan { fill: #333 !important; }
  .highcharts-loading, .highcharts-loading span { background-color: #fff !important; }

  body, p, span, div, li, td, th, label, h1, h2, h3, h4, h5, h6, a {
    color: #333 !important;
  }

  body { background-color: #fff !important; }
  .topbarContainer { background: #fff !important; }
}

/* Loading page — restore body bg and keep logo normal */
:root.light .loadingPageInitial {
  background-color: #eaecee !important;
}

:root.light #logo-loading {
  filter: none !important;
}

/* Restore placeholder shimmer colors for light mode */
:root.light .ph-row div {
  background-color: #ced4da !important;
}

:root.light .drag-icon {
  background-color: #0d0d0d;
}

:root.light .container-drag-item td.testName a:first-child {
  color: #222222;
}

:root.light i.svg-icon-right-small {
  background-color: #6056fc;
}

:root.light .lf-box {
  background-color: #FFFFFF !important;
  color: rgba(35, 38, 59, 1) !important;
}

:root.light i.svg-icon-x-check {
  background-color: #181719 !important;
}

:root.light .icon-menu {
  fill: #505050 !important;
  filter: none !important;
}

/* Restore original colored logo for light mode */
:root.light #logo {
  background-image: url(https://d2woeiihr4s5r6.cloudfront.net/logos/logo-loadfocus-no-shadow.svg) !important;
}

:root.light #logo2 {
  background-image: url(https://d2woeiihr4s5r6.cloudfront.net/logos/logo-loadfocus-no-shadow.svg) !important;
}

:root.light #logo-loading {
  background-image: url(https://d2woeiihr4s5r6.cloudfront.net/loadfocus.png) !important;
}