/* Light theme overrides - ensures proper styling when theme-dark class is NOT present */

/* Reset all GridDiv elements to light theme defaults */
html:not(.theme-dark) #GridDiv,
html:not(.theme-dark) #GridDiv *,
body:not(.theme-dark) #GridDiv,
body:not(.theme-dark) #GridDiv * {
  --bg: #ffffff !important;
  --panel: #ffffff !important;
  --fg: #333333 !important;
  --muted: #666666 !important;
  --accent: #0066cc !important;
}

/* Main GridDiv container */
html:not(.theme-dark) #GridDiv,
body:not(.theme-dark) #GridDiv {
  background-color: #ffffff !important;
  color: #333333 !important;
  /*border: 1px solid #d3d3d3 !important;*/
}

/* Grid wrapper containers */
html:not(.theme-dark) #GridDiv .grid-container,
html:not(.theme-dark) #GridDiv .grid-container.slick-container,
html:not(.theme-dark) #GridDiv .slick-container,
html:not(.theme-dark) .s-DataGrid,
body:not(.theme-dark) #GridDiv .grid-container,
body:not(.theme-dark) #GridDiv .grid-container.slick-container,
body:not(.theme-dark) #GridDiv .slick-container,
body:not(.theme-dark) .s-DataGrid {
  background-color: #ffffff !important;
  color: #333333 !important;
  border-color: #d3d3d3 !important;
}

/* Grid viewport and canvas */
html:not(.theme-dark) #GridDiv .slick-viewport,
html:not(.theme-dark) #GridDiv .grid-canvas,
html:not(.theme-dark) #GridDiv .slick-focus-sink,
body:not(.theme-dark) #GridDiv .slick-viewport,
body:not(.theme-dark) #GridDiv .grid-canvas,
body:not(.theme-dark) #GridDiv .slick-focus-sink {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* Slick rows and cells */
html:not(.theme-dark) #GridDiv .slick-row,
html:not(.theme-dark) #GridDiv .slick-cell,
html:not(.theme-dark) #GridDiv .slick-row.even,
html:not(.theme-dark) #GridDiv .slick-row.odd,
body:not(.theme-dark) #GridDiv .slick-row,
body:not(.theme-dark) #GridDiv .slick-cell,
body:not(.theme-dark) #GridDiv .slick-row.even,
body:not(.theme-dark) #GridDiv .slick-row.odd {
  background-color: #ffffff !important;
  color: #333333 !important;
  border-color: #e0e0e0 !important;
}

/* Slick header */
html:not(.theme-dark) #GridDiv .sg-main.slick-header,
html:not(.theme-dark) #GridDiv .slick-header,
html:not(.theme-dark) #GridDiv .slick-header-columns,
html:not(.theme-dark) #GridDiv .slick-header-column,
body:not(.theme-dark) #GridDiv .sg-main.slick-header,
body:not(.theme-dark) #GridDiv .slick-header,
body:not(.theme-dark) #GridDiv .slick-header-columns,
body:not(.theme-dark) #GridDiv .slick-header-column {
  background-color: #f5f5f5 !important;
  color: #333333 !important;
  border-color: #d3d3d3 !important;
}

/* Slick header cells */
html:not(.theme-dark) #GridDiv .slick-header-column .slick-column-name,
body:not(.theme-dark) #GridDiv .slick-header-column .slick-column-name {
  color: #333333 !important;
}

/* Grid title and toolbar */
html:not(.theme-dark) #GridDiv .grid-title,
html:not(.theme-dark) #GridDiv .grid-title .title-text,
html:not(.theme-dark) #GridDiv .grid-toolbar,
html:not(.theme-dark) #GridDiv .s-Serenity-Toolbar,
html:not(.theme-dark) #GridDiv .s-Toolbar,
html:not(.theme-dark) #GridDiv .tool-group,
html:not(.theme-dark) #GridDiv .tool-button,
html:not(.theme-dark) #GridDiv .button-inner,
body:not(.theme-dark) #GridDiv .grid-title,
body:not(.theme-dark) #GridDiv .grid-title .title-text,
body:not(.theme-dark) #GridDiv .grid-toolbar,
body:not(.theme-dark) #GridDiv .s-Serenity-Toolbar,
body:not(.theme-dark) #GridDiv .s-Toolbar,
body:not(.theme-dark) #GridDiv .tool-group,
body:not(.theme-dark) #GridDiv .tool-button,
body:not(.theme-dark) #GridDiv .button-inner {
  background-color: transparent !important;
  color: #333333 !important;
  border-color: #e0e0e0 !important;
}

/* Quick search bar */
html:not(.theme-dark) #GridDiv .s-QuickSearchBar,
html:not(.theme-dark) #GridDiv .s-Serenity-QuickSearchInput,
html:not(.theme-dark) #GridDiv .s-QuickSearchInput,
body:not(.theme-dark) #GridDiv .s-QuickSearchBar,
body:not(.theme-dark) #GridDiv .s-Serenity-QuickSearchInput,
body:not(.theme-dark) #GridDiv .s-QuickSearchInput {
  background-color: #ffffff !important;
  color: #333333 !important;
 /*border: 1px solid #cccccc !important;*/ 
}

html:not(.theme-dark) #GridDiv .s-QuickSearchInput::placeholder,
body:not(.theme-dark) #GridDiv .s-QuickSearchInput::placeholder {
  color: #999999 !important;
}

/* Form controls inside grid */
html:not(.theme-dark) #GridDiv input,
html:not(.theme-dark) #GridDiv select,
html:not(.theme-dark) #GridDiv textarea,
html:not(.theme-dark) #GridDiv .form-control,
body:not(.theme-dark) #GridDiv input,
body:not(.theme-dark) #GridDiv select,
body:not(.theme-dark) #GridDiv textarea,
body:not(.theme-dark) #GridDiv .form-control {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
}

html:not(.theme-dark) #GridDiv input::placeholder,
html:not(.theme-dark) #GridDiv textarea::placeholder,
body:not(.theme-dark) #GridDiv input::placeholder,
body:not(.theme-dark) #GridDiv textarea::placeholder {
  color: #999999 !important;
}

/* Links inside grid */
html:not(.theme-dark) #GridDiv a,
html:not(.theme-dark) #GridDiv .s-EditLink,
html:not(.theme-dark) #GridDiv .s-Administration-LanguageLink,
body:not(.theme-dark) #GridDiv a,
body:not(.theme-dark) #GridDiv .s-EditLink,
body:not(.theme-dark) #GridDiv .s-Administration-LanguageLink {
  color: #0066cc !important;
  text-decoration: none;
}

html:not(.theme-dark) #GridDiv a:hover,
html:not(.theme-dark) #GridDiv .s-EditLink:hover,
body:not(.theme-dark) #GridDiv a:hover,
body:not(.theme-dark) #GridDiv .s-EditLink:hover {
  color: #0052a3 !important;
  text-decoration: underline !important;
}

/* Row hover state */
html:not(.theme-dark) #GridDiv .slick-row:hover,
body:not(.theme-dark) #GridDiv .slick-row:hover {
  background-color: #f9f9f9 !important;
}

/* Pager styling */
html:not(.theme-dark) #GridDiv .s-Serenity-SlickPager,
html:not(.theme-dark) #GridDiv .s-SlickPager,
html:not(.theme-dark) #GridDiv .slick-pg,
html:not(.theme-dark) #GridDiv .slick-pg-in,
html:not(.theme-dark) #GridDiv .slick-pg-grp,
html:not(.theme-dark) #GridDiv .slick-pg-btn,
body:not(.theme-dark) #GridDiv .s-Serenity-SlickPager,
body:not(.theme-dark) #GridDiv .s-SlickPager,
body:not(.theme-dark) #GridDiv .slick-pg,
body:not(.theme-dark) #GridDiv .slick-pg-in,
body:not(.theme-dark) #GridDiv .slick-pg-grp,
body:not(.theme-dark) #GridDiv .slick-pg-btn {
  background-color: #f5f5f5 !important;
  color: #333333 !important;
  border-color: #d3d3d3 !important;
}

html:not(.theme-dark) #GridDiv .slick-pg-size,
html:not(.theme-dark) #GridDiv .slick-pg-current,
body:not(.theme-dark) #GridDiv .slick-pg-size,
body:not(.theme-dark) #GridDiv .slick-pg-current {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
}

/* Icons and buttons */
html:not(.theme-dark) #GridDiv .fa,
html:not(.theme-dark) #GridDiv .text-blue,
html:not(.theme-dark) #GridDiv .text-green,
body:not(.theme-dark) #GridDiv .fa,
body:not(.theme-dark) #GridDiv .text-blue,
body:not(.theme-dark) #GridDiv .text-green {
  color: #333333 !important;
}

/* Select2 overrides for light theme */
html:not(.theme-dark) #GridDiv .select2-container .select2-choice,
html:not(.theme-dark) #GridDiv .select2-choice.select2-default,
body:not(.theme-dark) #GridDiv .select2-container .select2-choice,
body:not(.theme-dark) #GridDiv .select2-choice.select2-default {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
}

html:not(.theme-dark) #GridDiv .select2-drop,
html:not(.theme-dark) #GridDiv .select2-drop-active,
body:not(.theme-dark) #GridDiv .select2-drop,
body:not(.theme-dark) #GridDiv .select2-drop-active {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
}