:root {
    --ops-primary: #2a6f97;
    --ops-primary-dark: #1d5272;
    --ops-secondary: #12304a;
    --ops-accent: #b7462d;
    --ops-bg: #f3f6f8;
    --ops-surface: #ffffff;
    --ops-border: #d9e2e8;
    --ops-text: #1f2d3d;
    --ops-muted: #637381;
    --ops-focus: #0b6e99;
    --ops-radius: .65rem;
    --ops-shadow: 0 5px 18px rgba(18, 48, 74, .08);
}

/* Minimal structural fallback when the optional Bootstrap/AdminLTE CDN is unavailable. */
.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1140px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

[class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    width: 100%;
}

.btn {
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
    display: inline-block;
    font-size: .875rem;
    line-height: 1.5;
    padding: .375rem .75rem;
    text-align: center;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.btn:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-default,
.btn-light {
    background: #fff;
    border-color: #cbd6dc;
    color: #34495e;
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--ops-primary);
    color: var(--ops-primary);
}

.btn-danger {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

.btn-warning {
    background: #e1a400;
    border-color: #e1a400;
    color: #2d2300;
}

.btn-link {
    background: transparent;
    border: 0;
    color: var(--ops-primary);
}

.form-control,
.custom-select {
    background: #fff;
    border: 1px solid #becbd3;
    border-radius: .25rem;
    color: var(--ops-text);
    display: block;
    font-size: .875rem;
    line-height: 1.5;
    min-height: 38px;
    padding: .375rem .75rem;
    width: 100%;
}

textarea.form-control {
    height: auto;
}

.form-control[readonly] {
    background: #f3f6f8;
}

.form-group {
    margin-bottom: 1rem;
}

.input-group {
    align-items: stretch;
    display: flex;
    width: 100%;
}

.input-group > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.input-group-text,
.input-group-prepend {
    align-items: center;
    background: #eef3f6;
    border: 1px solid #becbd3;
    display: flex;
    padding: .375rem .75rem;
}

.card {
    background: #fff;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.card-body {
    flex: 1 1 auto;
}

.card-header,
.card-footer {
    padding: .75rem 1.25rem;
}

.table {
    border-collapse: collapse;
    width: 100%;
}

.table th,
.table td {
    border-top: 1px solid #e1e8ec;
    padding: .75rem;
}

.table-responsive {
    overflow-x: auto;
}

.navbar {
    align-items: center;
    display: flex;
    padding: .5rem 1rem;
}

.navbar > .container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.navbar-toggler {
    background: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: .25rem .75rem;
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

.nav-item {
    list-style: none;
}

.collapse {
    display: none;
}

.collapse.show {
    display: block;
}

.alert {
    border: 1px solid transparent;
    border-radius: .25rem;
    margin-bottom: 1rem;
    padding: .75rem 1.25rem;
}

.alert-success { background: #e5f5e9; border-color: #a6d9b0; color: #17652a; }
.alert-info { background: #e4f3fa; border-color: #a9d9e9; color: #14536b; }
.alert-warning { background: #fff4d6; border-color: #e6c65c; color: #5d4800; }
.alert-danger { background: #fde9e7; border-color: #efb4af; color: #8c211b; }

.badge {
    border-radius: .25rem;
    display: inline-block;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    padding: .35em .55em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.badge-success { background: #218739; color: #fff; }
.badge-info { background: #16789d; color: #fff; }
.badge-secondary { background: #6c7a86; color: #fff; }
.badge-danger { background: #b3261e; color: #fff; }
.badge-dark { background: #343a40; color: #fff; }
.badge-light { background: #edf1f3; color: #34495e; }

.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-2 { gap: .5rem !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.ml-auto { margin-left: auto !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.py-3 { padding-bottom: 1rem !important; padding-top: 1rem !important; }
.py-5 { padding-bottom: 3rem !important; padding-top: 3rem !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-danger { color: #b3261e !important; }
.text-success { color: #17652a !important; }
.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

html {
    scroll-behavior: smooth;
}

body,
.wrapper,
.content-wrapper,
.main-header,
.navbar,
.brand-link,
.card,
.btn,
.form-control,
.custom-select,
.table,
.nav-link,
.breadcrumb {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
    background: var(--ops-bg);
    color: var(--ops-text);
}

.main-header.navbar {
    background: var(--ops-secondary);
    border-bottom: 0;
    box-shadow: 0 2px 12px rgba(18, 48, 74, .16);
}

.main-header .navbar-brand,
.main-header .nav-link {
    color: #fff !important;
}

.main-header .navbar-brand {
    align-items: center;
    display: inline-flex;
    font-weight: 700;
    gap: .5rem;
    letter-spacing: .01em;
}

.main-header .nav-link {
    border-bottom: 3px solid transparent;
    font-size: .86rem;
    min-height: 57px;
    padding-left: .8rem;
    padding-right: .8rem;
}

.main-header .nav-link:hover,
.main-header .nav-link.active,
.main-header .nav-link:focus {
    background: rgba(255, 255, 255, .1);
    border-bottom-color: #8dd1e8;
    color: #fff !important;
}

.main-header .navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
}

.ops-brand-mark {
    align-items: center;
    background: rgba(255, 255, 255, .13);
    border-radius: .45rem;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.ops-operator-chip {
    color: #d8edf5;
    display: inline-flex;
    font-size: .75rem;
    max-width: 18rem;
    overflow: hidden;
    padding: .65rem .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-wrapper {
    background: var(--ops-bg);
    min-height: calc(100vh - 120px);
}

.content-header {
    padding-bottom: .5rem;
    padding-top: 1.25rem;
}

.ops-page-title {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.ops-page-subtitle {
    color: var(--ops-muted);
    font-size: .9rem;
    margin-top: .35rem;
}

.ops-breadcrumb {
    background: transparent;
    font-size: .78rem;
    margin-bottom: .55rem;
    padding: 0;
}

.ops-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #96a7b5;
    content: "›";
}

.ops-skip-link {
    background: #fff;
    border-radius: 0 0 .4rem .4rem;
    color: var(--ops-secondary);
    left: .75rem;
    padding: .6rem .9rem;
    position: absolute;
    top: -4rem;
    z-index: 2000;
}

.ops-skip-link:focus {
    top: 0;
}

#main-content:focus {
    outline: none;
}

.card-ops {
    border: 1px solid var(--ops-border);
    border-radius: var(--ops-radius);
    box-shadow: var(--ops-shadow);
    overflow: hidden;
}

.card-ops > .card-header {
    background: var(--ops-primary);
    color: #fff;
    border: 0;
    padding: 1rem 1.2rem;
}

.card-ops > .card-header h2,
.card-ops > .card-header h3,
.card-ops > .card-header .card-title {
    float: none;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.ops-card-header__identity {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.ops-card-header__meta {
    display: block;
    line-height: 1.35;
}

.card-ops > .card-body {
    padding: 1.25rem;
}

.card-ops > .card-footer {
    background: #fbfcfd;
    border-top: 1px solid var(--ops-border);
    padding: .9rem 1.2rem;
}

.card-outline.card-secondary {
    border-top: 3px solid #708090;
}

.btn-ops {
    background: var(--ops-primary);
    border-color: var(--ops-primary);
    color: #fff;
    font-weight: 600;
}

.btn-ops:hover,
.btn-ops:focus {
    background: var(--ops-primary-dark);
    border-color: var(--ops-primary-dark);
    color: #fff;
}

.btn-ops-accent {
    background: var(--ops-accent);
    border-color: var(--ops-accent);
    color: #fff;
}

.btn-ops-accent:hover,
.btn-ops-accent:focus {
    background: #8f351f;
    border-color: #8f351f;
    color: #fff;
}

.btn:focus,
.form-control:focus,
.custom-select:focus,
.custom-control-input:focus ~ .custom-control-label::before {
    border-color: var(--ops-focus);
    box-shadow: 0 0 0 .2rem rgba(11, 110, 153, .2);
}

.form-group > label {
    color: #34495e;
    font-size: .82rem;
    font-weight: 600;
}

.form-text,
.text-muted {
    color: var(--ops-muted) !important;
}

.form-section-title {
    border-bottom: 1px solid var(--ops-border);
    color: var(--ops-secondary);
    font-size: .93rem;
    font-weight: 700;
    letter-spacing: .01em;
    margin: 1.35rem 0 .9rem;
    padding-bottom: .45rem;
}

.form-section-title:first-child {
    margin-top: 0;
}

.form-section-help {
    color: var(--ops-muted);
    font-size: .78rem;
    margin: -.45rem 0 .9rem;
}

.ops-form-section {
    border-bottom: 1px solid var(--ops-border);
    padding-bottom: .35rem;
}

.ops-form-section:last-of-type {
    border-bottom: 0;
}

.ops-form-section > summary {
    cursor: pointer;
    list-style: none;
}

.ops-form-section > summary::-webkit-details-marker {
    display: none;
}

.ops-form-section > summary::after {
    color: var(--ops-muted);
    content: "＋";
    float: right;
    font-size: 1rem;
}

.ops-form-section[open] > summary::after {
    content: "−";
}

code,
pre {
    background: #eef3f6;
    border-radius: .3rem;
    color: #27485e;
    font-size: .84em;
}

pre {
    max-height: 20rem;
    overflow: auto;
    padding: .85rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.state-badge {
    border-radius: 999px;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .035em;
    padding: .38rem .58rem;
    text-transform: uppercase;
}

.badge-warning {
    color: #4e3500;
}

.ops-state-description {
    color: var(--ops-muted);
    font-size: .78rem;
    margin-top: .5rem;
}

.ops-table thead th {
    background: #f7fafb;
    border-bottom: 2px solid var(--ops-border);
    color: #4b6172;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ops-table tbody td {
    vertical-align: middle;
}

.ops-table tbody tr:hover {
    background: #f7fbfd;
}

.ops-table .ops-primary-cell {
    color: var(--ops-secondary);
    font-weight: 700;
}

.ops-table .ops-secondary-cell {
    color: var(--ops-muted);
    font-size: .78rem;
}

.ops-metric {
    background: #fff;
    border: 1px solid var(--ops-border);
    border-left: 4px solid var(--ops-primary);
    border-radius: .55rem;
    box-shadow: 0 3px 12px rgba(18, 48, 74, .05);
    min-height: 106px;
    padding: .9rem 1rem;
}

.ops-metric__label {
    color: var(--ops-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ops-metric__value {
    color: var(--ops-secondary);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: .35rem;
}

.ops-metric--success { border-left-color: #218739; }
.ops-metric--warning { border-left-color: #b77900; }
.ops-metric--danger { border-left-color: #b3261e; }
.ops-metric--dark { border-left-color: #343a40; }

.ops-alert {
    align-items: flex-start;
    border-radius: .55rem;
    display: flex;
    gap: .35rem;
}

.ops-alert--warning {
    background: #fff8df;
    border: 1px solid #e6c65c;
    color: #5d4800;
    margin-bottom: 1rem;
    padding: .8rem 1rem;
}

.ops-dismissible-alert {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.ops-alert-dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    opacity: .7;
    padding: .1rem .3rem;
}

.ops-alert-dismiss:hover,
.ops-alert-dismiss:focus {
    opacity: 1;
}

.ops-danger-zone {
    background: #fff8f7;
    border: 1px solid #efc7c3;
    border-radius: .55rem;
    margin-top: 1.25rem;
    padding: 1rem;
}

.ops-danger-zone__title {
    color: #9f251d;
    font-size: .92rem;
    font-weight: 700;
}

.ops-danger-zone__copy {
    color: #6d4a47;
    font-size: .78rem;
}

.ops-copy-button {
    border: 0;
    color: var(--ops-primary);
    cursor: pointer;
    padding: .15rem .35rem;
}

.ops-copy-button:hover,
.ops-copy-button:focus {
    color: var(--ops-primary-dark);
}

.ops-value-with-action {
    align-items: center;
    display: inline-flex;
    gap: .3rem;
}

.ops-host-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.ops-host-list__item {
    border-bottom: 1px solid var(--ops-border);
    padding-bottom: .85rem;
}

.ops-host-list__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ops-host-list__value {
    align-items: flex-start;
    display: flex;
    max-width: 100%;
    width: 100%;
}

.ops-host-list__url {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ops-secret {
    letter-spacing: .12em;
}

.ops-secret.is-revealed {
    letter-spacing: 0;
}

.ops-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ops-timeline__item {
    align-items: flex-start;
    display: flex;
    gap: .7rem;
    min-height: 2.25rem;
    position: relative;
}

.ops-timeline__item:not(:last-child)::before {
    background: #d7e3e9;
    content: "";
    height: calc(100% - .4rem);
    left: .55rem;
    position: absolute;
    top: 1.25rem;
    width: 2px;
}

.ops-timeline__dot {
    align-items: center;
    background: #d7e3e9;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 1.15rem;
    height: 1.15rem;
    justify-content: center;
    position: relative;
    width: 1.15rem;
}

.ops-timeline__item--complete .ops-timeline__dot { background: #218739; }
.ops-timeline__item--running .ops-timeline__dot { background: var(--ops-primary); }
.ops-timeline__item--failed .ops-timeline__dot { background: #b3261e; }

.ops-timeline__label {
    font-size: .8rem;
    font-weight: 600;
    padding-top: .08rem;
}

.ops-timeline__status {
    color: var(--ops-muted);
    display: block;
    font-size: .72rem;
    font-weight: 400;
    margin-top: .1rem;
}

.ops-color-field .ops-color-picker {
    border: 1px solid #ced4da;
    border-radius: .25rem 0 0 .25rem;
    cursor: pointer;
    height: calc(1.5em + .75rem + 2px);
    padding: .15rem;
    width: 2.75rem;
}

.ops-color-field .ops-color-picker:focus {
    outline: 2px solid var(--ops-focus);
    outline-offset: 1px;
}

.ops-color-field .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ops-color-preview {
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: .35rem;
    display: inline-block;
    height: 1.9rem;
    margin-left: .4rem;
    vertical-align: middle;
    width: 1.9rem;
}

.ops-sticky-actions {
    position: sticky;
    bottom: 1rem;
    z-index: 10;
}

.ops-footer {
    background: #eaf0f3;
    color: var(--ops-muted);
    font-size: .72rem;
    padding: .9rem 0;
}

.ops-footer .container {
    display: flex;
    gap: .45rem;
}

.ops-login-card {
    margin-top: 2rem;
}

.ops-login-card .card-header {
    padding: 1.35rem 1.4rem;
}

.ops-login-card .card-header h2 {
    font-size: 1.2rem;
}

.ops-empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
}

.ops-empty-state i {
    color: #9ab3c1;
    font-size: 2rem;
    margin-bottom: .75rem;
}

.ops-empty-state h2 {
    color: var(--ops-secondary);
    font-size: 1.05rem;
}

.ops-search-bar {
    background: #fff;
    border: 1px solid var(--ops-border);
    border-radius: .55rem;
    margin-bottom: 1rem;
    padding: .8rem;
}

.ops-filter-label {
    color: #4b6172;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ops-inline-code {
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .main-header .navbar-brand {
        font-size: .88rem;
    }

    .main-header .nav-link {
        min-height: auto;
        padding-bottom: .65rem;
        padding-top: .65rem;
    }

    .ops-operator-chip {
        padding-left: .8rem;
    }

    .content-header {
        padding-top: .9rem;
    }

    .ops-page-title {
        font-size: 1.3rem;
    }

    .card-ops > .card-body {
        padding: 1rem;
    }

    .ops-table {
        min-width: 650px;
    }

    .ops-sticky-actions {
        bottom: .5rem;
    }

    .ops-footer .container {
        flex-wrap: wrap;
    }
}

@media (min-width: 576px) {
    .d-sm-inline { display: inline !important; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
}

@media (min-width: 768px) {
    .navbar-expand-md .navbar-collapse { display: flex !important; }
    .navbar-expand-md .navbar-nav { flex-direction: row; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
}

@media (min-width: 992px) {
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .d-lg-inline { display: inline !important; }
}

@media (min-width: 1200px) {
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}