:root {
    --danger-shadowColor: 0 0 0 0.2rem rgba(var(--danger-btn-background-rgb), 0.5);
}

.btn-danger, .btn-danger:disabled,
.btn-primary, .btn-primary:disabled {
    background-color: var(--danger-btn-background) !important;
    border-color: var(--danger-btn-border) !important;
    color: #fff !important;
}

    .btn-danger:hover,
    .btn-primary:hover {
        background-color: var(--danger-btn-background-hover) !important;
        border-color: var(--danger-btn-border-hover) !important;
        color: #fff !important;
    }

    .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle,
    .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
        background-color: var(--danger-btn-background-active) !important;
        border-color: var(--danger-btn-border-active) !important;
        color: #fff !important;
    }

    .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle,
    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
        color: #fff !important;
        background-color: var(--danger-btn-background-active) !important;
        border-color: var(--danger-btn-border-active) !important;
    }

        .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus,
        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: var(--danger-shadowColor) !important;
        }

.btn-outline-danger {
    color: var(--danger-btn-background) !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--danger-btn-border) !important;
}

    .btn-outline-danger:hover, .btn-outline-danger:active {
        background-color: var(--danger-btn-background-hover) !important;
        border-color: var(--danger-btn-border-hover) !important;
        color: #fff !important;
    }

    .btn-outline-danger:active, .btn-outline-danger.active, .show > .btn-outline-danger.dropdown-toggle {
        background-color: var(--danger-btn-background-active) !important;
        border-color: var(--danger-btn-border-active) !important;
        color: #fff !important;
    }

    .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle {
        color: #fff !important;
        background-color: var(--danger-btn-background) !important;
        border-color: var(--danger-btn-border) !important;
    }

        .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus {
            box-shadow: var(--danger-shadowColor) !important;
        }

.table thead th, .table tfoot th, .table > thead > tr > th {
    color: var(--danger-btn-background) !important;
}


.menu-toggle {
    background-color: var(--danger-btn-background) !important;
}

.bootstrap-datetimepicker-widget a,
.bootstrap-datetimepicker-widget th,
.bootstrap-datetimepicker-widget span {
    color: var(--danger-btn-background) !important;
}

.daterangepicker * {
    color: var(--danger-btn-background) !important
}

body {
    display: none;
}

.color-template {
    color: var(--danger-btn-background) !important
}

.resizable-dialog {
    position: relative;
    min-width: 400px;
    max-width: 90vw; /* Prevents it from getting too large */
    display: flex;
    flex-direction: column;
}

.resizer {
    position: absolute;
    left: -5px;
    top: 0;
    width: 10px;
    height: 100%;
    cursor: ew-resize;
    z-index: 100000; /* Make sure it's in front of other elements */
}

.hover-color {
    filter: invert(0%) sepia(100%) saturate(1000%) hue-rotate(200deg);
    transition: filter 0.2s ease-in-out;
}

    .hover-color:hover {
        filter: invert(38%) sepia(97%) saturate(746%) hue-rotate(195deg) brightness(98%) contrast(96%);
    }

/* Show / hide password eye-icon toggle */
.nsdx-password-wrapper {
    position: relative;
    display: block;
}

.nsdx-password-wrapper > .form-control {
    padding-right: 36px;
}

.nsdx-password-wrapper > .toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
    z-index: 4;
    line-height: 1;
    background: transparent;
    border: 0;
    user-select: none;
}

    .nsdx-password-wrapper > .toggle-password:hover {
        color: #555;
    }

/* ===== Bootstrap modal — global override =====
   Remove the dark backdrop entirely (per UX feedback: backdrop was blocking clicks /
   covering the dialog due to broken stacking). Modal still renders normally; the
   click-outside-to-close behavior just relies on the modal element itself instead of
   an overlay. */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.fade.show,
.modal-backdrop.in { display: none !important; }
.modal,
.modal.fade,
.modal.fade.show,
.modal.in {
    z-index: 1060 !important;
    /* Very light tint so the page behind doesn't completely show through (which made any infinite
       CSS animation on the dashboard — e.g. approval-badge pulse — bleed through and look like
       the modal itself was flickering). Not dark; just enough to mute background motion. */
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    /* Skip opacity fade — it caused a brief flicker because .modal opacity transitions
       affect the modal-content visibility independently of the slide-in transform. */
    opacity: 1 !important;
    transition: none !important;
}
/* While a modal is open, freeze infinite animations on the dashboard behind it so they don't
   visually leak through the modal background. */
body.modal-open .pdash-approval-badge,
body.modal-open [class*="-pulse"],
body.modal-open [class*="-blink"] { animation: none !important; }
.modal.fade .modal-dialog {
    /* Keep slide-in for modal-right but make it smoother + non-flickering */
    transition: transform .25s ease-out !important;
}
.modal-dialog { z-index: 1070 !important; pointer-events: auto !important; }
.modal-content { pointer-events: auto !important; }
body.modal-open { overflow: auto !important; padding-right: 0 !important; }

/* Select2 + datepicker dropdowns must float ABOVE the modal-dialog (z 1070) when used inside a modal.
   Without this, typing in Status / Service Catalog / etc. inside the Filter panel shows no options
   because the dropdown panel is hidden behind the modal. */
.select2-container--open,
.select2-container--open .select2-dropdown,
.select2-dropdown,
.select2-container--default .select2-results,
.bootstrap-datetimepicker-widget.dropdown-menu { z-index: 1090 !important; }

/* Bootstrap .dropdown-item is an <a>; menu items wired with ng-click (no href) get no pointer
   cursor on hover, unlike items that have an href. This shows up on every detail page's action
   menus (Incident/Change/Problem/Pvm/ServiceDesk/SRM/CI...), so fix it once, app-wide.
   Disabled items keep the default cursor (Bootstrap also sets pointer-events:none on them). */
.dropdown-menu .dropdown-item { cursor: pointer; }
.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item:disabled { cursor: default; }