/* ==============================================
   Light Mode Eye Comfort - Warm Cream Palette
   Ticket: #1489
   Scoped to: body:not(.dark-mode) -- dark mode untouched
   Loaded last in index.html so it wins over style-custom.css,
   buttons-custom.css, and slide-panel.css.
   ============================================== */

body:not(.dark-mode) {
    --e360-bg-page:        #f5f2ee;
    --e360-bg-card:        #faf8f5;
    --e360-bg-sidebar:     #faf8f5;  /* matches --e360-bg-card for unified chrome */
    --e360-bg-nav-hover:   #f0ede8;  /* gentle "darker cream" against the card-tone sidebar */
    --e360-bg-input:       #faf8f5;
    --e360-bg-table-hd:    #eee9e3;
    --e360-bg-row-even:    #f0ede8;
    --e360-border:         #ddd8d0;
    --e360-border-input:   #cec8c0;
    --e360-border-side:    #ddd8d0;  /* lighter border now that sidebar is card-toned */
    --e360-text-primary:   #2a2521;
    --e360-text-muted:     #7a6f65;
    --e360-brand-teal:     #1ab394;
}

/* 1. Page shell. style-custom.css hardcodes #wrapper to #ffffff and
      #page-wrapper to #f3f3f4, both of which leak white/gray under and
      around the sidebar. #wrapper inherits the sidebar tone so the area
      below the sidebar blends; #page-wrapper takes the page tone for the
      main content column. */
body:not(.dark-mode) {
    background-color: var(--e360-bg-page) !important;
    color: var(--e360-text-primary);
}
body:not(.dark-mode) #wrapper {
    background-color: var(--e360-bg-sidebar) !important;
}
body:not(.dark-mode) #page-wrapper,
body:not(.dark-mode) .wrapper-content {
    background-color: var(--e360-bg-page) !important;
}
body:not(.dark-mode) .footer {
    background: var(--e360-bg-card) !important;
    border-top-color: var(--e360-border) !important;
}

/* 2. Sidebar shell (Inspinia: .navbar-static-side) */
body:not(.dark-mode) .navbar-static-side,
body:not(.dark-mode) .sidebar-collapse {
    background-color: var(--e360-bg-sidebar) !important;
    border-right: 1px solid var(--e360-border-side) !important;
}

/* 2a. Sidebar contents - profile/welcome header and nav hover state.
       style-custom.css hardcodes .nav-header to #ffffff and the nav hover
       background to #f5f7fa, both of which clash with the cream sidebar. */
body:not(.dark-mode) .navbar-static-side .nav-header,
body:not(.dark-mode) .nav-header {
    background-color: var(--e360-bg-sidebar) !important;
}
body:not(.dark-mode) .navbar-default .nav > li > a:hover,
body:not(.dark-mode) .navbar-default .nav > li > a:focus,
body:not(.dark-mode) .nav-second-level li a:hover,
body:not(.dark-mode) .nav-second-level li a:focus {
    background-color: var(--e360-bg-nav-hover) !important;
}

/* 3. Top nav bar (Inspinia: .navbar-default) */
body:not(.dark-mode) .navbar-default,
body:not(.dark-mode) nav.navbar.navbar-static-top {
    background-color: var(--e360-bg-card) !important;
    border-bottom-color: var(--e360-border) !important;
}

/* 4. ibox cards/panels (Inspinia primary container) */
body:not(.dark-mode) .ibox,
body:not(.dark-mode) .ibox-content,
body:not(.dark-mode) .ibox-title,
body:not(.dark-mode) .ibox-footer,
body:not(.dark-mode) .panel-default,
body:not(.dark-mode) .panel-default > .panel-heading,
body:not(.dark-mode) .panel-footer {
    background-color: var(--e360-bg-card) !important;
    border-color: var(--e360-border) !important;
}

/* 5. Modals + dropdowns */
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .modal-header,
body:not(.dark-mode) .modal-footer,
body:not(.dark-mode) .dropdown-menu {
    background-color: var(--e360-bg-card) !important;
    border-color: var(--e360-border) !important;
}

/* 6. Slide panels (custom component) */
body:not(.dark-mode) .slide-panel,
body:not(.dark-mode) .slide-panel-header,
body:not(.dark-mode) .slide-panel-content {
    background-color: var(--e360-bg-card) !important;
    border-color: var(--e360-border) !important;
}

/* 7. Native form fields (excludes checkbox/radio/range/color/file) */
body:not(.dark-mode) input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']),
body:not(.dark-mode) select,
body:not(.dark-mode) textarea {
    background-color: var(--e360-bg-input) !important;
    border-color: var(--e360-border-input) !important;
    color: var(--e360-text-primary) !important;
}
body:not(.dark-mode) input:focus,
body:not(.dark-mode) select:focus,
body:not(.dark-mode) textarea:focus {
    border-color: var(--e360-brand-teal) !important;
    box-shadow: 0 0 0 3px rgba(26, 179, 148, 0.15) !important;
}

/* 8. Native tables (Kendo handled separately below) */
body:not(.dark-mode) table.table > thead > tr,
body:not(.dark-mode) table.table > thead > tr > th {
    background-color: var(--e360-bg-table-hd) !important;
}
body:not(.dark-mode) table.table > tbody > tr:nth-child(even) > td {
    background-color: var(--e360-bg-row-even) !important;
}

/* 9. Kendo grids (CDN ocean-blue still loads underneath) */
body:not(.dark-mode) .k-grid,
body:not(.dark-mode) .k-grid-content,
body:not(.dark-mode) .k-grid-container,
body:not(.dark-mode) .k-grid td {
    background-color: var(--e360-bg-card) !important;
    color: var(--e360-text-primary) !important;
}
body:not(.dark-mode) .k-grid-header,
body:not(.dark-mode) .k-grid-header th.k-header {
    background-color: var(--e360-bg-table-hd) !important;
    color: var(--e360-text-primary) !important;
    border-color: var(--e360-border) !important;
}
body:not(.dark-mode) .k-grid tbody tr:nth-child(even) > td {
    background-color: var(--e360-bg-row-even) !important;
}

/* 10. Kendo inputs / pickers / popups */
body:not(.dark-mode) .k-input,
body:not(.dark-mode) .k-picker,
body:not(.dark-mode) .k-textbox,
body:not(.dark-mode) .k-dropdown-wrap,
body:not(.dark-mode) .k-numeric-wrap {
    background-color: var(--e360-bg-input) !important;
    border-color: var(--e360-border-input) !important;
    color: var(--e360-text-primary) !important;
}
body:not(.dark-mode) .k-popup,
body:not(.dark-mode) .k-menu,
body:not(.dark-mode) .k-list-container,
body:not(.dark-mode) .k-calendar,
body:not(.dark-mode) .k-tabstrip-items {
    background-color: var(--e360-bg-card) !important;
    border-color: var(--e360-border) !important;
    color: var(--e360-text-primary) !important;
}

/* 11. Muted text (specific Bootstrap/Inspinia classes only) */
body:not(.dark-mode) .text-muted,
body:not(.dark-mode) small.text-muted,
body:not(.dark-mode) .help-block {
    color: var(--e360-text-muted) !important;
}

/* 12. Generic borders (hr/divider only) */
body:not(.dark-mode) hr,
body:not(.dark-mode) .ibox-footer,
body:not(.dark-mode) .panel-footer {
    border-color: var(--e360-border) !important;
}

/* 13. Inspinia .white-bg utility - was hardcoded to #ffffff in style.css */
body:not(.dark-mode) .white-bg {
    background-color: var(--e360-bg-card) !important;
}

/* 14. Specific named surfaces still hardcoded to white */
body:not(.dark-mode) .breadcrumb,
body:not(.dark-mode) .project-step-strip {
    background-color: var(--e360-bg-card) !important;
}
body:not(.dark-mode) .project-step-strip {
    border-color: var(--e360-border) !important;
}

/* 15. Kendo PanelBar - preserve the intentional blue .k-selected state */
body:not(.dark-mode) .k-panelbar,
body:not(.dark-mode) .k-panelbar > .k-item,
body:not(.dark-mode) .k-panelbar > .k-panelbar-header,
body:not(.dark-mode) .k-panelbar .k-content,
body:not(.dark-mode) .k-panelbar .k-panelbar-content {
    background-color: var(--e360-bg-card) !important;
    border-color: var(--e360-border) !important;
    color: var(--e360-text-primary) !important;
}
body:not(.dark-mode) .k-panelbar > .k-item > .k-link:not(.k-selected):not(.k-state-selected),
body:not(.dark-mode) .k-panelbar > .k-panelbar-header > .k-link:not(.k-selected):not(.k-state-selected) {
    background-color: var(--e360-bg-card) !important;
    color: var(--e360-text-primary) !important;
}
/* Nested group rows (style-custom hardcodes #f9f9f9 / #e9e9e9) */
body:not(.dark-mode) .k-panelbar .k-item .k-group .k-item:nth-child(odd) {
    background-color: var(--e360-bg-card) !important;
}
body:not(.dark-mode) .k-panelbar .k-item .k-group .k-item:nth-child(even) {
    background-color: var(--e360-bg-row-even) !important;
}
/* Hover (style-custom hardcodes #c8e1ff light blue) */
body:not(.dark-mode) .k-panelbar .k-link:hover:not(.k-selected):not(.k-state-selected),
body:not(.dark-mode) .k-panelbar .k-item .k-group .k-item .k-link:hover {
    background-color: var(--e360-bg-nav-hover) !important;
}

/* Brand teal accents (.btn-success, .label-success, .badge-success,
   nav active states, etc.) intentionally untouched. */