/*Global variables and settings across modes*/

:root {
    --lpx-logo: url('/images/logo/logo.png') !important;
    --lpx-logo-icon: url('/images/logo/mark.svg') !important;
    /* -- */
    --lpx-primary-rgb: var(--spw-midnight-blue-rgb);
    --lpx-secondary-rgb: 108,93,211;
    --lpx-brand-rgb: var(--spw-safety-orange-rbg) !important;
    --lpx-success-rgb: 79,191,103;
    --lpx-info-rgb: 67,138,167;
    --lpx-warning-rgb: 255,159,56;
    --lpx-danger-rgb: var(--spw-vivid-orange-rgb);
    --lpx-text-white-rgb: 255,255,255;
    --lpx-logo-reverse: var(--logo-reverse);
    /* -- */
    --lpx-primary: var(--spw-midnight-blue);
    --lpx-secondary: #6c5dd3;
    --lpx-success: #4fbf67;
    --lpx-info: #438aa7;
    --lpx-warning: #ff9f38;
    --lpx-danger: var(--spw-vivid-orange);
    --lpx-brand: var(--spw-safety-orange) !important;
    --lpx-brand-text: #fff;
    --lpx-container-active-text: #fff;
    --lpx-text-white: #fff;
    --lpx-radius: 0.5rem;
    /* -- */
    --lpx-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
    /* -- */
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #355dff;
    --bs-secondary: #6c5dd3;
    --bs-success: #4fbf67;
    --bs-info: #438aa7;
    --bs-warning: #ff9f38;
    --bs-danger: var(--lpx-danger);
    /* -- */
    --bs-primary-rgb: 53, 93, 255;
    --bs-secondary-rgb: 108, 93, 211;
    --bs-success-rgb: 79, 191, 103;
    --bs-info-rgb: 67, 138, 167;
    --bs-warning-rgb: 255, 159, 56;
    --bs-danger-rgb: var(--lpx-danger-rgb);
    /* -- */
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    /* -- */
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: Inter, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    /* -- */
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.4375rem;
    --bs-border-radius-lg: 0.5625rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-link-color: #355dff;
    --bs-link-hover-color: #2a4acc;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd;
    /* -- */
    --spw-navy-blue: #092c44;
    --spw-midnight-blue: #1e3f64;
    --spw-vivid-orange: #e84a36;
    --spw-safety-orange: #fc8240;
    --spw-cedar: #675f5e;
    --spw-sand: #f2ecea;
    /* -- */
    --spw-navy-blue-rgb: 9,44,68;
    --spw-midnight-blue-rgb: 30,63,100;
    --spw-vivid-orange-rgb: 232,74,54;
    --spw-safety-orange-rgb: 252,130,64;
    --spw-cedar-rgb: 103,95,94;
    --spw-sand-rgb: 242,236,234;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* 
    blazorise picker workaround for https://github.com/Megabit/Blazorise/issues/4917
*/
.flatpickr-calendar.static {
    top: unset !important;
}

.login-brand-logo {
    background-image: url('/images/logo/logo.png');
    background-repeat: no-repeat;
    height: 80px;
    width: 250px;
    background-size: cover;
}

:root .lpx-theme-dark .login-brand-logo {
    background-image: url('/images/logo/logo.png');
    background-repeat: no-repeat;
    height: 80px;
    width: 250px;
    background-size: cover;
}

:root .lpx-theme-dim .login-brand-logo, :root .lpx-theme-light .login-brand-logo {
    background-image: url('/images/logo/logo.png');
    background-repeat: no-repeat;
    height: 80px;
    width: 250px;
    background-size: cover;
}

/* Your Global Styles */

/************* CUSTOM CODE ********************/

.lpx-logo-container {
    padding: 10px !important;
}

.lpx-brand-logo {
    background-image: var(--lpx-logo) !important;
    background-repeat: no-repeat;
    background-size: 150px 48px !important;
    background-position: left 0px;
    display: block;
    height: 48px !important;
}

.lpx-theme-dark .modal-footer .btn-outline-primary {
    color: var(--bs-btn-border-color) !important;
}

/*.lpx-sidebar-container .lpx-brand-logo {
    background-image: var(--lpx-logo-icon);
}

#lpx-wrapper.hover-trigger .lpx-brand-logo, .lpx-sidebar-container:hover .lpx-brand-logo {
    background-image: var(--lpx-logo);
    background-size: 150px 48px !important;
}*/
:root {
    --lpx-logo: url('/images/logo/logo.png') !important;
    --lpx-logo-icon: url('/images/logo/mark.svg') !important;
    --bs-nav-tabs-link-active-color: var(--spw-safety-orange) !important;
    --bs-nav-tabs-link-active-border-color: var(--spw-safety-orange) !important;
    --bs-nav-tabs-link-active-color: var(--spw-safety-orange) !important;
}

.nav-tabs .nav-item .nav-link.active {
    border-color: var(--spw-safety-orange) !important;
    border-bottom-color: var(--spw-safety-orange) !important;
    color: var(--spw-safety-orange) !important;
}

.lpx-content .pagination .page-item.active .page-link {
    background-color: var(--spw-safety-orange) !important;
    border-color: var(--spw-safety-orange) !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--spw-safety-orange) !important;
}

form .form-check-input:checked,
.dropdown-item .form-check-input:checked {
    background-color: var(--spw-safety-orange) !important;
    border-color: var(--spw-safety-orange) !important;
}

form select.form-select option:checked,
form select.form-select option:focus,
form select.form-select option:active {
    background: var(--spw-safety-orange) !important;
}

.hover-trigger .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
    width: 82px !important;
}

.lpx-theme-dark input[type^=date],
.lpx-theme-dark input[type="time"] {
    color-scheme: dark;
}

input[type^=date]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    font-size: 1.25em;
}

.lpx-theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator  {
    color-scheme: light;
    filter: invert(1) !important;
}

.row {
    --bs-gutter-x: 0rem !important;
}

.advanced-analytics-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    margin-bottom: 10px;
}

.advanced-analytics-container > div {
    margin-right: 10px;
}

input::-webkit-date-and-time-value {
    text-align: left;
}

.page-item .form-select {
    padding: 4px 30px;
}

@media (max-width: 600px) {
     /* Styles for mobile devices */ 
    .dt-container, .tab-content {
        padding: 1rem !important;
    }

    .dropdown-toggle::after {
        display: none !important;
    }

    .dashboard-data-card {
        border-radius: 10px !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), /* subtle shadow */
        0 2px 4px rgba(125, 125, 125, 0.25) !important; /* inner glow for depth */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .link-container {
        display: table-row-group !important;
        font-weight: bold !important;
    }
    .offcanvas {
        width: 100% !important;
    }

    .title-text {
        font-size: 24px !important;
        letter-spacing: -2.1px;
        text-align: center;
    }

    .login-form-container {
        overflow-y: scroll !important;
        max-height: 90vmin !important;
    }

    .dropdown > div.dropdown-menu {
        z-index: 900 !important;
    }

    .offcanvas-body {
        height: 70vh;
        padding-top: 0 !important;
    }

    .offcanvas-footer {
        position: initial;
    }

    .desktop-only {
        display: none !important;
    }

    .pagination select {
        display: none;
    }

    html, body {
        overscroll-behavior-x: none;
    }

    /* iOS will automatically zoom in on focus for input fields less than 18px. */
    input[type=text],
    input[type=password]{
        font-size: 18px;
    }
}

@media (min-width: 601px) and (max-width: 1680px) {
    /* Styles for tablets and small laptops */
    .login-container {
        height: 100vh;
    }

    .login-image {
        display: none;
    }

    .offcanvas {
        width: 50% !important;
    }

    .offcanvas-body {
        height: 70vh;
        padding-top: 0 !important;
    }

    .title-container-div {
        width: 100% !important;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .title-text {
        font-size: 32px !important;
        letter-spacing: -2.1px;
        text-align: center;
    }
}

@media (min-width: 1681px) {
    /* Styles for large screens */
    .offcanvas {
        width: 33% !important;
    }

    .offcanvas-body {
        height: 85vh;
        padding-top: 0 !important;
    }
}

/* Hide home icon from breadcrumb. */
.lpx-breadcrumb .lpx-breadcrumb-item:nth-child(1) {
    display: none !important;
}

/* Hide home separator from breadcrumb. */
.lpx-breadcrumb .lpx-breadcrumb-separator:nth-child(1) {
    display: none !important;
}

/* Make tenant name bold. */
.lpx-breadcrumb .lpx-breadcrumb-item:nth-child(3) {
    font-weight: bolder !important;
    color: var(--spw-safety-orange) !important;
}

/* Hide icons for third-level menu items and below */
.lpx-inner-menu-item .lpx-inner-menu-item .lpx-menu-item-icon {
    display: none;
}

/* Padding for advanced filters */
div.col-3 > div.form-group,
div.col-md-3 > div.form-group {
    padding: 0 0.25rem;
}

.sticky-tabs {
    position: sticky;
    top: 0;
    z-index: 10; /* Keep the tabs above other content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
}

/* 
    Bug 3846: Mobile | Pop up to switch between accounts is not optimized on mobile devices
*/
ul.lpx-nav-menu[data-lpx-mobile-menu="user"] .b-table th:nth-child(3),
ul.lpx-nav-menu[data-lpx-mobile-menu="user"] .b-table td:nth-child(3) {
    display: none;
}


/************* SIDEBAR LOGO *************/
@media only screen and (min-width: 1200px) {

    .lpx-sidebar-container:hover .lpx-brand-logo {
        background-image: var(--lpx-logo) !important;
        background-size: 150px 48px !important;
    }

    .hover-trigger > .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
        background-image: var(--lpx-logo-icon) !important;
        background-size: 36px !important;
        background-position-x: center !important;
        background-position-y: top !important;
        width: 36px !important;
        margin: 0 auto;
    }

    .hover-trigger > .lpx-sidebar-container:not(:hover) #lpx-sidebar .lpx-logo-container {
        width: 72px !important;
        overflow: hidden;
        background-color: transparent;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
        background-image: var(--lpx-logo-icon) !important;
        background-size: 36px !important;
        background-position-x: center !important;
        background-position-y: top !important;
        width: 36px !important;
        margin: 0 auto;
    }

    .hover-trigger .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
        width: 36px !important;
    }

    .lpx-sidebar-container:hover .lpx-brand-logo {
        background-image: var(--lpx-logo) !important;
        background-size: 150px 48px !important;
    }

    .lpx-sidebar-container:not(:hover) #lpx-sidebar .lpx-logo-container {
        width: 72px !important;
        overflow:hidden;
        background-color: transparent;
    }
}

.btn-secondary {
    --bs-btn-color: #355dff !important;
    --bs-btn-bg: #fff !important;
    --bs-btn-hover-color: #355dff !important;
    --bs-btn-hover-bg: #e6f0ff !important;
    --bs-btn-hover-border-color: #355dff !important;
    --bs-btn-active-color: #355dff !important;
    --bs-btn-active-bg: #fff !important;
    --bs-btn-active-border-color: #355dff !important;
    --bs-btn-disabled-color: #355dff;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #355dff;
}

/************* CUSTOM CODE ENDS ********************/