:root {
    /* OMEGA COMPATIBLE VARIABLES (Light Mode) */
    
    /* Primary Brand Colors */
    --primary-color: #0284c7;       /* Your Scientific Blue */
    --primary-dark: #0369a1;
    --primary-light: #e0f2fe;
    
    /* Surfaces - Omega uses white/light grey */
    --surface-ground: #f8f9fa;      /* Page background */
    --surface-card: #ffffff;        /* Panel background */
    --surface-border: #dee2e6;      /* Border color */
    
    /* Text */
    --text-main: #333333;           /* Omega uses dark grey text */
    --text-secondary: #777777;
    
    /* Effects */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --radius-md: 4px;
}

html, body {
    margin: 0;
    padding: 0;
    /* Use variables so background matches the theme context */
    background-color: var(--surface-ground);
    font-family: "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif; /* Omega font stack */
    font-size: 14px;
    color: var(--text-main);
}
/* ==========================================================================
   2. LAYOUT UTILITIES (Preserved from Original for Layout Stability)
   ========================================================================== */
flex { display: flex; align-items: stretch; overflow: auto; }
flex-item > flex { position: absolute; width: 100%; height: 100%; }
flex.h { flex-direction: row; }
flex.v { flex-direction: column; }
flex-item { display: flex; position: relative; overflow: auto; }
flex > flex-resizer { flex: 0 0 3px; background: var(--accent-color); opacity: 0.5; }
flex.h > flex-resizer { cursor: ew-resize; }
flex.v > flex-resizer { cursor: ns-resize; }

/* Flex Box Main Wrappers */
.flex-box { min-height: 100vh; display: flex; flex-direction: column; }
.flex-box-body { display: flex; flex: 1 1 auto; flex-direction: column; }
.flex-box-content { flex: 1 1 auto; background: var(--surface-ground); }

@media (min-width: 768px) {
    .flex-box-sidebar-1 { order: -1; background: var(--surface-card); border-right: 1px solid var(--surface-border); }
    .flex-box-body { flex-direction: row; }
    .hg-sidebar-left { flex: 0 0 260px; /* Slightly wider sidebar */ }
}

/* ==========================================================================
   3. CONTAINER & PANEL STYLING
   ========================================================================== */
.my-content-panel {
    background: var(--surface-card);
    /* Take up almost all space, but leave a tiny breathing room */
    width: 100% !important; 
    max-width: none !important; /* Allow it to stretch on huge screens */
    line-height: 25px;
    /* Tiny margin to frame the content */
    /*margin: 10px auto !important; */
    min-height: 90vh;
    padding: 40px 20px 20px 50px;
    border-radius: 6px;
    box-shadow: var(--shadow-sm); 
}

/* PrimeFaces Panel Overrides */
body .ui-panel {
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    background: var(--surface-card) !important;
}

body .ui-panel .ui-panel-titlebar {
    background: #f8fafc !important; /* Very light gray */
    color: var(--primary-color) !important;
    border-bottom: 1px solid var(--surface-border) !important;
    font-weight: 600;
    padding: 1rem !important;
}

body .ui-panel .ui-panel-content {
    background: transparent !important;
    border: none !important;
    padding: 1.5rem !important;
}

/* Footer styling */
body .ui-panel .ui-panel-footer {
    background: #f8fafc !important;
    border-top: 1px solid var(--surface-border) !important;
    padding: 0.75rem 1rem !important;
}

/* Accordions */
body .ui-accordion .ui-accordion-header {
    margin-bottom: 2px !important;
}
body .ui-accordion .ui-accordion-header.ui-state-active {
    background: var(--primary-light) !important;
    border-left: 4px solid var(--primary-color) !important;
}
body .ui-accordion .ui-accordion-header a {
    color: var(--text-main) !important;
    padding: 0.8rem !important;
}

/* ==========================================================================
   4. DATA TABLE STYLING (Modernized)
   ========================================================================== */
body .ui-datatable {
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Headers */
body .ui-datatable thead th {
    background: #f1f5f9 !important; /* Light gray header */
    color: var(--text-main) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 1rem 0.8rem !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

/* Body Rows */
body .ui-datatable .ui-datatable-data > tr {
    background: var(--surface-card) !important;
    color: var(--text-main) !important;
    transition: background-color 0.15s ease;
}

/* Hover Effect */
body .ui-datatable .ui-datatable-data > tr:hover {
    background-color: var(--primary-light) !important;
}

/* Cells */
body .ui-datatable .ui-datatable-data > tr > td {
    padding: 0.8rem !important;
    border: 1px solid #f1f5f9 !important; /* Very subtle borders */
}

/* Paginator */
body .ui-paginator {
    background: var(--surface-card) !important;
    border-top: 1px solid var(--surface-border) !important;
    padding: 0.5rem !important;
}

/* ==========================================================================
   5. BUTTONS & INPUTS
   ========================================================================== */
/* Standard PrimeFaces Button */
body .ui-button {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease;
}

body .ui-button:hover {
    background: var(--primary-dark) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Circular Buttons (Custom Class .btnCirc) */
.btnCirc {
    border-radius: 50% !important;
    width: 116px;
    height: 116px;
    background: var(--surface-card) !important;
    border: 2px solid var(--surface-border) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btnCirc:hover {
    background: var(--primary-color) !important; /* Changed from Salmon to Brand Color */
    color: #fff !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
}

.btnCircSm {
    border-radius: 50% !important;
    width: 70px;
    height: 70px;
    background: var(--surface-card) !important;
    border: 1px solid var(--surface-border) !important;
    color: var(--text-main) !important;
    font-weight: bold;
    transition: all 0.2s;
}

.btnCircSm:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* ==========================================================================
   6. TABS, DIALOGS & MISC
   ========================================================================== */
/* Tabs */
body .ui-tabs .ui-tabs-nav {
    background: transparent !important;
    border-bottom: 2px solid var(--surface-border) !important;
    padding: 0 !important;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header {
    background: transparent !important;
    border: none !important;
    margin-bottom: -2px !important;
    box-shadow: none !important;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header a {
    color: var(--text-secondary) !important;
    font-weight: 600;
    padding: 1rem 1.5rem !important;
    transition: color 0.2s;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active {
    border-bottom: 2px solid var(--primary-color) !important;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a {
    color: var(--primary-color) !important;
}

body .ui-tabs .ui-tabs-panels {
    background: transparent !important;
    border: none !important;
    padding: 20px 0 !important;
}

/* Dialogs */
body .ui-dialog {
    border-radius: var(--radius-md) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    border: none !important;
}

body .ui-dialog .ui-dialog-titlebar {
    background: var(--surface-card) !important;
    border-bottom: 1px solid var(--surface-border) !important;
    color: var(--primary-color) !important;
    padding: 1.2rem !important;
}

/* Breadcrumb */

.mybreadcrumb{
    font-size: 14px !important;
    color:whitesmoke !important;
    font-weight: normal !important;
    border: none !important;
    display: block;
}

.mybreadcrumb .ui-breadcrumb-items li:first-child a.ui-icon-home{
    color: white !important;
}

.mybreadcrumb .ui-breadcrumb-items li:not(.ui-breadcrumb-chevron):before {
    content: ">";
    color: whitesmoke !important;
    margin: 0 0.3rem 0 0.2rem;
}

.mybreadcrumb .ui-breadcrumb-items li:first-child:not(.ui-breadcrumb-chevron):before {
    display: none;
}

.mybreadcrumb .ui-breadcrumb-items .ui-menuitem-link .ui-menuitem-text{
    color: whitesmoke !important;
}

.mybreadcrumb .ui-icon {
    color: orange !important;
    font-size: 1.2rem;
}

/* Growl Messages */
body .ui-growl-item {
    background-color: var(--surface-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
    border-radius: 6px;
}
.ui-growl-image-info ~ .ui-growl-message .ui-growl-title { color: var(--primary-color); }
.ui-growl-image-error ~ .ui-growl-message .ui-growl-title { color: var(--danger-color); }

/* Horizontal Rules */
hr.style-one, hr.myhr {
    height: 1px;
    border: 0;
    background: linear-gradient(to right, rgba(2,132,199,0), rgba(2,132,199,0.5), rgba(2,132,199,0));
    margin: 20px 0;
}

/* Loading Overlay */
#cover {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.9);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   7. HEADER MENU FIXES (Blend into background)
   ========================================================================== */

/* Remove the white box/background from the menubar */
body .ui-menu.ui-menubar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem 1rem !important;
}


/* Change menu icons to white */
body .ui-menu.ui-menubar .ui-menuitem-link .ui-menuitem-icon {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Add a subtle hover effect (semi-transparent white) instead of a solid block */
body .ui-menu.ui-menubar .ui-menuitem-link:hover {
    background: rgba(255, 255, 255, 0.15) !important; /* 15% white opacity */
    border-radius: 6px !important;
}


/* ==========================================================================
   9. SIDEBAR CONTRAST FIX
   ========================================================================== */

@media (min-width: 768px) {
    .flex-box-sidebar-1 {
        order: -1;
        /* Change background from White (--surface-card) to Gray (--surface-ground) */
        background: var(--surface-ground) !important; 
        
        /* Remove the border since the color difference creates the edge now */
        border-right: 1px solid rgba(0,0,0,0.05) !important; 
    }
    
    .hg-sidebar-left {
        flex: 0 0 260px;
    }
}


/* ==========================================================================
   10. TOP TRACK / MENU SPACING FIX
   ========================================================================== */

/* The wrapper we just added */
.toptrack-wrapper {
    /* Flexbox: Do not grow, do not shrink, auto height based on content */
    flex: 0 0 auto; 
    
    /* Visuals */
    width: 100%;
    min-height: 42px; /* Force at least this much height */
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the Menu Bar inside it knows it lives here now */
body .ui-menu.ui-menubar {
    position: relative !important; /* Stop it from floating/overlaying */
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
}

/* Custom menu styles */
.mymenu .ui-menuitem-text {
    font-size: 14px !important;
    color: white !important;
}

.mymenu .ui-menuitem-icon {
    color: whitesmoke !important;
}

.mymenu .ui-state-hover {
    background-color: #48a0d5 !important;
}

.hide-column-names table thead tr {
    display: none;
}

/* ==========================================================================
   11. LIST FORMATTING RESTORATION
   ========================================================================== */

/* Restore bullets and indentation for content areas */
.my-content-panel ul,
.my-content-panel ol,
.ui-panel-content ul,
.ui-panel-content ol {
    margin-left: 20px;       /* Adds indentation */
    padding-left: 20px;      /* Ensures space for bullets */
    list-style-type: disc;   /* Restores the bullet points */
    margin-bottom: 1rem;     /* Spacing after the list block */
}

/* Add breathing room between list items */
.my-content-panel li,
.ui-panel-content li {
    margin-bottom: 5px;      /* Separates individual items */
}

/* Ensure nested lists look correct */
.my-content-panel ul ul,
.ui-panel-content ul ul {
    list-style-type: circle; /* Different bullet for sub-lists */
    margin-top: 5px;
}

.helpTip{
    width: 600px;
    line-height: 1.3em;
    background: #ffe7bd;
}

/* ==========================================================================
   12. TOOLTIP & LIST FIXES (UPDATED)
   ========================================================================== */

/* 1. Add padding to the black tooltip box so text doesn't hit the edges */
.ui-tooltip .ui-tooltip-text {
    padding: 12px 15px !important;
}

/* 2. Target lists inside tooltips AND your custom helpTip */
.ui-tooltip .ui-tooltip-text ul,
.ui-tooltip .ui-tooltip-text ol,
.helpTip ul,
.helpTip ol {
    /* Reset margins so we control the layout */
    margin: 0 !important;
    
    /* CRITICAL: This creates the "gutter" for the bullets to sit in */
    padding-left: 20px !important; 
    
    /* CRITICAL: This forces the bullet to sit to the left of the text, 
       so multi-line text aligns cleanly (hanging indent) */
    list-style-position: outside !important; 
    
    /* Ensure bullets are visible */
    list-style-type: disc !important;
}

/* 3. Spacing between list items */
.ui-tooltip .ui-tooltip-text li,
.helpTip li {
    margin-bottom: 8px !important; /* distinct separation between points */
    margin-left: 0 !important;     /* align strictly to the container */
}