:root {
    --gsi-primary-dark: #003333;
    --gsi-primary-light: #006666;
    --gsi-accent-color: #009999;
    --gsi-background-color: #f8f9fa;
    --gsi-border-color: #ddd;
    --gsi-sidebar-height: calc(100vh - 90px);
    --gsi-stage-height: calc(100vh - 100px);
    --gsi-management-stage-menu-height: calc(100vh - 360px);
    --gsi-management-stage-height: calc(100vh - 320px);
}
.interfaceMenu_Sidebar {
    min-height: var(--gsi-sidebar-height);
    max-height: var(--gsi-sidebar-height);
    height: 100%;
    margin-top: 1px;
    background-color: var(--gsi-primary-dark);
    margin-left: -25px;
    min-width: 200px;
    max-width: 250px;
    position: sticky;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-self: flex-start;
}
.interfaceMenu-Sidebar-Footer {
        border: 1px solid #006666;
    padding: 10px;

    margin-top: auto;
    background-color: #003333;
    color: white;
    position: fixed;
    bottom: 50px;
      min-width: 200px;
    max-width: 225px;
     
}
.gsi-icon-svg {
    
    width: 34px;
    height: 34px;
}
.sidemenu {
   min-height: var(--gsi-sidebar-height);
        max-height: var(--gsi-sidebar-height);
        height: 100%;
    max-height: var(--gsi-sidebar-height);
        min-width: 200px;
        max-width: 250px;
    margin-top: 1px;
    background-color: var(--gsi-primary-dark);
    margin-left: -22px;
    overflow-y: auto;
}
.gsi-dialog-body {
    margin: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 12rem);
}
.sidemenu-title {
    font-weight: bold;
    font-size: 20px;
    width: 200px;
}

.stage {
    display: flex;
    flex-direction: column;
    height:var(--gsi-stage-height)  !important;
    min-height: 420px;
}

.hide-labels .nav-link-text {
    display: none;
}

.app-select-button {
    background-color: #fff;
    border: 1px solid #ced4da; /* Standard Bootstrap input border color */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes text and caret to ends */
    width: 100%;
    text-align: left;
}

.app-select-button:hover {
    border-color: #86b7fe; /* Bootstrap focus color */
}

/* Style for the small icon in the button and list */
.app-icon-display {
    width: 24px;
    height: 24px;
    object-fit: contain; /* Prevents image distortion */
    margin-right: 0.75rem;
}
.IconView {
    width: 75px;
    min-width: 75px;
    max-width: 75px;
    padding-left: 0px;
    margin-left: -35px;
}

.gs_icon {
    height: 36px;
    width: 36px;
    margin-right: 20px;
    vertical-align: middle;
}
.gs_sm_icon {
    height: 16px;
    width: 16px;
    margin-right: 10px;
    vertical-align: middle;
}
.gs_md_icon {
    height: 24px;
    width: 24px;
    margin-right: 10px;
    vertical-align: middle;
}
.gs-menu {
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: var(--gsi-primary-dark);
}

.gsi_menuitem {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
}

.gsi_menuitem:hover {
    background-color: #006666;
}
.sidemenu_title_button {
        right: 0px;
    display: inline-block;
    position: relative;
    margin-left: 16px;
}
.gs_headerButton {

    cursor: pointer;
    font-size: 16px;
    margin-right: 10px;
    right: 0px;
    position: absolute;
}

.sb-item .sidebar-text {

    background-color: var(--gsi-primary-dark);
    color: white;
}

.sidebar-footer {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 20px;
    background-color: #003333;
    color: white;
}

.mi_selected {
    background-color: var(--bs-light);

}

.gsi-task-selected {
    border-left: 4px solid var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

.gsi-task-selected .text-body-secondary,
.gsi-task-selected .text-muted {
    color: var(--bs-body-color) !important;
}

.application_list {
        background-color: #fff;
    border: #006666 solid 2px;
    overflow-y: auto;
    max-height: 400px;
}

.applst_item {
    display: flex;
    align-items: Left;
    padding: 2px;
    border-bottom: 1px solid #003333;
    cursor: pointer;
    color: #003333;
    transition: all 0.3s ease;
    
}
td.details-control {
    background: url('../images/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../images/details_close.png') no-repeat center center;
}

.session-details {
    padding: 1em;
    background-color: #f8f9fa;
}
.applst_item:hover {
    background-color: #006666;
}
.table-cell-truncate {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* For responsive tables */
.table-responsive .table-cell-truncate {
    max-width: 150px;
}

/* Specific column widths */
.table td.table-cell-truncate {
    word-wrap: break-word;
    word-break: break-all;
}

/* Show full content on hover */
.table-cell-truncate-maybe:hover {
    overflow: visible;
    white-space: normal;
    background-color: rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
}
.details-cell {
    position: relative;
    cursor: pointer;
}

.details-cell:hover::after {
    content: "Click to view full text";
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 12px;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}

/* Add these rules to your existing styles */
.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
}
.gsi_popup_large {
    max-width: 800px;
    width: 90%;
}
#logsTable {
    width: 100% !important;
    table-layout: fixed;
}

#logsTable th,
#logsTable td {
    width: auto;
    word-wrap: break-word;
}
.gsi_list {
    background-color: #fff;
    border: #006666 solid 2px;
    overflow-y: auto;
    max-height: 400px;
    padding: 1px ;
}
.gsi_listitem {
    display: flex;
    align-items: Left;
    padding: 2px;
    border-bottom: 1px solid #003333;
    cursor: pointer;
    color: #003333;
    transition: all 0.3s ease;
    
}
.gsi_listitem:hover {
    background-color: #006666;
}
.gsi-cardtitle {
    color: white;
    font-weight: bold;
    font-size: x-large;
}
.gsi-cardsubtitle {
    color: white;
    
    font-size: small;
}
 .mobile_header{
        margin-left: -25px;;
    }
/* Mobile navigation scrolling */
.mobile-nav {
    background-color: var(--gsi-primary-dark);
    padding: 5px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.mobile-nav .d-flex {
    flex-wrap: nowrap; /* Prevent items from wrapping to next line */
    min-width: min-content; /* Allow container to expand beyond screen width */
    gap: 5px; /* Add spacing between items */
}

.mobile-nav .gsi_menuitem {
    flex: 0 0 auto; /* Don't shrink, don't grow, auto size */
    min-width: 70px; /* Minimum width for each icon */
    padding: 8px 5px;
}

/* Hide scrollbar but keep functionality */
.mobile-nav::-webkit-scrollbar {
    height: 4px;
}

.mobile-nav::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.mobile-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.mobile-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}


.gs-btn-primary-tab {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary-hover, var(--bs-primary));
  --bs-btn-hover-border-color: var(--bs-primary-hover, var(--bs-primary));
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary-hover, var(--bs-primary));
  --bs-btn-active-border-color: var(--bs-primary-hover, var(--bs-primary));
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

}
.gs-tab-primary-page {
    background-color: var(--bs-primary);
    color: white;
    border: 1px solid var(--bs-primary);
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 12px;
    margin-right: -10px;
    width: 99%;
    overflow-x: hidden;
    overflow-y: auto;
}
.gs-tab-page {
    padding: 20px;
    border: 1px solid #006666;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #006666;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 12px;
    margin-right: -10px;
    width: 99%;
    overflow-x: hidden;
    overflow-y: auto;
}

#gsi_configurestage {
    height: 100%;
    width: 100%;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    padding:5px;
}

#site_interface #appStage {
    height: var(--gsi-stage-height);
    overflow-y: auto;
    overflow-x: hidden;
}

#view-interface    {
    
    
    width: 100%;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    padding:5px;
    margin:5px;
}

.stage-interface    {
    height: var(--gsi-stage-height) !important;
    width: 100%;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    padding:5px;
    margin:5px;
}
.stage-sidebar {
    height: var(--gsi-sidebar-height) !important;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
}

.gsi_scrollable {
    overflow-y: auto;
    
    height: 100%;
}

.gsi_management_stage {
    overflow-y: auto;    
    height: var(--gsi-management-stage-height); 
}
.gsi_management_menu {
    overflow-y: auto;    
    height: var(--gsi-management-stage-menu-height); 
}

/* Ensure the shared GSI popup always gets an internal scrollbar when content is tall. */
#gsi_popup .modal-dialog {
    height: calc(100% - 2rem);
}

#gsi_popup .modal-content {
    max-height: 100%;
    overflow: hidden;
}

#gsi_popup #gsi_PopupForm {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

#gsi_popup #gsi_popup_body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}


@media (max-width: 719px) {
    .mi_selected {
        background-color: #009999;
        padding: 5px 10px;
    }
    .mobile_header{
        margin-left: 25px;
    }

}

/* Declarative GSI Layout System Styles */
.gsi-layout-dashboard {
    background-color: var(--gsi-background-color);
}
.gsi-layout-dashboard .gsi-header-nav {
    border-bottom: 1px solid var(--gsi-border-color);
}
.gsi-layout-dashboard #interfaceMenu_Sidebar {

    position: sticky;
    top: 56px;
    margin: 0;
    padding: 10px;
}
.gsi-layout-dashboard #appStage {
    height: calc(100vh - 106px);
    overflow-y: auto;
}

/* Offcanvas custom overrides */
.gsi-layout-dashboard .offcanvas {
    z-index: 1060;
}
.gsi-layout-dashboard .offcanvas-body {
    background-color: var(--gsi-primary-dark);
}
.gsi-layout-dashboard .offcanvas-body #interface_sidebar_menu {
    margin-left: 0 !important;
    padding: 15px !important;
}

/* GSI Workspace Layout CSS */
.gsi-layout-workspace {
    background-color: #343a40;
}
.gsi-layout-workspace #gsi-left-pane {
    height: calc(100vh - 98px);
    overflow-y: auto;
}
.gsi-layout-workspace #appStage {
    height: calc(100vh - 98px);
    overflow-y: auto;
}

/* GSI Portal Layout CSS */
.gsi-layout-portal {
    background-color: var(--gsi-background-color);
}
.gsi-layout-portal #appStage {
    min-height: 500px;
}

/* Sidebar Floating Tab trigger styling */
#gsi-sidebar-trigger-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
    transition: all 0.3s ease-in-out;
    opacity: 0.9;
}
#gsi-sidebar-trigger-tab:hover {
    padding-left: 14px !important;
    opacity: 1;
    background-color: var(--gsi-primary-light, #006666) !important;
}