/**
 * Flat UI Theme Overrides for Original (Light) Theme
 * 
 * This file contains CSS overrides to implement flat UI design
 * for the original/light theme. All rules are scoped to avoid
 * affecting body.dark-theme.
 * 
 * Loading order: newStyle.css → layout.css → theme-light-overrides.css
 * 
 * Change: modernize-flat-ui-original-theme
 * Date: 2026-01-07
 */

/**
 * Visual Fixes for Light Theme - Change ID: fix-light-theme-visuals-20260107
 * 
 * Fixes:
 * 1. Footer height sync with dark theme
 * 2. Header background white in light mode
 * 3. Theme selector contrast improvement
 * 4. Dev/beta label readability
 * 5. ace:pushButton hover state text readability
 */

/* ========================================= */
/* Flat UI CSS Variables - Light Theme      */
/* ========================================= */

:root {
  /* Primary accent color */
  --flat-primary: #0066CC;
  
  /* Background colors */
  --flat-bg-white: #ffffff;
  --flat-bg-dialog: #f3f4fa;
  --flat-bg-container: #ffffff;
  
  /* Text colors */
  --flat-text-on-primary: #ffffff;
  --flat-text-primary: #0066CC;
  --flat-text-default: #333333;
  
  /* Overlay */
  --flat-overlay: rgba(0, 0, 0, 0.48);

  /* Checkbox styling - Change ID: standardize-ace-checkboxbutton-styling */
  --rsoft-checkbox-disabled-opacity: 0.4;
}

/* ========================================= */
/* Header & Footer - Flat UI & Light Theme Fixes */
/* ========================================= */

/* Scope to light theme only */
body:not(.dark-theme) #top {
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--flat-text-on-primary);
}

body:not(.dark-theme) #bottom {
  background: var(--flat-primary) !important;
  background-image: none !important;
  color: var(--flat-text-on-primary);
  bottom: -10px !important;
  height: 30px !important;
  min-height: 30px;
  padding: 5px !important;
}

/* Header title text */
body:not(.dark-theme) #top h1,
body:not(.dark-theme) #top h2,
body:not(.dark-theme) #top .header-title {
  color: var(--flat-text-on-primary);
}

/* Footer text and links */
body:not(.dark-theme) #bottom,
body:not(.dark-theme) #bottom a {
  color: var(--flat-text-on-primary);
}

/* ========================================= */
/* Bottom-Top Section - Flat UI             */
/* ========================================= */

body:not(.dark-theme) #bottomTop {
  background-color: var(--flat-primary) !important;
  background-image: none !important;
  color: var(--flat-text-on-primary);
  border-bottom: 1px solid rgba(0, 102, 204, 0.8);
}

/* ========================================= */
/* Buttons - Flat UI                        */
/* ========================================= */

body:not(.dark-theme) .ui-button,
body:not(.dark-theme) .ui-commandbutton,
body:not(.dark-theme) button,
body:not(.dark-theme) input[type="button"],
body:not(.dark-theme) input[type="submit"] {
  background: var(--flat-bg-white) !important;
  background-image: none !important;
  color: var(--flat-primary) !important;
  border: 1px solid var(--flat-primary) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 3px;
  transition: background-color 0.2s ease, filter 0.2s ease;
}

/* Button hover state */
body:not(.dark-theme) .ui-button:hover,
body:not(.dark-theme) .ui-commandbutton:hover,
body:not(.dark-theme) button:hover,
body:not(.dark-theme) input[type="button"]:hover,
body:not(.dark-theme) input[type="submit"]:hover {
  background: var(--flat-primary) !important;
  filter: brightness(0.98);
  color: var(--flat-text-on-primary) !important;
}

/* Button active/pressed state */
body:not(.dark-theme) .ui-button:active,
body:not(.dark-theme) .ui-commandbutton:active,
body:not(.dark-theme) button:active {
  background: rgba(0, 102, 204, 0.1) !important;
}

/* Disabled button state */
body:not(.dark-theme) input:disabled,
body:not(.dark-theme) textarea:disabled,
body:not(.dark-theme) .ui-inputfield:disabled
body:not(.dark-theme) .ui-button:disabled,
body:not(.dark-theme) .ui-button.ui-state-disabled,
body:not(.dark-theme) button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========================================= */
/* Dialogs & Popups - Flat UI               */
/* ========================================= */

/* Dialog content background */
body:not(.dark-theme) .ui-dialog,
body:not(.dark-theme) .ui-panel-popup {
  background: var(--flat-bg-dialog) !important;
  background-image: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid #d0d0d0;
}

body:not(.dark-theme) .ui-dialog .ui-dialog-content,
body:not(.dark-theme) .ui-panel-popup .ui-panel-content {
  background: var(--flat-bg-dialog) !important;
}

/* Dialog header */
body:not(.dark-theme) .ui-dialog .ui-dialog-titlebar {
  background: var(--flat-primary) !important;
  background-image: none !important;
  color: var(--flat-text-on-primary) !important;
  border: none;
}

/* Overlay (behind popup) - 20% stronger */
body:not(.dark-theme) .ui-widget-overlay,
body:not(.dark-theme) .ui-dialog-mask {
  background: var(--flat-overlay) !important;
}

/* ========================================= */
/* Panels (ace:panel) - Flat UI             */
/* ========================================= */

/* Panel header */
body:not(.dark-theme) .ui-panel .ui-panel-titlebar {
  background: var(--flat-primary) !important;
  background-image: none !important;
  color: var(--flat-text-on-primary) !important;
  border: 1px solid var(--flat-primary);
}

/* Panel header text */
body:not(.dark-theme) .ui-panel .ui-panel-titlebar h3,
body:not(.dark-theme) .ui-panel .ui-panel-titlebar .ui-panel-title {
  color: var(--flat-text-on-primary) !important;
}

/* Panel toggle icons (+/-) */
body:not(.dark-theme) .ui-panel .ui-panel-titlebar .ui-panel-toggler {
  color: var(--flat-primary) !important;
  background: var(--flat-bg-white);
  border: 1px solid var(--flat-primary);
  border-radius: 3px;
}

body:not(.dark-theme) .ui-panel .ui-panel-titlebar .ui-panel-toggler:hover {
  background: rgba(0, 102, 204, 0.1);
}

/* Panel content */
body:not(.dark-theme) .ui-panel .ui-panel-content {
  background: var(--flat-bg-white) !important;
  border: none;
}

/* Panel toggle animation */
body:not(.dark-theme) .ui-panel .ui-panel-content {
  /* transition: height 0.3s ease, opacity 0.3s ease; */
}

/* ========================================= */
/* DataTables - Flat UI                     */
/* ========================================= */

/* Table header */
body:not(.dark-theme) .ui-datatable thead th,
body:not(.dark-theme) .ui-datatable .ui-datatable-header {
  background: var(--flat-primary) !important;
  background-image: none !important;
  color: var(--flat-text-on-primary) !important;
  border: 1px solid var(--flat-primary);
  font-weight: 600;
}

/* Table header links/text */
body:not(.dark-theme) .ui-datatable thead th a,
body:not(.dark-theme) .ui-datatable thead th span {
  color: var(--flat-text-on-primary) !important;
}

/* Table rows */
body:not(.dark-theme) .ui-datatable tbody tr {
  
}

body:not(.dark-theme) .ui-datatable tbody tr:nth-child(even) {
  background: #f9f9f9;
}

/* Table row hover */
body:not(.dark-theme) .ui-datatable tbody tr:hover {
  background: rgba(0, 102, 204, 0.05) !important;
}

/* Table row selected */
body:not(.dark-theme) .ui-datatable tbody tr.ui-state-selected {
  background: rgba(0, 102, 204, 0.15) !important;
}

/* Sort icons */
body:not(.dark-theme) .ui-datatable thead th .ui-sortable-icon {
  color: var(--flat-text-on-primary);
}

/* ========================================= */
/* Input Fields - Flat UI                   */
/* ========================================= */

body:not(.dark-theme) .ui-inputtext,
body:not(.dark-theme) input[type="text"],
body:not(.dark-theme) input[type="password"],
body:not(.dark-theme) input[type="email"],
body:not(.dark-theme) input[type="number"],
body:not(.dark-theme) textarea,
body:not(.dark-theme) select {
  background: var(--flat-bg-white) !important;
  border: 1px solid #cccccc !important;
  box-shadow: none !important;
  border-radius: 3px;
}

/* Input focus state */
body:not(.dark-theme) .ui-inputtext:focus,
body:not(.dark-theme) input:focus,
body:not(.dark-theme) textarea:focus,
body:not(.dark-theme) select:focus {
  border-color: var(--flat-primary) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1) !important;
}

/* Specific: textEntry input in .workSpaceBotLeft */
body:not(.dark-theme) .workSpaceBotLeft .ui-inputtext,
body:not(.dark-theme) .workSpaceBotLeft input {
  color: var(--flat-text-primary) !important;
}

/* ========================================= */
/* Additional Component Overrides           */
/* ========================================= */

/* Remove background-image from all light theme elements */
body:not(.dark-theme) .ui-widget {
  background-image: none !important;
}

/* Override any remaining gradients in light theme */
body:not(.dark-theme) [style*="background: url"],
body:not(.dark-theme) [style*="background-image"] {
  background-image: none !important;
}

/* Ensure ace components work with flat theme */
body:not(.dark-theme) .ui-panel {
  background: var(--flat-bg-white);
}

body:not(.dark-theme) .ui-dialog {
  border: 1px solid #d0d0d0;
}

/* Link colors in light theme */
body:not(.dark-theme) a:not(.menu-link):not(.menu-link-selected) {
  color: var(--flat-text-on-primary);
}

body:not(.dark-theme) a:not(.menu-link):not(.menu-link-selected):visited {
  color: #004499;
}

body:not(.dark-theme) .ui-selectmenu > a:not(.menu-link):not(.menu-link-selected) {
  color: var(--flat-text-primary);
}

/* ========================================= */
/* Light Theme Visual Fixes - fix-light-theme-visuals-20260107 */
/* ========================================= */

/**
 * Fix 3: Theme Selector Contrast
 * The theme selector in the footer needs dark text for readability
 * on the white/light backgrounds. This fixes the white-on-white
 * contrast issue where text was invisible.
 */
body:not(.dark-theme) #themeSelector,
body:not(.dark-theme) #themeSelector .ui-selectmenu-label,
body:not(.dark-theme) .ui-selectmenu,
body:not(.dark-theme) .ui-selectmenu-label {
  color: #111 !important;
}

/* Ensure theme selector text is dark in light theme */
body:not(.dark-theme) select,
body:not(.dark-theme) select option {
  color: #111 !important;
  background-color: #ffffff !important;
}

/**
 * Fix 4: Dev/Beta Label Color
 * The environment state label (DEV/BETA) should be black/dark
 * in light mode for readability. The JSF h:outputText renders
 * as a span, so we target text color in the header area.
 */
body:not(.dark-theme) #headerLogosNonProduction {
  color: #111 !important;
}

body:not(.dark-theme) #headerLogosNonProduction span,
body:not(.dark-theme) #headerLogosNonProduction h:outputText {
  color: #111 !important;
}

/**
 * Fix 5: ACE pushButton Hover States
 * Fix the blue button hover states that obscure blue text.
 * The "Cerrar Sesión" button and other ace:pushButton instances
 * need proper hover styling to maintain text readability.
 * 
 * Target: ace:pushButton rendered as .ace_button elements
 * Issue: Blue background + blue text = unreadable on hover
 * Solution: Use transparent/subtle background on hover, keep text dark
 */
body:not(.dark-theme) .ace_button:hover,
body:not(.dark-theme) .ace_button:focus {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #111 !important;
}

/* Ensure ace button text remains readable in all states */
body:not(.dark-theme) .ace_button {
  color: #111 !important;
}

body:not(.dark-theme) .ace_button:active {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: #111 !important;
}

/* ========================================= */
/* IceFaces ACE Component Overrides        */
/* ========================================= */
/* 
 * Change: override-icefaces-ace-light-theme
 * Source: docs/enhancements/requests/20260107-light-theme-icefaces-overrides.md
 * Purpose: Override legacy IceFaces/ACE component styles to use flat design tokens
 * 
 * These rules neutralize background-image gradients and force component headers
 * and interactive states to use CSS variables from the flat UI design system.
 */


/**
 * Rule 2: Override accordion header backgrounds
 * 
 * Targets ace:accordionPane and panel headers which use
 * .ui-accordion-header and .ui-panel-titlebar classes.
 * Forces flat-primary background color.
 */
body:not(.dark-theme) .ui-accordion .ui-accordion-header,
body:not(.dark-theme) .ui-accordion .ui-accordion-header a,
body:not(.dark-theme) .ui-panel .ui-panel-titlebar {
  background: var(--flat-primary) !important;
  background-image: none !important;
  color: var(--flat-text-on-primary) !important;
}

body:not(.dark-theme) .rsoft-accordion .ui-accordion-content.ui-widget-content {
  background-color: var(--bg-menus) !important;
  background-image: none !important;
} 

/**
 * Rule 3: Invert list/listControl colors on interactive states
 * 
 * Targets ace:listControl and ace:list items in hover, focus, and selected states.
 * Forces white background with dark text for better contrast and visibility.
 */
body:not(.dark-theme) .ui-listbox .ui-listbox-item:hover,
body:not(.dark-theme) .ui-listbox .ui-listbox-item:focus,
body:not(.dark-theme) .ui-listbox .ui-listbox-item.ui-state-highlight,
body:not(.dark-theme) .ui-list .ui-list-item:hover,
body:not(.dark-theme) .ui-list .ui-list-item:focus,
body:not(.dark-theme) .ui-list .ui-list-item.ui-state-highlight {
  background: #ffffff !important;
  color: var(--flat-text-primary) !important;
}

/**
 * Rule 4: Override .row-blue for light theme
 * 
 * Targets the .row-blue class used in DataTable row styling
 * (e.g., selected rows in warehouse/categories.xhtml).
 * Forces flat-primary color instead of legacy #1c3fed.
 */
body:not(.dark-theme) .row-blue {
  background-color: var(--flat-primary) !important;
  color: var(--flat-text-on-primary) !important;
}

/**
 * Rule 5: Add menu/content divider
 * 
 * Adds a visual divider (3px solid line) between the left menu/sidebar
 * and the main content area. The divider uses the flat-primary color
 * to match the flat design aesthetic.
 * 
 * Note: The workspace layout uses <div class="workspace"> containers
 * with <div class="workSpaceLeft"> and <div class="workSpaceRight"> sections.
 * This rule targets the right section (workSpaceRight) with a left border
 * to create the visual divider.
 */
body:not(.dark-theme) .menu-division {
  border-right: 2px solid var(--flat-primary) !important;
}

/* ========================================
   DataTable Column/Row Delimiters - Light Theme
   Change: refine-datatable-pagination-themes
   Source: docs/enhancements/requests/20260107-enrich-ui-css-styling-icefaces.md
   ======================================== */

/* DataTable cell borders - subtle gray dividers */
body:not(.dark-theme) .ui-datatable td,
body:not(.dark-theme) .ui-datatable th {
    
}

/* Remove double borders at table edges */
body:not(.dark-theme) .ui-datatable tr td:last-child,
body:not(.dark-theme) .ui-datatable tr th:last-child {
    border-right: none !important;
}

body:not(.dark-theme) .ui-datatable tbody tr:last-child td {
    border-bottom: none !important;
}

/* ========================================
   Pagination Footer Styling - Light Theme
   Change: refine-datatable-pagination-themes + align-datatable-pagination-footer-dimensions
   Source: docs/enhancements/requests/20260107-enrich-ui-css-styling-icefaces.md
           docs/enhancements/requests/20260109-datatable-pagination-footer-theming.md
   ======================================== */

/* Pagination container - flat primary background with white text */
body:not(.dark-theme) .ui-paginator,
body:not(.dark-theme) .ui-paginator-bottom {
    background: var(--flat-primary) !important;
    background-image: none !important;
    color: white !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Pagination elements - white text on primary background */
body:not(.dark-theme) .ui-paginator .ui-paginator-element,
body:not(.dark-theme) .ui-paginator .ui-paginator-page,
body:not(.dark-theme) .ui-paginator .ui-paginator-pages,
body:not(.dark-theme) .ui-paginator .ui-paginator-current {
    color: white !important;
    background: transparent !important;
    border: none !important;
}

/* Pagination links - enhanced contrast on hover */
body:not(.dark-theme) .ui-paginator a.ui-paginator-element {
    color: white !important;
    opacity: 0.85;
    transition: opacity 0.15s ease-in-out;
}

body:not(.dark-theme) .ui-paginator a.ui-paginator-element:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Active page - subtle white background */
body:not(.dark-theme) .ui-paginator .ui-paginator-page.ui-state-active {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    font-weight: 600 !important;
}

/* ========================================
   DataTable Row Styling - Light Theme
   Change: improve-menu-workspace-datatable-backgrounds
   Purpose: Consistent background colors for dataTable rows
   ======================================== */

/* DataTable row backgrounds - light theme consistency */
body:not(.dark-theme) .ui-datatable tbody tr {
  
}

body:not(.dark-theme) .ui-datatable tbody tr:nth-child(even) {
  background-color: #f3f4fa !important; /* Remove alternating colors */
}

/* scope: menu.xhtml - panel menu visual fixes
   Change ID: enrich-menu-css-20260107
   Purpose: Localized overrides for ACE panels rendered inside menu.xhtml (form id: formMenu)
   - Keep overrides narrowly scoped to avoid affecting other pages
   - Use theme variables; use !important only when necessary to override theme JAR specificity
*/

body:not(.dark-theme) #formMenu .ui-panel {
    /* Use theme variable for the 2px wrapper border in light theme */
    border: 2px solid var(--flat-primary);
    /* Ensure wrapper background remains unchanged; do not alter padding here */
}

/* ========================================
   ace:breadcrumbMenu Contrast Improvement - Light Theme
   Change ID: improve-breadcrumb-panel-light-theme
   Purpose: Fix poor contrast between text and background in light mode
   ======================================== */

body:not(.dark-theme) .rsoft-breadcrumb {
	background: var(--flat-bg-white);
    padding: 3px 3px;
    border-radius: 5px;
}

body:not(.dark-theme) .rsoft-breadcrumb .ui-widget {
	background: var(--flat-primary);
	border-radius: 5px;
}

body:not(.dark-theme) .rsoft-breadcrumb a:not(.menu-link):not(.menu-link-selected) {
    color: var(--text-inverse);
    padding-right: 5px;
}

body:not(.dark-theme) .rsoft-breadcrumb a:not(.menu-link):not(.menu-link-selected):hover {
    background: var(--bg-menus);
    color: var(--flat-text-primary);
    padding-right: 5px;
}

body:not(.dark-theme) .rsoft-breadcrumb a:not(.menu-link):not(.menu-link-selected):visited {
    color: darkgray;
    padding-right: 5px;
}

/* ========================================
   ace:checkboxButton Standardization - Light Theme
   Change ID: standardize-ace-checkboxbutton-styling
   Purpose: Ensure consistent styling for ace:checkboxButton components in light theme
   
   IceFaces DOM Structure (per docs/icefaces_components_css_styling.md):
   <div id="{id}" class="ice-checkboxbutton rsoft-checkbox">
     <span class="ui-button ui-widget">
       <span class="first-child">
         <button class="ui-corner-all ui-widget-content 
                        ice-checkboxbutton-checked|unchecked 
                        [ui-state-disabled]">
           <span class="fa fa-check-square-o|fa-square-o fa-lg"></span>
         </button>
       </span>
     </span>
   </div>
   ======================================== */

/* Enabled State: Remove border for flat UI aesthetic */
body:not(.dark-theme) .rsoft-checkbox > .ui-button.ui-widget,
body:not(.dark-theme) .rsoft-checkbox > span.ui-button.ui-widget button {
  border: none !important;
  background: transparent !important;
}

body:not(.dark-theme) .rsoft-checkbox > span.ui-button.ui-widget button:hover {
  border: none !important;
  background: var(--flat-primary) !important;
}

/* Disabled State: Visual indicators that component is non-interactive */
body:not(.dark-theme) .rsoft-checkbox button.ui-state-disabled {
  background: none !important;
  border: none !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Disabled Check Icon: Reduce opacity to signal disabled state */
body:not(.dark-theme) .rsoft-checkbox .ui-state-disabled .fa {
  opacity: var(--rsoft-checkbox-disabled-opacity);
}

/* Remove hover/focus effects for disabled state */
body:not(.dark-theme) .rsoft-checkbox .ui-state-disabled:hover,
body:not(.dark-theme) .rsoft-checkbox .ui-state-disabled:focus {
  background: none !important;
  box-shadow: none !important;
}

body:not(.dark-theme) .ice-pushbutton.link-style-button button {
  border: none !important;
  background: none !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

body:not(.dark-theme) .ice-pushbutton.link-style-button button:hover {
  border: none !important;
  background: var(--flat-primary) !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

body:not(.dark-theme) .rsoft-economic-activity {
    margin: 0 auto;
    background-color: var(--bg-menus);
    border-radius: 1px;
    border: 1px solid #dfd9c3;
}

/* ============================================ */
/* Custom Loading Spinner Override
/* ============================================ */

body:not(.dark-theme) .ice-sub-mon > .ice-sub-mon-mid.active {
    background: none !important;
    padding: 0;
    border: 2px solid var(--flat-primary);
    border-radius: 1px;
}

/* Override the default ICEfaces loading spinner with custom image */
body:not(.dark-theme) .ice-sub-mon > .ice-sub-mon-mid.active > .ice-sub-mon-img {
    background-image: url("../images/spinners/riosoft_blue_spinner_ring_transparent.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    background-color: var(--bg-menus) !important;
    width: 150px !important;
    height: 150px !important;
    display: inline-block !important;
}

/* If you also want to customize the idle state */
body:not(.dark-theme) .ice-sub-mon > .ice-sub-mon-mid.idle > .ice-sub-mon-img {
    background-image: url("../images/spinners/riosoft_blue_spinner_ring_transparent.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    background-color: var(--bg-menus) !important;
    width: 150px !important;
    height: 150px !important;
    display: inline-block !important;
}