/* Style theme for Nagios XI Neptune */

@font-face {
    font-family: 'Geist';
    src: url('../../fonts/Geist-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../../fonts/Geist-Bold.otf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../../fonts/Geist-SemiBold.otf');
    font-weight: 600; 
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../../fonts/Geist-Black.otf');
    font-weight: 900; 
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../../fonts/Geist-Thin.otf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../../fonts/Geist-UltraLight.otf');
    font-weight: 200; 
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../../fonts/Geist-UltraBlack.otf');
    font-weight: 950;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/GeistMono-Regular.otf') format('opentype'),
         url('../../fonts/GeistMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/GeistMono-Bold.otf') format('opentype'),
         url('../../fonts/GeistMono-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/GeistMono-SemiBold.otf') format('opentype'),
         url('../../fonts/GeistMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/GeistMono-Black.otf') format('opentype'),
         url('../../fonts/GeistMono-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/GeistMono-Light.otf') format('opentype'),
         url('../../fonts/GeistMono-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/GeistMono-Medium.otf') format('opentype'),
         url('../../fonts/GeistMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/GeistMono-Thin.otf') format('opentype'),
         url('../../fonts/GeistMono-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/GeistMono-UltraBlack.otf') format('opentype'),
         url('../../fonts/GeistMono-UltraBlack.woff2') format('woff2');
    font-weight: 950;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/GeistMono-UltraLight.otf') format('opentype'),
         url('../../fonts/GeistMono-UltraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
         
@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/GeistMonoVariableVF.ttf') format('truetype'),
    url('../../fonts/GeistMonoVariableVF.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.material-symbols-outlined.md-button {
    padding: 4px;
    border-radius: var(--radius);
}
.material-symbols-outlined.md-button:hover {
    background-color: var(--muted);
    color:var(--foreground);
    transition: background-color 300ms ease, color 300ms ease;
    -ms-transition: background-color 300ms ease, color 300ms ease;
    -webkit-transition: background-color 300ms ease, color 300ms ease;
}

/* Primary container styles to match the rest of the neptune XI interface */
body, body.child, body.parent {
    background-color: var(--background);
    color: var(--foreground);
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 3vh;
    font-family: 'Geist';
}
.childpage {
    padding: 10px 20px;
}
.card {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0px;
}
h2 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px !important;
    padding-bottom: 10px;
}
a {
    color: var(--primary);
}

/* Button styles altered from neptune.css for Next, Cancel, and Back buttons */
/* 
    btn-primary for Next
    btn-default for Back
    btn-select-template for Finish with Templates
    btn-success for Finish
    btn-save-template for Save as Template
*/
.btn:not(.btn-link) {
    height: 36px;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    padding: 8px 16px;
    display: flex;
    gap: 5px;
    align-items: center;
    background-color: var(--primary);
    border-radius:var(--radius);
    border: 1px solid var(--border);
}
.btn:hover {
    color: var(--primary-foreground);
    background-color: var(--primary-hover);
}
.btn.btn-default {
    background-color: var(--background);
    color: var(--foreground);
    border: none;
}
.btn.btn-default:hover {
    background-color: var(--background);
}
/* Chevron translations */
.btn.btn-default i {
    transition: color 0.3s ease, transform 0.3s ease;
}
.btn.btn-default:hover i {
    transform: translateX(-3px);
}
.btn-primary i {
    transition: color 0.3s ease, transform 0.3s ease;
}
.btn-primary:hover i {
    transform: translateX(3px);
}
.btn.btn-select-template {
    color: var(--foreground);
    background-color: var(--secondary);
    border: none;
}
.btn.btn-select-template:hover, .btn.btn-select-template:focus, .btn.btn-select-template:active {
    background-color: var(--muted);
    border: none;
}
.btn.btn-success, .btn.btn-save-template {
    background-color: var(--secondary);
    border: none;
}
.btn.btn-success:hover, .btn.btn-save-template:hover {
    background-color: var(--muted);
    color: var(--foreground);
}
.btn.btn-lg {
    max-width: 270px;
}
.btn-link:hover,
.btn-check+.btn:hover {
    color: var(--foreground);
    background-color: var(--background);
}
.btn:not(.btn-link, .btn-check+.btn):focus {
    box-shadow: none;
    color: var(--foreground);
}
.btn-primary { 
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: 1px solid var(--border);
    font-weight: 400;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--primary-hover);
    border-color: var(--border);
    transition: background-color 300ms ease, border-color 300ms ease;
    -webkit-transition: background-color 300ms ease, border-color 300ms ease;
    -ms-transition: background-color 300ms ease, border-color 300ms ease;
}
.btn-default:hover, .btn-info:hover {
    color: var(--secondary-foreground);
    background-color: var(--secondary);
}
.btn.btn-primary:focus {
    background-color: var(--primary);
}

a.btn-link {
    color: var(--primary);
}

/* Form control styles ported over from neptune.css */
form .form-control,
.form-control, .form-select {
    line-height: 20px;
    display: inline-block;
    width: 100%;
    height: 36px;
    margin: 0;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--radius);
}

select.form-control {
    padding: 8px 12px;
    height: 36px;
    line-height: 20px;
}
/* Will need to be styled to match Shewlin's disabled styles */
.form-select:disabled {
    background-color: var(--wizard-form-disabled);
}
form .form-control:focus, .form-control:focus, .form-select:focus {
    box-shadow: none;
    border-color: var(--ring);
    background-color:var(--input);
    color: var(--foreground);
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { 
    background-color: var(--muted);
    font-family:"Geist Mono";
}
.form-control::placeholder {
    color: var(--placeholder-text); 
}
.form-control, .form-select {
    background-color:var(--input);
    border-radius: var(--radius);
    border: 0.5px solid var(--border);
    color: var(--foreground);
}
.rounded {
    border-radius: var(--radius) !important;
}
.rounded-start {
    border-bottom-left-radius: var(--radius) !important;
    border-top-left-radius: var(--radius) !important;
}
.rounded-end {
    border-bottom-right-radius: var(--radius) !important;
    border-top-right-radius: var(--radius) !important;
}

.btn.btn-show-secret {
    background-color: var(--primary-foreground);
    color: var(--foreground);
}
.btn.btn-show-secret:focus { 
    background-color: var(--primary-foreground);
}
.btn.btn-show-secret:hover {
    color: var(--foreground);
    background-color: var(--secondary);
    border-color: var(--border);
}

/* Tooltip styles */
.tooltip {
    font-size: 14px;
}
.tooltip-inner {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
}
.tooltip-arrow {
    display: none !important;
}

/* Styles to target the Settings, Help, and Favorites buttons */
.btn-outline-primary.btn-nagios.btn-icon { 
    background-color: var(--secondary);
    width: 36px;
    padding: 0px 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--foreground);
    cursor: pointer;
}
.btn-outline-primary.btn-nagios.btn-icon:hover { 
    background-color: var(--muted);
    border-color: var(--muted);
}
div.helpsystem_icon {
    top: 0px;
    padding: 32px 10px 0 10px;
    margin: 0;
}
.btn.btn-icon>i.material-symbols-outlined {
    vertical-align: middle;
    font-size: 24px;
    font-weight: 400;
    cursor: pointer;
    line-height: 1.4;
}
a#open-cwform.btn>i.material-symbols-outlined {
    font-variation-settings:'FILL' 1;
}
a#open-cwform.btn {
   float: right;
}
div.helpsystem_icon.favorites_icon>button {
    height: 36px;
    width: 36px;
}

/* Label styles to match neptune.css */
label.form-label, p {
    font-weight: normal;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--muted-foreground);
}

/* Style the badges (e.g. "Step 1", "Step 2") */
h1 .badge.bs-badge {
    height: 36px;
    padding-top: 0.66rem !important;
    background-color: var(--muted) !important;
}

/* Style the alert banners */
.alert.alert-danger,
.message .errorMessage {
    border-radius: var(--radius);
    background-color: var(--error-msg-bg);
    border-color: var(--error-msg-border);
    padding: 16px;
}
.alert.alert-danger,
.message .errorMessage,
.message .errorMessage .message {
    color: var(--error-msg-text);
}
.message .errorMessage .message {
    border: 1px solid var(--error-msg-border) !important;
    border-radius: var(--radius);
}
.message .errorMessage,
.message .errorMessage .message {
    font-size: 12.8px !important;
}
.alert.alert-danger li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.8px;
    font-weight: normal;
}
.alert.alert-danger li > i, 
.alert.alert-danger div i {
    color: var(--destructive);
    font-weight: normal;
}
.alert.alert-danger div.card {
    padding: 0px;
}
.alert.alert-danger div.card.card-p {
    color: var(--muted-foreground);
    font-size: 12.8px;
}

.alert.alert-info, .actionMessage, ul.actionMessage { 
    border-radius:var(--radius);
    background-color: var(--info-msg-bg);
    border-color: var(--info-msg-border);
    padding: 16px;
}
.alert.alert-info, .actionMessage > li { 
    color:var(--info-msg-text);
    gap: 5px;
    font-size: 12.8px;
    font-weight: normal;
}

/* Radio button styles (to make them look like switches) */
label.switch input { 
    opacity: 0;
}
label.switch {
    float: right;
    cursor: pointer;
    position: relative;
    border-radius: 1rem;
    width: 40px;
    height: 22px;
}
.form-check[for="notification_options3"] label.switch {
    margin-top: 8px;
}
label.switch span.slider:before,
label.switch span.slider:after {
  content: '';
}
label.switch span.slider:before {
    position: absolute;
    background-color: var(--foreground);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    -webkit-transition: .15s;
    transition: .15s;
}
label.switch span.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--muted);
    border-radius: 34px;
    -webkit-transition: .15s;
    transition: .15s;
}
label.switch input:checked + span.slider {
    background-color: var(--primary);
}
label.switch input[type="radio"]:checked + span.slider {
    cursor: default;
}
.form-check:hover:has(label.switch input[type="radio"]:checked ){
    background-color: var(--secondary);
}
label.switch input:not(:checked) + span.slider:before {
    background-color: var(--muted-foreground);
}
label.switch input:checked+span.slider:after,
label.switch input:checked+span.slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Checkbox styles from neptune.css (for actualy checkboxes, not switches) */
.form-check-input[type="checkbox"],
td>input[type="checkbox"] {
    border-radius: var(--radius);
    background-color: var(--background);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: none;
    border: 1px solid  var(--border);
    padding: 8px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    transition: background-color 0.1s ease-in, border-color 0.1s ease-in;
    bottom: 2px;
}
.form-check-input[type="checkbox"].service-item {
    padding: 0px;
}
.well.freeform .form-check-input[type="checkbox"] {
    bottom: 1px;
}
#bucket-container .row.mb-2 .form-check-input[type="checkbox"] {
    vertical-align: middle;
    bottom: 0px;
}
fieldset.wz-fieldset .form-check-input[type="checkbox"]:has(+input.form-control) {
    bottom: 0px;
}
.form-check-input[type="checkbox"]:hover,
td>input[type="checkbox"]:hover {
    cursor:pointer;
    background-color: var(--secondary);
}
.form-check-input[type="checkbox"]+label:hover,
td>input[type="checkbox"]+label:hover {
    cursor:pointer;
}
.form-check-input[type="checkbox"][disabled],
td>input[type="checkbox"][disabled] {
    cursor: not-allowed;
}
.form-check-input[type="checkbox"][disabled]+label,
td>input[type="checkbox"][disabled]+label {
    cursor: not-allowed;
}
.form-check-input[type="checkbox"]:checked,
td>input[type="checkbox"]:checked {
    background-color: var(--foreground);
    background-image: none;
}
.form-check-input[type="checkbox"]:focus,
td>input[type="checkbox"]:focus {
    outline: none;
    box-shadow: none;
}
.form-check-input[type="checkbox"]:checked:after,
td>input[type="checkbox"]:checked:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    background: transparent;
    width: 4px;
    height: 7px;
    border: solid var(--primary-foreground);
    border-width: 0 1.7px 1.7px 0;
    transform: rotate(45deg);
    transition: opacity 0.3s ease;
    opacity: 1;
}

/* Fix wrapping and alignment of buttons with info icons */
div.col-sm-6:has(button.btn + i.icon.icon-info) {
    display: flex;
    align-items: center;
}
div.col-sm-6>button.btn + i.icon.icon-info {
    top: 0px;
}

/* Debold, color, and correctly size certain labels */
.form-check-label.bold {
    color: var(--muted-foreground);
    font-weight: normal;
    font-size: 14px;
}
label.form-check-label.bold p {
    font-size: 12.8px;
}

.form-label {
    font-weight: normal;
    font-size: 14px;
}

/* Fix alignment of fa-icons turns material-symbols-outlined */
.pad-t2:has(.material-symbols-outlined) {
    padding-top: 0px;
    margin-top: -2px;
}

label.form-check-label:has(.material-symbols-outlined) {
    vertical-align: middle;
}

/* Overwrite margin to maintain left-alignment */
.col-sm-6.ms-4 {
    margin-left: 0 !important;
}


/* Make small password buttons just look like all password buttons */
.input-group-sm > .form-control,
.input-group-sm > .input-group-text,
.input-group-sm {
    font-size: 14px;
}
.input-group-sm>.btn {
    padding: 8px 16px;
}

div.row>div.col-sm-4.text-end {
    text-align: left !important;
    width: 10%;
    color: var(--muted-foreground);
}

.border-block p {
    color: var(--muted-foreground);
    font-size: 12.8px;
}

/* Generally want nothing bolded in neptune */
a>b {
    font-weight: normal;
}

/* Styles list-group */
.list-group {
    background-color: var(--secondary);
    border: 1px solid var(--border);
    width: 50%;
}
p:has(+ .list-group) {
    width: 50%;
}
.list-group .list-group-item {
    background-color: var(--secondary);
    color: var(--muted-foreground);
}

/* Styles headers for some old wizards */
div#configForm h5,
form#configWizardForm h5 {
    font-family: 'Geist';
    font-size: 18px;
    font-weight: 600;
}
div#configForm h5.ul:after,
form#configWizardForm h5:after {
    background-color: var(--background);
}
form#configWizardForm div.form-wrapper>div {
    color: var(--muted-foreground);
}
form#configWizardForm .checkbox>label {
    font-size: 14px;
}
form#configWizardForm div.checkbox input[type="checkbox"] {
    bottom: 1px;
}
form#configWizardForm table.table-auto-width>tbody>tr>td>input {
    width: auto;
}
/* Style intended to only target icons in WMI wizard step 2 */
form#configWizardForm table.table-auto-width>tbody>tr>td label:has(i.material-symbols-outlined) {
    height: 20px;
    vertical-align: middle;
}
table.table.adddeleterow {
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
div#vsphere_settings div.checkbox input[type="checkbox"] {
    bottom: 20px;
}
.wiz-header:has(+form#configWizardForm),
.wiz-header:has(+div.message+form#configWizardForm) {
    justify-content: flex-start;
}
.wiz-header:has(+form#configWizardForm) .wiz-header-cb,
.wiz-header:has(+div.message+form#configWizardForm) .wiz-header-cb {
    margin-bottom: 0px;
}
.wiz-box-text svg { color: var(--foreground); }
div#vsphere_settings {
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
div#vsphere_settings div.col-sm-2.mt-0,
div#vsphere_settings div.col-sm-3.mt-0 {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}
div#vsphere_settings span.input-group-text {
    background-color: var(--background);
    border: none;
}
input.form-control.condensed {
    width: auto;
}

/* btn styles to fix ordering of buttons */
.btn.btn-primary[form="configWizardForm"] {
    order: 2;
}
.btn.btn-default[form="configWizardForm"] {
    order: 1;
    margin-left: -20px;
    margin-right: 0px !important;
}
.btn.btn-select-template[form="configWizardForm"] {
    order: 3;
}
.btn.btn-success {
    order: 3;
}
.btn.btn-save-template {
    order: 3;
}

/* List styles */
ul>li {
    color: var(--muted-foreground);
    font-size: 12.8px;
}

/* Styles for discord and slack notif wizards */
button.btn.btn-info.btn-hostBox,
button.btn.btn-info.btn-serviceBox {
    background-color: var(--secondary);
    margin: 5px;
}
button.btn.btn-info.btn-hostBox .badge,
button.btn.btn-info.btn-serviceBox .badge {
    background-color: var(--secondary);
    border: none;
}
button.btn.btn-info.btn-hostBox:hover,
button.btn.btn-info.btn-serviceBox:hover {
    background-color: var(--muted);
    color: var(--foreground);
}
.btn.btn-sm .badge {
    top: 0px;
    padding: 0px;
}

/* Styles for Config Wizard Settings popup */
div#cwform {
    font-size: 12.8px;
}
div#cwform input#wizardimportonly {
    margin-left: -20px;
    margin-top: 0px;
}

/* Styles for Steps 3+ */
table.table-no-border>tbody>tr>td.well {
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
div.sel-users-new {
    height: auto;
    background-color: var(--background);
    border: 1px solid var(--border);
    margin-bottom: 10px !important;
    border-radius: var(--radius);
}
div.sel-users-new .form-check {
    padding-left: 30px;
    height: 35px;
    border: none;
    display: flex;
    align-items: center;
    color: var(--foreground);
    width: 50%;
    margin-bottom: 0px;
    white-space: nowrap;
    overflow: hidden;
}
div.sel-users-new .form-check:not(:last-child) {
    margin-right: 10px;
}
div.sel-users-new input[type="checkbox"] {
    margin-top: 1px;
}
td.well div.checkbox {
    margin: 10px;
}
.table > tbody > tr > td.well div.checkbox {
    margin-bottom: 10px;
}

/* override style in base.css to align chevron */
#configWizardForm #formButtons .material-symbols-outlined {
    margin-top: 0px;
}

/* Style configuration finished page */
#commandsuccesscontent>.message>.infoMessage>li{
    color: var(--success-msg-text);
    font-size: 14px;
}
#commanderrorcontent>.message>.errorMessage>li{
    color: var(--error-msg-text);
    font-size: 14px;
}
ul.commandresult+div p:has(a.btn) {
    display: flex;
}
ul.commandresult+div p>a.btn:first-child {
    background-color: var(--primary);
    color: var(--primary-foreground);
}
ul.commandresult+div p>a.btn:first-child:hover {
    background-color: var(--primary-hover);
}
ul.commandresult+div p>a.btn:first-child:active,
ul.commandresult+div p>a.btn:first-child:focus {
    color: var(--foreground);
}
ul.commandresult+div p>a.btn:first-child:hover i {
    transform: none;
}
ul.commandresult li:not(.commandresultwaiting) {
    display: flex;
    align-content: middle;
    padding: 0px
}
div.message ul {
    width: fit-content;
    white-space: nowrap;
}

.premium-alert {
    width: fit-content;
    margin: auto;
    align-items: center;
    display: flex;
}

.premium-alert button {
    margin-left: 2rem;
}

.premium-alert > a {
    display: inline-block;
    margin-left: 15px;
}