/************* CSS Variables ****************/
:root {
    /* Dark Theme Base Colors */
    --dark-bg: #121212;
    --dark-surface: #1e1e1e;
    --dark-surface-variant: #2d2d2d;
    --dark-surface-hover: #3d3d3d;
    --dark-surface-active: #4d4d4d;
    --white: #ffffff;
    --purple-primary: #bb86fc;
    --purple-primary-pastel: #e0bbff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --placeholder-color: rgba(255, 255, 255, 0.5);
    --shadow-dark: 0px 10px 8px rgba(0, 0, 0, 0.3);
    --border-subtle: rgba(255, 255, 255, 0.12);
    --opacity-5: .5;
    --background-color: #121212;
    --error-red: #cf6679;
    --red: #f5c20a;

    /* Background Colors */
    --background-primary: var(--dark-bg);
    --background-secondary: var(--dark-surface-variant);
    --background-tertiary: var(--dark-surface);

    /* Grid Colors */
    --grid-border: var(--dark-surface-active);

    /* Input Control Colors */
    --input-control-color: var(--dark-surface-variant);
    --input-text-color: var(--text-primary-color);
    --input-border-color: #cccccc;
    --input-selected-color: var(--purple-primary);
    --input-placeholder-color: var(--placeholder-color);

    /* Theme Colors */
    --primary-theme-color: var(--dark-bg);
    --secondary-theme-color: var(--purple-primary);
    --tertiary-theme-color: var(--purple-primary-pastel);

    /* Primary Button Colors */
    --btn-primary-color: var(--purple-primary);
    --btn-primary-color-text: var(--white);
    --btn-primary-hover-color: var(--dark-surface);
    --btn-primary-hover-color-text: var(--white);
    --btn-primary-focus-color: 0 0 0 0.25rem rgba(187, 134, 252, 0.25); /* #bb86fc */

    /* Secondary Button Colors */
    --btn-secondary-color: var(--dark-surface);
    --btn-secondary-color-text: var(--white);
    --btn-secondary-hover-color: var(--dark-surface);
    --btn-secondary-hover-color-text: var(--white);
    --btn-secondary-focus-color: 0 0 0 0.25rem rgba(45, 45, 45, 0.25); /* #2d2d2d */

    /* Tertiary Button Colors */
    --btn-tertiary-color: var(--dark-surface);
    --btn-tertiary-color-text: var(--purple-primary);
    --btn-tertiary-hover-color: var(--purple-primary);
    --btn-tertiary-hover-color-text: var(--white);
    --btn-tertiary-border-color: var(--purple-primary);
    --btn-tertiary-focus-color: 0 0 0 0.25rem rgba(187, 134, 252, 0.25); /* #bb86fc */
    --btn-tertiary-box-shadow: inset 0 0 0 100px rgba(187, 134, 252, 0.8) !important;

    /* Delete Button Colors */
    --btn-delete-color: var(--error-red);
    --btn-delete-color-text: var(--white);
    --btn-delete-hover-color: var(--dark-surface);
    --btn-delete-hover-color-text: var(--white);
    --btn-delete-focus-color: 0 0 0 0.25rem rgba(207, 102, 121, 0.25); /* #cf6679 */

    /* Text Colors */
    --text-primary-color: var(--white);
    --text-secondary-color: var(--text-secondary);
    --text-contrast-with-primary-theme: var(--dark-surface);
    --text-contrast-with-secondary-theme: var(--white);
    --text-contrast-with-tertiary-theme: var(--dark-surface);
    --text-contrast-with-primary-background: var(--white);
    --text-hyperlink: var(--purple-primary);

    /* Other Controls Colors*/
    --kendo-date-control-header: var(--purple-primary);
    --kendo-date-control-date-selector: var(--purple-primary-pastel);
/* Action Bar*/
    --action-background-color: #1c1c1c;
    --action-button-border: #d7d7d7;
}

body {
    background: var(--dark-bg) !important;
    color: var(--white) !important;
}

/************* Layout Components ****************/
.full-height-row {
    background: var(--dark-bg);
}

.sig-resource-head {    
    background: var(--dark-bg);
    border-bottom: var(--white);
}

/************* Navigation Bar ****************/
.page-navbar {
    background-color: var(--dark-bg);
    border-bottom: 1px solid var(--border-subtle);
}

.page-navbar .navbar-nav > li.open > a {
    background-color: var(--dark-bg);
}

.page-navbar .navbar-nav > li > a i {
    color: var(--white);
}

/************* Sidebar Base Styles ****************/
.page-sidebar {
    background-color: var(--dark-bg) !important;
}

.page-sidebar:after {
    background-color: var(--dark-bg) !important;
}

/************* Main Menu Items ****************/
/* Base Styles */
.page-sidebar .side-nav {
    width: 100%;
}

.page-sidebar .side-nav .nav > li a {
    color: var(--text-secondary);
    position: relative;
    padding: 15px 15px 15px 10px;
    width: 100%;
    display: inline-block;
}

.page-sidebar .side-nav .nav > li a i {
    color: var(--text-secondary);
}

/* Hover States */
.page-sidebar .side-nav .nav > li a:hover {
    background-color: var(--dark-bg);
    color: var(--text-secondary);
}

.page-sidebar .side-nav .nav > li a:hover i {
    color: var(--text-secondary);
}

/* Active States */
.page-sidebar .side-nav .nav > li a.active {
    background-color: var(--dark-bg);
    color: var(--text-secondary);
}

.page-sidebar .side-nav .nav > li a.active i {
    color: var(--text-secondary);
    background-color: var(--dark-bg);
}

/* Collapsed: highlight via li.highlight-menu applied by script (match expanded active) */
.page-sidebar.collapse-sidebar .nav li.hasSub.highlight-menu > a {
    background-color: var(--purple-primary) !important;
    color: var(--white) !important;
}
.page-sidebar.collapse-sidebar .nav li.hasSub.highlight-menu > a i {
    color: var(--white) !important;
    background-color: var(--purple-primary) !important;
}

.page-sidebar .side-nav .nav > li a.active:before {
    background-color: var(--white) !important;
    border-color: var(--border-subtle) !important;
}

/* Expand/Collapse States */
.page-sidebar .side-nav .nav > li a.expand {
    background-color: var(--purple-primary);
    color: var(--white);
}

.page-sidebar .side-nav .nav > li a.expand i {
    color: var(--white);
    font-size: 24px;
}

.page-sidebar .side-nav .nav > li a.notExpand {
    background-color: var(--dark-surface);
    color: var(--text-secondary);
}

.page-sidebar.collapse-sidebar .nav li.hover-li a {
    background-color: var(--dark-surface);
}

.page-sidebar .side-nav .nav > li a.notExpand i {
    background-color: var(--dark-surface);
    color: var(--white);
    font-size: 24px;
}

/************* Submenu Styles ****************/
/* Base Styles */
.page-sidebar .side-nav .nav > li ul.sub {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
}

.page-sidebar .side-nav .nav > li ul.sub > li {
    position: relative;
    margin-bottom: 0;
}

.page-sidebar .side-nav .nav > li ul.sub > li a {
    background-color: var(--dark-bg);
    color: var(--white);
    font-weight: 700;
    padding: 0 3px 0 0;
    position: relative;
    border-left: 3px solid transparent; /* reserve space to avoid shift on hover */
}
.page-sidebar .side-nav .nav > li ul.sub > li a:hover i {
    color: var(--white) !important;
    border-left-color: var(--purple-primary) !important;
}

/* Submenu Icons and Borders */
.page-sidebar .side-nav .nav > li ul.sub > li a i {
    background-color: var(--dark-bg);
    margin-left: 15px;
    border-left: 2px solid var(--border-subtle);
    position: relative;
    display: inline-block;
    padding-left: 10px;
    height: 100%;
}

.page-sidebar .side-nav .nav > li ul.sub > li:last-child a i.indent::before {
    content: '';
    position: absolute;
    left: -2px;
    bottom: 0;
    width: 2px;
    height: 50%;
    background-color: var(--dark-bg);
}

/* Plus Icon Positioning */
.page-sidebar .side-nav .nav > li ul.sub > li:last-child a .lhs_rgt {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.page-sidebar .side-nav .nav > li ul.sub > li:last-child a .lhs_rgt .ficon-plus {
    color: var(--white);
    font-size: 15px;
}

/* Selected Submenu Item */
.page-sidebar .side-nav .nav > li ul.sub > li a.highlight-lhs-select {
    color: var(--purple-primary) !important;
    font-weight: 700 !important;
}

.page-sidebar .side-nav .nav > li ul.sub > li a.highlight-lhs-select i {
    color: var(--white) !important;
    border-left-color: var(--purple-primary);
}

/* Expanded Submenu */
.page-sidebar .side-nav .nav > li ul.sub.show li {
    background-color: var(--dark-bg);
}

.page-sidebar .side-nav .nav > li ul.sub.show li a {
    background-color: var(--dark-bg);
}

.page-sidebar .side-nav .nav > li ul.sub.show li.highlight-menu:last-child:after {
    background-color: var(--text-secondary);
}

.page-sidebar .side-nav .nav > li ul.sub.show li .sub:before,
.page-sidebar .side-nav .nav > li ul.sub.show li .sub:after {
    background-color: var(--text-secondary);
}

.page-sidebar .side-nav .nav > li ul.sub.show li:last-child .sub:after {
    background-color: transparent;
}

/************* Collapsed Sidebar States ****************/
.page-sidebar.collapse-sidebar .nav li.hover-li ul.sub {
    background-color: var(--dark-bg);
}

.page-sidebar.collapse-sidebar .nav li.hover-li ul.sub li a {
    background-color: var(--dark-bg);
    line-height: 30px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.page-sidebar.collapse-sidebar .nav li.hover-li ul.sub li.hasSub a.notExpand {
    background-color: var(--dark-surface);
}

/************* Utility Classes ****************/
.highlight-lhs-select {
    color: var(--white) !important;
}

.indent {
    display: inline-block;
    width: 20px;
    height: auto;
    background-image: url('../images/dot.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 14px;
    vertical-align: middle;
    padding-left: 0;
}

.downarrow-icon {
    background-color: var(--input-control-color, #2d2d2d) !important;
}

/* Use purple dot for selected/active menu items */
.highlight-lhs-select .indent,
.active .indent,
.selected .indent {
    background-image: url('../images/dot_lilac.svg');
}

/* Toggle Sidebar */
.toggle-sidebar {
    position: relative;
    margin-left: 0px !important;
    width: auto !important;
}

.toggle-sidebar > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/************* Grid and UI Components ****************/
.btn-prime {
    border-color: var(--white) !important;
    background-color: var(--purple-primary) !important;
    color: var(--white);
}
.btn-prime:hover {
    box-shadow: inset 0 0 0 100px rgba(0,0,0,0.3);
    text-decoration: none;
}

.buttonAdd, #btnRegister {
    border-color: var(--white) !important;
    background-color: var(--purple-primary) !important;
    color: var(--text-contrast-with-primary-theme) !important;
    border: solid 1px;
}

.buttonAdd:hover {
    box-shadow: inset 0 0 0 100px rgba(0,0,0,0.3);
    text-decoration: none;
}

#btnRegister:hover {
    box-shadow: inset 0 0 0 100px rgba(0,0,0,0.3);
    text-decoration: none;
}

#btnSave {
    border-color: var(--white);
    background-color: var(--purple-primary);
    color: var(--white) !important;
    border-width: 1px !important;
}

#btnSave:hover {
    box-shadow: inset 0 0 0 100px rgba(0,0,0,0.3);
    text-decoration: none;
}

#btnSave:focus,
.buttonAdd:focus {
    border-color: var(--white) !important;
    background-color: var(--purple-primary) !important;
    color: var(--white) !important;
    border-width: 1px !important;
}

.wo-new-btn {
    border-color: var(--white) !important;
    background-color: var(--purple-primary) !important;
    color: var(--white) !important;
}

.Po-btn {
    border-color: var(--white) !important;
    background-color: var(--purple-primary) !important;
    color: var(--white) !important;
}

.Po-btn:hover {
    border-color: var(--white) !important;
    background-color: var(--purple-primary) !important;
    color: var(--white) !important;
}
.po-new-btn {
    border-color: var(--white) !important;
    background-color: var(--purple-primary) !important;
    color: var(--white) !important;
}

.po-new-btn:hover {
    border-color: var(--white) !important;
    background-color: var(--purple-primary) !important;
    color: var(--white) !important;
}

.btn-primary {
    background-color: var(--purple-primary) !important;
    color: var(--white) !important;
    border-color: var(--white) !important;
    text-align: center;
}

.btn-primary:hover {
    background-color: var(--purple-primary) !important;
    color: var(--white) !important;
    border-color: var(--white) !important;
}

.btn-primary:focus:hover {
    background-color: var(--purple-primary) !important;
}

.btn-primary:active {
    background-color: var(--purple-primary) !important;
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: var(--white) !important;
  background-color: var(--purple-primary) !important;
  border-color: var(--white) !important;
  box-shadow: 0 0 0 0.25rem rgba(187, 134, 252, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  color: var(--white) !important;
  background-color: var(--purple-primary) !important;
  border-color: var(--white) !important;
}

.resourceButtonCenter {
    color: var(--white);
    background-color: var(--purple-primary);
}

.ui-accordion-header-active {
    background-color: var(--dark-bg) !important;
    color: var(--text-secondary) !important;
}

/* Kendo Grid Styles */
.k-grouping-header {
    background-color: var(--dark-bg) !important;
    color: var(--text-secondary) !important;
}

.k-pager-numbers .k-selected {
    border-color: var(--dark-bg) transparent transparent !important;
    color: var(--white);
    background: var(--dark-surface-variant);
}

/* not defined directly */
.k-grid .k-selected {
    color: var(--white) !important;
    background-color: var(--purple-primary) !important;
}

.k-pager-wrap .k-pager-numbers .k-link:hover {
    background: var(--dark-surface-hover);
    border-top-color: var(--purple-primary) !important;
    color: var(--dark-bg);
}
.k-grid-header .k-i-sort-asc-sm,
.k-grid-header .k-i-sort-desc-sm,
.k-grid-header .k-sort-order {
    color: var(--dark-bg) !important;
}
.left-side-menu-selected {
    color: var(--text-secondary, cfd8dc) !important;
    background-color: var(--background-tertiary, #1e1e1e);
}

.k-input:hover {
    background-color: var(--input-control-color, #ffffff) !important;
    border: 1px solid var(--bg-tertiary-ouline) !important;
    box-shadow: none !important;
}

/* Add placeholder styles */
::placeholder {
    color: var(--input-placeholder-color) !important;
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--input-placeholder-color) !important;
}

::-ms-input-placeholder {
    color: var(--input-placeholder-color) !important;
}

/************* Kendo Grid Scrollbar Styles ****************/
/* Webkit browsers (Chrome, Safari, Edge) */
.k-grid ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.k-grid ::-webkit-scrollbar-track {
    background: var(--dark-surface-variant);
    border-radius: 6px;
}

.k-grid ::-webkit-scrollbar-thumb {
    background: var(--dark-surface-active);
    border-radius: 6px;
    border: 2px solid var(--dark-surface-variant);
}

.k-grid ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-surface-hover);
}

.k-grid ::-webkit-scrollbar-corner {
    background: var(--dark-surface-variant);
}

/* Firefox */
.k-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--dark-surface-active) var(--dark-surface-variant);
}

/* Kendo Grid specific scrollbar overrides */
.k-grid .k-grid-content::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.k-grid .k-grid-content::-webkit-scrollbar-track {
    background: var(--dark-surface-variant);
    border-radius: 6px;
}

.k-grid .k-grid-content::-webkit-scrollbar-thumb {
    background: var(--dark-surface-active);
    border-radius: 6px;
    border: 2px solid var(--dark-surface-variant);
}

.k-grid .k-grid-content::-webkit-scrollbar-thumb:hover {
    background: var(--dark-surface-hover);
}

.k-grid .k-grid-content::-webkit-scrollbar-corner {
    background: var(--dark-surface-variant);
}

/* Kendo Grid header scrollbar */
.k-grid .k-grid-header::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.k-grid .k-grid-header::-webkit-scrollbar-track {
    background: var(--dark-surface-variant);
    border-radius: 6px;
}

.k-grid .k-grid-header::-webkit-scrollbar-thumb {
    background: var(--dark-surface-active);
    border-radius: 6px;
    border: 2px solid var(--dark-surface-variant);
}

.k-grid .k-grid-header::-webkit-scrollbar-thumb:hover {
    background: var(--dark-surface-hover);
}

.k-grid .k-grid-header::-webkit-scrollbar-corner {
    background: var(--dark-surface-variant);
}

/************* Sidebar Navigation Scrollbar Styles ****************/
/* Webkit browsers (Chrome, Safari, Edge) */
.page-sidebar ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.page-sidebar ::-webkit-scrollbar-track {
    background: var(--dark-surface-variant);
    border-radius: 6px;
}

.page-sidebar ::-webkit-scrollbar-thumb {
    background: var(--dark-surface-active);
    border-radius: 6px;
    border: 2px solid var(--dark-surface-variant);
}

.page-sidebar ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-surface-hover);
}

.page-sidebar ::-webkit-scrollbar-corner {
    background: var(--dark-surface-variant);
}

/* Firefox */
.page-sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--dark-surface-active) var(--dark-surface-variant);
}

/* Sidebar navigation specific scrollbar overrides */
.page-sidebar .side-nav::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.page-sidebar .side-nav::-webkit-scrollbar-track {
    background: var(--dark-surface-variant);
    border-radius: 6px;
}

.page-sidebar .side-nav::-webkit-scrollbar-thumb {
    background: var(--dark-surface-active);
    border-radius: 6px;
    border: 2px solid var(--dark-surface-variant);
}

.page-sidebar .side-nav::-webkit-scrollbar-thumb:hover {
    background: var(--dark-surface-hover);
}

.page-sidebar .side-nav::-webkit-scrollbar-corner {
    background: var(--dark-surface-variant);
}


/* Kendo List View*/
.k-listview {
    background-color: var(--background-color) !important;
}

.k-upload .k-dropzone, .k-upload .k-upload-dropzone {
    background-color: var(--background-secondary) !important;
}

.k-upload-files {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color);
}

.k-file-name {
    color: var(--text-primary-color) !important;
}

.form-control {
    background-color: var(--dark-surface) !important;
    color: var(--white) !important;
}

:root {
    --close-btn-filter: invert(1);
}

/************* NEW Badge Styles ****************/
.new-badge {
    margin-left: 6px;
}

.new-badge-filter {
    filter: brightness(0) saturate(100%) invert(83%) sepia(44%) saturate(7464%) hue-rotate(220deg) brightness(101%) contrast(98%);
}

/* Plus icon subtle hover (icon-only, no layout shift) */
.page-sidebar .side-nav .nav > li ul.sub > li a.lhs_rgt .ficon {
    transition: color 150ms ease, transform 120ms ease, text-shadow 120ms ease;
    display: inline-block;
}
.page-sidebar .side-nav .nav > li ul.sub > li a.lhs_rgt:hover .ficon {
    color: var(--purple-primary) !important;
    transform: scale(1.08);
    text-shadow: 0 0 6px rgba(138, 43, 226, 0.25);
}