:root {
    --primary-color: #6291cf;
    --primary-hover: #2c66b2;
    /* Primary 40 */
    --secondary-color: #248eda;
    /* Chart 1 */
    --secondary-hover: #142836;
    /* Chart 1 Tint */
    --paper-bg: #161A22;
    /* Dark Navy Blue Sidebar/Card Background */
    --paper-border: rgba(255, 255, 255, 0.1);
    /* border/border default (#ffffff1a) */
    --text-primary: #ffffff;
    /* text/Text */
    --text-secondary: rgba(255, 255, 255, 0.5);
    /* text/text grey (#ffffff80) */
    --active-bg: rgba(98, 145, 207, 0.2);
    /* Primary with transparency */
    --active-nav: rgba(98, 145, 207, 0.15);
    /* Active menu item background */
    --active-text: #ffffff;
    --body-bg: #0a0d14;
    /* Deep Space Blue Body Background */
    --success-color: #01fd6a;
    /* status color/success shade */
    --chip-bg: #171717;
    /* surface/back ground card */
    --chip-success-bg: #294836;
    --chip-success-text: #01fd6a;
    --chip-error-bg: #371313;
    --chip-error-text: #ff1e00;
    --chip-warning-bg: #4e451c;
    --chip-warning-text: #ffd600;
    --table-striped: rgba(255, 255, 255, 0.02);
    --divider-color: #ffffff1a;
    --mud-palette-table-striped: var(--paper-bg) !important;
    --scroll-shadow-color: rgba(10, 13, 20, 0.8);
    --pagination-active-bg: var(--primary-color);
    --pagination-active-text: var(--body-bg);
    --input-border-color: rgba(255, 255, 255, 0.4);
    --table-icon-color: var(--text-primary);
}

.light-theme {
    --primary-color: #0e284a;
    --primary-hover: #1c4a87;
    --secondary-color: #1f77b7;
    --secondary-hover: #daf0ff;
    --paper-bg: #f3f3f3;
    --paper-border: rgba(15, 16, 18, 0.1);
    --text-primary: #0f1012;
    --text-secondary: rgba(15, 16, 18, 0.5);
    --active-bg: rgba(14, 40, 74, 0.1);
    --active-nav: rgba(14, 40, 74, 0.15);
    --active-text: #0e284a;
    --body-bg: #ffffff;
    --success-color: #008236;
    --chip-bg: #f2f2f2;
    --chip-success-bg: #c7edd7;
    --chip-success-text: #008236;
    --chip-error-bg: #f3d4d3;
    --chip-error-text: #d71900;
    --chip-warning-bg: #fef3c7;
    --chip-warning-text: #b45309;
    --table-striped: rgba(0, 0, 0, 0.02);
    --divider-color: rgba(15, 16, 18, 0.1);
    --mud-palette-table-striped: var(--paper-bg) !important;
    --scroll-shadow-color: rgba(242, 242, 242, 0.8);
    --pagination-active-bg: var(--primary-color);
    --pagination-active-text: var(--body-bg);
    --input-border-color: rgba(15, 16, 18, 0.4);
    --table-icon-color: var(--text-primary) !important;
}

.dark-theme {
    --primary-color: #6291cf;
    --primary-hover: #2c66b2;
    --secondary-color: #248eda;
    --secondary-hover: #142836;
    --paper-bg: #121620;
    --paper-border: #ffffff1a;
    --text-primary: #ffffff;
    --text-secondary: #ffffff80;
    --active-bg: rgba(98, 145, 207, 0.2);
    --active-nav: rgba(98, 145, 207, 0.15);
    --active-text: #ffffff;
    --body-bg: #0a0d14;
    --success-color: #01fd6a;
    --chip-bg: #171717;
    --chip-success-bg: #294836;
    --chip-success-text: #01fd6a;
    --chip-error-bg: #371313;
    --chip-error-text: #ff1e00;
    --chip-warning-bg: #4e451c;
    --chip-warning-text: #ffd600;
    --mud-palette-table-striped: var(--paper-bg) !important;
    --divider-color: #ffffff1a;
    --scroll-shadow-color: rgba(10, 13, 20, 0.8);
    --pagination-active-bg: var(--primary-color);
    --pagination-active-text: var(--body-bg);
    --input-border-color: rgba(255, 255, 255, 0.4);
    --table-icon-color: var(--text-primary);
}

/* Sidebar menu design matching Figma */
.mud-nav-group.mud-nav-group-expanded {
    background-color: var(--body-bg) !important;
}

.mud-nav-group.mud-nav-group-expanded .mud-collapse-container {
    background-color: var(--body-bg) !important;
}

.nav-link-item.active {
    background-color: var(--paper-bg) !important;
    color: var(--text-primary) !important;
}

/* Table Styles matching Figma spec */
.mud-data-grid.custom-paper {
    background-color: var(--body-bg) !important;
    border: 1px solid var(--paper-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    padding: 10px;
}

/* Header style */
.mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--paper-bg) !important;
    /* var(--backgroundcard) */
    border-bottom: 1px solid var(--paper-border) !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

/* Row styles */
.mud-table-root .mud-table-body .mud-table-row {
    border-bottom: 1px solid var(--paper-border) !important;
}

/* Alternate row styling */
.mud-table-root.mud-table-striped .mud-table-body tr:nth-child(even),
.mud-table-root.mud-striped .mud-table-body tr:nth-child(even),
.mud-table-root.mud-table-striped .mud-table-body .mud-table-row:nth-child(even),
.mud-table-root.mud-striped .mud-table-body .mud-table-row:nth-child(even) {
    background-color: var(--paper-bg) !important;
}

/* Table cells */
.mud-table-cell {
    border-bottom: 1px solid var(--paper-border) !important;
    padding: 18px 24px !important;
}

/* Status chips inside table cells */
.mud-table-cell .mud-chip {
    border-radius: 32px !important;
    padding: 6px 16px !important;
    height: auto !important;
}

/* Table border override */
.mud-table-container {
    border-top: none !important;
}

/* Hide table scrollbar */
.mud-table-container {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.mud-table-container::-webkit-scrollbar {
    display: none !important;
}

/* Pagination container matching Figma */
.mud-item.body-bg {
    background-color: var(--paper-bg) !important;
    border: 1px solid var(--paper-border) !important;
    border-radius: 16px !important;
    margin-top: 16px !important;
    padding: 12px 24px !important;
}

.mud-pagination .mud-pagination-item>* {
    color: var(--text-primary) !important;
}

.mud-pagination .mud-pagination-item .mud-button-filled.mud-button-filled-primary {
    background-color: var(--pagination-active-bg) !important;
    color: var(--pagination-active-text) !important;
    border-radius: 12px !important;
}

/* Rows per page dropdown menu button */
.mud-item.body-bg .mud-button-text {
    background-color: var(--body-bg) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 4px 12px !important;
    border: 1px solid var(--paper-border) !important;
}

/* Outlined export button border color */
.fixed-actions-table .mud-button-outlined {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* Toolbar Search input */
.mud-table-toolbar .mud-input-control {
    margin-top: 0 !important;
}

.mud-table-toolbar .mud-input-outlined-border {
    border-radius: 200px !important;
    border-color: var(--input-border-color) !important;
}

.mud-table-toolbar .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--primary-color) !important;
}

/* All table icons (sort, filter, checkboxes, actions menu) */
.mud-table-root .mud-icon-root,
.mud-table-root .mud-icon-button,
.mud-table-root .mud-svg-icon,
.mud-table-root .mud-checkbox-control,
.mud-table .mud-icon-root.mud-svg-icon,
.mud-table-root .mud-icon-root.mud-svg-icon {
    color: var(--table-icon-color) !important;
    fill: var(--table-icon-color) !important;
}

/* Button icons inside table toolbar (Export, Filters, etc.) */
.mud-table-toolbar .mud-button .mud-button-icon-start,
.mud-table-toolbar .mud-button .mud-icon-root {
    color: inherit !important;
}

/* Active view layout buttons in pagination (Table/Grid view toggles) */
.mud-item.body-bg .bg-primary.text-white {
    background-color: var(--pagination-active-bg) !important;
    color: var(--pagination-active-text) !important;
    border-radius: 8px !important;
}

.mud-item.body-bg .bg-primary.text-white .mud-icon-root {
    color: var(--pagination-active-text) !important;
}

/* Inactive view layout buttons in pagination */
.mud-item.body-bg .text-secondary,
.mud-item.body-bg .mud-icon-button.text-secondary {
    color: var(--text-secondary) !important;
}

/* Disable hover background/color shifts for custom table and pagination buttons */
.mud-item.body-bg .bg-primary.text-white:hover,
.mud-item.body-bg .bg-primary.text-white:focus,
.mud-item.body-bg .bg-primary.text-white:active {
    background-color: var(--pagination-active-bg) !important;
    color: var(--pagination-active-text) !important;
}

.mud-item.body-bg .mud-button-text:hover,
.mud-item.body-bg .mud-button-text:focus {
    background-color: var(--body-bg) !important;
    color: var(--text-primary) !important;
}

.fixed-actions-table .mud-button-outlined:hover,
.fixed-actions-table .mud-button-outlined:focus {
    background-color: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}