:root {
    color-scheme: dark;
    --panel-bg: #15181d;
    --panel-soft: #1c2027;
    --panel-border: #303842;
    --panel-text: #edf1f7;
    --panel-muted: #9da8b7;
    --panel-accent: #4da3ff;
    --panel-green: #38d39f;
    --panel-amber: #f4b860;
    --panel-red: #ff6b6b;
    --panel-cyan: #5fd0df;
}

body {
    background: linear-gradient(180deg, #101216 0%, #0c0f13 100%);
    color: var(--panel-text);
}

.navbar {
    background: rgba(18, 21, 26, .94) !important;
    border-color: var(--panel-border) !important;
    backdrop-filter: blur(10px);
}

.navbar .container-fluid {
    gap: 14px;
}

.navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}

.navbar .nav-link {
    border-radius: 6px;
    color: var(--panel-muted);
    font-size: 14px;
    padding: 6px 9px;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    background: #202733;
    color: var(--panel-text);
}

.command-search {
    display: grid;
    grid-template-columns: minmax(180px, 300px);
    gap: 6px;
    margin-right: 10px;
}

.command-palette {
    background: #151a22;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-text);
    max-width: 680px;
    padding: 18px;
    width: min(680px, calc(100vw - 28px));
}

.command-palette::backdrop {
    background: rgba(0, 0, 0, .6);
}

.command-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.command-hints a,
.filter-chip {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-muted);
    font-size: 13px;
    padding: 6px 10px;
    text-decoration: none;
}

.command-hints a:hover,
.filter-chip:hover,
.filter-chip.is-active {
    border-color: #4d8dff;
    color: var(--panel-text);
}

.panel,
.metric {
    background: linear-gradient(180deg, #171b21 0%, var(--panel-bg) 100%);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.panel {
    padding: 20px;
}

.compact-panel,
.compact-details {
    padding: 14px;
}

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 18px;
}

.compact-hero {
    padding-bottom: 12px;
}

.panel-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0;
}

.section-heading {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.panel-subtitle {
    color: var(--panel-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.metric {
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.compact-hero .h3,
.compact-hero .h4 {
    font-size: 1.35rem;
}

.compact-metric {
    padding: 12px 14px;
}

.metric::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--panel-accent);
}

.metric-label {
    color: var(--panel-muted);
    font-size: 13px;
    text-transform: capitalize;
}

.metric-value {
    font-size: 30px;
    font-weight: 700;
}

.compact-metric .metric-label,
.compact-panel .small,
.compact-details .small {
    font-size: 12px;
}

.compact-metric .metric-value {
    font-size: 18px;
    margin-top: 6px;
}

.domain-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.domain-overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.domain-tab-nav {
    align-items: center;
    background: #111720;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px;
}

.domain-tab-link {
    border-radius: 6px;
    color: var(--panel-muted);
    font-size: 14px;
    padding: 8px 11px;
    text-decoration: none;
}

.domain-tab-link:hover,
.domain-tab-link.is-active {
    background: #243045;
    color: var(--panel-text);
}

.domain-tab-shell {
    display: flex;
}

.domain-tab-column {
    display: block;
}

/* Hide column if it does not contain any active tab panels */
.domain-tab-column:not(:has(.domain-tab-panel.is-active)) {
    display: none !important;
}

/* Stretch the active column to 100% width if the other column has no active panel */
.domain-tab-shell:not(:has(.col-xl-7 .domain-tab-panel.is-active)) .col-xl-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
.domain-tab-shell:not(:has(.col-xl-5 .domain-tab-panel.is-active)) .col-xl-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.domain-tab-panel {
    display: none;
}

.domain-tab-panel.is-active {
    display: block;
}

.display-value {
    font-size: 28px;
    font-weight: 700;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-sections {
    display: grid;
    gap: 18px;
    max-width: 1120px;
}

.form-section {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 22px;
}

.section-title {
    font-size: 18px;
    margin: 0 0 8px;
}

.section-copy {
    color: var(--panel-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.full-span,
.form-actions {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
}

.config-subtitle {
    border-top: 1px solid var(--panel-border);
    color: var(--panel-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    padding-top: 14px;
    text-transform: uppercase;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 16px;
}

.module-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 10px;
}

.module-check strong,
.module-check small {
    display: block;
}

.module-check small {
    color: var(--panel-muted);
}

.job-row,
.backup-row,
.log-card,
.cron-row,
.drift-row,
.mini-row,
    .event-card,
    .notification-row,
    .timeline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 12px;
    background: var(--panel-soft);
}

.mini-row,
.job-row,
.cron-row,
.drift-row,
.timeline-row {
    flex-wrap: wrap;
    padding: 9px 10px;
}

.mini-row > .d-flex {
    flex-wrap: wrap;
    justify-content: flex-end;
}

details.mini-row {
    display: block;
}

.panel-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    list-style: none;
}

.panel-summary::-webkit-details-marker {
    display: none;
}

.compact-details[open] > .panel-summary {
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.compact-details:not([open]) {
    padding-bottom: 12px;
}

.inner-details {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 12px;
}

.inner-tool-section,
.restore-wizard {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 12px;
}

.inner-details[open] > .panel-summary {
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.backup-row {
    align-items: flex-start;
}

.cron-row,
.drift-row,
.mini-row,
.event-card,
.notification-row {
    align-items: flex-start;
}

.timeline-row {
    align-items: flex-start;
}

.attention-row {
    background: rgba(244, 184, 96, .045);
}

.service-strip,
.runtime-compact,
.fix-grid,
.resource-summary,
.backup-explorer-summary,
.diagnostic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.workflow-grid,
.problem-grid {
    display: grid;
    gap: 10px;
}

.workflow-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.problem-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workflow-card,
.diagnostic-row {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 12px;
}

.workflow-card {
    color: var(--panel-text);
    display: grid;
    gap: 5px;
    text-decoration: none;
}

.workflow-card:hover,
.workflow-card:focus {
    border-color: var(--panel-accent);
    color: var(--panel-text);
}

.workflow-card span {
    color: var(--panel-muted);
    font-size: 13px;
}

.diagnostic-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.staging-workflow-form {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(150px, auto));
    align-items: end;
}

.service-strip {
    gap: 5px;
}

.status-dot {
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    width: 8px;
    background: var(--panel-muted);
}

.status-dot.status-running,
.status-dot.status-active,
.status-dot.status-ok {
    background: var(--panel-green);
}

.status-dot.status-exited,
.status-dot.status-failed,
.status-dot.status-missing {
    background: var(--panel-red);
}

.status-dot.status-pending,
.status-dot.status-changing,
.status-dot.status-unknown,
.status-dot.status-warning {
    background: var(--panel-amber);
}

.runtime-compact {
    flex-direction: column;
    gap: 4px;
}

.fix-center,
.resource-summary {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 12px;
}

.fix-center-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    list-style: none;
}

.fix-center-summary::-webkit-details-marker {
    display: none;
}

.fix-grid {
    margin-top: 8px;
}

.resource-summary .mini-row,
.backup-explorer-summary .mini-row {
    flex: 1 1 170px;
}

.job-timeline-mini {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.job-timeline-mini span {
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-muted);
    font-size: 11px;
    padding: 4px 7px;
}

.job-timeline-mini span.active {
    border-color: var(--panel-accent);
    color: var(--panel-text);
}

.event-card {
    display: grid;
}

.event-card-main,
.event-meta {
    display: grid;
    gap: 12px;
}

.event-card-main {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
}

.event-meta {
    border-top: 1px solid var(--panel-border);
    grid-template-columns: 120px minmax(0, 1fr);
    margin-top: 10px;
    padding-top: 10px;
}

.event-meta span {
    color: var(--panel-muted);
}

.drift-row.subtle {
    background: #121720;
}

.notice-row {
    border: 1px solid rgba(244, 184, 96, .35);
    border-radius: 8px;
    background: rgba(244, 184, 96, .08);
    display: grid;
    gap: 4px;
    padding: 12px;
}

.cron-form {
    display: grid;
    grid-template-columns: minmax(120px, 170px) minmax(240px, 1fr) auto auto;
    gap: 12px;
    align-items: end;
}

.policy-form,
.tool-grid,
.upload-inline-form,
.inline-tool-form {
    display: grid;
    gap: 12px;
}

.policy-form {
    grid-template-columns: 1fr 1fr;
    align-items: end;
}

.policy-form .form-check,
.policy-summary,
.policy-form .filter-actions {
    grid-column: 1 / -1;
}

.policy-summary {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
}

.policy-summary span {
    color: var(--panel-muted);
}

.tool-grid {
    grid-template-columns: 1fr;
}

.upload-inline-form,
.inline-tool-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.upload-inline-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.upload-inline-form .btn {
    justify-self: end;
}

.compact-check {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    margin: 0;
    white-space: normal;
}

.compact-form-row,
.db-user-form {
    display: grid;
    gap: 8px;
}

.compact-form-row {
    grid-template-columns: minmax(160px, 1fr) auto;
}

.db-user-form {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
}

.db-user-form .btn {
    grid-column: 1 / -1;
    justify-self: end;
}

.database-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.service-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.service-control-row form {
    display: inline-flex;
}

.quota-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.log-card {
    display: block;
}

.log-card summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    list-style: none;
}

.log-card summary::-webkit-details-marker {
    display: none;
}

.log-output {
    background: #090d13;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: #dce7f5;
    font-size: 12px;
    line-height: 1.45;
    margin: 14px 0 0;
    max-height: 560px;
    overflow: auto;
    padding: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-service-button {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.version-row {
    align-items: center;
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 12px;
}

.backup-info {
    min-width: 0;
}

.backup-explorer-grid {
    display: grid;
    gap: 12px;
}

.backup-card {
    padding: 0;
}

.backup-card-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    list-style: none;
    padding: 16px;
}

.backup-card-summary::-webkit-details-marker {
    display: none;
}

.backup-card-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.backup-detail-drawer {
    border-top: 1px solid var(--panel-border);
    padding: 16px;
}

.backup-actions,
.danger-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.backup-actions form,
.backup-file-download,
.backup-path-download {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.backup-path-download {
    flex: 1 1 420px;
}

.backup-path-download .form-control {
    min-width: 240px;
}

.confirm-action-form {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    display: inline-flex !important;
    flex: 0 0 auto;
    gap: 8px;
    max-width: none;
    min-width: 0;
    padding: 0;
}

.confirm-inline-input {
    max-width: 190px;
}

.confirm-action-form .confirm-inline-input {
    max-width: none;
    width: 100%;
}

.confirm-action-form:has(.confirm-inline-input),
.confirm-action-form.danger-card {
    background: #0d121a;
    border: 1px solid var(--panel-border);
    display: grid !important;
    flex: 1 1 340px;
    grid-template-columns: minmax(180px, 1fr) auto;
    max-width: 480px;
    min-width: min(360px, 100%);
    padding: 8px;
}

.confirm-action-form .btn {
    white-space: nowrap;
}

.backup-file-list {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 10px;
}

.backup-file-download {
    border-top: 1px solid var(--panel-border);
    justify-content: space-between;
    padding: 7px 0;
}

.backup-file-download:first-of-type {
    border-top: 0;
}

.restore-wizard-form {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 210px) minmax(220px, 1fr) auto auto;
}

.stepped-restore-form {
    align-items: end;
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, .8fr) minmax(260px, 1fr) auto;
}

.restore-paths-field {
    grid-column: span 1;
}

.restore-wizard-actions {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.result-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.is-muted-control {
    opacity: .55;
}

.backup-actions-detail {
    border-top: 1px solid var(--panel-border);
    margin-top: 10px;
    padding-top: 8px;
}

.backup-actions-detail summary {
    cursor: pointer;
}

.action-toolbar {
    align-items: center;
}

.action-toolbar form,
.action-toolbar > .btn {
    display: flex;
}

.action-toolbar .btn {
    align-items: center;
    display: inline-flex;
    min-height: 38px;
}

.table-actions {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: flex-end;
}

.table-actions form {
    display: inline-flex;
}

.danger-inline-form .form-control {
    width: min(280px, 100%);
}

.danger-zone {
    border-top: 1px solid var(--panel-border);
    color: var(--panel-muted);
    padding-top: 12px;
}

.danger-zone summary {
    cursor: pointer;
    font-size: 13px;
}

.danger-table-form {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-left: 6px;
}

.danger-table-form .form-control {
    width: 180px;
}

.backup-file {
    display: grid;
    grid-template-columns: 150px auto;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
}

.filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(140px, 190px)) auto;
    gap: 14px;
    align-items: end;
}

.filter-form.compact-filter {
    grid-template-columns: minmax(220px, 1fr) auto;
}

.service-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.runtime-row {
    border-top: 1px solid var(--panel-border);
}

.runtime-row:first-of-type {
    border-top: 0;
}

.runtime-service-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    list-style: none;
}

.runtime-service-summary::-webkit-details-marker {
    display: none;
}

.runtime-service-detail:not([open]) {
    padding-bottom: 8px;
}

.runtime-meta {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 4px 8px;
    margin-top: 8px;
}

.runtime-meta span {
    color: var(--panel-muted);
    font-size: 12px;
}

.runtime-meta code {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-text);
    font-size: 12px;
    padding: 4px 6px;
    white-space: normal;
    word-break: break-all;
}

.runtime-details summary {
    color: var(--panel-muted);
    cursor: pointer;
    font-size: 12px;
    margin-top: 8px;
}

.backup-preview summary,
.job-detail-row summary {
    cursor: pointer;
    color: var(--panel-muted);
    font-size: 13px;
}

.credential-grid {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
}

.credential-grid > span:nth-child(odd) {
    color: var(--panel-muted);
    font-size: 13px;
}

.credential-grid .credential-value {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.credential-grid code {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-text);
    display: block;
    padding: 6px 8px;
    white-space: normal;
    word-break: break-all;
}

.backup-file-label {
    color: var(--panel-muted);
}

.path-text {
    word-break: break-all;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #0e1117;
}

.login-panel {
    width: min(420px, calc(100vw - 32px));
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.error-panel {
    width: min(620px, calc(100vw - 32px));
    margin: 10vh auto;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.status-code {
    color: var(--panel-accent);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 14px;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--panel-text);
    --bs-table-border-color: var(--panel-border);
}

.text-secondary {
    color: var(--panel-muted) !important;
}

.form-control,
.form-select {
    background-color: #10161f;
    border-color: var(--panel-border);
    color: var(--panel-text);
}

.form-control:focus,
.form-select:focus {
    background-color: #10161f;
    border-color: var(--panel-accent);
    color: var(--panel-text);
    box-shadow: 0 0 0 .2rem rgba(90, 162, 255, .18);
}

.form-control::placeholder {
    color: #748196;
}

.badge.text-bg-light {
    background: #222b37 !important;
    color: #d9e3f0 !important;
}

.chart-panel {
    min-height: 260px;
}

.chart-row {
    display: grid;
    grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) minmax(44px, auto);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.chart-label,
.chart-value {
    font-size: 13px;
}

.chart-label {
    color: var(--panel-muted);
    text-transform: capitalize;
}

.chart-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.chart-track {
    height: 10px;
    background: #252c35;
    border-radius: 999px;
    overflow: hidden;
}

.chart-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--panel-accent);
}

.chart-fill.status-running,
.status-pill.status-running,
.status-dot.status-running,
.status-pill.status-ready,
.status-dot.status-ready,
.status-pill.status-succeeded,
.status-dot.status-succeeded,
.status-pill.status-passed,
.status-dot.status-passed,
.status-pill.status-ok,
.status-dot.status-ok,
.status-pill.status-active,
.status-dot.status-active {
    --status-bg: rgba(56, 211, 159, .14);
    --status-fg: var(--panel-green);
}

.chart-fill.status-exited,
.chart-fill.status-missing,
.status-pill.status-failed,
.status-dot.status-failed,
.status-pill.status-drift,
.status-dot.status-drift,
.status-pill.status-removed,
.status-dot.status-removed,
.status-pill.status-missing,
.status-dot.status-missing,
.status-pill.status-exited,
.status-dot.status-exited,
.status-pill.status-critical {
    --status-bg: rgba(255, 107, 107, .14);
    --status-fg: var(--panel-red);
}

.chart-fill.status-other,
.chart-fill.status-unknown,
.status-pill.status-pending,
.status-dot.status-pending,
.status-pill.status-removing,
.status-dot.status-removing,
.status-pill.status-canceled,
.status-dot.status-canceled,
.status-pill.status-changing,
.status-dot.status-changing,
.status-pill.status-deleting,
.status-dot.status-deleting,
.status-pill.status-needs_apply,
.status-dot.status-needs_apply,
.status-pill.status-unknown,
.status-dot.status-unknown,
.status-pill.status-warning {
    --status-bg: rgba(244, 184, 96, .15);
    --status-fg: var(--panel-amber);
}

.chart-fill.status-running,
.chart-fill.disk {
    background: var(--panel-green);
}

.chart-fill.php {
    background: var(--panel-cyan);
}

.chart-fill.status-exited,
.chart-fill.status-missing {
    background: var(--panel-red);
}

.chart-fill.status-other,
.chart-fill.status-unknown {
    background: var(--panel-amber);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--status-bg, rgba(157, 168, 183, .14));
    color: var(--status-fg, var(--panel-muted));
    border: 1px solid currentColor;
    font-size: 12px;
    line-height: 1;
    padding: 5px 9px;
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    padding: .55rem .6rem;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .dashboard-hero,
    .job-row,
    .backup-row {
        align-items: stretch;
        flex-direction: column;
    }

    .backup-actions,
    .danger-inline-form {
        justify-content: stretch;
    }

    .backup-actions form,
    .backup-actions button,
    .danger-inline-form button,
    .danger-inline-form .form-control {
        width: 100%;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .domain-overview-grid {
        grid-template-columns: 1fr;
    }

    .form-section,
    .filter-form,
    .filter-form.compact-filter,
    .compact-form-row,
    .db-user-form,
    .cron-form,
    .policy-form,
    .tool-grid,
    .upload-inline-form,
    .inline-tool-form,
    .staging-workflow-form,
    .problem-grid,
    .event-card-main,
    .event-meta,
    .restore-wizard-form {
        grid-template-columns: 1fr;
    }

    .form-actions {
        justify-content: stretch;
    }

    .form-actions .btn,
    .filter-actions .btn,
    .danger-table-form,
    .danger-table-form .form-control,
    .danger-table-form button {
        width: 100%;
    }

    .backup-file,
    .database-summary,
    .chart-row,
    .command-search {
        grid-template-columns: 1fr;
    }

    .confirm-action-form {
        grid-template-columns: 1fr;
        max-width: none;
        min-width: 0;
    }

    .chart-value {
        text-align: left;
    }
}

/* Unified cockpit layout */
.app-shell,
.app-topbar .container-fluid {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
}

.navbar-brand {
    color: var(--panel-text);
    letter-spacing: 0;
}

.nav-tools-menu {
    position: relative;
}

.nav-tools-menu summary {
    border-radius: 6px;
    color: var(--panel-muted);
    cursor: pointer;
    font-size: 14px;
    list-style: none;
    padding: 6px 9px;
}

.nav-tools-menu summary::-webkit-details-marker {
    display: none;
}

.nav-tools-menu[open] summary,
.nav-tools-menu summary:hover {
    background: #202733;
    color: var(--panel-text);
}

.nav-tools-popover {
    background: #141922;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .32);
    display: grid;
    gap: 2px;
    left: 0;
    min-width: 190px;
    padding: 8px;
    position: absolute;
    top: calc(100% + 8px);
}

.nav-tools-popover .nav-link {
    display: block;
    white-space: nowrap;
}

.panel,
.metric,
.domain-list-card,
.domain-command-bar,
.status-tile {
    box-shadow: none;
}

.panel,
.metric {
    background: #151a22;
}

.panel {
    padding: 16px;
}

.dashboard-hero {
    background: #121720;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 14px 16px;
}

.dashboard-hero h1,
.domain-command-title h1 {
    font-size: 1.25rem;
    line-height: 1.2;
}

.btn {
    border-radius: 6px;
}

.btn-primary {
    background: #4d8dff;
    border-color: #4d8dff;
}

.btn-outline-secondary {
    border-color: #3a4654;
    color: #c2ccd9;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: #212936;
    border-color: #526174;
    color: var(--panel-text);
}

.filter-form {
    background: #121720;
    grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(130px, 170px)) auto;
    padding: 12px;
}

.filter-form.compact-filter {
    grid-template-columns: minmax(220px, 420px) auto;
}

.domain-list {
    display: grid;
    gap: 10px;
}

.attention-strip,
.bulk-bar {
    align-items: center;
    background: #121720;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
}

.bulk-bar {
    display: grid;
    grid-template-columns: auto minmax(180px, 260px) auto;
    justify-content: start;
}

.bulk-bar-title {
    color: var(--panel-muted);
    font-size: 13px;
    font-weight: 700;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.domain-list-card {
    background: #151a22;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
}

.domain-list-card[open],
.domain-list-card:hover {
    border-color: #455468;
}

.domain-list-summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(220px, 1.2fr) minmax(260px, 2fr) auto;
    list-style: none;
    padding: 13px 14px;
}

.compact-summary {
    grid-template-columns: auto minmax(240px, 1.2fr) minmax(260px, 1.7fr) auto;
    padding: 10px 12px;
}

.compact-domain-list {
    gap: 6px;
}

.compact-row {
    border-radius: 6px;
}

.compact-detail {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    padding: 10px 12px;
}

.bulk-check {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.quiet-strip .summary-chip:nth-of-type(n+3) {
    display: none;
}

.domain-list-summary::-webkit-details-marker {
    display: none;
}

.domain-list-title {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.domain-list-title a {
    color: var(--panel-text);
    font-weight: 700;
    text-decoration: none;
}

.domain-list-title a:hover {
    color: var(--panel-accent);
}

.domain-list-strip {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.summary-chip {
    background: #10161f;
    border: 1px solid #293442;
    border-radius: 999px;
    color: var(--panel-muted);
    display: inline-flex;
    font-size: 12px;
    line-height: 1;
    max-width: 100%;
    padding: 5px 9px;
}

.domain-open-link {
    justify-self: end;
}

.domain-list-detail {
    border-top: 1px solid var(--panel-border);
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px 14px 14px;
}

.domain-list-detail .notice-row {
    grid-column: 1 / -1;
}

.domain-command-bar {
    align-items: center;
    background: #121720;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 14px 16px;
    position: static;
}

.domain-command-title,
.domain-command-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.domain-command-title {
    flex: 1 1 auto;
}

.domain-command-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.domain-command-actions form {
    display: inline-flex;
}

.recommendation-card {
    align-items: center;
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px;
}

.recommendation-card strong,
.recommendation-card span {
    display: block;
}

.recommendation-card span {
    color: var(--panel-muted);
    font-size: 13px;
}

.recommendation-card.status-warning {
    border-color: #6d5630;
}

.recommendation-card.status-failed {
    border-color: #7b3a45;
}

.recommendation-card.status-ok {
    border-color: #285f4d;
}

.action-menu {
    position: relative;
}

.action-menu summary {
    list-style: none;
}

.action-menu summary::-webkit-details-marker {
    display: none;
}

.action-menu-popover {
    background: #141922;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .32);
    display: grid;
    gap: 7px;
    min-width: 190px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
}

.action-menu-popover form,
.action-menu-popover .btn {
    display: flex;
    width: 100%;
}

.operation-queue,
.activity-compact,
.restore-impact-preview {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 10px;
}

.domain-status-strip {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.status-tile {
    background: #151a22;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 12px;
}

.status-tile span,
.status-tile small {
    color: var(--panel-muted);
    font-size: 12px;
}

.status-tile strong {
    color: var(--panel-text);
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.domain-tab-nav {
    background: #121720;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    padding: 5px;
    scrollbar-width: thin;
}

.domain-tab-link {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 7px 10px;
}

.domain-tab-link.is-active {
    background: #2a3444;
}

.domain-tab-shell {
    display: flex;
}

.domain-tab-panel {
    max-width: none;
}

.section-heading {
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.panel-title {
    font-size: 14px;
    margin-bottom: 12px;
}

.workflow-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.workflow-card,
.inner-tool-section,
.inner-details,
.restore-wizard,
.fix-center,
.resource-summary,
.mini-row,
.job-row,
.cron-row,
.drift-row,
.timeline-row,
.event-card,
.notification-row {
    background: #10161f;
    border-color: #283341;
}

.entity-list {
    display: grid;
    gap: 10px;
}

.entity-row {
    background: #151a22;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
}

.entity-summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.4fr) auto;
    list-style: none;
    padding: 13px 14px;
}

.entity-summary::-webkit-details-marker {
    display: none;
}

.empty-state {
    align-items: flex-start;
    background: #10161f;
    border: 1px dashed #354253;
    border-radius: 8px;
    display: grid;
    gap: 7px;
    padding: 14px;
}

.unified-action-bar {
    background: #0f151e;
    border: 1px solid #2a3442;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
}

.action-drawer-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.action-drawer {
    min-width: 0;
}

.stack-map {
    align-items: stretch;
    background: #0f151e;
    border: 1px solid #273241;
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 10px;
}

.stack-node {
    background: #151b25;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
}

.stack-node strong,
.stack-node small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stack-arrow {
    align-self: center;
    color: var(--panel-muted);
    display: none;
    justify-self: center;
}

.status-dot {
    background: var(--status-fg, var(--panel-muted));
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.backup-timeline {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
}

.backup-timeline-point {
    background: #0f151e;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-text);
    display: grid;
    flex: 0 0 86px;
    gap: 3px;
    padding: 9px;
    text-decoration: none;
}

.backup-timeline-point:hover {
    border-color: #4d8dff;
    color: var(--panel-text);
}

.backup-timeline-point span {
    color: var(--panel-muted);
    font-size: 12px;
}

.backup-calendar {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
}

.backup-calendar-day {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-text);
    display: grid;
    min-height: 52px;
    padding: 7px;
    text-decoration: none;
}

.backup-calendar-day span {
    color: var(--panel-muted);
    font-size: 12px;
}

.backup-calendar-day strong {
    font-size: 16px;
}

.backup-calendar-day.has-snapshot {
    border-color: #2f6b57;
}

.backup-calendar-day.database-only {
    border-color: #6d5630;
}

.search-results-grid,
.client-grid,
.cleanup-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.search-result-row {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-text);
    display: grid;
    gap: 3px;
    padding: 10px;
    text-decoration: none;
}

.search-result-row:hover {
    border-color: #4d8dff;
    color: var(--panel-text);
}

.search-result-row small {
    color: var(--panel-muted);
}

.restore-cart,
.danger-card {
    border-color: #3a2f22;
}

.danger-card {
    background: #161118;
}

.promote-form,
.confirm-action-form.promote-form {
    grid-template-columns: minmax(180px, 1fr) repeat(3, auto) minmax(180px, 1fr) auto;
    max-width: none;
    width: 100%;
}

.config-version-row {
    display: block;
}

.config-version-row summary,
.mini-row summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    list-style: none;
    width: 100%;
}

.config-version-row summary::-webkit-details-marker,
.mini-row summary::-webkit-details-marker {
    display: none;
}

.config-version-grid {
    display: grid;
    gap: 7px 10px;
    grid-template-columns: 110px minmax(0, 1fr);
}

.compare-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.config-version-grid span {
    color: var(--panel-muted);
}

.config-version-grid code {
    background: #0f151e;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 5px 7px;
    word-break: break-all;
}

.import-preview {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.import-preview span {
    background: #151b25;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-muted);
    font-size: 12px;
    padding: 4px 8px;
}

.webpanel-toast-container {
    display: grid;
    gap: 10px;
    position: fixed;
    right: 18px;
    top: 76px;
    width: min(380px, calc(100vw - 28px));
    z-index: 1080;
}

.webpanel-toast {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .38);
    opacity: 1;
}

.webpanel-toast .toast-header {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .16);
    color: inherit;
}

.webpanel-toast .toast-body {
    color: inherit;
}

.quiet-state {
    background: #10161f;
    border: 1px solid #263442;
    border-radius: 8px;
    display: grid;
    gap: 3px;
    padding: 12px;
}

.quiet-state span,
.inline-meta {
    color: var(--panel-muted);
    font-size: 12px;
}

.usage-chart-wrap {
    height: 280px;
    position: relative;
}

.large-chart-wrap {
    height: clamp(260px, 38vh, 420px);
    position: relative;
}

.large-chart-wrap.compact-chart {
    height: 280px;
}

.graph-panel {
    min-height: 100%;
}

.chart-empty-state {
    inset: 0;
    display: grid;
    place-items: center;
    position: absolute;
    pointer-events: none;
}

.wizard-steps {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wizard-steps span,
.wizard-steps button {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-muted);
    font-size: 12px;
    min-width: 0;
    padding: 8px 10px;
    text-align: center;
}

.wizard-steps button {
    cursor: pointer;
}

.wizard-steps .is-active,
.wizard-steps button.is-active {
    border-color: #4d8dff;
    color: var(--panel-text);
}

.wizard-steps .is-complete,
.wizard-steps button.is-complete {
    border-color: #2f6b57;
    color: var(--panel-green);
}

.wizard-pane {
    display: none;
}

.wizard-pane.is-active {
    display: block;
}

.wizard-actions,
.backup-capability-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.restore-result-card,
.restore-progress-card,
.compare-diff-card {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 12px;
}

.compare-card-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.compare-card-head span,
.compare-details summary {
    color: var(--panel-muted);
    font-size: 12px;
}

.compare-list {
    display: grid;
    gap: 6px;
    max-height: 160px;
    overflow: auto;
    padding-top: 8px;
}

.compare-artifact-state {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.restore-progress {
    background: #0d1219;
    height: 10px;
}

.restore-progress .progress-bar {
    background: linear-gradient(90deg, var(--panel-cyan), var(--panel-green));
}

.compare-diff-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.domain-list-toolbar {
    display: grid;
    gap: 12px;
}

.domain-search-inline {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(220px, 1fr) auto;
}

.bulk-actions-drawer .bulk-bar {
    background: #10161f;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(220px, 320px) auto;
    padding: 10px;
}

.clean-domain-list {
    display: grid;
    gap: 8px;
}

.clean-domain-row {
    background: #151a22;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
}

.clean-domain-summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 12px;
    list-style: none;
    padding: 12px 14px;
}

.clean-domain-summary.is-admin-grid {
    grid-template-columns: auto minmax(260px, 1.4fr) minmax(210px, 1fr) auto minmax(160px, .7fr);
}

.clean-domain-summary.is-user-grid {
    grid-template-columns: minmax(260px, 1.4fr) minmax(210px, 1fr) auto minmax(160px, .7fr);
}

.clean-domain-summary::-webkit-details-marker {
    display: none;
}

.domain-backup-cell {
    color: var(--panel-muted);
    font-size: 12px;
    text-align: right;
}

.clean-domain-detail {
    border-top: 1px solid var(--panel-border);
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding: 12px 14px;
}

.system-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.system-overview-strip {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.action-card {
    border: 1px solid var(--panel-border);
    color: var(--panel-text);
    display: grid;
    gap: 10px;
    text-align: left;
}

.workflow-card {
    padding: 11px;
}

.workflow-card strong {
    font-size: 14px;
}

.workflow-card span {
    font-size: 12px;
    line-height: 1.35;
}

.table {
    font-size: 14px;
}

.table > :not(caption) > * > * {
    padding: .48rem .55rem;
}

.status-pill {
    border-color: transparent;
    font-size: 11px;
    padding: 5px 8px;
}

.metric::before {
    display: none;
}

.metric-value,
.display-value {
    font-size: 22px;
}

@media (max-width: 1100px) {
    .domain-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stack-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .domain-list-summary {
        grid-template-columns: minmax(220px, 1fr) auto;
    }

    .domain-list-strip {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .domain-list-detail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .app-shell {
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-topbar .container-fluid {
        align-items: stretch;
    }

    .navbar-nav {
        width: 100%;
    }

    .nav-tools-menu {
        position: static;
    }

    .nav-tools-popover {
        margin-top: 6px;
        position: static;
        width: min(100%, 320px);
    }

    .domain-command-bar,
    .domain-command-title,
    .domain-command-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .domain-command-bar {
        position: static;
    }

    .domain-command-actions,
    .domain-command-actions form,
    .domain-command-actions .btn {
        width: 100%;
    }

    .domain-status-strip,
    .domain-list-summary,
    .domain-list-detail,
    .clean-domain-summary,
    .clean-domain-detail,
    .stack-map,
    .entity-summary,
    .promote-form,
    .confirm-action-form.promote-form,
    .system-grid,
    .bulk-bar,
    .bulk-actions-drawer .bulk-bar,
    .domain-search-inline,
    .compact-summary,
    .search-results-grid,
    .client-grid,
    .cleanup-grid,
    .wizard-steps {
        grid-template-columns: 1fr;
    }

    .action-menu-popover {
        left: 0;
        right: auto;
    }

    .domain-open-link {
        justify-self: stretch;
        width: 100%;
    }

    .dashboard-hero {
        padding: 12px;
    }

    .filter-form,
    .filter-form.compact-filter {
        grid-template-columns: 1fr;
    }
}

/* Premium UI / UX Redesign Styles */

/* 2-column Grid layout for tabs on desktop */
.grid-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 992px) {
    .grid-two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-two-col-75 {
        grid-template-columns: 1.4fr 1fr;
    }
}

/* Premium Card Layout */
.premium-card {
    background: linear-gradient(180deg, #181d26 0%, #13171f 100%);
    border: 1px solid #2a3442;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.premium-card:hover {
    border-color: #3b485c;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.premium-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--panel-text);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #2a3442;
    padding-bottom: 10px;
}

.premium-card-subtitle {
    font-size: 12px;
    color: var(--panel-muted);
    font-weight: normal;
    text-transform: none;
}

/* Clipboard and Password Field Tweaks */
.credential-row-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #0f131a;
    border: 1px solid #242c38;
    border-radius: 6px;
    padding: 6px 10px;
}

.credential-row-flex code {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--panel-text);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.copy-btn, .toggle-password {
    background: transparent;
    border: 0;
    color: var(--panel-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    transition: color 0.15s ease;
}

.copy-btn:hover, .toggle-password:hover {
    color: var(--panel-accent);
}

/* Wizard enhancements */
.wizard-steps-premium {
    display: flex;
    border: 1px solid #242c38;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #0f131a;
}

.wizard-steps-premium button {
    flex: 1;
    background: transparent;
    border: 0;
    border-right: 1px solid #242c38;
    color: var(--panel-muted);
    font-size: 12px;
    padding: 10px 8px;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s;
}

.wizard-steps-premium button:last-child {
    border-right: 0;
}

.wizard-steps-premium button.is-active {
    background: rgba(77, 141, 255, 0.1);
    color: var(--panel-accent);
    font-weight: 700;
}

.wizard-steps-premium button.is-complete {
    background: rgba(56, 211, 159, 0.05);
    color: var(--panel-green);
}

/* Compare View side-by-side header */
.compare-header-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .compare-header-container {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
}

.compare-header-card {
    background: #141922;
    border: 1px solid #2a3442;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.compare-header-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--panel-muted);
    font-size: 16px;
    background: #1c2330;
    border: 1px solid #2a3442;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto;
}

/* Compare stats widgets */
.compare-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.compare-stat-widget {
    background: #10151e;
    border: 1px solid #242c38;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.compare-stat-title {
    color: var(--panel-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}

.compare-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--panel-text);
}

.compare-stat-delta {
    font-size: 11px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
}

.compare-stat-delta.positive {
    color: var(--panel-red);
}

.compare-stat-delta.negative {
    color: var(--panel-green);
}

.compare-stat-delta.neutral {
    color: var(--panel-muted);
}

/* Compare Diff Viewer */
.compare-diff-list-box {
    background: #090d14;
    border: 1px solid #1f2733;
    border-radius: 6px;
    padding: 8px;
    max-height: 240px;
    overflow-y: auto;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    scrollbar-width: thin;
}

.compare-diff-line {
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 2px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    word-break: break-all;
}

.compare-diff-line-added {
    background: rgba(56, 211, 159, 0.12);
    color: #55f3be;
    border-left: 3px solid var(--panel-green);
}

.compare-diff-line-removed {
    background: rgba(255, 107, 107, 0.12);
    color: #ff8e8e;
    border-left: 3px solid var(--panel-red);
}

.compare-diff-line-empty {
    color: var(--panel-muted);
    font-style: italic;
    padding: 6px;
    text-align: center;
}

.backup-calendar-premium {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
}

.backup-calendar-day-premium {
    background: #10161f;
    border: 1px solid #242c38;
    border-radius: 6px;
    color: var(--panel-text);
    padding: 6px;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    font-size: 11px;
}

.backup-calendar-day-premium:hover {
    background: #19222f;
    border-color: #3b485c;
    color: var(--panel-text);
}

.backup-calendar-day-premium span {
    display: block;
    color: var(--panel-muted);
    font-size: 9px;
}

.backup-calendar-day-premium strong {
    font-size: 13px;
    display: block;
    margin-top: 2px;
}

.backup-calendar-day-premium.has-snapshot {
    border-left: 3px solid var(--panel-green);
    background: rgba(56, 211, 159, 0.04);
}

.backup-calendar-day-premium.database-only {
    border-left: 3px solid var(--panel-amber);
    background: rgba(244, 184, 96, 0.04);
}

/* =========================================================
   Resource Statistics Page
   ========================================================= */

.stats-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 992px) {
    .stats-charts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stats-chart-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.chart-wrapper {
    position: relative;
    height: 260px;
    width: 100%;
}

.chart-wrapper-sm {
    height: 180px;
}

.stats-history-panel {
    /* uses existing .panel */
}

.stats-domain-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--panel-border);
}

.stats-domain-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 80px;
}

.stats-metric-label {
    font-size: 11px;
    color: var(--panel-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stats-metric-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--panel-text);
}

.stats-table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--panel-muted);
    border-color: var(--panel-border);
    white-space: nowrap;
    padding: 8px 12px;
}

.stats-table tbody td {
    font-size: 13px;
    border-color: var(--panel-border);
    padding: 8px 12px;
    vertical-align: middle;
}

.stats-table tbody tr:hover td {
    background: rgba(255, 255, 255, .025);
}

th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover {
    color: var(--panel-text);
}