.dependency-monitoring-page {
    gap: 1.25rem;
}

.dependency-monitoring-hero {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--nav-accent) 26%, var(--surface-border));
    background:
        radial-gradient(circle at 88% -20%, color-mix(in srgb, var(--nav-accent) 26%, transparent), transparent 42%),
        rgba(255, 255, 255, .82);
}

html[data-theme="dark"] .dependency-monitoring-hero {
    background:
        radial-gradient(circle at 88% -20%, color-mix(in srgb, var(--nav-accent) 30%, transparent), transparent 42%),
        rgba(15, 23, 42, .88);
}

.dependency-monitoring-actions,
.dependency-monitoring-actions .e-btn,
.dependency-monitoring-actions a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.dependency-monitoring-actions {
    flex-wrap: wrap;
}

.dependency-monitoring-actions .e-btn,
.dependency-monitoring-actions a {
    min-height: 2.5rem;
    border-radius: .75rem;
    font-weight: 700;
    text-decoration: none;
}

.dependency-monitoring-card {
    gap: 1.25rem;
    padding: 1.35rem;
}

.dependency-monitoring-report-panel {
    min-height: 28rem;
}

.dependency-monitoring-report-panel .statuscake-panel-header {
    align-items: center;
}

.dependency-monitoring-report-body {
    overflow: visible;
}

.dependency-monitoring-card .e-tab .e-tab-header {
    display: inline-block;
    width: fit-content !important;
    max-width: 100%;
    padding: .28rem;
    overflow: visible;
    border: 1px solid var(--surface-border);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--surface-bg) 88%, var(--nav-accent) 12%);
}

.dependency-monitoring-card .e-tab .e-tab-header .e-toolbar-items {
    gap: .2rem;
    width: auto;
}

.dependency-monitoring-card .e-tab .e-tab-header .e-toolbar-item {
    margin: 0;
}

.dependency-monitoring-card .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    min-height: 2.6rem;
    padding: .45rem .78rem;
    border-radius: .65rem;
    color: var(--nav-muted);
    font-size: .86rem;
    font-weight: 750;
    letter-spacing: .01em;
    text-transform: none;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.dependency-monitoring-card .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    color: var(--nav-accent);
    background: var(--surface-bg);
    box-shadow: 0 2px 7px rgba(15, 23, 42, .12);
}

.dependency-monitoring-card .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    white-space: nowrap;
}

.dependency-monitoring-card .e-tab .e-tab-header .e-indicator {
    display: none;
}

.dependency-monitoring-tab-content {
    padding-top: 1.25rem;
}

.dependency-monitoring-tab-list {
    display: inline-flex;
    gap: .2rem;
    justify-self: start;
    max-width: 100%;
    padding: .28rem;
    overflow-x: auto;
    border: 1px solid var(--surface-border);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--surface-bg) 88%, var(--nav-accent) 12%);
}

.dependency-monitoring-tab-button {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    min-height: 2.6rem;
    padding: .45rem .85rem;
    border: 0;
    border-radius: .65rem;
    color: var(--nav-muted);
    background: transparent;
    font: inherit;
    font-size: .86rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.dependency-monitoring-tab-button:hover,
.dependency-monitoring-tab-button:focus-visible {
    color: var(--nav-text);
    background: color-mix(in srgb, var(--surface-bg) 86%, var(--nav-accent) 14%);
    outline: none;
}

.dependency-monitoring-tab-button.is-active {
    color: var(--nav-accent);
    background: var(--surface-bg);
    box-shadow: 0 2px 7px rgba(15, 23, 42, .12);
}

.dependency-monitoring-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1.25rem;
}

.dependency-monitoring-metric {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .8rem;
    align-items: center;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-bg) 86%, var(--nav-accent) 14%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.dependency-monitoring-metric-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .8rem;
    color: var(--nav-accent);
    background: color-mix(in srgb, var(--nav-accent) 14%, transparent);
}

.dependency-monitoring-metric-label {
    display: block;
    color: var(--nav-muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.dependency-monitoring-metric-value {
    display: block;
    margin-top: .12rem;
    color: var(--nav-text);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
}

.dependency-monitoring-metric.is-alert .dependency-monitoring-metric-icon {
    color: #dc2626;
    background: rgba(220, 38, 38, .12);
}

.dependency-monitoring-grid .e-grid {
    overflow: hidden;
    border: 1px solid var(--surface-border);
    border-radius: .9rem;
}

.dependency-monitoring-grid .e-gridheader,
.dependency-monitoring-grid .e-grid .e-toolbar {
    background: color-mix(in srgb, var(--surface-bg) 92%, var(--nav-accent) 8%);
}

.dependency-monitoring-grid .e-grid .e-toolbar {
    padding: .35rem .45rem;
}

.dependency-monitoring-grid .e-grid .e-rowcell,
.dependency-monitoring-grid .e-grid .e-headercell {
    border-color: var(--surface-border);
}

.dependency-monitoring-grid a {
    color: var(--nav-accent);
    font-weight: 750;
    text-underline-offset: .18rem;
}

.dependency-monitoring-repository-link {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dependency-monitoring-severity {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.dependency-monitoring-severity.is-critical { color: #b91c1c; background: rgba(220, 38, 38, .14); }
.dependency-monitoring-severity.is-high { color: #c2410c; background: rgba(234, 88, 12, .14); }
.dependency-monitoring-severity.is-moderate { color: #a16207; background: rgba(202, 138, 4, .14); }
.dependency-monitoring-severity.is-low { color: #047857; background: rgba(5, 150, 105, .14); }
.dependency-monitoring-severity.is-unknown { color: var(--nav-muted); background: color-mix(in srgb, var(--surface-border) 72%, transparent); }

.dependency-monitoring-reference {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 750;
    white-space: nowrap;
}

.dependency-monitoring-reference.is-direct { color: var(--nav-accent); background: color-mix(in srgb, var(--nav-accent) 14%, transparent); }
.dependency-monitoring-reference.is-transitive { color: var(--nav-muted); background: color-mix(in srgb, var(--surface-border) 76%, transparent); }

.dependency-monitoring-section-title {
    margin: 0 0 .2rem;
    color: var(--nav-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.dependency-monitoring-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.dependency-monitoring-chart-panel {
    min-width: 0;
    padding: 1.05rem;
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-bg) 94%, var(--nav-accent) 6%);
}

.dependency-monitoring-chart-panel .e-chart,
.dependency-monitoring-chart-panel .e-chart svg {
    background: transparent !important;
}

.dependency-trace-intro {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    max-width: 72rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--nav-accent) 28%, var(--surface-border));
    border-radius: .9rem;
    color: var(--nav-muted);
    background: color-mix(in srgb, var(--surface-bg) 93%, var(--nav-accent) 7%);
    line-height: 1.45;
}

.dependency-trace-intro i { margin-top: .15rem; color: var(--nav-accent); }

.dependency-trace-browser {
    display: grid;
    grid-template-columns: minmax(12rem, .7fr) minmax(0, 2.3fr);
    gap: 1rem;
    margin-top: 1rem;
}

.dependency-trace-diagram-workspace {
    display: grid;
    gap: .8rem;
    min-width: 0;
}

.dependency-trace-package-picker {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}

.dependency-trace-package-picker .dependency-trace-package {
    flex: 1 1 13rem;
    max-width: 24rem;
}

.dependency-trace-diagram-shell {
    overflow: hidden;
    min-height: 340px;
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-bg) 94%, var(--nav-accent) 6%);
}

.dependency-trace-diagram-shell .e-diagram {
    background: transparent !important;
}

.dependency-trace-sources,
.dependency-trace-flow {
    display: grid;
    gap: .6rem;
    padding: 1rem;
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-bg) 95%, var(--nav-accent) 5%);
}

.dependency-trace-caption,
.dependency-trace-node-label {
    color: var(--nav-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dependency-trace-source,
.dependency-trace-package {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .65rem .7rem;
    border: 1px solid transparent;
    border-radius: .7rem;
    color: var(--nav-text);
    background: var(--surface-soft);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dependency-trace-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dependency-trace-source em { margin-left: auto; color: var(--nav-muted); font-size: .78rem; font-style: normal; }
.dependency-trace-source.is-active,
.dependency-trace-package.is-active { border-color: color-mix(in srgb, var(--nav-accent) 58%, var(--surface-border)); background: color-mix(in srgb, var(--nav-accent) 12%, var(--surface-bg)); color: var(--nav-accent); }

.dependency-trace-flow {
    grid-template-columns: minmax(9rem, .8fr) auto minmax(11rem, 1fr) auto minmax(15rem, 1.25fr);
    align-items: start;
}

.dependency-trace-node,
.dependency-trace-advisories { min-width: 0; }

.dependency-trace-source-node {
    display: grid;
    gap: .4rem;
    padding: .85rem;
    border-radius: .8rem;
    background: color-mix(in srgb, var(--nav-accent) 12%, var(--surface-bg));
}

.dependency-trace-source-node strong { overflow-wrap: anywhere; }
.dependency-trace-arrow { align-self: center; color: var(--nav-muted); }
.dependency-trace-package-list,
.dependency-trace-advisories { display: grid; gap: .55rem; }
.dependency-trace-package { display: grid; gap: .2rem; }
.dependency-trace-package small { color: var(--nav-muted); }
.dependency-trace-advisory { display: grid; gap: .35rem; padding: .75rem; border: 1px solid var(--surface-border); border-radius: .75rem; background: var(--surface-soft); }
.dependency-trace-advisory strong { font-size: .9rem; }
.dependency-trace-identifier { color: var(--nav-muted); font-family: Consolas, monospace; font-size: .78rem; }
.dependency-trace-advisory a { color: var(--nav-accent); font-size: .82rem; font-weight: 750; text-decoration: none; }

.dependency-monitoring-form-panel {
    display: grid;
    gap: 1rem;
    max-width: 44rem;
    padding: 1.1rem;
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-bg) 93%, var(--nav-accent) 7%);
}

.dependency-monitoring-preferences-card {
    display: grid;
    gap: 1.25rem;
    max-width: 54rem;
    padding: 1.3rem;
    border: 1px solid var(--statuscake-panel-border);
    border-radius: 1rem;
    background: var(--statuscake-card-strong-bg);
}

.dependency-monitoring-preferences-heading {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}

.dependency-monitoring-preferences-heading h2,
.dependency-monitoring-preferences-heading p {
    margin: 0;
}

.dependency-monitoring-preferences-heading h2 {
    color: var(--page-text);
    font-size: 1.05rem;
}

.dependency-monitoring-preferences-heading p {
    margin-top: .25rem;
    color: var(--nav-muted);
}

.dependency-monitoring-preferences-grid {
    display: grid;
    grid-template-columns: minmax(14rem, .8fr) minmax(16rem, 1.2fr);
    gap: 1rem;
    align-items: end;
}

.dependency-monitoring-preferences-grid .statuscake-field {
    display: grid;
    gap: .55rem;
}

.dependency-monitoring-preferences-grid label {
    color: var(--page-text);
    font-size: .88rem;
    font-weight: 700;
}

.dependency-monitoring-notification-toggle .e-checkbox-wrapper {
    width: fit-content;
}

.dependency-monitoring-dialog .e-dlg-content {
    padding: 1.25rem 1.35rem;
}

.dependency-monitoring-dialog .e-dlg-header-content,
.dependency-monitoring-dialog .e-footer-content {
    border-color: var(--statuscake-panel-border);
    background: var(--statuscake-panel-bg);
}

.dependency-monitoring-dialog-alert {
    display: grid;
    gap: .65rem;
    padding: 1rem;
    border: 1px solid var(--statuscake-panel-border);
    border-radius: .85rem;
    background: var(--statuscake-card-strong-bg);
}

.dependency-monitoring-dialog-alert p {
    margin: 0;
    color: var(--page-text);
    font-weight: 600;
    line-height: 1.5;
}

.dependency-monitoring-dialog-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.dependency-monitoring-advisory-link {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    width: fit-content;
    color: var(--nav-accent);
    font-weight: 750;
    text-decoration: none;
}

.dependency-monitoring-settings-panel,
.dependency-monitoring-maintenance-panel {
    display: grid;
    gap: 1.15rem;
    max-width: 62rem;
    padding: 1.25rem;
    border: 1px solid var(--surface-border);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--surface-bg) 94%, var(--nav-accent) 6%);
}

.dependency-monitoring-maintenance-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-top: 1rem;
}

.dependency-monitoring-panel-heading,
.dependency-monitoring-danger-heading {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
}

.dependency-monitoring-panel-heading > div,
.dependency-monitoring-danger-heading > div {
    min-width: 0;
}

.dependency-monitoring-panel-heading .feature-management-note,
.dependency-monitoring-danger-heading .feature-management-note,
.dependency-monitoring-maintenance-panel .feature-management-note {
    margin: .25rem 0 0;
}

.dependency-monitoring-panel-icon,
.dependency-monitoring-danger-heading > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .75rem;
    color: var(--nav-accent);
    background: color-mix(in srgb, var(--nav-accent) 14%, transparent);
}

.dependency-monitoring-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
    max-width: 60rem;
}

.dependency-monitoring-field {
    display: grid;
    gap: .45rem;
}

.dependency-monitoring-field label {
    color: var(--nav-text);
    font-size: .82rem;
    font-weight: 750;
}

.dependency-monitoring-field label span {
    color: var(--nav-muted);
    font-weight: 600;
}

.dependency-monitoring-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.65rem;
    padding: .55rem .75rem;
    border: 1px solid var(--surface-border);
    border-radius: .65rem;
    color: var(--nav-text);
    background: var(--surface-bg);
    font: inherit;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.dependency-monitoring-input:focus {
    border-color: var(--nav-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-accent) 22%, transparent);
}

.dependency-monitoring-field-actions {
    display: flex;
    align-items: end;
}

.e-btn.dependency-monitoring-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.65rem;
    padding-inline: .9rem;
    border-radius: .65rem;
    font-weight: 750;
}

.dependency-monitoring-danger-zone {
    display: grid;
    gap: 1.1rem;
    max-width: 54rem;
    padding: 1.3rem;
    border: 1px solid color-mix(in srgb, #ef4444 38%, var(--surface-border));
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--surface-bg) 93%, #ef4444 7%);
}

.dependency-monitoring-reset-content {
    display: grid;
    gap: 1rem;
}

.dependency-monitoring-danger-heading > span {
    color: #dc2626;
    background: rgba(220, 38, 38, .14);
}

.dependency-monitoring-danger-fields {
    display: grid;
    gap: .9rem;
}

.dependency-monitoring-danger-fields .e-input-group,
.dependency-monitoring-danger-fields .e-float-input {
    border-radius: .65rem;
}

.e-btn.dependency-monitoring-warning-button {
    border-color: #d97706 !important;
    color: #fff !important;
    background: #d97706 !important;
}

.e-btn.dependency-monitoring-warning-button:disabled {
    opacity: .5;
}

.e-btn.dependency-monitoring-danger-button {
    border-color: #dc2626 !important;
    color: #fff !important;
    background: #dc2626 !important;
}

.e-btn.dependency-monitoring-danger-button:disabled {
    opacity: .5;
}

@media (max-width: 980px) {
    .dependency-monitoring-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dependency-monitoring-settings-grid { grid-template-columns: 1fr 1fr; }
    .dependency-monitoring-preferences-grid { grid-template-columns: 1fr; }
    .dependency-monitoring-chart-grid { grid-template-columns: 1fr; }
    .dependency-monitoring-field-actions { grid-column: 1 / -1; }
    .dependency-trace-browser { grid-template-columns: 1fr; }
    .dependency-trace-flow { grid-template-columns: minmax(9rem, .8fr) auto minmax(11rem, 1fr); }
    .dependency-trace-advisories { grid-column: 1 / -1; }
    .dependency-trace-flow > .dependency-trace-arrow:last-of-type { display: none; }
}

@media (max-width: 560px) {
    .dependency-monitoring-hero,
    .dependency-monitoring-card { padding: 1rem; border-radius: 1.15rem; }
    .dependency-monitoring-metrics { grid-template-columns: 1fr; }
    .dependency-monitoring-settings-grid { grid-template-columns: 1fr; }
    .dependency-monitoring-maintenance-panel { grid-template-columns: 1fr; }
    .dependency-monitoring-field-actions { grid-column: auto; }
    .dependency-monitoring-dialog-fields { grid-template-columns: 1fr; }
    .dependency-monitoring-report-panel .statuscake-panel-header { align-items: flex-start; }
    .dependency-trace-flow { grid-template-columns: 1fr; }
    .dependency-trace-arrow { display: none; }
    .dependency-monitoring-actions { width: 100%; }
    .dependency-monitoring-actions .e-btn,
    .dependency-monitoring-actions a { justify-content: center; flex: 1 1 auto; }
    .dependency-monitoring-card .e-tab .e-tab-header {
        display: block;
        width: 100% !important;
        overflow-x: auto;
    }
}