:root {
    --commend-blue: #2C6EAB;
    --commend-blue-dark: #1E4F7E;
    --commend-orange: #E67E22;
    --error: #E74C3C;
    --success: #27AE60;
    --warning: #F39C12;
    --bg: #F8F9FA;
    --text-light: #6C757D;
    --border: #DEE2E6;

    /* Theme CSS variables (light defaults) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --header-bg: #2E5090;
    --header-text: #ffffff;
    --tab-active: #2E5090;
    --tab-inactive: #6c757d;
    --text-primary: #333333;
    --text-secondary: #666666;
    --table-header-bg: #2E5090;
    --table-header-text: #ffffff;
    --table-row-even: #ffffff;
    --table-row-odd: #f8f9fa;
    --table-row-hover: #e9ecef;
    --table-row-selected: #fff3cd;
    --btn-primary-bg: #2E5090;
    --btn-primary-text: #ffffff;
    --btn-danger-bg: #e74c3c;
    --btn-danger-text: #ffffff;
    --btn-outline-border: #2E5090;
    --accent-color: #2E5090;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #e74c3c;
    --border-color: #dee2e6;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --card-bg: #ffffff;
    --modal-bg: #ffffff;
    /* Override Bootstrap primary to Commend blue */
    --bs-primary: #2E5090;
    --bs-primary-rgb: 46, 80, 144;
    --bs-link-color: #2E5090;
    --bs-link-hover-color: #243f73;
}

.camera_frame {
    display: flex;
    width: 100%;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;
    /* gap: 20px; */
    /* padding: 5px 5px 5px 5px; */
}

.camera_area {
    width: 100%;
    height: 266px;
    background-color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.camera_icon {
    top:40%;
    margin: 0 auto;
}
.camera_feed {
    max-height: 266px;
    width: 100%;
    object-fit: contain;
}
.map_area {
    width: 100%;
    height: 400px;
    min-height: 400px;
}
.map_area .js-plotly-plot,
.map_area .plotly {
    width: 100% !important;
    height: 100% !important;
}
.graph_map {
    width: 97%;
    height: 100%;
}
.call_mngt_markdown {
    font-weight: bold;
    font-size: 15px;
}

.container {
    width: 100%;
}

.right_element {
    float: right;
}

.right_element_flex {
    display: flex;
    /*flex-direction: column;*/
    justify-content: right;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.section-line {
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 1px;
    margin-bottom: 1px;
}

.section-line hr {
    margin-top: 0px;
    margin-bottom: 0px;
}

.in_app_vert_spacing {
    margin-top: 10px;
    margin-bottom: 2px;
}

.vertical_spacing_sm {
    display: block;
    height: 10px;
    width: 100%;
}

.vertical_spacing_md {
    display: block;
    height: 20px;
    width: 100%;
}

.vertical_spacing_lg {
    display: block;
    height: 40px;
    width: 100%;
}

.spacing_10mm {
    margin-top: 10mm;
}
.in_app_notification {
    margin-top: 10px;
    height: 20px;
}
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 180px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.025em;
    text-rendering: optimizeLegibility;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--accent-color);
    box-sizing: border-box;
    display: block;
    text-rendering: optimizeLegibility;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: 5px;
    margin-top: 0;
}

h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
}

h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.025em;
    text-rendering: optimizeLegibility;
}

.login_page {
    /*background-image: url("login_page.jpg");*/
    background-image: url("IntegrateX_Background_10.jpg");
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*opacity: 0.5;*/
    grid-template-columns: 100%;
    grid-template-rows: 5% 50% 30% 10%;
    justify-content: space-evenly;
}


.logo {
    background-image: url("Your_Logo_Here_2023_07_10.png");
    height: 200px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 140px;
}

.logo_after_login {
    height: 70px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 140px;
}

.headline {
    font-family: "Montserrat", sans-serif;
    font-size: 50px;
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    letter-spacing: .0125em;
    line-height: 130%;
    /*text-transform: uppercase;*/
    margin-top: -20px;
    margin-bottom: 0px;
    /*color: #006ed2;*/
    color: #FFFFFF;
}
.center {
    margin: auto;
    width: 50%;
    /*border: 3px solid green;*/
    padding: 0px;
    text-align: center;
}

.center_100 {
    margin: auto;
    width: 100%;
    /*border: 3px solid green;*/
    text-align: center;
}
.right {
    margin-right: 5px;
    width: 100%;
    padding-right: 10px;
    text-align: right;
}

.login_input {
    display: flex;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-bottom: 0;
}

.login_input input {
    width: 100%;
}

.in_app_input {
    display: flex;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-bottom: 0;
}
.in_app_input input {
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}
.hidden_item {
    display: none;
}
.no_opacity {
    opacity: 1;
}

.call_mngt {
    display: flex;
    /*flex-direction: column;*/
    justify-content: center;
    /* align-items: center; */
    /* gap: 200px; */
    padding-bottom: 0;
}
.call_mngt input{
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}
.col_arrange {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    /* gap: 20px; */
    /* padding-bottom: 0; */
}
.row_arrange {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    /* align-items: center; */
    /* gap: 20px; */
    /* padding-bottom: 0; */
}

.comment_box {
    width: 100%;
    height: calc(266px - 144px);
    /* height: calc(266px - 86px); */
    /* padding-left: 5px;
    padding-right: 5px; */
    padding: 5px;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal_footer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-bottom: 0;
}

.login_button {
    border-radius: 4px;
    background-color: var(--btn-primary-bg);
    border: 1px solid var(--btn-primary-bg);
    color: var(--btn-primary-text);
    text-align: center;
    font-size: 15px;
    padding: 6px 10px;
    width: 200px;
    height: 38px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
    transition-duration: 0.4s;
}

.login_button:hover {
    filter: brightness(0.85);
    content: '\00bb';
    padding-right: 25px;
    right: 0;
}
.invisible_btn_pos {
    position: absolute;
    right: 2mm;
    top: 1mm;
    z-index: 10;
}
.invisible_button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    width: 25mm;
    height: 10mm;
}
.logout_button_link {
    padding: 0;
    border: none;
    background-color: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: blue;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}
.logout_button {
    border-radius: 4px;
    background-color: var(--btn-danger-bg);
    border: 1px solid var(--btn-danger-bg);
    color: var(--btn-danger-text);
    text-align: center;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    padding: 6px 10px;
    width: 100px;
    height: 38px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 2px;
    transition-duration: 0.4s;
}

.logout_button:hover {
    filter: brightness(0.85);
    content: '\00bb';
    padding-right: 25px;
    right: 0;
}

.in_app_button {
    border-radius: 4px;
    background-color: var(--btn-primary-bg);
    border: 1px solid var(--btn-primary-bg);
    color: var(--btn-primary-text);
    text-align: center;
    font-size: 15px;
    width: 170px;
    height: 38px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
    transition-duration: 0.4s;
}

.in_app_button:hover {
    filter: brightness(0.85);
    content: '\00bb';
    padding-right: 25px;
    right: 0;
}

.in_app_button_neg {
    border-radius: 4px;
    background-color: var(--btn-danger-bg);
    border: 1px solid var(--btn-danger-bg);
    color: var(--btn-danger-text);
    text-align: center;
    font-size: 15px;
    padding: 6px 10px;
    width: 170px;
    height: 38px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
    transition-duration: 0.4s;
}

.in_app_button_neg:hover {
    filter: brightness(0.85);
    content: '\00bb';
    padding-right: 25px;
    right: 0;
}

.btn-cancel-action {
    background-color: transparent !important;
    border: 2px solid var(--btn-danger-bg) !important;
    color: var(--btn-danger-bg) !important;
}
.btn-cancel-action:hover {
    background-color: var(--btn-danger-bg) !important;
    color: #fff !important;
}

.btn-door-release {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}
.btn-door-release:hover {
    background-color: #1e7e34 !important;
    border-color: #1e7e34 !important;
}

/* Theme button utility classes */
.btn-theme-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 1px solid var(--btn-primary-bg);
}
.btn-theme-danger {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
    border: 1px solid var(--btn-danger-bg);
}
.btn-theme-outline {
    background-color: transparent;
    color: var(--btn-outline-border);
    border: 1px solid var(--btn-outline-border);
}

.add_del_btn_layout {
    display: flex;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.download_btn_layout {
    display: flex;
    /*flex-direction: column;*/
    justify-content: right;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.button_disable {
    background-color: var(--border-color);
    border: none;
    color: var(--text-secondary);
    text-align: center;
    font-size: 15px;
    width: 170px;
    height: 38px;
    cursor: not-allowed;
    margin: 5px;
    opacity: 0.6;
}

/*DropDown*/
.Select {
    color: black !important;
    font-family: 'Montserrat', sans-serif;
}

.Select-control {
    color: var(--accent-color) !important;
    border-radius: 4px !important;
    /*font-weight: bold;*/
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    /*width: 100%;*/
    /*height: 38px;*/
}

/* .drop_down {
    width: 100%;
    left: 0;
    padding: 10px;
    z-index: 1000;
    position: sticky;
} */

.first_element {
    width: 20%;
    box-sizing: border-box;
}
.second_element {
    flex: 1;
    box-sizing: border-box;
}

.main_frame {
    display: flex;
    width: 100%;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 5px 5px 5px 5px;

}

.custom-tabs-container {
    width: 100%;
}
.custom-tabs {
    border-top-left-radius: 3px;
    background-color: var(--bg-secondary);
    padding: 5px 5px;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
}

.custom-tab {
    color: var(--tab-inactive);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top: 3px solid transparent !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 0px !important;
    background-color: var(--bg-secondary);
    padding: 12px !important;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}


.custom-tab-selected {
    color: var(--tab-active);
    box-shadow: 1px 1px 0px var(--bg-primary);
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    border-top: 3px solid var(--tab-active) !important;
    font-weight: 700;
}

.custom-tab :hover {
    color: var(--tab-active);
    font-weight: 700;
    border-color: var(--bg-secondary);
}

.dbc_tab_active_label {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: var(--tab-active);
    font-weight: 700;
}

.nav-tabs .nav-link {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: var(--tab-inactive);
    padding: 8px 16px;
}

.nav-tabs .nav-link.active {
    color: var(--tab-active);
    font-weight: 700;
    border-top: 3px solid var(--tab-active);
}

.nav-tabs .nav-link:hover {
    color: var(--tab-active);
    font-weight: 700;
}

.operator_page {
    background-image: url('operator.jpg');
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    #grid-template-columns: 100%;
    #grid-template-rows: 5% 50% 30% 10%;
    justify-content: space-evenly;
}

.row_element_container {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 8px;

}

.fixed_height_300px {
    height: 300px;
}

.fixed_height_250px {
    height: 250px;
}

.fixed_height_300px_dmc {
    height: 300px;
    background-color: var(--card-bg);
}
.fixed_height_200px_dmc {
    height: 200px;
    background-color: var(--card-bg);
}

.row_element_container_right {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    gap: 20px;
    width: 100%;

}

.one_sixth_element {
    width: 18%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.one_tenth_element {
    width: 10%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.one_fourth_element {
    width: 25%;
    flex: 1 1 25%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.one_fourth_element_in_col {
    width: 25%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/*2023-04-19*/
.two_fourth_element {
    width: 50%;
}
/*2023-04-19*/

.one_fifth_element {
    width: 19%;
}

.one_half_element {
    width: 50%;
    height: 800px;
}

.one_third_element {
    width: 30%;
}

.profile_icon_dmc {
    cursor: pointer;
    position: absolute;
    right: 16mm;
    top: 2mm
}
.profile_icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    position: absolute;
    right: 16mm;
    top: 2mm
}
.profile_name {
    position: absolute;
    right: 5mm;
    top: 4mm;
    font-size: 16px;
    font-weight: bold;
}
.header_container {
    display: flex;
    justify-content: flex-end;
    position: relative;
}
.header_element {
    flex: 1;
}
.header_last_element {
    position: absolute;
    right: 10mm;
    top: 15mm;
}
.header_1st_element {
    flex-basis: 10%;
}
.header_2nd_element {
    flex-basis: 80%;
}
.header_3st_element {
    flex-basis: 10%;
}
.header_3st_element:last-child {
    margin-right: 1mm;
}
/*-----------------------2023-07-11-------------------------*/

/* Slider
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.range_slider_legend {
    width: 50px;
}

#slider-container {
    background-color: var(--bg-primary);
    padding: 2rem 6rem 4rem 4rem;
    height: 8rem;
}

.rc-slider-dot-active, .rc-slider-handle {
    border-color: var(--accent-color) !important;
}

.rc-slider-track {
    background-color: var(--accent-color) !important
}

.rc-slider-rail {
    background-color: var(--commend-orange) !important
}


#day_range_slider {
    width: 100%;
}

#month_range_slider {
    width: 100%;
}

.today_stat_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-bottom: 5px;
}

.today_index_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.today_index {
    width: 25%;
}

.card_layout {
    width: 100%;
    height: 100%;
    background-color: var(--card-bg);
}
.card_layout .card-body {
    padding: 8px;
    text-align: center;
}
.card_layout_compact {
    width: 100%;
    height: 80px;
    background-color: var(--card-bg);
    display: flex;
    flex-direction: column;
}
.card_layout_compact .card-header {
    font-size: 13px;
    text-align: center;
    padding: 4px 6px !important;
    color: var(--btn-primary-text);
    background-color: #2d3033;
    flex-shrink: 0;
}
.card_layout_compact .card-body {
    padding: 4px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.card_layout_compact .card_body_main,
.card_layout_compact .card_body_main_call_queue {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}
.card_layout_compact .card_body_sub_font {
    font-size: 14px;
}
.card_layout_compact .card_body_footer {
    font-size: 10px;
    margin: 0;
}

.card_layout_with_height {
    width: 100%;
    background-color: var(--card-bg);
    height: 250px;
}

.card_layout_for_table {
    width: 100%;
    color: var(--text-primary);
    background-color: var(--card-bg);
}

.card_one_half_layout {
    width: 100%;
}
.card_header_font {
    font-size: 13px;
    text-align: center;
    padding: 6px 8px !important;
    color: var(--header-text);
    background-color: var(--header-bg);
}
.card_body_sub_font {
    font-size: 18px;
    text-align: center;
    color: var(--accent-color);
}
.card_header_font_dmc {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    color: var(--header-text);
    background-color: var(--header-bg);
}
.card_body_sub_font_dmc {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    text-align: center;
    background-color: var(--card-bg);
    color: var(--accent-color);
}
.offcanvas_header_font {
    font-size: 18px;
    text-align: left;
}
.card_body_main {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.025em;
    text-align: center;
    text-rendering: optimizeLegibility;
    text-align: center;
    color: var(--accent-color);
}
.card_body_main_call_queue {
    font-family: 'Montserrat', sans-serif;
    font-size: 75px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.025em;
    text-rendering: optimizeLegibility;
    text-align: center;
    color: var(--accent-color);
    padding: 35px 0;
}
.card_body_main_dmc {
    font-family: 'Montserrat', sans-serif;
    font-size: 75px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.025em;
    text-rendering: optimizeLegibility;
    text-align: center;
    background-color: var(--card-bg);
    color: var(--accent-color);
}

.card_body_footer {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.025em;
    text-align: center;
    text-rendering: optimizeLegibility;
    text-align: center;
    color: var(--accent-color);
}

.card_body_footer_dmc {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.025em;
    text-rendering: optimizeLegibility;
    text-align: center;
    background-color: var(--card-bg);
    color: var(--accent-color);
}
.today_index {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.today_tbl_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* gap: 20px; */
    width: 100%;
}

.today_tbl {
    /* width: 50%; */
    width: 100%;
}

.today_tbl th {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-color);
}

.today_tbl td {
    text-align: center;
    font-size: 30px;
    border-bottom: 1px solid var(--border-color);
}

.call_queue_tbl {
    overflow: hidden auto;
	position: relative;
}

.call_queue_tbl th {
    /* padding: 12px 15px; */
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    border-bottom: 1px solid #E1E1E1;
    position: sticky;
	top: 0;
}

.call_queue_tbl td {
    /* padding: 12px 15px; */
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    border-bottom: 1px solid #E1E1E1;
}


.overflow_div {
    width: 100%;
	overflow: hidden auto;
    max-height: 150px;
}

.overflow_div thead {
	position: sticky;
	top: 0;
	background: var(--table-header-bg);
}

.overflow_div th {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--table-header-text);
    border-bottom: 1px solid var(--border-color);
}
.overflow_div td {
    text-align: center;
    font-size: 20px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.land {
   background-color: var(--accent-color);
   border: coral thick solid;
   border-radius: 30px;
   display: grid;
   grid-template-columns: 20% 20% 20% 20% 20%;
   justify-content: space-evenly;
}

.frame {
   background-color: lightblue;
   border-color: #d7191c;
   border-style:  double;
   border-width: thick 10px medium 5px;
   border-radius: 20px;
   margin: 2%;
   width: 97%;
   height: 200px;
   padding-top: 1%;
   padding-bottom: 1%;
   box-sizing: border-box;
   display: grid;
   grid-column: 1 / 3;
}

.frame_1 {
   background-color: lightblue;
   border-color: #d7191c;
   border-style:  double;
   border-width: thick 10px medium 5px;
   border-radius: 20px;
   margin: 2%;
   width: 97%;
   height: 200px;
   padding-top: 1%;
   padding-bottom: 1%;
   box-sizing: border-box;
   display: grid;
   grid-column: 3 / span 3;
}
.sub_frame{
   font-size: 50px;
   color: Tomato;
   text-align: center;
   border: 3px solid green;
   margin: auto;
   box-sizing: border-box;
}

.today_stat_tab{
   margin: 20px;
   display: grid;
   grid-template-columns: 20% 20% 20% 20% 20%;
   justify-content: space-evenly;
   align-content: center;
}

.performance_index{
   margin: 1%;
   width: 100%;
   display: grid;
   grid-template-rows: 25% 25% 25% 25%;
}

.performance_index_panel {
   margin: auto;
   width: 100%;
   vertical-align: top;
   border: 3px solid green;
   box-sizing: border-box;
}

.top_caller_panel {
   margin: 1%;
   width: 97%;
   vertical-align: top;
   grid-column: 2 / span 2;
   border: #586069 solid 3px;
}

.last_call_panel {
   margin: 1%;
   width: 97%;
   vertical-align: top;
   grid-column: 4 / span 2;
   border: #586069 solid 3px;
}



.performance_index_panel h3 {
   text-align: center;
   font-size: 30px;
}

.performance_index_panel p {
   padding: .5rem;
}

.performance_index_panel h5 {
   text-align: center;
   padding: .1rem;
   font-size: 20px;
}

/* ===== Speech Recording — ComREC Style ===== */

/* Sticky player bar */
.rec-player-bar {
   position: sticky;
   top: 0;
   z-index: 10;
   background: #e8eaed;
   border-bottom: 1px solid #ccc;
   padding: 10px 16px;
   margin: 0 -15px;
   min-height: 54px;
   overflow: hidden;
}
.rec-player-inner {
   max-width: 100%;
}
.rec-player-info {
   color: #666;
   font-size: 13px;
   padding: 4px 0;
}
.rec-player-now-playing {
   font-weight: 600;
   color: #2C6EAB;
   font-size: 13px;
   margin-bottom: 4px;
}

.rec-volume-slider {
   max-width: 140px;
   flex-shrink: 0;
}
.rec-volume-slider .rc-slider-track { background: #2C6EAB; height: 4px; }
.rec-volume-slider .rc-slider-rail { height: 4px; }
.rec-volume-slider .rc-slider-handle { border-color: #2C6EAB; width: 14px; height: 14px; margin-top: -5px; }

/* Table area */
.rec-table-area {
   margin-top: 8px;
}

/* DataTable overrides for ComREC look */
#rec_data_table .dash-header {
   background-color: var(--table-header-bg) !important;
   color: var(--table-header-text) !important;
   font-weight: 600 !important;
   font-size: 12px !important;
   text-transform: uppercase !important;
   letter-spacing: 0.3px !important;
   border-bottom: 2px solid var(--border-color) !important;
}
#rec_data_table .dash-cell {
   font-size: 13px !important;
   padding: 6px 10px !important;
   border-bottom: 1px solid var(--border-color) !important;
}
#rec_data_table tr td {
   cursor: pointer;
}
#rec_data_table tr:hover td {
   background-color: var(--table-row-hover) !important;
}
#rec_data_table tr.row-selected td,
#rec_data_table .dash-cell.focused {
   background-color: var(--table-row-selected) !important;
   border-color: var(--border-color) !important;
}

/* Detail panel for selected recording — between player and table */
.rec-detail-panel {
   background: #fffcf0;
   border: 1px solid #e0d8a8;
   border-left: 3px solid #e0d8a8;
   border-radius: 4px;
   padding: 16px;
   margin: 8px 0;
}
.rec-detail-panel:empty {
   display: none;
}
.rec-detail-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 12px 24px;
}
.rec-detail-item label {
   display: block;
   font-size: 11px;
   color: #888;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   margin-bottom: 2px;
}
.rec-detail-item span {
   font-size: 13px;
   color: #333;
   font-weight: 500;
}
.rec-detail-actions {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 12px;
   padding-top: 10px;
   border-top: 1px solid #eee;
}
.rec-delete-btn {
   background: #dc3545;
   color: #fff;
   border: none;
   padding: 5px 14px;
   border-radius: 3px;
   font-size: 12px;
   cursor: pointer;
}
.rec-delete-btn:hover {
   background: #c82333;
}
.rec-dnd-label {
   font-size: 12px;
   color: #555;
   display: flex;
   align-items: center;
   gap: 6px;
}

/* Active recording indicator */
@keyframes rec-pulse {
   0%   { opacity: 1; }
   50%  { opacity: 0.3; }
   100% { opacity: 1; }
}
.rec-active-row {
   display: flex;
   align-items: center;
   background: #fff3f3;
   border: 1px solid #ffcccc;
   border-radius: 4px;
   padding: 8px 16px;
   margin-bottom: 6px;
}
.rec-pulse-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #dc3545;
   margin-right: 10px;
   animation: rec-pulse 1.2s ease-in-out infinite;
   flex-shrink: 0;
}
.rec-active-label {
   color: #dc3545;
   font-weight: 700;
   font-size: 12px;
   margin-right: 14px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}
.rec-active-detail {
   color: #333;
   font-size: 12px;
   margin-right: 14px;
}
.rec-active-duration {
   color: #dc3545;
   font-weight: 600;
   font-size: 13px;
   font-variant-numeric: tabular-nums;
   margin-left: auto;
}

/* Waveform canvas */
#rec_waveform_canvas {
   background: #f5f6f8;
   border-radius: 3px;
   border: 1px solid #ddd;
}

/* Settings tab styles */
.settings-upload {
    border: 2px dashed #ccc;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
}
.settings-upload:hover {
    border-color: #2C6EAB;
}
.log-viewer {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 15px;
    border-radius: 4px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ---- Date Picker — layout fixes ---- */
.DateRangePickerInput,
.SingleDatePickerInput {
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
}
.DateInput {
    width: 110px;
}
.DateInput_input {
    font-size: 14px;
    padding: 6px 8px;
    line-height: 1.4;
}
.DateRangePicker_picker,
.SingleDatePicker_picker {
    z-index: 1050 !important;
}
.CalendarDay__selected_span {
    background: #66b3ff;
    color: #fff;
    border: 1px solid #3399ff;
}
.CalendarDay__selected {
    background: #2C6EAB;
    color: #fff;
}
.CalendarDay__selected:hover {
    background: #1d4f7a;
    color: #fff;
}
.row_element_container_right .DateRangePickerInput,
.row_element_container_right .SingleDatePickerInput {
    width: 100%;
}

/* =====================================================================
   DARK THEME — all rules scoped under .dark-theme
   Colors are driven by CSS variables set via the theme customization
   panel. Hardcoded fallbacks match the default dark palette.
   ===================================================================== */
.dark-theme {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ---- Body / global ---- */
.dark-theme .content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Global catch-all for inline-styled text */
.dark-theme span,
.dark-theme div,
.dark-theme td,
.dark-theme th,
.dark-theme li {
    color: inherit;
}

/* ---- Typography ---- */
.dark-theme h1, .dark-theme h2, .dark-theme h3,
.dark-theme h4, .dark-theme h5, .dark-theme h6 {
    color: var(--text-primary) !important;
}
.dark-theme p {
    color: var(--text-secondary);
}
.dark-theme label {
    color: var(--text-secondary);
}
.dark-theme a {
    color: #6ea8fe;
}

/* ---- Main tabs ---- */
.dark-theme .custom-tabs {
    background-color: var(--header-bg);
    border-bottom-color: var(--border-color);
}
.dark-theme .custom-tab {
    color: #ffffff !important;
    background-color: var(--header-bg);
    border-color: var(--border-color) !important;
}
.dark-theme .custom-tab-selected {
    color: #ffffff !important;
    background-color: var(--bg-primary);
    border-top-color: var(--tab-active) !important;
    border-left-color: var(--border-color) !important;
    border-right-color: var(--border-color) !important;
    box-shadow: 1px 1px 0px var(--bg-primary);
}
.dark-theme .custom-tab:hover {
    color: #ffffff !important;
}

/* ---- Sub-tabs (dbc.Tabs / nav-tabs) ---- */
.dark-theme .nav-tabs {
    border-bottom-color: var(--border-color);
}
.dark-theme .nav-tabs .nav-link {
    color: #ffffff !important;
}
.dark-theme .nav-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: var(--bg-primary);
    border-color: var(--border-color) var(--border-color) var(--bg-primary);
    border-top-color: var(--tab-active);
}
.dark-theme .nav-tabs .nav-link:hover {
    color: var(--tab-active);
    border-color: var(--border-color);
}

/* ---- Main frame ---- */
.dark-theme .main_frame {
    background-color: var(--bg-primary);
}

/* ---- Cards ---- */
.dark-theme .card,
.dark-theme .card_layout,
.dark-theme .card_layout_compact,
.dark-theme .card_layout_with_height,
.dark-theme .card_layout_for_table,
.dark-theme .card_one_half_layout {
    background-color: var(--card-bg) !important;
    color: var(--text-primary);
    border-color: var(--border-color);
}
.dark-theme .card_header_font,
.dark-theme .card_header_font_dmc {
    background-color: var(--header-bg);
    color: var(--header-text);
}
.dark-theme .card-header {
    background-color: var(--header-bg);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}
.dark-theme .card-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}
.dark-theme .card_body_sub_font,
.dark-theme .card_body_sub_font_dmc {
    color: var(--text-primary) !important;
    background-color: var(--card-bg);
}
.dark-theme .card_body_main,
.dark-theme .card_body_main_call_queue,
.dark-theme .card_body_main_dmc {
    color: var(--text-primary) !important;
    background-color: var(--card-bg);
}
.dark-theme .card_body_footer,
.dark-theme .card_body_footer_dmc {
    color: var(--text-primary) !important;
    background-color: var(--card-bg);
}

/* ---- Background overrides for dmc fixed-height containers ---- */
.dark-theme .fixed_height_300px_dmc,
.dark-theme .fixed_height_200px_dmc {
    background-color: var(--card-bg);
}

/* ---- Tables (generic) ---- */
.dark-theme table {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}
.dark-theme th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    border-bottom-color: var(--border-color) !important;
}
.dark-theme td {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary);
}
.dark-theme tr:nth-child(even) {
    background-color: var(--table-row-even);
}
.dark-theme tr:nth-child(odd) {
    background-color: var(--table-row-odd);
}
.dark-theme tr:hover {
    background-color: var(--table-row-hover) !important;
}

/* Today / Live stat tables */
.dark-theme .today_tbl th {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
.dark-theme .today_tbl td {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Call queue table */
.dark-theme .call_queue_tbl th {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
.dark-theme .call_queue_tbl td {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Overflow div tables */
.dark-theme .overflow_div {
    background-color: var(--bg-secondary);
}
.dark-theme .overflow_div thead {
    background: var(--table-header-bg);
}
.dark-theme .overflow_div th {
    color: var(--table-header-text) !important;
}
.dark-theme .overflow_div td {
    color: var(--text-primary);
}

/* ---- Dash DataTable ---- */
.dark-theme .dash-spreadsheet-container,
.dark-theme .dash-spreadsheet-inner,
.dark-theme .dash-spreadsheet {
    background-color: var(--bg-secondary) !important;
}
.dark-theme .dash-spreadsheet-container .dash-header {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
}
.dark-theme .dash-spreadsheet-container .dash-cell {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.dark-theme .dash-spreadsheet-container .dash-cell.focused {
    background-color: var(--table-row-selected) !important;
    border-color: var(--accent-color) !important;
}
.dark-theme .dash-spreadsheet-container tr:hover td {
    background-color: var(--table-row-hover) !important;
}
.dark-theme .dash-spreadsheet-container .row-selected td {
    background-color: var(--table-row-selected) !important;
}
.dark-theme .dash-spreadsheet-container .dash-filter input {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
/* DataTable pagination */
.dark-theme .previous-next-container {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.dark-theme .previous-next-container button {
    background-color: var(--header-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.dark-theme .page-number {
    color: var(--text-primary) !important;
}

/* ---- Recording-specific DataTable ---- */
.dark-theme #rec_data_table .dash-header {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    border-bottom-color: var(--border-color) !important;
}
.dark-theme #rec_data_table tr:nth-child(even) td {
    background-color: var(--table-row-even) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
.dark-theme #rec_data_table tr:nth-child(odd) td {
    background-color: var(--table-row-odd) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
.dark-theme #rec_data_table tr:hover td {
    background-color: var(--table-row-hover) !important;
}
.dark-theme #rec_data_table tr.row-selected td,
.dark-theme #rec_data_table .dash-cell.focused {
    background-color: var(--table-row-selected) !important;
    border-left: 3px solid var(--accent-color);
    border-color: var(--accent-color) !important;
}

/* Call history table - dark theme font size */
.dark-theme .dash-table-container td {
    font-size: 14px !important;
}
.dark-theme .dash-table-container th {
    font-size: 14px !important;
}

/* ---- Buttons ---- */
.dark-theme .in_app_button {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.dark-theme .in_app_button:hover {
    filter: brightness(0.85);
}
.dark-theme .in_app_button_neg {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
}
.dark-theme .in_app_button_neg:hover {
    filter: brightness(0.85);
}
.dark-theme .button_disable {
    background-color: var(--border-color);
    color: var(--text-secondary);
}
.dark-theme .login_button {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.dark-theme .logout_button {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
}

/* ---- Input fields, selects, textareas ---- */
.dark-theme input,
.dark-theme select,
.dark-theme textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}
.dark-theme input::placeholder,
.dark-theme textarea::placeholder {
    color: #6c7a89 !important;
}
.dark-theme input:focus,
.dark-theme select:focus,
.dark-theme textarea:focus {
    background-color: var(--input-border) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(44, 110, 171, 0.15) !important;
}

/* ---- Dropdowns (Dash / Select) ---- */
.dark-theme .Select {
    color: var(--text-primary) !important;
}
.dark-theme .Select-control {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}
.dark-theme .Select-menu-outer {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
.dark-theme .Select-option {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
}
.dark-theme .Select-option.is-focused {
    background-color: var(--table-row-hover) !important;
}
.dark-theme .Select-value-label {
    color: var(--text-primary) !important;
}
.dark-theme .Select-placeholder {
    color: #6c7a89 !important;
}
.dark-theme .Select-input input {
    color: var(--text-primary) !important;
}
/* Dash dcc.Dropdown */
.dark-theme .dash-dropdown .Select-control {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}
.dark-theme .dash-dropdown .Select-menu-outer {
    background-color: var(--input-bg) !important;
}
.dark-theme .dash-dropdown .VirtualizedSelectOption {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
}
.dark-theme .dash-dropdown .VirtualizedSelectFocusedOption {
    background-color: var(--table-row-hover) !important;
}

/* ---- Modals ---- */
.dark-theme .modal-content {
    background-color: var(--modal-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.dark-theme .modal-header {
    background-color: var(--header-bg);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}
.dark-theme .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.dark-theme .modal-footer {
    border-top-color: var(--border-color);
}
.dark-theme .modal-body {
    background-color: var(--modal-bg);
    color: var(--text-primary);
}

/* ---- Alerts ---- */
.dark-theme .alert-success {
    background-color: rgba(6, 214, 160, 0.15);
    border-color: var(--success-color);
    color: var(--success-color);
}
.dark-theme .alert-danger {
    background-color: rgba(239, 71, 111, 0.15);
    border-color: var(--danger-color);
    color: var(--danger-color);
}
.dark-theme .alert-warning {
    background-color: rgba(255, 209, 102, 0.15);
    border-color: var(--warning-color);
    color: var(--warning-color);
}
.dark-theme .alert-info {
    background-color: rgba(44, 110, 171, 0.15);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ---- Header bar ---- */
.dark-theme .header_container {
    background-color: var(--header-bg);
}
.dark-theme .profile_name {
    color: var(--text-primary);
}
.dark-theme #icx_status_indicator {
    color: var(--text-secondary);
}

/* ---- Recording player bar ---- */
.dark-theme .rec-player-bar {
    background: var(--header-bg);
    border-bottom-color: var(--border-color);
}
.dark-theme .rec-player-info {
    color: var(--text-secondary);
}
.dark-theme .rec-player-now-playing {
    color: var(--accent-color);
}

/* Waveform canvas */
.dark-theme #rec_waveform_canvas {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

/* Recording detail panel */
.dark-theme .rec-detail-panel {
    background: var(--card-bg);
    border-color: var(--border-color);
    border-left-color: var(--accent-color);
}
.dark-theme .rec-detail-item label {
    color: #6c7a89;
}
.dark-theme .rec-detail-item span {
    color: var(--text-primary);
}
.dark-theme .rec-detail-actions {
    border-top-color: var(--border-color);
}
.dark-theme .rec-dnd-label {
    color: var(--text-secondary);
}

/* Active recording indicator */
.dark-theme .rec-active-row {
    background: rgba(239, 71, 111, 0.1);
    border-color: var(--danger-color);
}
.dark-theme .rec-active-detail {
    color: var(--text-secondary);
}

/* ---- Settings upload area ---- */
.dark-theme .settings-upload {
    border-color: var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
}
.dark-theme .settings-upload:hover {
    border-color: var(--accent-color);
}

/* ---- Slider (rc-slider) ---- */
.dark-theme #slider-container {
    background-color: var(--bg-secondary);
}
.dark-theme .rc-slider-rail {
    background-color: var(--border-color) !important;
}
.dark-theme .rc-slider-track {
    background-color: var(--accent-color) !important;
}
.dark-theme .rc-slider-dot-active,
.dark-theme .rc-slider-handle {
    border-color: var(--accent-color) !important;
    background-color: var(--bg-primary);
}
.dark-theme .rc-slider-mark-text {
    color: var(--text-secondary) !important;
}

/* ---- Radio buttons and checklists (dbc) ---- */
.dark-theme .form-check-label {
    color: var(--text-primary);
}
.dark-theme .form-check-input {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
.dark-theme .form-check-input:checked {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* ---- Date picker ---- */
.dark-theme .DateInput_input {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}
.dark-theme .DateRangePickerInput {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}
.dark-theme .DateRangePickerInput_arrow svg {
    fill: var(--text-secondary) !important;
}
.dark-theme .CalendarMonth_caption {
    color: var(--text-primary);
}
.dark-theme .DayPicker {
    background: var(--card-bg);
}
.dark-theme .CalendarMonth {
    background: var(--card-bg);
}
.dark-theme .CalendarDay__default {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.dark-theme .CalendarDay__default:hover {
    background: var(--table-row-hover);
    border-color: var(--accent-color);
}
.dark-theme .CalendarDay__selected {
    background: var(--accent-color) !important;
    color: #fff !important;
}
.dark-theme .CalendarDay__outside {
    color: #6c7a89;
}
.dark-theme .DayPickerNavigation_button {
    border-color: var(--border-color);
}
.dark-theme .DayPickerNavigation_svg__horizontal {
    fill: var(--text-secondary);
}
.dark-theme .SingleDatePickerInput {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}
.dark-theme .CalendarDay__selected_span {
    background: #3a6fa0 !important;
    color: #fff !important;
    border-color: var(--accent-color) !important;
}
.dark-theme .DayPickerKeyboardShortcuts_show__bottomRight::before {
    border-right-color: var(--accent-color);
}
.dark-theme .CalendarDay__blocked_out_of_range {
    background: var(--bg-primary) !important;
    color: #555 !important;
    border-color: var(--border-color) !important;
}

/* ---- Section lines / HRs ---- */
.dark-theme hr {
    border-color: var(--border-color);
}
.dark-theme .section-line hr {
    border-color: var(--border-color);
}

/* ---- Tabs content background ---- */
.dark-theme .tab-content,
.dark-theme .tab-pane {
    background-color: var(--bg-primary);
}

/* ---- Plotly charts dark background ---- */
.dark-theme .js-plotly-plot .plotly .main-svg {
    background: transparent !important;
}

/* ---- Scrollbar styling ---- */
.dark-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.dark-theme ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #5a5f62;
}

/* ---- Miscellaneous ---- */
.dark-theme .in_app_notification {
    color: var(--text-secondary);
}
.dark-theme .comment_box {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}
.dark-theme .today_stat_layout {
    background-color: var(--bg-primary);
}
.dark-theme .today_stat_container {
    background-color: var(--bg-primary);
}

/* ---- Loading spinners ---- */
.dark-theme .dash-spinner {
    border-color: var(--accent-color) !important;
}

/* ---- Tooltips ---- */
.dark-theme .rc-slider-tooltip-inner {
    background-color: var(--header-bg) !important;
    color: var(--text-primary) !important;
}

/* ---- Theme preview swatches ---- */
.theme-swatch {
    display: inline-block;
    width: 48px;
    height: 28px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
    border: 1px solid #ccc;
    position: relative;
    overflow: hidden;
}
.theme-swatch-inner {
    position: absolute;
    right: 3px;
    top: 3px;
    bottom: 3px;
    width: 18px;
    border-radius: 2px;
}
.dark-theme .theme-swatch {
    border-color: var(--border-color);
}

/* ---- Larger radio buttons (global) ---- */
input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--accent-color);
}

/* ---- Theme color editor ---- */
.theme-radio-group .form-check-input {
    width: 20px;
    height: 20px;
}
.dark-theme input[type="color"] {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

/* =====================================================================
   DARK THEME — COMPREHENSIVE TEXT OVERRIDES
   Override inline styles and any remaining dark-on-dark text.
   Uses !important to beat Dash style={} inline overrides.
   ===================================================================== */

/* Dash DataTable — all cells and headers */
.dark-theme .dash-table-container td,
.dark-theme .dash-table-container th,
.dark-theme .dash-table-container .column-header-name {
    color: var(--text-primary) !important;
}
.dark-theme .dash-table-container .dash-cell div,
.dark-theme .dash-table-container .dash-header div {
    color: inherit !important;
}

/* Operator view specific — card stat values, labels, headers */
.dark-theme .card_body_main *,
.dark-theme .card_body_main_call_queue *,
.dark-theme .card_body_main_dmc *,
.dark-theme .card_body_footer *,
.dark-theme .card_body_footer_dmc *,
.dark-theme .card_body_sub_font *,
.dark-theme .card_body_sub_font_dmc * {
    color: inherit !important;
}

/* Call queue section text */
.dark-theme .call_queue_tbl {
    color: var(--text-primary);
}

/* Call management markdown labels */
.dark-theme .call_mngt_markdown,
.dark-theme .call_mngt_markdown p,
.dark-theme .call_mngt_markdown strong {
    color: var(--text-primary) !important;
}

/* Comment box / text areas */
.dark-theme .comment_box,
.dark-theme .comment_box *,
.dark-theme .comment_box label,
.dark-theme .comment_box span {
    color: var(--text-primary) !important;
}

/* Notifications and status messages */
.dark-theme .in_app_notification,
.dark-theme .in_app_notification * {
    color: var(--text-secondary) !important;
}

/* DataTable filter placeholder */
.dark-theme .dash-spreadsheet-container .dash-filter input::placeholder {
    color: #888 !important;
}

/* Plotly chart text for dark backgrounds */
.dark-theme .js-plotly-plot .plotly .gtitle,
.dark-theme .js-plotly-plot .plotly .xtitle,
.dark-theme .js-plotly-plot .plotly .ytitle {
    fill: var(--text-primary) !important;
}
.dark-theme .js-plotly-plot .plotly .xtick text,
.dark-theme .js-plotly-plot .plotly .ytick text {
    fill: var(--text-secondary) !important;
}

/* Section headers in cards */
.dark-theme .card-header *,
.dark-theme .card_header_font *,
.dark-theme .card_header_font_dmc * {
    color: var(--header-text) !important;
}

/* Insights summary cards */
.dark-theme .insights-summary-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
.dark-theme .insights-summary-card div {
    color: var(--text-primary) !important;
}

/* Card title divs inside card-body */
.dark-theme .card-body .card-title,
.dark-theme .card-body .card-text {
    color: var(--text-primary) !important;
}

/* Catch-all: any div/span inside cards that still has dark text */
.dark-theme .card div,
.dark-theme .card span,
.dark-theme .card p,
.dark-theme .card_layout div,
.dark-theme .card_layout span,
.dark-theme .card_layout_for_table div,
.dark-theme .card_layout_for_table span,
.dark-theme .card_layout_with_height div,
.dark-theme .card_layout_with_height span,
.dark-theme .card_one_half_layout div,
.dark-theme .card_one_half_layout span {
    color: var(--text-primary);
}

/* Row elements and general operator layout */
.dark-theme .row_element_container,
.dark-theme .row_element_container div,
.dark-theme .row_element_container span,
.dark-theme .row_element_container p,
.dark-theme .one_fourth_element,
.dark-theme .one_fourth_element div,
.dark-theme .one_fourth_element span,
.dark-theme .one_fourth_element p {
    color: var(--text-primary);
}

/* Call back icon - dark theme lighter blue for visibility */
.dark-theme .dash-spreadsheet-container td[data-dash-column="Call back"] {
    color: #4A7BC8 !important;
}

/* Camera placeholder - dark theme lighter strokes */
.dark-theme .camera_area {
    border-color: var(--border-color);
}

/* ── User Management Redesign ────────────────────────────────────────────── */

.user-mgmt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0 15px 0;
}

.user-count-badge {
    display: inline-block;
    background: var(--commend-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: 10px;
    vertical-align: middle;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.role-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}
.role-badge.role-admin    { background: #fce4ec; color: #c62828; }
.role-badge.role-supervisor { background: #e3f2fd; color: #1565c0; }
.role-badge.role-operator { background: #f5f5f5; color: #616161; }
.role-badge.role-default  { background: #f5f5f5; color: #9e9e9e; }

.user-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}
.user-table thead th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}
.user-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}
.user-table tbody tr:nth-child(odd) {
    background: var(--table-row-odd);
}
.user-table tbody tr:nth-child(even) {
    background: var(--table-row-even);
}
.user-table tbody tr:hover {
    background: var(--table-row-hover);
}
.user-table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
    color: var(--text-primary);
}
.user-table .user-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-action-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s;
    margin-right: 4px;
}
.user-action-btn:hover {
    background: var(--table-row-hover);
    color: var(--commend-blue);
    border-color: var(--commend-blue);
}
.user-action-btn.btn-delete:hover {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.user-search-bar {
    display: flex;
    gap: 12px;
    padding: 0 0 15px 0;
    align-items: center;
}
.user-search-bar input {
    flex: 1;
    max-width: 320px;
    padding: 8px 14px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
}
.user-search-bar .Select {
    min-width: 180px;
}

.danger-zone {
    border: 1px solid var(--danger-color);
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
}
.danger-zone h5 {
    margin-top: 0;
}

/* Dark theme overrides for user management */
.dark-theme .user-avatar {
    opacity: 0.9;
}
.dark-theme .role-badge.role-admin    { background: #4a1c1c; color: #ef9a9a; }
.dark-theme .role-badge.role-supervisor { background: #1a3a5c; color: #90caf9; }
.dark-theme .role-badge.role-operator { background: #333; color: #bdbdbd; }
.dark-theme .role-badge.role-default  { background: #333; color: #757575; }
.dark-theme .user-action-btn {
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.dark-theme .user-action-btn:hover {
    background: var(--table-row-hover);
}
.dark-theme .user-search-bar input {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}
.dark-theme .danger-zone {
    border-color: var(--danger-color);
}

/* Commend blue buttons on operator dashboard */
.in_app_button, .dark-theme .in_app_button, .dark-theme .btn-primary, .dark-theme .btn {
    background-color: #2E5090 !important;
    border-color: #2E5090 !important;
}
/* Cancel button: white bg, red border/text */
.btn-cancel-action, .dark-theme .btn-cancel-action {
    background-color: #ffffff !important;
    border-color: #e74c3c !important;
    color: #e74c3c !important;
}
/* Door release: green bg, white text */
.btn-door-release, .dark-theme .btn-door-release {
    background-color: #27ae60 !important;
    border-color: #27ae60 !important;
    color: #ffffff !important;
}
/* Hold: grey bg, white text */
.btn-hold-action, .dark-theme .btn-hold-action {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

/* Dark theme date picker fixes */
.dark-theme .DateInput_input {
    background-color: #383C3F !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4f52 !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

.dark-theme .DateRangePickerInput {
    background-color: #383C3F !important;
    border: 1px solid #4a4f52 !important;
    border-radius: 4px !important;
}

.dark-theme .DateRangePickerInput_arrow {
    color: #e0e0e0 !important;
}

.dark-theme .DateRangePickerInput_arrow svg {
    fill: #e0e0e0 !important;
}

.dark-theme .DateInput {
    background-color: #383C3F !important;
}

.dark-theme .DateInput_fang {
    display: none !important;
}

/* Calendar popup */
.dark-theme .DayPicker {
    background-color: #383C3F !important;
}

.dark-theme .CalendarMonth {
    background-color: #383C3F !important;
}

.dark-theme .CalendarMonth_caption {
    color: #e0e0e0 !important;
}

.dark-theme .CalendarDay__default {
    background-color: #383C3F !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4f52 !important;
}

.dark-theme .CalendarDay__default:hover {
    background-color: #505558 !important;
    color: white !important;
}

.dark-theme .CalendarDay__selected {
    background-color: #2E5090 !important;
    color: white !important;
}

.dark-theme .CalendarDay__selected_span {
    background-color: #2E509080 !important;
    color: white !important;
}

.dark-theme .CalendarDay__hovered_span {
    background-color: #2E509060 !important;
    color: white !important;
}

.dark-theme .CalendarDay__blocked_out_of_range {
    background-color: #2d3033 !important;
    color: #6c757d !important;
}

.dark-theme .DayPickerNavigation_button {
    background-color: #383C3F !important;
    border: 1px solid #4a4f52 !important;
}

.dark-theme .DayPickerNavigation_svg__horizontal {
    fill: #e0e0e0 !important;
}

.dark-theme .DayPickerKeyboardShortcuts_buttonReset {
    display: none !important;
}

/* Single date picker */
.dark-theme .SingleDatePickerInput {
    background-color: #383C3F !important;
    border: 1px solid #4a4f52 !important;
    border-radius: 4px !important;
}

/* Time pickers / dropdowns */
.dark-theme .Select-control {
    background-color: #383C3F !important;
    border-color: #4a4f52 !important;
}

.dark-theme .Select-value-label {
    color: #e0e0e0 !important;
}

.dark-theme .Select-menu-outer {
    background-color: #383C3F !important;
    border-color: #4a4f52 !important;
}

.dark-theme .Select-option {
    background-color: #383C3F !important;
    color: #e0e0e0 !important;
}

.dark-theme .Select-option:hover {
    background-color: #505558 !important;
}

.dark-theme .Select-placeholder {
    color: #a0a0a0 !important;
}

/* Make all date picker inputs wider */
.DateInput {
    width: 130px !important;
}

.DateInput_input {
    width: 100% !important;
    font-size: 13px !important;
    padding: 6px 8px !important;
}

.DateRangePickerInput {
    min-width: 300px !important;
}

.SingleDatePickerInput {
    min-width: 150px !important;
}

/* Dark theme width overrides */
.dark-theme .DateInput {
    width: 130px !important;
}

.dark-theme .DateRangePickerInput {
    min-width: 300px !important;
}

/* Call history table — row click + radio centered + dark theme */
.dark-theme .dash-table-container tr {
    cursor: pointer;
}

.dark-theme .dash-table-container td:first-child,
.dark-theme .dash-table-container th:first-child {
    text-align: center !important;
    width: 40px !important;
}

.dark-theme .dash-table-container input[type="radio"] {
    margin: 0 auto;
    display: block;
}

/* Dark theme DataTable overrides */
.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    border-color: #4a4f52 !important;
}

.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell--selected {
    background-color: #2E5090 !important;
    color: #ffffff !important;
}

.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
    background-color: #505558 !important;
    color: #ffffff !important;
}

.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: #2d3033 !important;
    color: #e0e0e0 !important;
    border-color: #4a4f52 !important;
}

.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-filter input {
    background-color: #2d3033 !important;
    color: #e0e0e0 !important;
    border-color: #4a4f52 !important;
}

.dark-theme .dash-table-container .previous-page,
.dark-theme .dash-table-container .next-page,
.dark-theme .dash-table-container .last-page,
.dark-theme .dash-table-container .first-page {
    color: #e0e0e0 !important;
}

.dark-theme .dash-table-container .current-page {
    background-color: #383C3F !important;
    color: #e0e0e0 !important;
    border-color: #4a4f52 !important;
}

/* VMS — Video Surveillance Tab */
.dark-theme details > summary {
    list-style-type: none;
}
.dark-theme details > summary::-webkit-details-marker {
    display: none;
}
.dark-theme details > summary::before {
    content: '\25B6  ';
    font-size: 9px;
    margin-right: 4px;
    display: inline-block;
    transition: transform 0.15s;
}
.dark-theme details[open] > summary::before {
    transform: rotate(90deg);
}
.dark-theme details summary:hover {
    background-color: #383C3F;
    border-radius: 3px;
}
.dark-theme [data-has-camera="true"]:hover {
    background-color: #383C3F !important;
}
.dark-theme [id*="vms-monitor-feed"] {
    transition: border-color 0.15s;
}

/* VMS Grid — shared base */
.vms-grid {
    display: grid;
    gap: 4px;
    height: calc(100vh - 220px);
    overflow-y: auto;
}

/* 1+5 Asymmetric: main spans cols 1-2, rows 1-2; 2 small on right; 3 across bottom */
.vms-grid-1plus5 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.vms-grid-1plus5 > .vms-slot:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.vms-grid-1plus5 > .vms-slot:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}
.vms-grid-1plus5 > .vms-slot:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
}
.vms-grid-1plus5 > .vms-slot:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}
.vms-grid-1plus5 > .vms-slot:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
}
.vms-grid-1plus5 > .vms-slot:nth-child(6) {
    grid-column: 3;
    grid-row: 3;
}

/* 1+7 Asymmetric: 4 cols × 3 rows; main spans cols 1-2 rows 1-2; 7 smalls fill rest */
.vms-grid-1plus7 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.vms-grid-1plus7 > .vms-slot:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.vms-grid-1plus7 > .vms-slot:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}
.vms-grid-1plus7 > .vms-slot:nth-child(3) {
    grid-column: 4;
    grid-row: 1;
}
.vms-grid-1plus7 > .vms-slot:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
}
.vms-grid-1plus7 > .vms-slot:nth-child(5) {
    grid-column: 4;
    grid-row: 2;
}
.vms-grid-1plus7 > .vms-slot:nth-child(6) {
    grid-column: 1;
    grid-row: 3;
}
.vms-grid-1plus7 > .vms-slot:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
}
.vms-grid-1plus7 > .vms-slot:nth-child(8) {
    grid-column: 3 / 5;
    grid-row: 3;
}

/* Uniform grids (2x2, 4x4, 6x6) — columns set inline, rows auto */
.vms-grid-uniform {
    grid-auto-rows: 1fr;
}

/* Main slot highlight — subtle border accent */
.vms-slot-main [id*="vms-monitor-feed"] {
    border-color: #2E5090 !important;
    border-width: 2px;
}

/* Camera tree edit/delete icons — hidden by default, show on hover */
[id*="vms-cam-edit"], [id*="vms-cam-delete"] {
    opacity: 0;
    transition: opacity 0.15s;
}
[id*="vms-camera-item"]:hover [id*="vms-cam-edit"],
[id*="vms-camera-item"]:hover [id*="vms-cam-delete"] {
    opacity: 1;
}
[id*="vms-cam-edit"]:hover { color: #2E5090 !important; }
[id*="vms-cam-delete"]:hover { color: #e74c3c !important; }

/* Camera modal dark theme */
#camera_edit_modal .modal-content,
#camera_delete_modal .modal-content {
    background-color: #2d3033 !important;
    border: 1px solid #4a4f52;
    color: #e0e0e0;
}
#camera_edit_modal .modal-header,
#camera_delete_modal .modal-header {
    border-bottom-color: #4a4f52;
}
#camera_edit_modal .modal-footer,
#camera_delete_modal .modal-footer {
    border-top-color: #4a4f52;
}
#camera_edit_modal .btn-close,
#camera_delete_modal .btn-close {
    filter: invert(1);
}
/* Camera modal dropdowns */
#camera_edit_modal .Select-control,
#camera_edit_modal .Select-menu-outer {
    background-color: #383C3F !important;
    border-color: #4a4f52 !important;
    color: #e0e0e0 !important;
}

/* FORCE Commend blue on ALL buttons - nuclear override */
.btn,
.btn-primary,
.btn-info,
.btn-success,
.btn-secondary,
button[style],
.dark-theme .btn,
.dark-theme .btn-primary,
.dark-theme button,
.dark-theme input[type="button"],
.dark-theme input[type="submit"] {
    background-color: #2E5090 !important;
    border-color: #2E5090 !important;
    color: white !important;
}

/* Exceptions */
.btn-cancel,
button[class*="cancel"],
.dark-theme .btn-outline-danger {
    background-color: transparent !important;
    border-color: #e74c3c !important;
    color: #e74c3c !important;
}

.btn-door-release {
    background-color: #27ae60 !important;
    border-color: #27ae60 !important;
    color: white !important;
}

.btn-hold {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

/* VMS layout buttons — override nuclear button styles */
button.vms-btn-inactive {
    background-color: #383C3F !important;
    border-color: #4a4f52 !important;
    color: #e0e0e0 !important;
}
button.vms-btn-active {
    background-color: #2E5090 !important;
    border-color: #2E5090 !important;
    color: white !important;
}

/* Comment quick-select buttons */
.dark-theme .comment-btn {
    background-color: transparent !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4f52 !important;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.dark-theme .comment-btn:hover {
    background-color: #383C3F !important;
    border-color: #2E5090 !important;
    color: white !important;
}

/* SAVE comment button */
.dark-theme .save-comment-btn {
    background-color: transparent !important;
    color: #2E5090 !important;
    border: 1px solid #2E5090 !important;
    transition: background-color 0.15s, color 0.15s;
}
.dark-theme .save-comment-btn:hover {
    background-color: #2E5090 !important;
    color: white !important;
}

/* Action buttons — outline style with hover fill */
.dark-theme .action-btn {
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.dark-theme .action-btn-answer {
    background-color: transparent !important;
    color: #2E5090 !important;
    border: 1px solid #2E5090 !important;
}
.dark-theme .action-btn-answer:hover {
    background-color: #2E5090 !important;
    color: white !important;
}
.dark-theme .action-btn-cancel {
    background-color: transparent !important;
    color: #e74c3c !important;
    border: 1px solid #e74c3c !important;
}
.dark-theme .action-btn-cancel:hover {
    background-color: #e74c3c !important;
    color: white !important;
}
.dark-theme .action-btn-door {
    background-color: transparent !important;
    color: #27ae60 !important;
    border: 1px solid #27ae60 !important;
}
.dark-theme .action-btn-door:hover {
    background-color: #27ae60 !important;
    color: white !important;
}
.dark-theme .action-btn-hold {
    background-color: transparent !important;
    color: #6c757d !important;
    border: 1px solid #6c757d !important;
}
.dark-theme .action-btn-hold:hover {
    background-color: #6c757d !important;
    color: white !important;
}
.dark-theme .action-btn-mute {
    background-color: transparent !important;
    color: #2E5090 !important;
    border: 1px solid #2E5090 !important;
}
.dark-theme .action-btn-mute:hover {
    background-color: #2E5090 !important;
    color: white !important;
}

/* VMS monitor recording indicator */
.vms-rec-indicator span:first-child {
    animation: rec-pulse 1.5s ease-in-out infinite;
}


/* === CC ADMIN THEME === */

/* Body */
body {
    background: #080B12 !important;
    color: #E2E8F0 !important;
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
}

/* Ambient glow */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 800px 600px at 15% 20%, rgba(59,130,246,0.07) 0%, transparent 70%),
                radial-gradient(ellipse 600px 400px at 85% 80%, rgba(139,92,246,0.05) 0%, transparent 70%);
}

/* Grid pattern */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background-image: linear-gradient(rgba(59,130,246,0.5) 1px, transparent 1px),
                       linear-gradient(90deg, rgba(59,130,246,0.5) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Content above ambient */
#_pages_content, #app_layout_admin, #app_layout_operator, #app_layout, .main-content, ._dash-loading, #react-entry-point {
    position: relative;
    z-index: 1;
}

/* Global font */
* {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
}

/* All text colors */
h1, h2, h3, h4, h5, h6 { color: #F1F5F9 !important; }
p, span, label, div { color: #E2E8F0; }
a { color: #3B82F6; }
a:hover { color: #60A5FA; }

/* Scrollbars */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #080B12; }
::-webkit-scrollbar-thumb { background: #1E3A5F; border-radius: 3px; }

/* Inputs global */
input, textarea, select {
    background: rgba(15,23,42,0.8) !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(30,58,95,0.3) !important;
    border-radius: 6px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: rgba(59,130,246,0.5) !important;
    box-shadow: 0 0 10px rgba(59,130,246,0.15) !important;
    outline: none !important;
}
input::placeholder, textarea::placeholder { color: #475569 !important; }

/* Dropdowns */
.Select-menu-outer { background: #1F2937 !important; }
.VirtualizedSelectOption { color: #CBD5E1 !important; }
.VirtualizedSelectOption:hover { background: rgba(59,130,246,0.15) !important; }
.Select-value-label { color: #CBD5E1 !important; }
.Select-placeholder { color: #475569 !important; }

/* Alerts */
.alert-success { background: rgba(16,185,129,0.15) !important; color: #10B981 !important; border-color: rgba(16,185,129,0.3) !important; }
.alert-danger { background: rgba(239,68,68,0.15) !important; color: #EF4444 !important; border-color: rgba(239,68,68,0.3) !important; }
.alert-warning { background: rgba(245,158,11,0.15) !important; color: #F59E0B !important; border-color: rgba(245,158,11,0.3) !important; }

/* DataTable - global override */
.dash-spreadsheet-container, .dash-spreadsheet { background: transparent !important; border: none !important; }
.dash-spreadsheet-inner th {
    background: rgba(30,58,95,0.15) !important;
    color: #64748B !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(30,58,95,0.2) !important;
    border-color: rgba(30,58,95,0.2) !important;
}
.dash-spreadsheet-inner td {
    color: #CBD5E1 !important;
    border-color: rgba(30,58,95,0.1) !important;
}
.dash-spreadsheet-inner tr:hover td {
    background-color: rgba(59,130,246,0.05) !important;
    color: #F1F5F9 !important;
}
.dash-spreadsheet-inner td.dash-cell--selected {
    background-color: rgba(59,130,246,0.2) !important;
}
.dash-filter input {
    background: rgba(15,23,42,0.8) !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(30,58,95,0.3) !important;
}
.dash-table-container .previous-page,
.dash-table-container .next-page,
.dash-table-container .last-page,
.dash-table-container .first-page { color: #94A3B8 !important; }
.dash-table-container .current-page {
    background: rgba(15,23,42,0.8) !important;
    color: #CBD5E1 !important;
    border-color: rgba(30,58,95,0.3) !important;
}
body.dark-theme .header_container,
body.command-center-theme .header_container {
    background: linear-gradient(90deg, rgba(8,11,18,0.95), rgba(15,23,42,0.9), rgba(8,11,18,0.95)) !important;
    border-bottom: 1px solid rgba(59,130,246,0.15) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.4) !important;
}
body.dark-theme .tab.custom-tab,
body.command-center-theme .tab.custom-tab {
    background: transparent !important;
    color: #64748B !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
body.dark-theme .tab.custom-tab:hover,
body.command-center-theme .tab.custom-tab:hover {
    color: #94A3B8 !important;
}
body.dark-theme .tab.tab--selected.custom-tab-selected,
body.command-center-theme .tab.tab--selected.custom-tab-selected {
    background: rgba(59,130,246,0.15) !important;
    color: #3B82F6 !important;
    border-bottom: 2px solid #3B82F6 !important;
    box-shadow: none !important;
}
body.dark-theme .nav-tabs,
body.command-center-theme .nav-tabs {
    background: rgba(15,23,42,0.5) !important;
    border-bottom: 1px solid rgba(30,58,95,0.2) !important;
}
body.dark-theme .nav-tabs .nav-link,
body.command-center-theme .nav-tabs .nav-link {
    color: #64748B !important;
    font-size: 11px !important;
    border: none !important;
}
body.dark-theme .nav-tabs .nav-link.active,
body.command-center-theme .nav-tabs .nav-link.active {
    background: rgba(59,130,246,0.15) !important;
    color: #3B82F6 !important;
    border-bottom: 2px solid #3B82F6 !important;
}
body.dark-theme .card,
body.command-center-theme .card {
    background: rgba(15,23,42,0.5) !important;
    border: 1px solid rgba(30,58,95,0.3) !important;
    border-radius: 8px !important;
}
body.dark-theme .card-header,
body.command-center-theme .card-header {
    background: rgba(30,58,95,0.15) !important;
    border-bottom: 1px solid rgba(30,58,95,0.2) !important;
    color: #64748B !important;
}
body.dark-theme .modal-content,
body.command-center-theme .modal-content {
    background: rgba(15,23,42,0.95) !important;
    border: 1px solid rgba(59,130,246,0.2) !important;
    border-radius: 12px !important;
    color: #E2E8F0 !important;
}
body.dark-theme .modal-header,
body.command-center-theme .modal-header {
    border-bottom: 1px solid rgba(30,58,95,0.2) !important;
}
body.dark-theme .modal-footer,
body.command-center-theme .modal-footer {
    border-top: 1px solid rgba(30,58,95,0.2) !important;
}
body.dark-theme .offcanvas,
body.command-center-theme .offcanvas {
    background: rgba(15,23,42,0.98) !important;
    color: #E2E8F0 !important;
}
body.dark-theme .btn-primary,
body.command-center-theme .btn-primary {
    background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
    border: none !important;
}
body.dark-theme .btn-success,
body.command-center-theme .btn-success {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border: none !important;
}
body.dark-theme .main_frame,
body.dark-theme .today_stat_layout,
body.command-center-theme .main_frame,
body.command-center-theme .today_stat_layout {
    background: transparent !important;
}
body.dark-theme .queue-container,
body.command-center-theme .queue-container {
    background: rgba(15,23,42,0.5) !important;
    border: 1px solid rgba(30,58,95,0.3) !important;
}
body.dark-theme .js-plotly-plot .plotly .main-svg,
body.command-center-theme .js-plotly-plot .plotly .main-svg {
    background: transparent !important;
}
/* === END CC ADMIN THEME === */

/* === CC COMPREHENSIVE THEME === */

/* ---- Base ---- */
body {
    background: #080B12 !important;
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
    color: #CBD5E1 !important;
}

/* Ambient glow - added via cc_theme.js */

/* ---- Layout backgrounds ---- */
#app_layout, #app_layout_admin, #app_layout_admin > div,
.main_frame, ._pages_content, .tab-content, .tab-pane,
.custom-tabs-container, .rc-tabs-content {
    background: transparent !important;
    background-color: transparent !important;
}

/* ---- Header ---- */
.header_container {
    background: linear-gradient(90deg, rgba(8,11,18,0.95), rgba(15,23,42,0.9), rgba(8,11,18,0.95)) !important;
    border-bottom: 1px solid rgba(59,130,246,0.15) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.4) !important;
    padding: 8px 20px !important;
}
.profile_name, .profile_icon_dmc, .header_element {
    color: #E2E8F0 !important;
}
.headline { color: #F1F5F9 !important; }
hr.section_line_style {
    border-color: rgba(59,130,246,0.15) !important;
    opacity: 0.5 !important;
}

/* ---- Tabs ---- */
.custom-tab {
    background: transparent !important;
    color: #64748B !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 8px 18px !important;
}
.custom-tab:hover { color: #94A3B8 !important; }
.custom-tab-selected, .custom-tab--selected {
    background: rgba(59,130,246,0.15) !important;
    color: #3B82F6 !important;
    border-bottom: 2px solid #3B82F6 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
}
.rc-tabs-tab { color: #64748B !important; }
.rc-tabs-tab-active, .rc-tabs-tab.rc-tabs-tab-active { color: #3B82F6 !important; }
.rc-tabs-ink-bar { background: #3B82F6 !important; }

/* ---- Sub-tabs (dbc.Tabs) ---- */
.nav-tabs { border-bottom: 1px solid rgba(30,58,95,0.3) !important; }
.nav-link {
    color: #64748B !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
}
.nav-link:hover { color: #94A3B8 !important; }
.nav-link.active {
    color: #3B82F6 !important;
    background: rgba(59,130,246,0.08) !important;
    border-bottom-color: #3B82F6 !important;
}

/* ---- Cards ---- */
.card, .card_layout, .card_layout_with_height, .card_layout_for_table {
    background: rgba(15,23,42,0.5) !important;
    border: 1px solid rgba(30,58,95,0.3) !important;
    border-radius: 8px !important;
    color: #CBD5E1 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}
.card-header {
    background: rgba(30,58,95,0.15) !important;
    color: #64748B !important;
    border-bottom: 1px solid rgba(30,58,95,0.2) !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
.card-body {
    background: transparent !important;
    color: #CBD5E1 !important;
}

/* ---- Text ---- */
h1, h2, h3, h4, h5, h6 { color: #F1F5F9 !important; }
p, span, label, div { color: inherit; }
.offcanvas_header_font { color: #F1F5F9 !important; }

/* ---- DataTables ---- */
.dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet {
    background: transparent !important;
}
.dash-spreadsheet-container .dash-spreadsheet-inner th {
    background: rgba(30,58,95,0.15) !important;
    color: #64748B !important;
    border-bottom: 1px solid rgba(30,58,95,0.2) !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.dash-spreadsheet-container .dash-spreadsheet-inner td {
    background: transparent !important;
    color: #CBD5E1 !important;
    border-bottom: 1px solid rgba(30,58,95,0.1) !important;
}
.dash-spreadsheet-container .dash-spreadsheet-inner td.focused {
    background: rgba(59,130,246,0.1) !important;
    outline-color: rgba(59,130,246,0.4) !important;
}
.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
    background: rgba(59,130,246,0.05) !important;
}
.previous-next-container {
    background: transparent !important;
}
.previous-next-container button {
    background: rgba(59,130,246,0.1) !important;
    color: #3B82F6 !important;
    border: 1px solid rgba(59,130,246,0.3) !important;
    border-radius: 4px !important;
}
.page-number { color: #64748B !important; }
.current-page { color: #3B82F6 !important; font-weight: 700 !important; }

/* ---- Forms / Inputs ---- */
input, textarea, select, .Select-control {
    background: #1F2937 !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(30,58,95,0.3) !important;
    border-radius: 6px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: rgba(59,130,246,0.5) !important;
    box-shadow: 0 0 10px rgba(59,130,246,0.1) !important;
}
.Select-menu-outer {
    background: #1F2937 !important;
    border: 1px solid rgba(30,58,95,0.3) !important;
}
.Select-option { color: #CBD5E1 !important; }
.Select-option.is-focused { background: rgba(59,130,246,0.15) !important; }
.Select-value-label, .Select-placeholder, .Select-input input {
    color: #CBD5E1 !important;
}
.Select-arrow-zone .Select-arrow { border-top-color: #64748B !important; }

/* ---- Date pickers ---- */
.DateInput_input {
    background: #1F2937 !important;
    color: #CBD5E1 !important;
    border-bottom-color: rgba(30,58,95,0.3) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
}
.DateRangePickerInput {
    background: #1F2937 !important;
    border: 1px solid rgba(30,58,95,0.3) !important;
    border-radius: 6px !important;
}
.DateRangePickerInput_arrow_svg { fill: #64748B !important; }
.CalendarDay__selected, .CalendarDay__selected:hover {
    background: #3B82F6 !important;
    border-color: #3B82F6 !important;
}
.DayPicker, .CalendarMonthGrid, .CalendarMonth {
    background: #1F2937 !important;
}
.CalendarMonth_caption { color: #E2E8F0 !important; }
.CalendarDay__default { background: #1F2937 !important; color: #CBD5E1 !important; border-color: rgba(30,58,95,0.2) !important; }
.CalendarDay__default:hover { background: rgba(59,130,246,0.2) !important; }
.DayPickerNavigation_button__default {
    background: #1F2937 !important;
    border-color: rgba(30,58,95,0.3) !important;
}
.DayPickerNavigation_svg__horizontal { fill: #64748B !important; }

/* ---- Buttons ---- */
.in_app_button, button.in_app_button {
    background: rgba(59,130,246,0.1) !important;
    color: #3B82F6 !important;
    border: 1px solid rgba(59,130,246,0.25) !important;
    border-radius: 6px !important;
    font-family: 'JetBrains Mono', monospace !important;
    letter-spacing: 1px !important;
}
.in_app_button:hover { background: rgba(59,130,246,0.2) !important; }
.logout_button_link {
    color: #94A3B8 !important;
}
.logout_button_link:hover { color: #E2E8F0 !important; }

/* ---- Plotly charts ---- */
.js-plotly-plot .main-svg, .plot-container, .js-plotly-plot {
    background: transparent !important;
}
.js-plotly-plot .bg { fill: transparent !important; }
.modebar { background: transparent !important; }
.modebar-btn path { fill: #64748B !important; }
.modebar-btn:hover path { fill: #94A3B8 !important; }

/* ---- Audio/Video ---- */
audio {
    width: 100% !important;
    border-radius: 6px !important;
    filter: invert(0.85) hue-rotate(180deg) !important;
}
#rec_waveform_canvas {
    border: 1px solid rgba(30,58,95,0.3) !important;
    border-radius: 4px !important;
}

/* ---- Offcanvas / Modals ---- */
.offcanvas, .offcanvas-body, .offcanvas-end {
    background: rgba(15,23,42,0.95) !important;
    color: #CBD5E1 !important;
    border-left: 1px solid rgba(30,58,95,0.3) !important;
}
.modal-content {
    background: rgba(15,23,42,0.95) !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(59,130,246,0.2) !important;
    border-radius: 12px !important;
}
.modal-header { border-bottom: 1px solid rgba(30,58,95,0.3) !important; }
.modal-footer { border-top: 1px solid rgba(30,58,95,0.3) !important; }
.btn-close { filter: invert(1) !important; }

/* ---- Panels / Containers ---- */
.panel, .comment-section, .queue-container {
    background: rgba(15,23,42,0.4) !important;
    border: 1px solid rgba(30,58,95,0.2) !important;
    border-radius: 8px !important;
}
.camera-monitor { background: #0B0E14 !important; }

/* ---- Gauge / Progress ---- */
.progress { background: rgba(30,58,95,0.3) !important; }
.progress-bar { background: #3B82F6 !important; }

/* ---- Borders ---- */
.row_element_container { gap: 8px !important; }

/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #080B12; }
::-webkit-scrollbar-thumb { background: #1E3A5F; border-radius: 2px; }

/* ---- Badges ---- */
.badge { font-family: 'JetBrains Mono', monospace !important; }
.badge-primary, .bg-primary { background: rgba(59,130,246,0.2) !important; color: #3B82F6 !important; }
.badge-success, .bg-success { background: rgba(16,185,129,0.2) !important; color: #10B981 !important; }
.badge-danger, .bg-danger { background: rgba(239,68,68,0.2) !important; color: #EF4444 !important; }
.badge-warning, .bg-warning { background: rgba(245,158,11,0.2) !important; color: #F59E0B !important; }

/* ---- Alerts ---- */
.alert { border-radius: 6px !important; }
.alert-success { background: rgba(16,185,129,0.1) !important; color: #10B981 !important; border-color: rgba(16,185,129,0.3) !important; }
.alert-danger { background: rgba(239,68,68,0.1) !important; color: #EF4444 !important; border-color: rgba(239,68,68,0.3) !important; }
.alert-warning { background: rgba(245,158,11,0.1) !important; color: #F59E0B !important; border-color: rgba(245,158,11,0.3) !important; }
.alert-info { background: rgba(59,130,246,0.1) !important; color: #3B82F6 !important; border-color: rgba(59,130,246,0.3) !important; }

/* ---- Tooltips ---- */
.tooltip-inner { background: rgba(15,23,42,0.95) !important; color: #CBD5E1 !important; }

/* ---- Loading ---- */
._dash-loading-callback { background-color: transparent !important; }

/* === END CC COMPREHENSIVE THEME === */

/* === CC FINAL FIXES === */
html {
    background-color: #080B12 !important;
    background: #080B12 !important;
}

#page-content, #app_tabs_id-parent, .content, .main_frame, .tab-content {
    background-color: transparent !important;
    background: transparent !important;
}

#app_layout_admin > div:first-child {
    background: linear-gradient(90deg, rgba(8,11,18,0.95), rgba(15,23,42,0.9), rgba(8,11,18,0.95)) !important;
    border-bottom: 1px solid rgba(59,130,246,0.15) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.4) !important;
}

.tab-parent.tab-parent--above-breakpoint {
    background: linear-gradient(90deg, rgba(8,11,18,0.95), rgba(15,23,42,0.9), rgba(8,11,18,0.95)) !important;
    border-bottom: 1px solid rgba(59,130,246,0.15) !important;
}

.dash-spreadsheet-container, .dash-spreadsheet {
    background-color: rgba(15,23,42,0.5) !important;
}
/* === END CC FINAL FIXES === */