@CHARSET "UTF-8";

/* CSS Variables for Theme Support */
/* Original (Light) Theme - Default */
:root {
	/* Background colors */
	--bg-primary: #ffffff;
	--bg-secondary: #f0f0f0;
	--bg-container: #ecebe1;
	--bg-header: url(../images/header.jpg);
	--bg-footer: url(../images/footer_back.jpg);
	--bg-bottom-top: #9aa8ed;
	--bg-menus: #f3f4fa; /* Menu and workspace background - light theme */
	
	/* Text colors */
	--text-primary: #000000;
	--text-secondary: #1a1a12;
	--text-inverse: #ffffff;
	--heading-color: #2a2a2a; /* Dark gray for headings on light backgrounds (14:1 contrast ratio) */
	
	/* Border colors */
	--border-primary: #d4ccb0;
	--border-secondary: #2f3720;
	
	/* Component colors */
	--input-bg: #ffffff;
	--input-text: #000000;
	--button-bg: #7faf2b;
	--button-text: #000000;
	--link-color: #0066cc;
	--link-hover: #004499;
	
	/* Table colors */
	--table-header-bg: #9aa8ed;
	--table-row-even: #fafaf4;
	--table-row-odd: #ffffff;
	
	/* Popup and dialog colors */
	--popup-bg: #ffffff;
	--popup-header-bg: #9aa8ed;
	--popup-header-text: #000000;
	--popup-border: #d4ccb0;
	--popup-overlay: rgba(0, 0, 0, 0.5);
	
	/* Message colors */
	--msg-info-bg: #BDE5F8;
	--msg-info-text: #00529B;
	--msg-success-bg: #DFF2BF;
	--msg-success-text: #4F8A10;
	--msg-warning-bg: #FEEFB3;
	--msg-warning-text: #9F6000;
	--msg-error-bg: #FFBABA;
	--msg-error-text: #D8000C;
}

body {
        position: fixed;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: 'Myriad Pro Regular';
}

#container{
	position: fixed;
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
    background-color: var(--bg-container);
    font-size: 10px;
}

#left {
    float: left;
    left: 0px;
    padding: 5px;
    width: 20%;
    min-width: 100px;
    max-width: 400px;
    height: 100%;
    /*margin: 0px 5px 6px 0px;*/ 
    border-right: 1px solid var(--border-primary);
    /*background: url(../images/horizontal_background.png) repeat-y;*/
    z-index: 1;
    background-color: var(--bg-menus);
}
  
#right{  
    float:right;
    right:0px;
    padding: 5px;
    text-align: right;
	margin-right: 0px;
	margin-top:0 px;
    width: 20%;
    min-width: 100px;
    max-width: 400px;
    height: 100%; 
    border-left: 1px solid var(--border-secondary);
    z-index: 1;
    background-color: var(--bg-secondary);
} 
  
#content{
    overflow: auto; 
    height: 100%; 
    padding: 0px; 
    margin: 0px 0px 0px 100px;
    z-index: 0; 
    background-color: var(--bg-primary);
}

#top {     
    background: var(--bg-header) repeat-x;
    height: 45px; 
    width: 100%; 
    padding: 2px; 
    margin: 0px 0px 0px 0px; 
    z-index: 2; 
}

#bottomTop {     
    height: 30px; 
    width: 100%; 
    padding: 2px;  
    z-index: 2;
    color: var(--text-inverse);
    /*border-top: 2px solid #2f3720;*/
    border-bottom: 1px solid var(--border-primary);
    background-color: var(--bg-bottom-top);
}

#bottom { 
    position: fixed; 
    background: var(--bg-footer) repeat-x;
    bottom: -10px;
    height: 30px; 
    width: 100%;
    padding: 5px;
    z-index: 2;     
    /*margin: 2px 0px 1px 2px;*/
}

#overlay {
	z-index:1000;
}

.pos-image-wrapper {
	width: 50%;            /* responsive width of the panel */
	max-width: 800px;      /* optional max size */
	height: 40vh;          /* panel height (can use px, %, vh, etc.) */
	margin: 10% 10% 10%;      /* center with top/bottom margin */
	text-align: center;
}
/* target the rendered <img> inside the ace component */
.pos-image-wrapper img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;   /* preserve aspect ratio and fit inside */
}

/* Dark Theme CSS Variables */
/* Applied when body has class 'dark-theme' */
body.dark-theme {
	/* Background colors */
	--bg-primary: #1e1e1e;
	--bg-secondary: #2d2d2d;
	--bg-container: #252525;
	--bg-header: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
	--bg-footer: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
	--bg-bottom-top: #3a4a6a;
	--bg-menus: #2d2d2d; /* Menu and workspace background - dark theme */
	
	/* Text colors */
	--text-primary: #e0e0e0;
	--text-secondary: #d0d0d0;
	--text-inverse: #e0e0e0;
	
	/* Border colors */
	--border-primary: #404040;
	--border-secondary: #505050;
	
	/* Component colors */
	--input-bg: #2a2a2a;
	--input-text: #e0e0e0;
	--button-bg: #5a8a1b;
	--button-text: #e0e0e0;
	--link-color: #6699ff;
	--link-hover: #88bbff;
	
	/* Table colors */
	--table-header-bg: #3a4a6a;
	--table-row-even: #2a2a2a;
	--table-row-odd: #1e1e1e;
	
	/* Popup and dialog colors */
	--popup-bg: #2d2d2d;
	--popup-header-bg: #3a4a6a;
	--popup-header-text: #e0e0e0;
	--popup-border: #505050;
	--popup-overlay: rgba(0, 0, 0, 0.7);
	
	/* Message colors - adjusted for dark theme with proper contrast */
	--msg-info-bg: #1a3a4a;
	--msg-info-text: #6db9e8;
	--msg-success-bg: #2a3a1a;
	--msg-success-text: #7fca10;
	--msg-warning-bg: #4a3a1a;
	--msg-warning-text: #ffcc00;
	--msg-error-bg: #4a1a1a;
	--msg-error-text: #ff8080;
	
	/* Widget component colors */
	--widget-bg: #2a2a2a; /* Neutral dark gray for widget backgrounds */
	--widget-content-bg: #1e1e1e; /* Slightly darker for content distinction */
	--widget-border: #404040; /* Subtle borders for widget components */
	--widget-header-bg-focused: #3a4a6a; /* Blue-gray for focused state */
	--widget-header-bg-unfocused: #2d3d5d; /* Dimmer for unfocused state */
	--widget-header-text: #e0e0e0; /* Light gray text for headers */
	
	/* Button colors for dark theme - Updated Blue Palette
	   Change: refine-datatable-pagination-themes
	   Source: docs/enhancements/requests/20260107-enrich-ui-css-styling-icefaces.md */
	--button-bg-dark: #2D66BE; /* Blue background */
	--button-bg-hover-dark: #005BB5; /* Darker blue on hover */
	--button-text-dark: #e0e0e0; /* Light readable text */
	--button-border-dark: #004C99; /* Darker blue border for definition */
	
	/* Highlight and text selection colors */
	--highlight-bg: #3a5a7a; /* Muted blue for selections */
	--highlight-text: #e0e0e0; /* Light text on highlighted areas */
	--heading-color: #d0d0d0; /* Light gray for headings (12:1 contrast ratio) */
	
	/* ACE DataTable colors */
	--datatable-bg: #1e1e1e; /* Main table background */
	--datatable-header-bg: #2d3d5d; /* Table header background */
	--datatable-row-even: #2a2a2a; /* Even row background */
	--datatable-row-odd: #1e1e1e; /* Odd row background */
	--datatable-row-hover: #3a3a3a; /* Row hover state */
	--datatable-row-selected: #3a5a7a; /* Selected row background */
	--datatable-border: #404040; /* Table borders */
	
	/* Input field colors */
	--input-border: #404040; /* Input field borders */
	--input-focus-border: #5a7a9a; /* Input field focus border */
	--input-placeholder: #808080; /* Placeholder text color */
	--input-disabled-bg: #1a1a1a; /* Disabled input background */
	
	/* Dropdown/menu colors */
	--dropdown-bg: #2a2a2a; /* Dropdown trigger background */
	--dropdown-panel-bg: #2d2d2d; /* Dropdown panel background */
	--dropdown-item-hover: #3a4a5a; /* Dropdown item hover */
	--dropdown-item-selected: #3a5a7a; /* Dropdown item selected */
	--dropdown-border: #404040; /* Dropdown borders */
	
	/* Calendar colors */
	--calendar-bg: #2a2a2a; /* Calendar background */
	--calendar-header-bg: #2d3d5d; /* Calendar header background */
	--calendar-cell-bg: #1e1e1e; /* Calendar cell background */
	--calendar-cell-hover: #3a4a5a; /* Calendar cell hover */
	--calendar-cell-selected: #3a5a7a; /* Calendar cell selected */
	--calendar-border: #404040; /* Calendar borders */
	
	/* Tab colors */
	--tab-bg: #2a2a2a; /* Tab background */
	--tab-active-bg: #3a4a6a; /* Active tab background */
	--tab-hover-bg: #3a3a3a; /* Tab hover background */
	--tab-border: #404040; /* Tab borders */
	--tab-content-bg: #1e1e1e; /* Tab content background */
	
	/* Tree colors */
	--tree-bg: #1e1e1e; /* Tree background */
	--tree-node-hover: #3a3a3a; /* Tree node hover */
	--tree-node-selected: #3a5a7a; /* Tree node selected */
	--tree-border: #404040; /* Tree borders */
	
	/* Menu link highlight colors - dark theme - Updated Blue Palette
	   Change: refine-datatable-pagination-themes */
	--menu-link-hover-bg: #3a3a3a; /* Hover background for menu links */
	--menu-link-selected-bg: rgba(0, 102, 204, 0.12); /* Subtle blue background for selected */
	--menu-link-selected-text: #e0e0e0; /* Light text for selected */
	--menu-link-selected-border: #005BB5; /* Blue accent border */
	
	/* CSS Variables for dark theme checkboxes */
	  --rsoft-checkbox-disabled-opacity: 0.4;
}

/* ========================================= */
/* Menu Link Highlighting Styles            */
/* ========================================= */

/* Base menu link styles - light theme */
/* Use higher specificity to override a[id*=":"] from newStyle.css */
a.menu-link {
	display: inline-block;
	padding: 1.8px 1.8px;
	text-decoration: none !important;
	border-radius: 3px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

a.menu-link:hover {
	background-color: #e9ecef; /* Light gray hover */
	text-decoration: underline !important;
}

/* Selected menu item - light theme */
a.menu-link-selected {
	background-color: #d4e4f7 !important; /* Light blue background (matching panel header tone) */
	color: #1a3a6a !important; /* Dark blue text */
	font-weight: bold !important;
	border-left: 3px solid #6a88cc; /* Blue accent border (darker shade of #9aa8ed) */
	text-decoration: none !important;
}

a.menu-link-selected:hover {
	background-color: #c3d9f0 !important; /* Slightly darker blue on hover */
	text-decoration: none !important;
}

/* Dark theme menu link overrides - Updated Blue Palette
   Change: refine-datatable-pagination-themes */
body.dark-theme a.menu-link:hover {
	background-color: var(--menu-link-hover-bg);
}

body.dark-theme a.menu-link-selected {
	background-color: var(--menu-link-selected-bg) !important;
	color: var(--menu-link-selected-text) !important;
	border-left: 3px solid var(--menu-link-selected-border);
	box-shadow: none !important;
	text-shadow: none !important;
}

body.dark-theme a.menu-link-selected:hover {
	background-color: rgba(0, 102, 204, 0.18) !important; /* Slightly lighter on hover */
}