html, body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: var(--enco-page-bg, #F4F6F8);
    color: var(--enco-text, #1A1A1A);
    min-height: 100%;
}

h1 {
    margin: 0 0 0.35rem;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    font-style: normal;
    letter-spacing: 0.01em;
    color: var(--enco-text, #1A1A1A);
}

h1:focus {
    outline: none;
}

.lede {
    margin: 0 0 1.25rem;
    color: var(--enco-text-muted, #5A6570);
}

.app-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1.25rem;
}

a.app-tab {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--enco-topbar-border, #E0E4E8);
    background: var(--enco-surface, #FFFFFF);
    color: var(--enco-text-muted, #5A6570);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 4px;
}

a.app-tab:hover {
    color: var(--enco-primary, #2B59A2);
    border-color: var(--enco-primary, #2B59A2);
    text-decoration: none;
}

a.app-tab.active {
    background: var(--enco-primary, #2B59A2);
    border-color: var(--enco-primary, #2B59A2);
    color: #fff;
}

a.app-tab.active:hover {
    background: var(--enco-primary-dark, #1b4d89);
    color: #fff;
}

.fleet-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--enco-surface, #FFFFFF);
    border: 1px solid var(--enco-topbar-border, #E0E4E8);
    box-shadow: var(--enco-shadow, 0 8px 28px rgba(0, 0, 0, 0.08));
}

.fleet-table th, .fleet-table td {
    text-align: left;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--enco-topbar-border, #E0E4E8);
    vertical-align: top;
}

.fleet-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--enco-text-muted, #5A6570);
}

.fleet-table a {
    color: var(--enco-primary, #2B59A2);
    font-weight: 600;
    text-decoration: none;
}

.fleet-table a:hover {
    text-decoration: underline;
}

.fleet-site-row td {
    background: var(--enco-topbar, #F4F6F8);
    font-weight: 600;
    vertical-align: middle;
}

.fleet-instance-row td:first-child {
    padding-left: 2.1rem;
}

.fleet-accordion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--enco-text, #1A1A1A);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    vertical-align: middle;
}

.fleet-accordion-icon {
    display: inline-block;
    width: 1rem;
    text-align: center;
}

.fleet-mismatch {
    background: var(--enco-seen-old-bg, #ffebee);
    border-color: var(--enco-seen-old-border, #e57373);
    color: var(--enco-seen-old-text, #b71c1c);
}

.panel {
    background: var(--enco-surface, #FFFFFF);
    border: 1px solid var(--enco-topbar-border, #E0E4E8);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: var(--enco-shadow, 0 8px 28px rgba(0, 0, 0, 0.08));
    color: var(--enco-text, #1A1A1A);
}

.panel h2, .panel p {
    color: var(--enco-text, #1A1A1A);
}

.panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

label {
    display: block;
    font-size: 0.85rem;
    margin: 0.6rem 0 0.25rem;
    color: var(--enco-text-muted, #5A6570);
}

input, select, textarea {
    width: 100%;
    max-width: 40rem;
    padding: 0.55rem 0.65rem;
    border: 2px solid var(--enco-input-border, #6B7680);
    background: var(--enco-input-bg, #FFFFFF);
    color: var(--enco-text, #1A1A1A);
    box-sizing: border-box;
    font: inherit;
    border-radius: 4px;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--enco-primary, #2B59A2);
    outline-offset: 1px;
}

button, .btn {
    margin-top: 0.85rem;
    background: var(--enco-primary, #2B59A2);
    color: #fff;
    border: 0;
    padding: 0.55rem 0.95rem;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    display: inline-block;
}

button:hover, .btn:hover {
    background: var(--enco-primary-dark, #1b4d89);
}

.rte {
    width: 100%;
    max-width: 40rem;
    border: 2px solid var(--enco-input-border, #6B7680);
    background: var(--enco-input-bg, #FFFFFF);
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
}

.rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--enco-input-border, #6B7680);
    background: var(--enco-page-bg, #F4F6F8);
}

button.rte-btn {
    margin: 0;
    min-width: 2rem;
    padding: 0.3rem 0.55rem;
    background: var(--enco-input-bg, #FFFFFF);
    color: var(--enco-text, #1A1A1A);
    border: 1px solid var(--enco-input-border, #6B7680);
    font: inherit;
    line-height: 1;
}

button.rte-btn:hover {
    border-color: var(--enco-primary, #2B59A2);
    color: var(--enco-primary, #2B59A2);
    background: var(--enco-input-bg, #FFFFFF);
}

.rte-sep {
    width: 1px;
    align-self: stretch;
    background: var(--enco-topbar-border, #E0E4E8);
    margin: 0.15rem 0.2rem;
}

.rte-surface {
    padding: 0.55rem 0.65rem;
    outline: none;
    overflow-y: auto;
    background: var(--enco-input-bg, #FFFFFF);
    color: var(--enco-text, #1A1A1A);
    caret-color: var(--enco-text, #1A1A1A);
}

.rte-surface:focus {
    box-shadow: inset 0 0 0 2px var(--enco-primary, #2B59A2);
}

.rte-surface p { margin: 0 0 0.45rem; }
.rte-surface ul, .rte-surface ol {
    margin: 0.25rem 0 0.45rem 1.25rem;
    padding: 0;
}
.rte-surface li { margin: 0.15rem 0; }

.rte-disabled .rte-surface {
    background: var(--enco-page-bg, #F4F6F8);
    color: var(--enco-text-muted, #5A6570);
}

button.secondary {
    background: var(--enco-text-muted, #5A6570);
}

button.secondary:hover {
    background: var(--enco-navy, #0B2D48);
}

.msg { margin-top: 0.75rem; color: var(--enco-warn, #8a4b08); }
.ok { color: var(--enco-primary, #2B59A2); }
.status-pill { font-size: 0.8rem; color: var(--enco-text-muted, #5A6570); }

.seen-badge {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.seen-fresh {
    background: var(--enco-seen-fresh-bg, #e8f5e9);
    border-color: var(--enco-seen-fresh-border, #81c784);
    color: var(--enco-seen-fresh-text, #1b5e20);
}

.seen-stale {
    background: var(--enco-seen-stale-bg, #fff8e1);
    border-color: var(--enco-seen-stale-border, #ffcc02);
    color: var(--enco-seen-stale-text, #8a6d00);
}

.seen-old {
    background: var(--enco-seen-old-bg, #ffebee);
    border-color: var(--enco-seen-old-border, #e57373);
    color: var(--enco-seen-old-text, #b71c1c);
}

.license-missing {
    background: var(--enco-page-bg, #F4F6F8);
    border-color: var(--enco-topbar-border, #E0E4E8);
    color: var(--enco-text-muted, #5A6570);
}

button.license-badge {
    margin: 0;
    cursor: pointer;
    font: inherit;
}

button.version-link {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--enco-primary, #2B59A2);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

button.version-link:hover {
    background: none;
    text-decoration: underline;
}

.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 45, 72, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    padding: 1rem;
}

.dialog-panel {
    background: var(--enco-surface, #FFFFFF);
    border: 1px solid var(--enco-topbar-border, #E0E4E8);
    box-shadow: var(--enco-shadow, 0 8px 28px rgba(0, 0, 0, 0.08));
    padding: 1.25rem 1.35rem;
    max-width: 28rem;
    width: 100%;
}

.dialog-panel h2 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.license-facts {
    margin: 0 0 0.75rem;
}

.license-facts dt {
    font-size: 0.8rem;
    color: var(--enco-text-muted, #5A6570);
    margin-top: 0.65rem;
}

.license-facts dd {
    margin: 0.15rem 0 0;
}

.license-json {
    margin: 0.5rem 0 1rem;
    padding: 0.75rem;
    overflow: auto;
    max-height: 22rem;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--enco-surface-muted, #f4f6f8);
    border-radius: 4px;
}

.file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
}

label.feature-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: var(--enco-text, #1A1A1A);
    font-size: 0.95rem;
    cursor: pointer;
}

label.feature-toggle input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    max-width: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--enco-primary, #2B59A2);
}

label.file-upload-btn {
    display: inline-block;
    width: auto;
    max-width: none;
    margin-top: 0.85rem;
    color: #fff;
    cursor: pointer;
}

a {
    color: var(--enco-primary, #2B59A2);
}

.text-danger {
    color: #c62828;
}

html.dark-theme .text-danger {
    color: #ef9a9a;
}

#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;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }