/*Global variables and settings across modes*/

:root {
    --lpx-logo: url('/api/app/tenant-details/company-logo') !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('/api/app/tenant-details/company-logo');
    background-repeat: no-repeat;
    height: 80px;
    width: 250px;
    background-size: cover;
}

:root .lpx-theme-dark .login-brand-logo {
    background-image: url('/api/app/tenant-details/company-logo');
    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('/api/app/tenant-details/company-logo');
    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-sidebar .lpx-brand-logo {
    background-size: contain !important;
    height: auto !important;
    min-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('/api/app/tenant-details/company-logo') !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;
}

/* Enhanced checkbox contrast - Higher specificity to override LeptonX theme */
.form-check .form-check-input,
.dropdown-item .form-check-input,
input.form-check-input {
    border-width: 1px !important;
    border-color: #495057 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1) !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;
    box-shadow: 0 2px 4px rgba(252, 130, 64, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15) !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;
}

.lpx-theme-dark select.form-select {
    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;
}

/* WHY: `Class="sticky-tabs"` is applied to the outer Blazorise <Tabs> wrapper, which
   contains BOTH the nav strip and every TabPanel. Setting position+bg on the wrapper
   itself paints the entire form area with the same colour as the nav, so scrolling
   field values (e.g. AssignmentStatus "Not Started" in the audit New Assignment
   offcanvas) appear to pass through the strip instead of being clipped behind it.
   Target the inner `.nav-tabs` UL instead — that's the element that should actually
   stick at top: 0 while the rest of the form scrolls past it.

   `--lpx-bg` is the LeptonX-resolved offcanvas/page background so the strip matches
   the parent in both light and dark themes; `--bs-body-bg` and `#fff` are progressive
   fallbacks. See bug #9276 (originally fixed in PR 5487 — that fix was incomplete
   because the bg was painted on the wrapper, not the nav). */
.sticky-tabs > .nav,
.sticky-tabs > .nav-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--lpx-bg, var(--bs-body-bg, #fff));
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 
    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: contain !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: contain !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;
}

input[type="date"] .was-validated .form-control:valid, .form-control.is-valid {
    padding-right: 1.5em !important
}

input[type="date"] .was-validated .form-control:invalid, .form-control.is-invalid {
    padding-right: 1.5em !important
}    

.dropdown-remove-toggle {
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-weight: normal !important;
    overflow: hidden !important;
    text-align: start !important;
}

.dropdown-remove-toggle::after {
    border-left: none !important;
    border-right: none !important;
}

/*Fix for Bug 3873: Modal width on User Account Switcher*/
/* Keep mobile behavior; only widen at lg and up */
@media (min-width: 992px) {
    .account_link_users_modals .modal {
        --bs-modal-width: 800px; /* pick your larger-than-500px value */
    }
}

/* SweetAlert2 cancel button: ensure text stays readable on hover */
.swal2-cancel.swal2-styled:hover {
    color: #fff !important;
}

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