@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    background: #101418;
    color: #f8fafc;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overscroll-behavior-y: contain;
}

a, .btn-link {
    color: #1f6feb;
}

/*.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}*/

.btn-primary {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.btn,
.form-control,
.form-select,
.alert,
.modal-content {
    border-radius: 8px;
}

.form-control,
.form-select {
    border-color: #1f6feb;
}

.jumbotron,
.card,
.modal-content {
    background: #ffffff;
    border: 1px solid #1f6feb;
    box-shadow: none;
}

.jumbotron {
    border-radius: 8px;
    display: grid;
    gap: 18px;
    padding: 24px;
}

.jumbotron .display-4 {
    color: #111827;
    font-size: 34px;
    line-height: 1.1;
}

.jumbotron .lead {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.5;
}

.theme-dark {
    color-scheme: dark;
}

.theme-dark .text-muted,
.theme-dark .operations-header .text-muted,
.theme-dark .monitoring-header .text-muted,
.theme-dark .software-header .text-muted,
.theme-dark .inventory-header .text-muted,
.theme-dark .security-header .text-muted {
    color: #9aaabd !important;
}

.theme-dark .jumbotron,
.theme-dark .card,
.theme-dark .modal-content,
.theme-dark .operations-header-card,
.theme-dark .operations-metric,
.theme-dark .operations-panel,
.theme-dark .monitoring-metric,
.theme-dark .monitoring-panel,
.theme-dark .software-metric,
.theme-dark .software-panel,
.theme-dark .inventory-metric,
.theme-dark .inventory-panel,
.theme-dark .security-metric,
.theme-dark .security-panel {
    background: #17212b;
    border-color: #2a3a49;
    color: #e7edf5;
}

.theme-dark .empty-state,
.theme-dark .table-row,
.theme-dark .operations-row,
.theme-dark .alert-item,
.theme-dark .priority-row,
.theme-dark .policy-row,
.theme-dark .runbook-row,
.theme-dark .coverage-row,
.theme-dark .action-callout {
    background: #121b24;
    border-color: #2a3a49;
    color: #e7edf5;
}

.theme-dark .table-head,
.theme-dark .metric-label,
.theme-dark .eyebrow,
.theme-dark .operations-header-card span,
.theme-dark .operations-metric small,
.theme-dark .monitoring-metric span,
.theme-dark .monitoring-metric small,
.theme-dark .software-metric span,
.theme-dark .software-metric small,
.theme-dark .inventory-metric span,
.theme-dark .inventory-metric small,
.theme-dark .panel-title span,
.theme-dark .empty-state span,
.theme-dark .table-row small,
.theme-dark .policy-row small,
.theme-dark .runbook-row span,
.theme-dark .form-hint {
    color: #9aaabd !important;
}

.theme-dark .alert-item p,
.theme-dark .jumbotron .lead {
    color: #c7d3df;
}

.theme-dark .table-row:hover,
.theme-dark .policy-row:hover,
.theme-dark .operations-link:hover,
.theme-dark .security-table .table-row:hover {
    background: #1d2a35;
}

.theme-light,
.theme-light .content,
.theme-light .main {
    color: #111827;
}

.theme-light :is(
    .jumbotron,
    .card,
    .modal-content,
    .operations-header-card,
    .operations-metric,
    .operations-panel,
    .monitoring-metric,
    .monitoring-panel,
    .software-metric,
    .software-panel,
    .inventory-metric,
    .inventory-panel,
    .patch-metric,
    .patch-panel,
    .security-metric,
    .security-panel,
    .billing-metric,
    .billing-panel,
    .plan-card,
    .control-panel,
    .search-panel,
    .device-card,
    .empty-state,
    .action-callout,
    .alert-item,
    .operations-row,
    .priority-row,
    .policy-row,
    .runbook-row,
    .coverage-row,
    .table-row,
    .software-package-row,
    .timeline-row,
    .license-row,
    .billing-row
) {
    background: #ffffff !important;
    border: 1px solid #1f6feb !important;
    border-color: #1f6feb !important;
    color: #111827 !important;
}

.theme-light :is(
    .btn-primary,
    .btn-success,
    .software-actions .btn,
    .patch-actions .btn,
    .security-actions .btn,
    .billing-actions .btn,
    .inventory-actions .btn,
    .monitoring-actions .btn
) {
    background: #1f6feb !important;
    border-color: #1f6feb !important;
    color: #ffffff !important;
}

.theme-light :is(
    .btn-primary,
    .btn-success,
    .software-actions .btn,
    .patch-actions .btn,
    .security-actions .btn,
    .billing-actions .btn,
    .inventory-actions .btn,
    .monitoring-actions .btn
):hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

.theme-light :is(
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .input-group-text
) {
    background: #ffffff !important;
    border-color: #1f6feb !important;
    color: #111827 !important;
}

.theme-dark,
.theme-dark .content,
.theme-dark .main {
    color: #f8fafc;
}

.theme-dark :is(
    .jumbotron,
    .card,
    .modal-content,
    .operations-header-card,
    .operations-metric,
    .operations-panel,
    .monitoring-metric,
    .monitoring-panel,
    .software-metric,
    .software-panel,
    .inventory-metric,
    .inventory-panel,
    .patch-metric,
    .patch-panel,
    .security-metric,
    .security-panel,
    .billing-metric,
    .billing-panel,
    .plan-card,
    .control-panel,
    .search-panel,
    .device-card,
    .empty-state,
    .action-callout,
    .alert-item,
    .operations-row,
    .priority-row,
    .policy-row,
    .runbook-row,
    .coverage-row,
    .table-row,
    .software-package-row,
    .timeline-row,
    .license-row,
    .billing-row
) {
    background: #2b3036 !important;
    border: 1px solid #22c55e !important;
    border-color: #22c55e !important;
    color: #f8fafc !important;
}

.theme-dark :is(
    .card-header,
    .card-body,
    .table-head,
    .list-group-item,
    .device-card .card-header,
    .device-card .card-body,
    .alert-card,
    .warning-strip,
    .software-table,
    .patch-table,
    .security-table,
    .monitoring-table,
    .inventory-table,
    .billing-table
) {
    background: #242a31 !important;
    border: 1px solid #22c55e !important;
    border-color: #22c55e !important;
    color: #f8fafc !important;
}

.theme-dark :is(
    .btn-primary,
    .btn-success,
    .software-actions .btn,
    .patch-actions .btn,
    .security-actions .btn,
    .billing-actions .btn,
    .inventory-actions .btn,
    .monitoring-actions .btn
) {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #06120a !important;
}

.theme-dark :is(
    .btn-primary,
    .btn-success,
    .software-actions .btn,
    .patch-actions .btn,
    .security-actions .btn,
    .billing-actions .btn,
    .inventory-actions .btn,
    .monitoring-actions .btn
):hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

.theme-dark :is(.btn-outline-primary, .btn-outline-secondary, .btn-light) {
    background: transparent !important;
    border-color: #22c55e !important;
    color: #f8fafc !important;
}

.theme-dark :is(.btn-outline-primary, .btn-outline-secondary, .btn-light):hover {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #06120a !important;
}

.theme-dark :is(
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .input-group-text
) {
    background: #1f242b !important;
    border-color: #22c55e !important;
    color: #f8fafc !important;
}

.theme-dark :is(input, select, textarea, .form-control, .form-select)::placeholder {
    color: #cbd5e1 !important;
}

.theme-dark :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .jumbotron .display-4,
    .operations-header h2,
    .monitoring-header h2,
    .software-header h2,
    .inventory-header h2,
    .patch-header h2,
    .security-header h2,
    .billing-header h2,
    .operations-metric strong,
    .monitoring-metric strong,
    .software-metric strong,
    .inventory-metric strong,
    .patch-metric strong,
    .security-metric strong,
    .billing-metric strong
) {
    color: #f8fafc !important;
}

.theme-dark :is(
    .text-muted,
    small,
    .jumbotron .lead,
    .operations-header .text-muted,
    .monitoring-header .text-muted,
    .software-header .text-muted,
    .inventory-header .text-muted,
    .patch-header .text-muted,
    .security-header .text-muted,
    .billing-header .text-muted,
    .operations-metric small,
    .monitoring-metric small,
    .software-metric small,
    .inventory-metric small,
    .patch-metric small,
    .security-metric small,
    .billing-metric small,
    .panel-title span,
    .form-hint
) {
    color: #cbd5e1 !important;
}

.theme-dark :is(a, .btn-link, .text-info) {
    color: #f8fafc !important;
}

.theme-dark :is(.badge.bg-primary, .badge.bg-success) {
    background: #22c55e !important;
    color: #06120a !important;
}

.theme-light :is(.badge.bg-primary, .badge.bg-success) {
    background: #1f6feb !important;
    color: #ffffff !important;
}

.theme-dark :is(.table-row:hover, .policy-row:hover, .operations-link:hover, .software-package-row:hover) {
    background: #343b43 !important;
}

.theme-dark .sidebar :is(a, button, .oi, .navbar-brand, .logo-title) {
    color: #f8fafc !important;
}

.theme-dark .sidebar .logo-subtitle,
.theme-dark .sidebar .nav-section {
    color: #cbd5e1 !important;
}

.theme-dark :is(
    .operations-row,
    .priority-row,
    .policy-row,
    .runbook-row,
    .coverage-row,
    .table-row,
    .software-package-row,
    .timeline-row,
    .license-row,
    .billing-row,
    .alert-item
) {
    background: #2b3036 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(34, 197, 94, .72) !important;
    color: #f8fafc !important;
}

.theme-light :is(
    .operations-row,
    .priority-row,
    .policy-row,
    .runbook-row,
    .coverage-row,
    .table-row,
    .software-package-row,
    .timeline-row,
    .license-row,
    .billing-row,
    .alert-item
) {
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(31, 111, 235, .35) !important;
    color: #111827 !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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;
    color: black;
}

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


/* QR code generator */
#qrCode {
    margin: 15px;
}
    #qrCode img {
        border-width: 3px;
        border-style: solid;
        border-color: white;
    }



footer {
    overflow: hidden !important;
}

input[type="checkbox"] {
    height: 1.3em;
    width: 1.3em;
}

input[disabled], input[readonly], select[disabled] {
    background-color: #adadad !important;
}

.pointer {
    cursor: pointer;
}

#components-reconnect-modal {
    color: black;
}