:root {
    color-scheme: light;

    --background: #f3f6fa;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --border: #e3e8ef;

    --text: #152033;
    --text-soft: #647084;
    --text-muted: #8a95a6;

    --accent: #167d68;
    --accent-dark: #0f6655;
    --accent-soft: #e7f6f1;

    --success: #17805f;
    --success-soft: #e4f6ee;

    --warning: #a76a05;
    --warning-soft: #fff2d6;

    --danger: #c24141;
    --danger-soft: #fde9e9;

    --info: #316eb8;
    --info-soft: #e9f1fb;

    --sidebar: #101b2b;
    --sidebar-soft: #17253a;
    --sidebar-text: #dbe4f1;

    --shadow:
        0 18px 45px rgba(25, 38, 58, 0.08);

    --radius-small: 12px;
    --radius: 18px;
    --radius-large: 26px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);
    background: var(--background);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.app-body--public {
    position: relative;
    min-height: 100vh;
    padding: 0 28px;
    overflow-x: hidden;

    background:
        linear-gradient(
            135deg,
            #f7fafc 0%,
            #f2f9f8 34%,
            #f5f7fb 67%,
            #f8fafc 100%
        );

    background-size: 240% 240%;

    animation:
        public-background-shift
        28s
        ease-in-out
        infinite;
}
.app-body--public::before,
.app-body--public::after {
    content: "";

    position: fixed;
    z-index: 0;

    width: min(620px, 62vw);
    aspect-ratio: 1;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

    opacity: 0.24;

    will-change:
        transform,
        opacity;
}

.app-body--public::before {
    top: -240px;
    left: -180px;

    background:
        radial-gradient(
            circle,
            rgba(26, 159, 130, 0.55) 0%,
            rgba(26, 159, 130, 0.18) 46%,
            rgba(26, 159, 130, 0) 72%
        );

    animation:
        public-glow-primary
        24s
        ease-in-out
        infinite alternate;
}

.app-body--public::after {
    right: -220px;
    bottom: -280px;

    background:
        radial-gradient(
            circle,
            rgba(60, 125, 190, 0.46) 0%,
            rgba(73, 132, 184, 0.14) 48%,
            rgba(73, 132, 184, 0) 74%
        );

    animation:
        public-glow-secondary
        30s
        ease-in-out
        infinite alternate;
}
.app-body--public > .public-header,
.app-body--public > .public-main,
.app-body--public > .site-footer,
.app-body--public > .public-footer {
    position: relative;
    z-index: 1;
}
.public-header {
    width: min(1180px, 100%);
    min-height: 86px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.public-brand,
.sidebar__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.app-brand-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;

    display: block;

    object-fit: contain;
}

.app-brand-logo--sidebar {
    width: 44px;
    height: 44px;
}

.public-brand strong,
.public-brand small,
.sidebar__brand strong,
.sidebar__brand small {
    display: block;
}

.public-brand small {
    margin-top: 2px;
    color: var(--text-soft);
}

.button {
    min-height: 42px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid transparent;
    border-radius: 12px;

    font-weight: 700;
}

.button--secondary {
    border-color: var(--border);
    background: var(--surface);
}

.public-main {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 48px 0 80px;
}

.hero {
    max-width: 760px;
    margin-bottom: 36px;
}

.hero__eyebrow,
.section-heading__eyebrow,
.topbar__eyebrow {
    display: block;
    margin-bottom: 8px;

    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0;

    font-size: clamp(38px, 7vw, 68px);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.hero p {
    max-width: 650px;
    margin: 22px 0 0;

    color: var(--text-soft);
    font-size: 18px;
    line-height: 1.7;
}

.overall-status {
    padding: 22px 24px;
    margin-bottom: 42px;

    display: flex;
    align-items: center;
    gap: 16px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.overall-status--operational {
    border-color: #bfe8d7;
    background: var(--success-soft);
}

.overall-status--attention {
    border-color: #f0d19b;
    background: var(--warning-soft);
}

.status-dot {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;

    border-radius: 50%;
    background: var(--success);
    box-shadow:
        0 0 0 7px rgba(23, 128, 95, 0.12);
}

.overall-status--attention .status-dot {
    background: var(--warning);
    box-shadow:
        0 0 0 7px rgba(167, 106, 5, 0.12);
}

.overall-status strong,
.overall-status span {
    display: block;
}

.overall-status span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 14px;
}
.dashboard-status {
    margin-bottom: 24px;
}

.dashboard-status__content {
    min-width: 0;
    flex: 1;
}

.dashboard-status__button {
    margin-left: auto;
    white-space: nowrap;
}
.section-heading {
    margin-bottom: 22px;

    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
}

.section-heading h2 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.025em;
}

.section-heading__meta {
    color: var(--text-muted);
    font-size: 13px;
}

.empty-state {
    padding: 34px;

    border: 1px dashed #cad2de;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.58);
}

.empty-state p {
    margin: 8px 0 0;
    color: var(--text-soft);
    line-height: 1.65;
}

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

.service-card {
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow:
        0 10px 30px rgba(25, 38, 58, 0.05);
}

.service-card__top,
.service-card__identity,
.service-card__meta {
    display: flex;
    align-items: center;
}

.service-card__top {
    justify-content: space-between;
    gap: 16px;
}

.service-card__identity {
    min-width: 0;
    gap: 12px;
}

.service-card__identity strong,
.service-card__identity small {
    display: block;
}

.service-card__identity small {
    margin-top: 4px;
    color: var(--text-soft);
}

.service-card__icon,
.service-card__icon-placeholder {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;

    border-radius: 13px;
}

.service-card__icon {
    object-fit: contain;
}

.service-card__icon-placeholder {
    display: grid;
    place-items: center;

    color: var(--accent);
    font-weight: 800;
    background: var(--accent-soft);
}

.service-status {
    padding: 7px 10px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.service-status--operational {
    color: var(--success);
    background: var(--success-soft);
}

.service-status--degraded,
.service-status--maintenance {
    color: var(--warning);
    background: var(--warning-soft);
}

.service-status--outage {
    color: var(--danger);
    background: var(--danger-soft);
}

.service-status--unknown,
.service-status--disabled {
    color: var(--text-soft);
    background: var(--surface-soft);
}

.service-card__meta {
    margin-top: 18px;
    padding-top: 16px;

    justify-content: space-between;
    gap: 16px;

    border-top: 1px solid var(--border);

    color: var(--text-soft);
    font-size: 13px;
}

.service-card__meta strong {
    color: var(--text);
}

.site-footer {
    color: var(--text-muted);
    font-size: 13px;
}

.site-footer--public {
    width: min(1180px, 100%);
    margin: 0 auto 28px;
}

.site-footer--dashboard {
    margin: 0 34px 28px;
}

.site-footer__content {
    padding: 20px 24px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow:
        0 10px 30px rgba(25, 38, 58, 0.05);

    text-align: center;
}

.site-footer a {
    transition:
        color 0.2s ease;
}

.site-footer a:hover {
    color: var(--accent);
}

.site-footer__separator {
    color: var(--border);
}

/* Dashboard */

.dashboard-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
    min-height: 100vh;
    padding: 24px 18px;

    position: sticky;
    top: 0;
    align-self: start;

    display: flex;
    flex-direction: column;

    color: var(--sidebar-text);
    background:
        radial-gradient(
            circle at top left,
            rgba(32, 132, 117, 0.22),
            transparent 35%
        ),
        var(--sidebar);
}

.sidebar__brand {
    padding: 0 10px 26px;
}

.sidebar__brand small {
    margin-top: 2px;
    color: #8291a8;
}

.sidebar__nav {
    display: grid;
    gap: 6px;
}

.sidebar__link {
    min-height: 46px;
    padding: 0 14px;

    display: flex;
    align-items: center;

    border-radius: 12px;

    color: #aebbd0;
    font-weight: 650;
}

.sidebar__link:hover {
    color: #ffffff;
    background: var(--sidebar-soft);
}

.sidebar__link--active {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            rgba(31, 152, 127, 0.32),
            rgba(48, 108, 177, 0.28)
        );
}

.sidebar__footer {
    margin-top: auto;
    padding: 24px 12px 4px;

    color: #8291a8;
    font-size: 13px;
}

.dashboard-main {
    min-width: 0;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

.topbar {
    min-height: 102px;
    padding: 22px 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    border-bottom: 1px solid var(--border);
    background:
        rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
}

.topbar h1 {
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.025em;
}

.topbar__user {
    padding: 10px 14px;

    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);

    color: var(--text-soft);
    font-size: 14px;
    font-weight: 700;
}

.dashboard-content {
    flex: 1;
    padding: 32px 34px 50px;
}

.dashboard-intro {
    padding: 28px;
    margin-bottom: 24px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;

    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f4faf8
        );
    box-shadow: var(--shadow);
}

.dashboard-intro h2 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.03em;
}

.dashboard-intro p {
    max-width: 720px;
    margin: 12px 0 0;

    color: var(--text-soft);
    line-height: 1.7;
}

.badge {
    padding: 8px 11px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.badge--success {
    color: var(--success);
    background: var(--success-soft);
}

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

.metric-card {
    padding: 22px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.metric-card__label,
.metric-card small {
    display: block;
    color: var(--text-soft);
}

.metric-card__label {
    font-size: 13px;
    font-weight: 700;
}

.metric-card__value {
    display: block;
    margin: 12px 0 6px;

    font-size: 30px;
    letter-spacing: -0.04em;
}

.metric-card small {
    font-size: 12px;
}

.panel-grid {
    margin-top: 18px;

    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 18px;
}

.panel {
    padding: 24px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.panel__heading h3 {
    margin: 0;
    font-size: 21px;
}

.panel__text {
    margin: 18px 0 0;

    color: var(--text-soft);
    line-height: 1.7;
}

.check-list {
    margin-top: 20px;
    display: grid;
    gap: 11px;
}

.check-list__item {
    padding: 12px 14px;

    display: flex;
    align-items: center;
    gap: 11px;

    border-radius: 12px;
    background: var(--surface-soft);
}

.check-list__icon {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--success);
    background: var(--success-soft);

    font-weight: 900;
}
@keyframes public-background-shift {
    0% {
        background-position:
            0% 42%;
    }

    50% {
        background-position:
            100% 58%;
    }

    100% {
        background-position:
            0% 42%;
    }
}

@keyframes public-glow-primary {
    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: 0.2;
    }

    50% {
        transform:
            translate3d(130px, 90px, 0)
            scale(1.12);

        opacity: 0.29;
    }

    100% {
        transform:
            translate3d(45px, 180px, 0)
            scale(0.96);

        opacity: 0.23;
    }
}

@keyframes public-glow-secondary {
    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: 0.18;
    }

    50% {
        transform:
            translate3d(-150px, -80px, 0)
            scale(1.14);

        opacity: 0.27;
    }

    100% {
        transform:
            translate3d(-60px, -170px, 0)
            scale(0.98);

        opacity: 0.21;
    }
}
@media (max-width: 1020px) {
    .metric-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 780px) {
    .app-body--public {
        padding: 0 18px;
    }

    .dashboard-shell {
        display: block;
    }

    .sidebar__footer {
        margin-top: 20px;
    }

    .topbar,
    .dashboard-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .dashboard-intro {
        display: block;
    }

    .dashboard-intro .badge {
        display: inline-flex;
        margin-top: 18px;
    }
}

@media (max-width: 560px) {
    .public-header {
        min-height: 74px;
    }

    .public-brand small {
        display: none;
    }

    .public-main {
        padding-top: 32px;
    }

    .section-heading,
    .service-card__top,
    .service-card__meta,
    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-grid,
    .metric-grid {
        grid-template-columns: 1fr;
    }

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

    .dashboard-content {
        padding-top: 22px;
    }
}
.service-groups {
    display: grid;
    gap: 38px;
}

.service-group {
    min-width: 0;
}

.service-group__heading {
    margin-bottom: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.service-group__heading h3 {
    margin: 0;

    font-size: 20px;
    letter-spacing: -0.02em;
}

.service-group__heading span {
    color: var(--text-muted);
    font-size: 13px;
}
.live-system {
    padding: 26px;
    margin-bottom: 22px;

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3faf8
        );

    box-shadow: var(--shadow);
}

.live-system__heading {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.live-system__heading h3 {
    margin: 0;

    font-size: 24px;
    letter-spacing: -0.025em;
}

.live-system__state {
    padding: 7px 11px;

    border-radius: 999px;

    color: var(--success);
    background: var(--success-soft);

    font-size: 12px;
    font-weight: 800;
}

.live-system__state--error {
    color: var(--danger);
    background: var(--danger-soft);
}

.live-system__grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.live-metric {
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.82);
}

.live-metric > span,
.live-metric small {
    display: block;
}

.live-metric > span {
    color: var(--text-soft);

    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.live-metric strong {
    display: block;
    margin: 9px 0 12px;

    font-size: 26px;
    letter-spacing: -0.035em;
}

.live-metric small {
    margin-top: 9px;

    color: var(--text-muted);
    font-size: 12px;
}

.progress {
    height: 7px;
    overflow: hidden;

    border-radius: 999px;
    background: #e8edf2;
}

.progress span {
    display: block;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            #2b80b7
        );

    transition: width 0.35s ease;
}

.live-system__footer {
    margin-top: 18px;
    padding-top: 16px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;

    border-top: 1px solid var(--border);

    color: var(--text-soft);
    font-size: 13px;
}

@media (max-width: 1020px) {
    .live-system__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .live-system__heading {
        flex-direction: column;
    }

    .live-system__grid {
        grid-template-columns: 1fr;
    }

    .live-system__footer {
        flex-direction: column;
    }
}
.performance-header {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.performance-header h2 {
    margin: 0;

    font-size: 31px;
    letter-spacing: -0.035em;
}

.performance-header p {
    max-width: 680px;
    margin: 10px 0 0;

    color: var(--text-soft);
    line-height: 1.65;
}

.range-switcher {
    padding: 5px;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.range-switcher__button {
    min-width: 52px;
    min-height: 34px;
    padding: 0 11px;

    border: 0;
    border-radius: 9px;

    color: var(--text-soft);
    background: transparent;

    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.range-switcher__button:hover {
    color: var(--text);
    background: var(--surface-soft);
}

.range-switcher__button--active {
    color: #ffffff;
    background: var(--accent);
}

.performance-summary {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.performance-summary__card {
    padding: 18px 20px;

    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.performance-summary__card span,
.performance-summary__card strong {
    display: block;
}

.performance-summary__card span {
    margin-bottom: 8px;

    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
}

.performance-summary__card strong {
    font-size: 19px;
    letter-spacing: -0.02em;
}

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

.chart-card {
    min-width: 0;
    padding: 22px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.chart-card--wide {
    grid-column: 1 / -1;
}

.chart-card__heading {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.chart-card__heading span {
    display: block;
    margin-bottom: 5px;

    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chart-card__heading h3 {
    margin: 0;

    font-size: 20px;
    letter-spacing: -0.025em;
}

.chart-card__value {
    text-align: right;
}

.chart-card__value strong,
.chart-card__value small {
    display: block;
}

.chart-card__value strong {
    font-size: 22px;
    letter-spacing: -0.03em;
}

.chart-card__value small {
    margin-top: 3px;

    color: var(--text-muted);
    font-size: 11px;
}

.metric-chart {
    min-height: 250px;
    color: var(--accent);
}

.metric-chart__canvas {
    position: relative;
}

.metric-chart svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.metric-chart__grid-line {
    stroke: #e8edf2;
    stroke-width: 1;
}

.metric-chart__axis-label {
    fill: #8792a3;

    font-size: 10px;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.metric-chart__area {
    fill: url(#metricAreaGradient);
}

.metric-chart__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.metric-chart__hit-point {
    fill: transparent;
    stroke: transparent;
    cursor: pointer;
    outline: none;
}

.metric-chart__hit-point:hover,
.metric-chart__hit-point:focus {
    fill: var(--surface);
    stroke: currentColor;
    stroke-width: 3;
}

.metric-chart__loading,
.metric-chart__empty {
    min-height: 250px;

    display: grid;
    place-items: center;

    border-radius: 14px;
    background: var(--surface-soft);

    color: var(--text-muted);
    font-size: 13px;
}

.metric-chart__tooltip {
    min-width: 150px;
    padding: 10px 12px;

    position: absolute;
    z-index: 5;
    transform: translate(-50%, -100%);

    border: 1px solid var(--border);
    border-radius: 11px;

    color: var(--text);
    background: var(--surface);
    box-shadow:
        0 12px 30px rgba(20, 31, 48, 0.14);

    pointer-events: none;
}

.metric-chart__tooltip strong,
.metric-chart__tooltip span,
.metric-chart__tooltip small {
    display: block;
}

.metric-chart__tooltip strong {
    font-size: 14px;
}

.metric-chart__tooltip span {
    margin-top: 4px;

    color: var(--text-soft);
    font-size: 11px;
}

.metric-chart__tooltip small {
    margin-top: 3px;

    color: var(--text-muted);
    font-size: 10px;
}

@media (max-width: 1020px) {
    .performance-header {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .chart-card--wide {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
    .performance-summary {
        grid-template-columns: 1fr;
    }

    .range-switcher {
        width: 100%;
        overflow-x: auto;
    }

    .range-switcher__button {
        flex: 1 0 auto;
    }
}

@media (max-width: 560px) {
    .chart-card {
        padding: 18px;
    }

    .chart-card__heading {
        flex-direction: column;
    }

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

    .metric-chart {
        min-height: 210px;
    }

    .metric-chart__loading,
    .metric-chart__empty {
        min-height: 210px;
    }
}
.badge--warning {
    color: var(--warning);
    background: var(--warning-soft);
}

.system-overview,
.services-panel {
    padding: 24px;
    margin-top: 18px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.system-overview__heading,
.services-panel__heading {
    margin-bottom: 20px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.system-overview__heading h3,
.services-panel__heading h3 {
    margin: 0;

    font-size: 22px;
    letter-spacing: -0.025em;
}

.system-info-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.system-info-card {
    min-width: 0;
    padding: 17px;

    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
}

.system-info-card span,
.system-info-card strong,
.system-info-card small {
    display: block;
}

.system-info-card span {
    margin-bottom: 7px;

    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.system-info-card strong {
    overflow-wrap: anywhere;

    font-size: 15px;
    line-height: 1.45;
}

.system-info-card small {
    margin-top: 4px;

    color: var(--text-soft);
    font-size: 12px;
}

.runtime-grid {
    margin-top: 14px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.runtime-card {
    padding: 18px 20px;

    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

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

.runtime-card span {
    margin-bottom: 7px;

    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.runtime-card strong {
    font-size: 18px;
}

.system-services-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.system-service {
    padding: 14px;

    display: flex;
    align-items: center;
    gap: 11px;

    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-soft);
}

.system-service__indicator {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;

    border-radius: 50%;
}

.system-service__indicator--active {
    background: var(--success);
    box-shadow:
        0 0 0 5px rgba(23, 128, 95, 0.10);
}

.system-service__indicator--inactive {
    background: var(--danger);
    box-shadow:
        0 0 0 5px rgba(194, 65, 65, 0.10);
}

.system-service strong,
.system-service small {
    display: block;
}

.system-service strong {
    font-size: 14px;
}

.system-service small {
    margin-top: 3px;

    color: var(--text-muted);
    font-size: 11px;
}

@media (max-width: 1180px) {
    .system-info-grid,
    .system-services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .runtime-grid {
        grid-template-columns: 1fr;
    }

    .system-overview__heading {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .system-info-grid,
    .system-services-grid {
        grid-template-columns: 1fr;
    }
}
.services-header {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.services-header h2 {
    margin: 0;

    font-size: 31px;
    letter-spacing: -0.035em;
}

.services-header p {
    max-width: 690px;
    margin: 10px 0 0;

    color: var(--text-soft);
    line-height: 1.65;
}

.services-summary-grid {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.services-summary-card {
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.services-summary-card span,
.services-summary-card strong,
.services-summary-card small {
    display: block;
}

.services-summary-card span {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 750;
}

.services-summary-card strong {
    margin: 9px 0 4px;

    font-size: 28px;
    letter-spacing: -0.04em;
}

.services-summary-card small {
    color: var(--text-muted);
    font-size: 11px;
}

.services-toolbar {
    padding: 18px;
    margin-bottom: 16px;

    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(480px, 2fr)
        auto;
    align-items: end;
    gap: 16px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.services-toolbar label {
    display: grid;
    gap: 7px;

    color: var(--text-soft);
    font-size: 11px;
    font-weight: 750;
}

.services-toolbar input,
.services-toolbar select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;

    color: var(--text);
    background: var(--surface-soft);
}

.services-toolbar input:focus,
.services-toolbar select:focus {
    border-color: var(--accent);
    box-shadow:
        0 0 0 3px rgba(22, 125, 104, 0.10);
}

.services-toolbar__filters {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.services-toolbar__result {
    min-height: 42px;

    display: flex;
    align-items: center;
    white-space: nowrap;

    color: var(--text-soft);
    font-size: 12px;
}

.services-toolbar__result strong {
    margin: 0 4px;
    color: var(--text);
}

.services-table-panel {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.services-table-wrapper {
    overflow-x: auto;
}

.services-table {
    width: 100%;
    min-width: 1220px;

    border-collapse: collapse;
}

.services-table th,
.services-table td {
    padding: 15px 14px;

    border-bottom: 1px solid var(--border);

    text-align: left;
    vertical-align: middle;
}

.services-table th {
    color: var(--text-muted);
    background: var(--surface-soft);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.services-table td {
    color: var(--text-soft);
    font-size: 12px;
}

.services-table tbody tr:last-child td {
    border-bottom: 0;
}

.services-table tbody tr:hover td {
    background: #fbfcfd;
}

.services-table tbody tr[hidden] {
    display: none;
}

.service-table-identity {
    min-width: 250px;

    display: flex;
    align-items: center;
    gap: 11px;
}

.service-table-identity img,
.service-table-identity__placeholder {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;

    border-radius: 11px;
}

.service-table-identity img {
    object-fit: contain;
}

.service-table-identity__placeholder {
    display: grid;
    place-items: center;

    color: var(--accent);
    background: var(--accent-soft);

    font-weight: 850;
}

.service-table-identity strong,
.service-table-identity small {
    display: block;
}

.service-table-identity strong {
    color: var(--text);
    font-size: 13px;
}

.service-table-identity small {
    max-width: 260px;
    margin-top: 4px;
    overflow: hidden;

    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-type {
    display: inline-flex;
    padding: 6px 8px;

    border-radius: 8px;

    color: var(--info);
    background: var(--info-soft);

    font-size: 10px;
    font-weight: 800;
}

.service-error-button {
    display: block;
    margin-top: 6px;
    padding: 0;

    border: 0;

    color: var(--danger);
    background: transparent;

    font-size: 10px;
    cursor: help;
}

.service-error-count {
    min-width: 27px;
    min-height: 27px;

    display: inline-grid;
    place-items: center;

    border-radius: 9px;

    color: var(--text-soft);
    background: var(--surface-soft);

    font-weight: 800;
}

.service-error-count--active {
    color: var(--danger);
    background: var(--danger-soft);
}

.service-check-time {
    white-space: nowrap;
}

.service-open-link {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 9px;

    color: var(--accent);
    background: var(--surface);

    font-size: 15px;
    font-weight: 800;
}

.service-open-link:hover {
    color: #ffffff;
    border-color: var(--accent);
    background: var(--accent);
}

.service-open-link--disabled {
    color: var(--text-muted);
    cursor: default;
}

.services-empty {
    padding: 40px;

    text-align: center;
}

.services-empty strong,
.services-empty p {
    display: block;
}

.services-empty p {
    margin: 7px 0 0;

    color: var(--text-soft);
    font-size: 13px;
}

@media (max-width: 1180px) {
    .services-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .services-toolbar {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 700px) {
    .services-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .services-toolbar__filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .services-summary-grid {
        grid-template-columns: 1fr;
    }
}
.button--primary {
    color: #ffffff;
    border-color: var(--accent);
    background: var(--accent);
}

.button--primary:hover {
    background: var(--accent-dark);
}

.button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.service-detail-link {
    color: var(--text);
}

.service-detail-link:hover {
    color: var(--accent);
}

.service-detail-header {
    margin-bottom: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.service-detail-header__identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.service-detail-header__identity img,
.service-detail-header__placeholder {
    width: 62px;
    height: 62px;
    flex: 0 0 auto;

    border-radius: 18px;
}

.service-detail-header__identity img {
    object-fit: contain;
}

.service-detail-header__placeholder {
    display: grid;
    place-items: center;

    color: var(--accent);
    background: var(--accent-soft);

    font-size: 24px;
    font-weight: 850;
}

.service-detail-header__back {
    display: inline-block;
    margin-bottom: 7px;

    color: var(--text-muted);
    font-size: 12px;
}

.service-detail-header__back:hover {
    color: var(--accent);
}

.service-detail-header h2 {
    margin: 0;

    font-size: 30px;
    letter-spacing: -0.035em;
}

.service-detail-header p {
    margin: 6px 0 0;

    color: var(--text-soft);
}

.service-detail-header__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.service-check-result {
    padding: 14px 16px;
    margin-bottom: 18px;

    border: 1px solid var(--border);
    border-radius: 13px;

    font-size: 13px;
}

.service-check-result--loading {
    color: var(--info);
    border-color: #bfd6ef;
    background: var(--info-soft);
}

.service-check-result--success {
    color: var(--success);
    border-color: #bfe8d7;
    background: var(--success-soft);
}

.service-check-result--error {
    color: var(--danger);
    border-color: #f0bcbc;
    background: var(--danger-soft);
}

.service-detail-summary {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.service-detail-summary article {
    padding: 19px;

    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.service-detail-summary span,
.service-detail-summary strong,
.service-detail-summary small {
    display: block;
}

.service-detail-summary span {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 750;
}

.service-detail-summary strong {
    margin: 9px 0 4px;

    font-size: 25px;
    letter-spacing: -0.035em;
}

.service-detail-summary small {
    color: var(--text-muted);
    font-size: 11px;
}

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

.service-definition-list {
    margin: 20px 0 0;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.service-definition-list > div {
    min-width: 0;
    padding: 13px 14px;

    border-radius: 12px;
    background: var(--surface-soft);
}

.service-definition-list dt {
    margin-bottom: 5px;

    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-definition-list dd {
    margin: 0;
    overflow-wrap: anywhere;

    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

.service-definition-list__wide {
    grid-column: 1 / -1;
}

.service-history-panel {
    margin-top: 18px;
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.service-history-panel__heading {
    padding: 21px 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid var(--border);
}

.service-history-panel__heading h3 {
    margin: 0;

    font-size: 21px;
    letter-spacing: -0.025em;
}

.service-history-panel__heading > span {
    color: var(--text-soft);
    font-size: 12px;
}

.service-history-table-wrapper {
    overflow-x: auto;
}

.service-history-table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;
}

.service-history-table th,
.service-history-table td {
    padding: 14px 16px;

    border-bottom: 1px solid var(--border);

    text-align: left;
    vertical-align: middle;
}

.service-history-table th {
    color: var(--text-muted);
    background: var(--surface-soft);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.service-history-table td {
    color: var(--text-soft);
    font-size: 12px;
}

.service-history-table tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 1020px) {
    .service-detail-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .service-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .service-detail-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-detail-header__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .service-detail-summary,
    .service-definition-list {
        grid-template-columns: 1fr;
    }

    .service-definition-list__wide {
        grid-column: auto;
    }

    .service-history-panel__heading {
        flex-direction: column;
    }
}
.services-header__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.service-form-header {
    margin-bottom: 20px;
}

.service-form-header h2 {
    margin: 0;

    font-size: 31px;
    letter-spacing: -0.035em;
}

.service-form-header p {
    max-width: 700px;
    margin: 10px 0 0;

    color: var(--text-soft);
    line-height: 1.65;
}

.form-errors {
    padding: 16px 18px;
    margin-bottom: 18px;

    border: 1px solid #f0bcbc;
    border-radius: 13px;

    color: var(--danger);
    background: var(--danger-soft);
}

.form-errors ul {
    margin: 9px 0 0;
    padding-left: 20px;
}

.service-form {
    display: grid;
    gap: 18px;
}

.service-form-section {
    padding: 24px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.service-form-section__heading {
    margin-bottom: 20px;
}

.service-form-section__heading h3 {
    margin: 0;

    font-size: 21px;
    letter-spacing: -0.025em;
}

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

.service-form-field {
    min-width: 0;

    display: grid;
    gap: 7px;
}

.service-form-field > span {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 750;
}

.service-form-field input,
.service-form-field select,
.service-form-field textarea {
    width: 100%;
    padding: 11px 12px;

    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;

    color: var(--text);
    background: var(--surface-soft);
}

.service-form-field input,
.service-form-field select {
    min-height: 43px;
}

.service-form-field textarea {
    resize: vertical;
    line-height: 1.55;
}

.service-form-field input:focus,
.service-form-field select:focus,
.service-form-field textarea:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(22, 125, 104, 0.10);
}

.service-form-field small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.service-form-field--wide {
    grid-column: 1 / -1;
}

.service-toggle-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.service-toggle {
    padding: 16px;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-soft);

    cursor: pointer;
}

.service-toggle input {
    width: 18px;
    height: 18px;
    margin-top: 2px;

    accent-color: var(--accent);
}

.service-toggle strong,
.service-toggle small {
    display: block;
}

.service-toggle strong {
    color: var(--text);
    font-size: 13px;
}

.service-toggle small {
    margin-top: 5px;

    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.service-icon-editor {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 22px;
}

.service-icon-editor__preview {
    width: 130px;
    height: 130px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border: 1px dashed #c8d0dc;
    border-radius: 18px;
    background: var(--surface-soft);
}

.service-icon-editor__preview img {
    width: 92px;
    height: 92px;

    object-fit: contain;
}

.service-icon-editor__preview span {
    color: var(--text-muted);
    font-size: 12px;
}

.service-icon-editor__controls {
    display: grid;
    align-content: start;
    gap: 14px;
}

.service-form-actions {
    padding: 19px 22px;

    position: sticky;
    bottom: 14px;
    z-index: 10;

    display: flex;
    justify-content: flex-end;
    gap: 10px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);

    box-shadow: var(--shadow);
}

.danger-zone {
    padding: 24px;
    margin-top: 26px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 460px);
    align-items: start;
    gap: 30px;

    border: 1px solid #efb9b9;
    border-radius: var(--radius);
    background: var(--danger-soft);
}

.danger-zone h3 {
    margin: 0;

    color: var(--danger);
    font-size: 21px;
}

.danger-zone p {
    margin: 10px 0 0;

    color: #875151;
    line-height: 1.6;
}

.delete-service-form {
    display: grid;
    gap: 13px;
}

.button--danger {
    color: #ffffff;
    border-color: var(--danger);
    background: var(--danger);
}

.button--danger:hover {
    background: #a93434;
}

@media (max-width: 900px) {
    .service-toggle-grid {
        grid-template-columns: 1fr;
    }

    .danger-zone {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .service-form-grid {
        grid-template-columns: 1fr;
    }

    .service-form-field--wide {
        grid-column: auto;
    }

    .service-icon-editor {
        grid-template-columns: 1fr;
    }

    .service-form-actions {
        position: static;
    }
}
.sidebar {
    width: 268px;
    height: 100vh;
    min-height: 100vh;
    padding: 0;

    position: sticky;
    top: 0;
    z-index: 40;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    color: var(--sidebar-text);
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(27, 151, 125, 0.22),
            transparent 31%
        ),
        radial-gradient(
            circle at 100% 45%,
            rgba(49, 110, 184, 0.14),
            transparent 34%
        ),
        var(--sidebar);
}

.sidebar__top {
    min-height: 88px;
    padding: 20px 20px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar__brand {
    padding: 0;
}

.sidebar__brand-text strong,
.sidebar__brand-text small {
    display: block;
}

.sidebar__brand-text small {
    margin-top: 2px;
    color: #8392aa;
}

.sidebar__mobile-close {
    width: 36px;
    height: 36px;

    display: none;
    place-items: center;

    border: 0;
    border-radius: 10px;

    color: #b7c4d7;
    background: rgba(255, 255, 255, 0.06);

    font-size: 23px;
    cursor: pointer;
}

.sidebar__nav {
    min-height: 0;
    padding: 6px 14px 20px;

    display: block;
    flex: 1;

    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar__nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar__nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
}

.sidebar__section + .sidebar__section {
    margin-top: 23px;
}

.sidebar__section-title {
    margin: 0 0 8px;
    padding: 0 11px;

    color: #6f7f98;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.sidebar__section-items {
    display: grid;
    gap: 4px;
}

.sidebar__link {
    min-height: 45px;
    padding: 0 11px;

    position: relative;

    display: flex;
    align-items: center;
    gap: 11px;

    border: 1px solid transparent;
    border-radius: 12px;

    color: #aebbd0;
    font-size: 13px;
    font-weight: 680;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.sidebar__link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.055);
}

.sidebar__link--active {
    color: #ffffff;
    border-color: rgba(78, 205, 174, 0.12);

    background:
        linear-gradient(
            135deg,
            rgba(29, 157, 130, 0.30),
            rgba(45, 107, 178, 0.23)
        );

    box-shadow:
        inset 3px 0 0 #35b798;
}

.sidebar__link--disabled {
    color: #66758d;
    cursor: default;
}

.sidebar__link--disabled:hover {
    color: #66758d;
    background: transparent;
}

.sidebar__link-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;

    display: grid;
    place-items: center;
}

.sidebar__link-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar__link-label {
    min-width: 0;
    flex: 1;
}

.sidebar__badge {
    padding: 4px 6px;

    border-radius: 7px;

    color: #8391a7;
    background: rgba(255, 255, 255, 0.055);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar__footer {
    margin: 0;
    padding: 16px 20px 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar__public-link {
    min-height: 40px;
    padding: 0 11px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 11px;

    color: #aebbd0;
    background: rgba(255, 255, 255, 0.045);

    font-size: 12px;
    font-weight: 700;
}

.sidebar__public-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar__version {
    display: block;
    margin-top: 12px;

    color: #596981;
    font-size: 10px;
    text-align: center;
}

.sidebar-overlay {
    display: none;
}

.topbar__menu-button {
    width: 42px;
    height: 42px;
    padding: 0;

    display: none;
    place-items: center;
    align-content: center;
    gap: 4px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: var(--surface);
    cursor: pointer;
}

.topbar__menu-button span {
    width: 18px;
    height: 2px;

    display: block;

    border-radius: 999px;
    background: var(--text);
}

.topbar__heading {
    min-width: 0;
    flex: 1;
}

@media (max-width: 780px) {
    .dashboard-shell {
        display: block;
    }

    .sidebar {
        width: min(310px, 88vw);
        height: 100vh;
        min-height: 100vh;

        position: fixed;
        inset: 0 auto 0 0;

        transform: translateX(-105%);
        transition: transform 0.24s ease;
    }

    .sidebar--open {
        transform: translateX(0);
    }

    .sidebar__mobile-close {
        display: grid;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 35;

        display: block;

        visibility: hidden;
        opacity: 0;

        background: rgba(7, 13, 23, 0.58);
        backdrop-filter: blur(3px);

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease;
    }

    .sidebar-overlay--visible {
        visibility: visible;
        opacity: 1;
    }

    .sidebar-is-open {
        overflow: hidden;
    }

    .topbar {
        flex-direction: row;
        align-items: center;
    }

    .topbar__menu-button {
        display: grid;
        flex: 0 0 auto;
    }
}
.history-header {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.history-header h2 {
    margin: 0;

    font-size: 31px;
    letter-spacing: -0.035em;
}

.history-header p {
    max-width: 680px;
    margin: 10px 0 0;

    color: var(--text-soft);
    line-height: 1.65;
}

.history-range-switcher {
    padding: 5px;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.history-range-button {
    min-height: 35px;
    padding: 0 13px;

    border: 0;
    border-radius: 9px;

    color: var(--text-soft);
    background: transparent;

    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.history-range-button:hover {
    color: var(--text);
    background: var(--surface-soft);
}

.history-range-button--active {
    color: #ffffff;
    background: var(--accent);
}

.history-summary {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.history-summary article {
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.history-summary span,
.history-summary strong,
.history-summary small {
    display: block;
}

.history-summary span {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 750;
}

.history-summary strong {
    margin: 9px 0 4px;

    font-size: 28px;
    letter-spacing: -0.04em;
}

.history-summary small {
    color: var(--text-muted);
    font-size: 11px;
}

.history-toolbar {
    padding: 18px;
    margin-bottom: 14px;

    display: grid;
    grid-template-columns:
        minmax(220px, 1.5fr)
        minmax(170px, 1fr)
        minmax(170px, 1fr)
        auto
        auto;
    align-items: end;
    gap: 13px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.history-toolbar label {
    display: grid;
    gap: 7px;

    color: var(--text-soft);
    font-size: 11px;
    font-weight: 750;
}

.history-toolbar input[type="search"],
.history-toolbar select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;

    color: var(--text);
    background: var(--surface-soft);
}

.history-toolbar input:focus,
.history-toolbar select:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(22, 125, 104, 0.10);
}

.history-toolbar__toggle {
    min-height: 42px;
    padding: 0 12px;

    display: flex !important;
    align-items: center;
    gap: 9px !important;

    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-soft);

    cursor: pointer;
    white-space: nowrap;
}

.history-toolbar__toggle input {
    width: 17px;
    height: 17px;

    accent-color: var(--accent);
}

.history-toolbar__count {
    min-height: 42px;

    display: flex;
    align-items: center;
    white-space: nowrap;

    color: var(--text-soft);
    font-size: 12px;
}

.history-toolbar__count strong {
    margin-left: 4px;
    color: var(--text);
}

.history-legend {
    margin-bottom: 18px;

    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;

    color: var(--text-soft);
    font-size: 11px;
}

.history-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.history-legend i {
    width: 11px;
    height: 11px;

    border-radius: 3px;
}

.history-legend__operational {
    background: var(--success);
}

.history-legend__degraded {
    background: var(--warning);
}

.history-legend__outage {
    background: var(--danger);
}

.history-legend__no-data {
    background: #dfe4ea;
}

.history-list {
    display: grid;
    gap: 14px;
}

.history-loading {
    min-height: 210px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    color: var(--text-muted);
    background: var(--surface);

    font-size: 13px;
}

.history-loading--error {
    color: var(--danger);
    background: var(--danger-soft);
}

.history-service {
    min-width: 0;
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.history-service:hover {
    border-color: #cbd6df;

    box-shadow:
        0 12px 30px rgba(30, 44, 61, 0.06);
}

.history-service[hidden] {
    display: none;
}

.history-service__header {
    margin-bottom: 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.history-service__identity {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 12px;
}

.history-service__identity img,
.history-service__placeholder {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;

    border-radius: 13px;
}

.history-service__identity img {
    object-fit: contain;
}

.history-service__placeholder {
    display: grid;
    place-items: center;

    color: var(--accent);
    background: var(--accent-soft);

    font-size: 17px;
    font-weight: 850;
}

.history-service__name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.history-service__name-row a {
    color: var(--text);

    font-size: 15px;
    font-weight: 800;
}

.history-service__name-row a:hover {
    color: var(--accent);
}

.history-service__identity > div > span {
    display: block;
    margin-top: 4px;

    color: var(--text-muted);
    font-size: 11px;
}

.history-service__monitoring-disabled {
    padding: 4px 7px;

    border-radius: 7px;

    color: var(--text-muted) !important;
    background: var(--surface-soft);

    font-size: 9px !important;
    font-weight: 800;
    text-transform: uppercase;
}

.history-service__availability {
    flex: 0 0 auto;
    text-align: right;
}

.history-service__availability strong,
.history-service__availability span {
    display: block;
}

.history-service__availability strong {
    color: var(--text);

    font-size: 23px;
    letter-spacing: -0.035em;
}

.history-service__availability span {
    margin-top: 2px;

    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.history-service__timeline {
    height: 34px;

    display: flex;
    gap: 3px;
}

.history-segment {
    min-width: 2px;
    height: 100%;
    flex: 1;

    border-radius: 4px;

    cursor: help;

    transition:
        transform 0.14s ease,
        opacity 0.14s ease;
}

.history-segment:hover,
.history-segment:focus {
    z-index: 2;

    transform: scaleY(1.18);
    outline: none;
}

.history-segment--operational {
    background: var(--success);
}

.history-segment--degraded {
    background: var(--warning);
}

.history-segment--outage {
    background: var(--danger);
}

.history-segment--no-data {
    background: #e2e7ec;
}

.history-service__footer {
    margin-top: 15px;
    padding-top: 14px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 22px;

    border-top: 1px solid var(--border);

    color: var(--text-soft);
    font-size: 11px;
}

.history-service__footer strong {
    color: var(--text);
}

.history-service__failure-value {
    color: var(--danger) !important;
}

.history-service__footer a {
    margin-left: auto;

    color: var(--accent);
    font-weight: 750;
}

.history-empty {
    padding: 42px;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    text-align: center;
    background: var(--surface);
}

.history-empty strong,
.history-empty p {
    display: block;
}

.history-empty p {
    margin: 7px 0 0;

    color: var(--text-soft);
    font-size: 13px;
}

@media (max-width: 1180px) {
    .history-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

    .history-toolbar__count {
        grid-column: 1 / -1;
    }
}

@media (max-width: 800px) {
    .history-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .history-range-switcher {
        width: 100%;
        overflow-x: auto;
    }

    .history-range-button {
        flex: 1 0 auto;
    }

    .history-service__timeline {
        gap: 2px;
    }
}

@media (max-width: 620px) {
    .history-summary,
    .history-toolbar {
        grid-template-columns: 1fr;
    }

    .history-toolbar__count {
        grid-column: auto;
    }

    .history-service__header {
        align-items: flex-start;
    }

    .history-service__availability {
        text-align: left;
    }

    .history-service__footer a {
        width: 100%;
        margin-left: 0;
    }

    .history-service {
        padding: 17px;
    }
}
.storage-header {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.storage-header h2 {
    margin: 0;

    font-size: 31px;
    letter-spacing: -0.035em;
}

.storage-header p {
    max-width: 720px;
    margin: 10px 0 0;

    color: var(--text-soft);
    line-height: 1.65;
}

.storage-refresh-button {
    min-height: 40px;
    padding: 0 16px;

    border: 1px solid var(--border);
    border-radius: 11px;

    color: var(--text);
    background: var(--surface);

    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.storage-refresh-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.storage-refresh-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.storage-refresh-button--loading::after {
    content: "…";
}

.storage-summary {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.storage-summary-card {
    min-width: 0;
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.storage-summary-card > span,
.storage-summary-card > strong,
.storage-summary-card > small {
    display: block;
}

.storage-summary-card > span {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 750;
}

.storage-summary-card > strong {
    margin: 8px 0 4px;

    font-size: 25px;
    letter-spacing: -0.04em;
}

.storage-summary-card > small {
    overflow: hidden;

    color: var(--text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storage-progress {
    height: 7px;
    margin-top: 15px;
    overflow: hidden;

    border-radius: 999px;
    background: var(--surface-soft);
}

.storage-progress span {
    display: block;
    height: 100%;

    border-radius: inherit;
    background: var(--success);

    transition: width 0.35s ease;
}

.storage-progress span.storage-progress__warning {
    background: var(--warning);
}

.storage-progress span.storage-progress__danger {
    background: var(--danger);
}

.storage-navigation {
    margin-bottom: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.storage-tabs {
    padding: 5px;

    display: inline-flex;
    gap: 4px;

    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.storage-tab {
    min-height: 35px;
    padding: 0 14px;

    border: 0;
    border-radius: 9px;

    color: var(--text-soft);
    background: transparent;

    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.storage-tab:hover {
    color: var(--text);
    background: var(--surface-soft);
}

.storage-tab--active {
    color: #ffffff;
    background: var(--accent);
}

.storage-updated {
    color: var(--text-muted);
    font-size: 11px;
}

.storage-updated strong {
    color: var(--text-soft);
}

.storage-panel {
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.storage-panel[hidden] {
    display: none;
}

.storage-panel__header {
    margin-bottom: 20px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.storage-panel__header h3 {
    margin: 0;

    font-size: 18px;
}

.storage-panel__header p {
    margin: 6px 0 0;

    color: var(--text-soft);
    font-size: 12px;
}

.storage-panel__header code {
    padding: 2px 5px;

    border-radius: 5px;
    background: var(--surface-soft);
}

.storage-filters {
    display: flex;
    gap: 9px;
}

.storage-filters input,
.storage-filters select {
    min-height: 40px;
    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;

    color: var(--text);
    background: var(--surface-soft);
}

.storage-filters input {
    width: 220px;
}

.storage-filters input:focus,
.storage-filters select:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(22, 125, 104, 0.1);
}

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

.storage-item {
    padding: 14px;

    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-soft);
}

.storage-item__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.storage-item__main > div {
    min-width: 0;
}

.storage-item__main strong,
.storage-item__main span {
    display: block;
}

.storage-item__main strong {
    overflow: hidden;

    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storage-item__main span {
    margin-top: 3px;
    overflow: hidden;

    color: var(--text-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storage-item__main b {
    flex: 0 0 auto;

    font-size: 12px;
}

.storage-item__bar {
    height: 5px;
    margin-top: 11px;
    overflow: hidden;

    border-radius: 999px;
    background: var(--surface);
}

.storage-item__bar span {
    display: block;
    height: 100%;

    border-radius: inherit;
    background: var(--accent);
}

.storage-database-sources {
    display: grid;
    gap: 15px;
}

.storage-database-source {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 13px;
}

.storage-database-source > header {
    padding: 16px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    background: var(--surface-soft);
}

.storage-database-source > header > div:last-child {
    text-align: right;
}

.storage-database-source header span,
.storage-database-source header small,
.storage-database-source header strong {
    display: block;
}

.storage-database-source header span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.storage-database-source header h4 {
    margin: 4px 0 0;
    font-size: 15px;
}

.storage-database-source header strong {
    font-size: 17px;
}

.storage-database-source header small {
    margin-top: 3px;

    color: var(--text-muted);
    font-size: 10px;
}

.storage-database-table {
    display: grid;
}

.storage-database-row {
    padding: 13px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-top: 1px solid var(--border);
}

.storage-database-row > div {
    min-width: 0;
}

.storage-database-row > div:last-child {
    text-align: right;
}

.storage-database-row strong,
.storage-database-row span {
    display: block;
}

.storage-database-row strong {
    font-size: 12px;
}

.storage-database-row span {
    margin-top: 3px;

    color: var(--text-muted);
    font-size: 10px;
}

.storage-cloud {
    display: grid;
    gap: 18px;
}

.storage-cloud__status {
    padding: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-soft);
}

.storage-cloud__status > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.storage-cloud__status strong,
.storage-cloud__status span {
    display: block;
}

.storage-cloud__status span {
    margin-top: 3px;

    color: var(--text-soft);
    font-size: 11px;
}

.storage-cloud__status > b {
    color: var(--text-soft);
    font-size: 12px;
}

.storage-cloud__indicator {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;

    border-radius: 50%;
}

.storage-cloud__indicator--online {
    background: var(--success);

    box-shadow:
        0 0 0 5px var(--success-soft);
}

.storage-cloud__indicator--offline {
    background: var(--danger);

    box-shadow:
        0 0 0 5px var(--danger-soft);
}

.storage-cloud__capacity,
.storage-cloud__backup {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.storage-cloud__capacity > div,
.storage-cloud__backup > div {
    padding: 17px;

    border: 1px solid var(--border);
    border-radius: 12px;
}

.storage-cloud__capacity span,
.storage-cloud__capacity strong,
.storage-cloud__backup span,
.storage-cloud__backup strong {
    display: block;
}

.storage-cloud__capacity span,
.storage-cloud__backup span {
    color: var(--text-muted);
    font-size: 10px;
}

.storage-cloud__capacity strong,
.storage-cloud__backup strong {
    margin-top: 6px;

    overflow: hidden;

    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storage-cloud__progress {
    height: 13px;
    overflow: hidden;

    border-radius: 999px;
    background: var(--surface-soft);
}

.storage-cloud__progress span {
    display: block;
    height: 100%;

    border-radius: inherit;
    background: var(--accent);
}

.storage-cloud__error {
    padding: 13px;

    border-radius: 10px;

    color: var(--danger);
    background: var(--danger-soft);

    font-size: 11px;
}

.storage-loading,
.storage-empty {
    min-height: 150px;

    display: grid;
    place-items: center;

    color: var(--text-muted);
    font-size: 12px;
}

.storage-empty--error {
    color: var(--danger);
}

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

    .storage-cloud__capacity,
    .storage-cloud__backup {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .storage-header,
    .storage-panel__header,
    .storage-navigation {
        align-items: flex-start;
        flex-direction: column;
    }

    .storage-refresh-button {
        width: 100%;
    }

    .storage-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .storage-tab {
        flex: 1 0 auto;
    }

    .storage-filters {
        width: 100%;
        flex-direction: column;
    }

    .storage-filters input,
    .storage-filters select {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .storage-summary,
    .storage-cloud__capacity,
    .storage-cloud__backup {
        grid-template-columns: 1fr;
    }

    .storage-item__main,
    .storage-database-row,
    .storage-cloud__status {
        align-items: flex-start;
        flex-direction: column;
    }

    .storage-database-row > div:last-child {
        text-align: left;
    }

    .storage-cloud__status > b {
        width: 100%;
    }
}
.network-header {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.network-header h2 {
    margin: 0;

    font-size: 31px;
    letter-spacing: -0.035em;
}

.network-header p {
    max-width: 750px;
    margin: 10px 0 0;

    color: var(--text-soft);
    line-height: 1.65;
}

.network-refresh-button {
    min-height: 40px;
    padding: 0 16px;

    border: 1px solid var(--border);
    border-radius: 11px;

    color: var(--text);
    background: var(--surface);

    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.network-refresh-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.network-refresh-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.network-summary {
    margin-bottom: 16px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.network-summary-card {
    min-width: 0;
    padding: 19px;

    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.network-summary-card span,
.network-summary-card strong,
.network-summary-card small {
    display: block;
}

.network-summary-card span {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 750;
}

.network-summary-card strong {
    margin: 8px 0 4px;

    overflow: hidden;

    font-size: 24px;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-summary-card small {
    overflow: hidden;

    color: var(--text-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-panel {
    margin-bottom: 16px;
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.network-panel__header {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.network-panel__header h3 {
    margin: 0;

    font-size: 18px;
}

.network-panel__header p {
    max-width: 720px;
    margin: 6px 0 0;

    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}

.network-range-buttons {
    padding: 4px;

    display: flex;
    gap: 3px;

    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.network-range-button {
    min-height: 34px;
    padding: 0 12px;

    border: 0;
    border-radius: 8px;

    color: var(--text-soft);
    background: transparent;

    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.network-range-button:hover {
    color: var(--text);
}

.network-range-button--active {
    color: #ffffff;
    background: var(--accent);
}

.network-chart-wrapper {
    position: relative;
    min-height: 320px;
}

.network-chart {
    width: 100%;
    height: 320px;
    display: block;
}

.network-chart-empty {
    min-height: 320px;

    place-items: center;

    color: var(--text-muted);
    font-size: 12px;
}

.network-chart-empty:not([hidden]) {
    display: grid;
}

.network-chart-legend {
    margin-top: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    color: var(--text-soft);
    font-size: 11px;
}

.network-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.network-chart-legend i {
    width: 18px;
    height: 3px;

    display: inline-block;

    border-radius: 999px;
}

.network-chart-legend__rx {
    background: var(--accent);
}

.network-chart-legend__tx {
    background: var(--warning);
}

.network-updated {
    color: var(--text-muted);
    font-size: 10px;
}

.network-updated strong {
    color: var(--text-soft);
}

.network-traffic-periods {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.network-traffic-card {
    min-width: 0;
    padding: 16px;

    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.network-traffic-card > span,
.network-traffic-card > strong {
    display: block;
}

.network-traffic-card > span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.network-traffic-card > strong {
    margin-top: 7px;

    font-size: 18px;
    letter-spacing: -0.025em;
}

.network-traffic-card > div {
    margin-top: 13px;

    display: grid;
    gap: 5px;
}

.network-traffic-card small {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    color: var(--text-muted);
    font-size: 9px;
}

.network-traffic-card small b {
    color: var(--text-soft);
    font-weight: 700;
}

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

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

.network-tcp-states > div {
    padding: 15px;

    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-soft);
}

.network-tcp-states span,
.network-tcp-states strong {
    display: block;
}

.network-tcp-states span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
}

.network-tcp-states strong {
    margin-top: 5px;

    font-size: 21px;
}

.network-interface-info {
    margin: 0;

    display: grid;
}

.network-interface-info > div {
    padding: 10px 0;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid var(--border);
}

.network-interface-info > div:last-child {
    border-bottom: 0;
}

.network-interface-info dt {
    color: var(--text-muted);
    font-size: 10px;
}

.network-interface-info dd {
    margin: 0;
    max-width: 65%;
    overflow-wrap: anywhere;

    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.network-connection-search {
    width: 230px;
    min-height: 40px;
    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;

    color: var(--text);
    background: var(--surface-soft);
}

.network-connection-search:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(22, 125, 104, 0.1);
}

.network-table-wrapper {
    overflow-x: auto;
}

.network-connections-table {
    width: 100%;

    border-collapse: collapse;
}

.network-connections-table th,
.network-connections-table td {
    padding: 12px 14px;

    border-bottom: 1px solid var(--border);

    font-size: 11px;
    text-align: left;
}

.network-connections-table th {
    color: var(--text-muted);

    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.network-connections-table tbody tr:last-child td {
    border-bottom: 0;
}

.network-connections-table code {
    padding: 3px 6px;

    border-radius: 5px;

    color: var(--text);
    background: var(--surface-soft);

    font-size: 10px;
}

.network-loading,
.network-empty {
    min-height: 130px;

    display: grid;
    place-items: center;

    color: var(--text-muted);
    font-size: 12px;
}

.network-empty--error {
    color: var(--danger);
}

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

    .network-traffic-periods {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .network-header,
    .network-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .network-refresh-button,
    .network-connection-search {
        width: 100%;
    }

    .network-range-buttons {
        width: 100%;
        overflow-x: auto;
    }

    .network-range-button {
        flex: 1 0 auto;
    }

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

@media (max-width: 560px) {
    .network-summary,
    .network-traffic-periods,
    .network-tcp-states {
        grid-template-columns: 1fr;
    }

    .network-panel {
        padding: 15px;
    }

    .network-chart-wrapper,
    .network-chart {
        min-height: 260px;
        height: 260px;
    }
}
/* =========================================================
   NOTIFIKACE
   ========================================================= */

.notifications-page {
    display: grid;
    gap: 24px;
}

.notifications-header,
.notifications-panel__header,
.notifications-group__header,
.notifications-rule,
.notifications-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.notifications-header h2,
.notifications-panel__header h3,
.notifications-group__header h4 {
    margin: 0;
}

.notifications-header p,
.notifications-panel__header p {
    margin: 8px 0 0;
}

.notifications-refresh-button,
.notifications-clear-button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--border-color, #d9e1e8);
    border-radius: 12px;
    background: var(--surface-color, #ffffff);
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.notifications-refresh-button:disabled,
.notifications-clear-button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.notifications-summary {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );
    gap: 16px;
}

.notifications-summary-card,
.notifications-panel,
.notifications-group {
    border: 1px solid var(--border-color, #dfe6ec);
    border-radius: 18px;
    background: var(--surface-color, #ffffff);
    box-shadow:
        0 8px 24px
        rgba(20, 38, 55, 0.05);
}

.notifications-summary-card {
    display: grid;
    gap: 7px;
    padding: 20px;
}

.notifications-summary-card span,
.notifications-summary-card small {
    color: var(--muted-color, #687785);
}

.notifications-summary-card strong {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.notifications-panel {
    padding: 22px;
}

.notifications-panel__header {
    margin-bottom: 20px;
}

.notifications-groups {
    display: grid;
    gap: 18px;
}

.notifications-group {
    overflow: hidden;
}

.notifications-group__header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color, #dfe6ec);
}

.notifications-group__header span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted-color, #687785);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.notifications-group__rules {
    display: grid;
}

.notifications-rule {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color, #edf1f4);
}

.notifications-rule:last-child {
    border-bottom: 0;
}

.notifications-rule__identity {
    display: grid;
    gap: 4px;
    min-width: 210px;
    margin-right: auto;
}

.notifications-rule__identity small {
    color: var(--muted-color, #687785);
}

.notifications-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2f5;
    font-size: 0.8rem;
    font-weight: 700;
}

.notifications-status--online {
    background: rgba(34, 197, 94, 0.13);
    color: #15803d;
}

.notifications-status--warning {
    background: rgba(245, 158, 11, 0.16);
    color: #a16207;
}

.notifications-status--offline {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}

.notifications-status--unknown {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}

.notifications-settings-preview {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );
    gap: 14px;
    margin: 0;
}

.notifications-settings-preview div {
    padding: 16px;
    border-radius: 14px;
    background: var(--subtle-surface-color, #f5f7f9);
}

.notifications-settings-preview dt {
    margin-bottom: 7px;
    color: var(--muted-color, #687785);
    font-size: 0.82rem;
    font-weight: 700;
}

.notifications-settings-preview dd {
    margin: 0;
    font-weight: 700;
}

.notifications-events {
    display: grid;
    gap: 12px;
}

.notifications-event {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color, #edf1f4);
}

.notifications-event:last-child {
    border-bottom: 0;
}

.notifications-event p {
    margin: 5px 0 0;
    color: var(--muted-color, #687785);
}

.notifications-event time {
    flex: 0 0 auto;
    color: var(--muted-color, #687785);
    font-size: 0.85rem;
}

.notifications-loading,
.notifications-empty {
    padding: 28px;
    border-radius: 14px;
    background: var(--subtle-surface-color, #f5f7f9);
    color: var(--muted-color, #687785);
    text-align: center;
}

.notifications-message {
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    font-weight: 700;
}

.notifications-message[data-type="success"] {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.notifications-footer {
    color: var(--muted-color, #687785);
    font-size: 0.9rem;
    text-align: right;
}

@media (max-width: 820px) {
    .notifications-header,
    .notifications-panel__header {
        align-items: stretch;
        flex-direction: column;
    }

    .notifications-refresh-button,
    .notifications-clear-button {
        width: 100%;
    }

    .notifications-rule {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .notifications-rule__identity {
        flex: 1 1 100%;
        min-width: 0;
    }

    .notifications-event {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* =========================================================
   NOTIFIKACE – OVLÁDACÍ PRVKY
   ========================================================= */

.notifications-group__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 16px;
    color: var(--muted-color, #687785);
    font-size: 0.86rem;
}

.notifications-group__summary strong {
    color: inherit;
}

.notifications-rule__thresholds {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted-color, #687785);
    font-size: 0.82rem;
}

.notifications-rule__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.notifications-switch-field {
    display: inline-grid;
    grid-template-columns: auto 46px;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    user-select: none;
}

.notifications-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.notifications-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #cbd5e1;
    box-shadow:
        inset 0 0 0 1px
        rgba(15, 23, 42, 0.08);
    transition:
        background 160ms ease,
        opacity 160ms ease;
}

.notifications-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 2px 5px
        rgba(15, 23, 42, 0.24);
    transition:
        transform 160ms ease;
}

.notifications-switch-input:checked
+ .notifications-switch {
    background: #16a36a;
}

.notifications-switch-input:checked
+ .notifications-switch::after {
    transform: translateX(20px);
}

.notifications-switch-input:focus-visible
+ .notifications-switch {
    outline: 3px solid
        rgba(22, 163, 106, 0.22);
    outline-offset: 3px;
}

.notifications-switch-input:disabled
+ .notifications-switch {
    cursor: not-allowed;
    opacity: 0.42;
}

.notifications-switch-field:has(
    .notifications-switch-input:disabled
) {
    cursor: not-allowed;
    opacity: 0.65;
}

.notifications-rule--saving {
    opacity: 0.65;
    pointer-events: none;
}

.notifications-status--disabled {
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
}

@media (max-width: 1100px) {
    .notifications-rule {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .notifications-rule__identity {
        flex: 1 1 45%;
    }

    .notifications-rule__controls {
        flex: 1 1 100%;
        justify-content: flex-end;
        padding-top: 4px;
    }
}

@media (max-width: 620px) {
    .notifications-group__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .notifications-group__summary {
        justify-content: flex-start;
    }

    .notifications-rule__thresholds {
        flex: 1 1 100%;
    }

    .notifications-rule__controls {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .notifications-switch-field {
        grid-template-columns: 1fr 46px;
        width: 100%;
        padding: 9px 0;
    }
}
.notifications-rule__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.notifications-switch-field {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.notifications-switch-field:has(
    .notifications-switch-input:disabled
) {
    cursor: not-allowed;
    opacity: 0.5;
}

.notifications-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.notifications-switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.32);
    border: 1px solid rgba(148, 163, 184, 0.34);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.notifications-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.24);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.notifications-switch-input:checked
    + .notifications-switch {
    background: var(--accent, #22c55e);
    border-color: var(--accent, #22c55e);
}

.notifications-switch-input:checked
    + .notifications-switch::after {
    transform: translateX(18px);
}

.notifications-switch-input:focus-visible
    + .notifications-switch {
    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.2);
}

.notifications-switch-input:disabled
    + .notifications-switch {
    background: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.2);
}

.notifications-rule--saving {
    opacity: 0.62;
    pointer-events: none;
}

.notifications-rule--saving
    .notifications-switch {
    animation:
        notifications-saving-pulse
        0.8s ease-in-out infinite alternate;
}

@keyframes notifications-saving-pulse {
    from {
        opacity: 0.55;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 720px) {
    .notifications-rule__controls {
        width: 100%;
        justify-content: flex-start;
        gap: 12px 18px;
    }
}
.notifications-settings-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.notifications-settings-form__switches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

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

.notifications-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.notifications-form-field > span {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-muted);
}

.notifications-form-field input,
.notifications-form-field select {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.04);
    color: var(--text-color, inherit);
    font: inherit;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.notifications-form-field input:hover:not(:disabled),
.notifications-form-field select:hover:not(:disabled) {
    border-color: rgba(148, 163, 184, 0.5);
}

.notifications-form-field input:focus,
.notifications-form-field select:focus {
    border-color: var(--accent, #22c55e);
    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.14);
}

.notifications-form-field input:disabled,
.notifications-form-field select:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: rgba(148, 163, 184, 0.08);
}

.notifications-form-field__suffix {
    display: flex;
    align-items: stretch;
}

.notifications-form-field__suffix input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.notifications-form-field__suffix > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 13px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-left: 0;
    border-radius:
        0
        10px
        10px
        0;
    background: rgba(148, 163, 184, 0.1);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.notifications-settings-form__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.notifications-settings-form__actions
.button {
    min-width: 180px;
}

.notifications-settings-form--saving {
    opacity: 0.68;
    pointer-events: none;
}

.notifications-settings-form--saving
.notifications-settings-form__actions
.button {
    cursor: wait;
}

@media (max-width: 760px) {
    .notifications-settings-form__switches {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .notifications-settings-form__grid {
        grid-template-columns: 1fr;
    }

    .notifications-settings-form__actions {
        justify-content: stretch;
    }

    .notifications-settings-form__actions
    .button {
        width: 100%;
    }
}
.notifications-group__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px 24px;
}

.notifications-group__counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.notifications-group__counts > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
    font-size: 0.78rem;
    color: var(--text-muted);
}

.notifications-group__counts strong {
    color: var(--text-color, inherit);
    font-weight: 700;
}

.notifications-group__toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 18px;
    padding-left: 20px;
    border-left: 1px solid rgba(148, 163, 184, 0.2);
}

.notifications-group--saving {
    position: relative;
    pointer-events: none;
}

.notifications-group--saving::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(1px);
}

.notifications-group--saving::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 6;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(148, 163, 184, 0.35);
    border-top-color: var(--accent, #22c55e);
    border-radius: 50%;
    animation: notifications-group-spinner 0.7s linear infinite;
}

@keyframes notifications-group-spinner {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .notifications-group__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .notifications-group__summary {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .notifications-group__summary {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .notifications-group__counts {
        width: 100%;
    }

    .notifications-group__counts > span {
        flex: 1 1 0;
        justify-content: center;
    }

    .notifications-group__toggles {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.2);
        border-left: 0;
    }

    .notifications-group__toggles
    .notifications-switch-field {
        width: 100%;
        justify-content: space-between;
    }
}
.notifications-group__counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.notifications-group-progress {
    width: 130px;
    min-width: 110px;
}

.notifications-group-progress__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.notifications-group-progress__header strong {
    color: var(--text-color, inherit);
    font-size: 0.78rem;
    font-weight: 700;
}

.notifications-group-progress__track {
    position: relative;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.notifications-group-progress__value {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: var(--accent, #22c55e);
    transition: width 0.3s ease;
}

@media (max-width: 640px) {
    .notifications-group__counts {
        width: 100%;
    }

    .notifications-group-progress {
        flex: 1 1 130px;
        width: auto;
    }
}
.notifications-events {
    display: grid;
    gap: 12px;
}

.notifications-event {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.notifications-event::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(148, 163, 184, 0.55);
}

.notifications-event--warning::before {
    background: #f59e0b;
}

.notifications-event--critical::before,
.notifications-event--danger::before {
    background: #ef4444;
}

.notifications-event--success::before {
    background: #22c55e;
}

.notifications-event--info::before {
    background: #3b82f6;
}

.notifications-event__main {
    min-width: 0;
}

.notifications-event__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.notifications-event__identity {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.notifications-event__identity strong {
    color: var(--text-color, inherit);
    font-size: 0.98rem;
    line-height: 1.35;
}

.notifications-event__identity small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notifications-event time {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.notifications-event__message {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.notifications-event__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.notifications-event-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.09);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.notifications-event-badge--info {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

.notifications-event-badge--warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

.notifications-event-badge--critical,
.notifications-event-badge--danger,
.notifications-event-badge--email-failed {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.notifications-event-badge--success,
.notifications-event-badge--email-sent {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.notifications-event-badge--email-pending {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

.notifications-event-badge--email-skipped,
.notifications-event-badge--email-none {
    color: var(--text-muted);
}

.notifications-event__status-change {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
}

.notifications-event__arrow {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.notifications-event__error {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    font-size: 0.8rem;
    line-height: 1.5;
}

.notifications-events-result {
    margin: 14px 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.notifications-events-result strong {
    color: var(--text-color, inherit);
}

.notifications-events-filters {
    display: grid;
    grid-template-columns:
        minmax(220px, 2fr)
        repeat(3, minmax(145px, 1fr))
        auto;
    align-items: end;
    gap: 12px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.045);
}

.notifications-events-filter {
    display: grid;
    gap: 7px;
}

.notifications-events-filter > span {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.notifications-events-filter input,
.notifications-events-filter select {
    width: 100%;
    min-height: 41px;
}

.notifications-events-filters__actions {
    display: flex;
    align-items: center;
}

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

@media (max-width: 640px) {
    .notifications-events-filters {
        grid-template-columns: 1fr;
    }

    .notifications-events-filters__actions,
    .notifications-events-filters__actions .button {
        width: 100%;
    }

    .notifications-event {
        padding: 16px;
    }

    .notifications-event__header {
        flex-direction: column;
        gap: 8px;
    }

    .notifications-event time {
        white-space: normal;
    }
}
@media (max-width: 780px) {
    .site-footer--dashboard {
        margin-right: 20px;
        margin-left: 20px;
    }

    .dashboard-status {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashboard-status__button {
        width: 100%;
        margin-left: 30px;
    }
}

@media (max-width: 560px) {
    .app-brand-logo {
        width: 42px;
        height: 42px;
    }

    .app-brand-logo--sidebar {
        width: 44px;
        height: 44px;
    }

    .site-footer__content {
        padding: 18px;

        flex-direction: column;
        gap: 10px;
    }

    .site-footer__separator {
        display: none;
    }

    .dashboard-status__button {
        margin-left: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .app-body--public,
    .app-body--public::before,
    .app-body--public::after {
        animation: none;
    }
}
/* ========================================
   Dashboard – kontrola infrastruktury
======================================== */

.infrastructure-panel {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--border-color, #dde3ea);
    border-radius: 20px;
    background: var(--surface-color, #ffffff);
}

.infrastructure-panel__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.infrastructure-panel__heading h3 {
    margin: 4px 0 0;
}

.infrastructure-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.infrastructure-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 150px;
    padding: 18px;
    border: 1px solid var(--border-color, #dde3ea);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    background: var(--surface-muted, #f7f9fb);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.infrastructure-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color, #267a65);
    box-shadow: 0 10px 24px rgb(0 0 0 / 8%);
}

.infrastructure-item__icon {
    display: block;
    margin-bottom: 14px;
    font-size: 28px;
    line-height: 1;
}

.infrastructure-item__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.infrastructure-item__content strong {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infrastructure-item__content small {
    color: var(--text-muted, #6d7785);
    font-size: 12px;
    line-height: 1.45;
}

.infrastructure-item__status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
}

.infrastructure-item__indicator {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #89929e;
    box-shadow: 0 0 0 4px rgb(137 146 158 / 12%);
}

.infrastructure-item--operational
.infrastructure-item__indicator {
    background: #20a36a;
    box-shadow: 0 0 0 4px rgb(32 163 106 / 14%);
}

.infrastructure-item--degraded
.infrastructure-item__indicator {
    background: #d69b18;
    box-shadow: 0 0 0 4px rgb(214 155 24 / 14%);
}

.infrastructure-item--maintenance
.infrastructure-item__indicator {
    background: #4987d7;
    box-shadow: 0 0 0 4px rgb(73 135 215 / 14%);
}

.infrastructure-item--outage
.infrastructure-item__indicator {
    background: #d84c4c;
    box-shadow: 0 0 0 4px rgb(216 76 76 / 14%);
}

.infrastructure-item--operational
.infrastructure-item__status {
    color: #168356;
}

.infrastructure-item--degraded
.infrastructure-item__status {
    color: #a87308;
}

.infrastructure-item--maintenance
.infrastructure-item__status {
    color: #356faf;
}

.infrastructure-item--outage
.infrastructure-item__status {
    color: #b93636;
}

.infrastructure-empty {
    grid-column: 1 / -1;
    padding: 24px;
    border: 1px dashed var(--border-color, #dde3ea);
    border-radius: 14px;
    color: var(--text-muted, #6d7785);
    text-align: center;
}

@media (max-width: 1200px) {
    .infrastructure-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .infrastructure-panel {
        padding: 18px;
    }

    .infrastructure-panel__heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

@media (max-width: 520px) {
    .infrastructure-grid {
        grid-template-columns: 1fr;
    }

    .infrastructure-item {
        min-height: 0;
    }
}
.info-grid{

display:grid;

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

gap:18px;

margin-top:20px;

}

.info-item{

padding:18px;

border-radius:14px;

background:var(--card-secondary);

}

.info-item span{

display:block;

font-size:.8rem;

opacity:.65;

margin-bottom:6px;

}

.info-item strong{

font-size:1.1rem;

font-weight:600;

word-break:break-word;

}
/* VPN – nabídka akcí profilu */

.vpn-actions {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
}

.vpn-actions__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: 9px;
    background: var(--surface, #ffffff);
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.vpn-actions__toggle:hover,
.vpn-actions__toggle[aria-expanded="true"] {
    background: var(--surface-muted, #f3f6fa);
}

.vpn-actions__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 175px;
    padding: 6px;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: 11px;
    background: var(--surface, #ffffff);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.16);
}

.vpn-actions__menu[hidden] {
    display: none;
}

.vpn-action {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.vpn-action:hover {
    background: var(--surface-muted, #f3f6fa);
}

.vpn-action[data-action="delete"] {
    color: #c0392b;
}
/* =========================================================
   VPN – tlačítko správy profilu
   ========================================================= */

.vpn-profile-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 1px solid #d9e1ec;
    border-radius: 10px;
    background: #ffffff;
    color: #536176;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.vpn-profile-open:hover {
    border-color: #3cc9ad;
    background: #f0fcf9;
    color: #177d6d;
    transform: translateY(-1px);
}

.vpn-profile-open:focus-visible {
    outline: 3px solid rgba(60, 201, 173, 0.25);
    outline-offset: 2px;
}


/* =========================================================
   VPN – modal
   ========================================================= */

.vpn-profile-modal[hidden] {
    display: none !important;
}

.vpn-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.vpn-profile-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 37, 0.66);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.vpn-profile-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid #dce4ef;
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 30px 80px rgba(8, 20, 37, 0.28),
        0 8px 24px rgba(8, 20, 37, 0.12);
    animation: vpn-modal-open 0.2s ease-out;
}

@keyframes vpn-modal-open {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.vpn-profile-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border-bottom: 1px solid #e5ebf3;
    background:
        linear-gradient(
            135deg,
            rgba(60, 201, 173, 0.1),
            rgba(71, 118, 230, 0.06)
        );
}

.vpn-profile-modal__identity {
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
}

.vpn-profile-modal__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #36c5aa,
            #237d9a
        );
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 9px 22px rgba(35, 125, 154, 0.2);
}

.vpn-profile-modal__header h3 {
    margin: 3px 0 4px;
    color: #18243a;
    font-size: 23px;
    line-height: 1.2;
}

.vpn-profile-modal__header p {
    margin: 0;
    color: #758196;
    font-size: 14px;
}

.vpn-profile-modal__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #d8e0eb;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.85);
    color: #536176;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.vpn-profile-modal__close:hover {
    border-color: #f0b6b6;
    background: #fff2f2;
    color: #b83232;
}

.vpn-profile-modal__body {
    overflow-y: auto;
    padding: 28px;
}

.vpn-profile-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    gap: 15px;
    color: #67758a;
}

.vpn-profile-loading__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe5ef;
    border-top-color: #36bfa5;
    border-radius: 50%;
    animation: vpn-spinner 0.75s linear infinite;
}

@keyframes vpn-spinner {
    to {
        transform: rotate(360deg);
    }
}


/* Přehled detailu */

.vpn-profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vpn-profile-detail-card {
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid #e1e8f1;
    border-radius: 14px;
    background: #f8fafc;
}

.vpn-profile-detail-card--wide {
    grid-column: 1 / -1;
}

.vpn-profile-detail-card span {
    display: block;
    margin-bottom: 7px;
    color: #8290a4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vpn-profile-detail-card strong {
    display: block;
    overflow-wrap: anywhere;
    color: #1d293d;
    font-size: 15px;
    line-height: 1.45;
}

.vpn-profile-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e7f8f3;
    color: #177c68;
    font-size: 13px;
    font-weight: 750;
}

.vpn-profile-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2bb99c;
}


/* Akce */

.vpn-profile-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 28px;
    border-top: 1px solid #e5ebf3;
    background: #f8fafc;
}

.vpn-profile-modal__actions[hidden] {
    display: none !important;
}

.vpn-profile-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #d6dfeb;
    border-radius: 10px;
    background: #ffffff;
    color: #344258;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.vpn-profile-action-button:hover {
    border-color: #aebdce;
    background: #f3f6fa;
    transform: translateY(-1px);
}

.vpn-profile-action-button--primary {
    border-color: #35bea3;
    background: #35bea3;
    color: #ffffff;
}

.vpn-profile-action-button--primary:hover {
    border-color: #289e89;
    background: #289e89;
}

.vpn-profile-action-button--danger {
    border-color: #f0c5c5;
    color: #bc3838;
}

.vpn-profile-action-button--danger:hover {
    border-color: #e5a3a3;
    background: #fff1f1;
}


/* Chyba načítání */

.vpn-profile-error {
    padding: 22px;
    border: 1px solid #f0cccc;
    border-radius: 14px;
    background: #fff5f5;
    color: #a93434;
}

.vpn-profile-error strong {
    display: block;
    margin-bottom: 6px;
}


/* Zamknutí stránky při otevřeném modálu */

body.vpn-modal-open {
    overflow: hidden;
}


/* Mobilní zobrazení */

@media (max-width: 700px) {

    .vpn-profile-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .vpn-profile-modal__dialog {
        width: 100%;
        max-height: calc(100vh - 24px);
        border-radius: 20px;
    }

    .vpn-profile-modal__header {
        padding: 21px 20px;
    }

    .vpn-profile-modal__icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .vpn-profile-modal__header h3 {
        font-size: 20px;
    }

    .vpn-profile-modal__body {
        padding: 20px;
    }

    .vpn-profile-detail-grid {
        grid-template-columns: 1fr;
    }

    .vpn-profile-detail-card--wide {
        grid-column: auto;
    }

    .vpn-profile-modal__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 16px 20px;
    }

    .vpn-profile-action-button {
        width: 100%;
    }

}

@media (max-width: 440px) {

    .vpn-profile-modal__actions {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   VPN – QR kód
   ========================================================= */

.vpn-profile-qr-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.vpn-profile-qr-code {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 310px);
    min-height: 310px;
    padding: 24px;
    border: 1px solid #dce5ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 12px 32px rgba(18, 37, 63, 0.08);
}

.vpn-profile-qr-code img,
.vpn-profile-qr-code canvas {
    display: block;
    width: 260px !important;
    max-width: 100%;
    height: auto !important;
}

.vpn-profile-qr-info {
    width: min(100%, 520px);
    text-align: center;
}

.vpn-profile-qr-info strong {
    display: block;
    margin-bottom: 8px;
    color: #1d293d;
    font-size: 18px;
}

.vpn-profile-qr-info p {
    margin: 0;
    color: #6f7d91;
    font-size: 14px;
    line-height: 1.6;
}

.vpn-profile-qr-info .vpn-profile-qr-warning {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #f0ddad;
    border-radius: 11px;
    background: #fff9e9;
    color: #8a6717;
}

.vpn-profile-qr-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid #d5deea;
    border-radius: 10px;
    background: #ffffff;
    color: #35445a;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.vpn-profile-qr-back:hover {
    border-color: #36bea4;
    background: #f0fcf9;
    color: #177c68;
}

@media (max-width: 440px) {

    .vpn-profile-qr-code {
        min-height: auto;
        padding: 16px;
        border-radius: 16px;
    }

    .vpn-profile-qr-code img,
    .vpn-profile-qr-code canvas {
        width: 220px !important;
    }

}
/* =========================================================
   VPN – editace profilu
   ========================================================= */

.vpn-profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

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

.vpn-profile-edit-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vpn-profile-edit-field--wide {
    grid-column: 1 / -1;
}

.vpn-profile-edit-field > span {
    color: #445269;
    font-size: 13px;
    font-weight: 700;
}

.vpn-profile-edit-field input,
.vpn-profile-edit-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid #d8e1ec;
    border-radius: 11px;
    background: #ffffff;
    color: #1d293d;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.vpn-profile-edit-field textarea {
    min-height: 120px;
    resize: vertical;
}

.vpn-profile-edit-field input:focus,
.vpn-profile-edit-field textarea:focus {
    border-color: #36bea4;
    box-shadow:
        0 0 0 3px
        rgba(54, 190, 164, 0.13);
}

.vpn-profile-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.vpn-profile-edit-cancel,
.vpn-profile-edit-save {
    min-height: 42px;
    padding: 10px 17px;
    border-radius: 11px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.vpn-profile-edit-cancel {
    border: 1px solid #d5deea;
    background: #ffffff;
    color: #46556b;
}

.vpn-profile-edit-save {
    border: 1px solid #28a88f;
    background: #36bea4;
    color: #ffffff;
}

.vpn-profile-edit-save:disabled {
    cursor: wait;
    opacity: 0.65;
}

.vpn-profile-edit-message {
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 14px;
    line-height: 1.5;
}

.vpn-profile-edit-message.is-success {
    border: 1px solid #a8dfd3;
    background: #effbf8;
    color: #16705e;
}

.vpn-profile-edit-message.is-error {
    border: 1px solid #edb6b6;
    background: #fff2f2;
    color: #a02e2e;
}

@media (max-width: 680px) {

    .vpn-profile-edit-grid {
        grid-template-columns: 1fr;
    }

    .vpn-profile-edit-field--wide {
        grid-column: auto;
    }

    .vpn-profile-edit-actions {
        flex-direction: column-reverse;
    }

    .vpn-profile-edit-cancel,
    .vpn-profile-edit-save {
        width: 100%;
    }

}
.logs-source-item{

display:flex;

flex-direction:column;

gap:4px;

width:100%;

padding:14px;

margin-bottom:10px;

border:1px solid var(--border-color);

border-radius:10px;

background:var(--card-bg);

cursor:pointer;

text-align:left;

transition:.2s;

}

.logs-source-item:hover{

background:var(--accent-soft);

}

.logs-source-item strong{

font-size:14px;

}

.logs-source-item small{

opacity:.75;

font-size:12px;

}

.logs-cards{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(260px,1fr));

    gap:18px;

}



.logs-source-item{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:space-between;

    gap:16px;

    padding:20px;

    min-height:170px;

    border:1px solid var(--border);

    border-radius:18px;

    background:var(--surface);

    transition:
        .2s ease;

    cursor:pointer;

}



.logs-source-item:hover{

    transform:translateY(-3px);

    box-shadow:
        0 10px 28px rgba(0,0,0,.08);

}



.logs-source-item.is-active{

    border-color:var(--accent);

    background:var(--accent-soft);

}



.logs-source-header{

    display:flex;

    align-items:center;

    gap:12px;

}



.logs-source-icon{

    width:44px;

    height:44px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    background:#eef5ff;

}



.logs-source-body{

    flex:1;

}



.logs-source-body strong{

    display:block;

    margin-bottom:4px;

}



.logs-source-body small{

    color:var(--text-soft);

}



.logs-source-footer{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:auto;

}



.logs-source-size{

    font-size:13px;

    color:var(--text-soft);

}



.logs-open{

    color:var(--accent);

    font-weight:700;

}

.logs-viewer{

overflow:auto;

max-height:70vh;

font-family:monospace;

font-size:13px;

white-space:pre-wrap;

padding:18px;

border-radius:10px;

background:#111;

color:#eee;

}
#logs-summary-errors{

color:#dc2626;

font-weight:700;

}

#logs-summary-warnings{

color:#d97706;

font-weight:700;

}

#logs-summary-info{

color:#2563eb;

font-weight:700;

}

#logs-summary-notice{

color:#64748b;

font-weight:700;

}
/* ========================================
   LOGY – MODÁLNÍ OKNO
======================================== */

.logs-modal[hidden] {
    display: none;
}

.logs-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.logs-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 37, 0.68);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.logs-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1400px, 100%);
    height: min(880px, calc(100vh - 48px));
    overflow: hidden;
    border: 1px solid #dce4ef;
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 30px 80px rgba(8, 20, 37, 0.28),
        0 8px 24px rgba(8, 20, 37, 0.12);
    animation: logs-modal-open 0.2s ease-out;
}

@keyframes logs-modal-open {

    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

.logs-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    border-bottom: 1px solid #e5ebf3;
    background:
        linear-gradient(
            135deg,
            rgba(60, 201, 173, 0.1),
            rgba(71, 118, 230, 0.06)
        );
}

.logs-modal__header h2 {
    margin: 4px 0 5px;
    color: #18243a;
    font-size: 23px;
    line-height: 1.2;
}

.logs-modal__header p {
    margin: 0;
    color: #64748b;
}

.logs-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid #dce4ef;
    border-radius: 12px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font-size: 27px;
    line-height: 1;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.logs-modal__close:hover {
    border-color: #b8c5d6;
    background: #f1f5f9;
}

.logs-modal__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 28px;
    border-bottom: 1px solid #e5ebf3;
    background: #ffffff;
}

.logs-modal__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.logs-modal__summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.logs-modal__summary-item span {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.logs-modal__summary-item strong {
    color: #18243a;
    font-size: 16px;
}

#modal-errors {
    color: #dc2626;
}

#modal-warning {
    color: #d97706;
}

#modal-info {
    color: #2563eb;
}

#modal-notice {
    color: #64748b;
}

.logs-modal__actions {
    display: flex;
    gap: 10px;
}

.logs-modal__status {
    padding: 10px 28px;
    border-bottom: 1px solid #e5ebf3;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
}

.logs-modal__viewer {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 22px 26px;
    overflow: auto;
    border: 0;
    background: #111827;
    color: #e5e7eb;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 4;
}

body.logs-modal-open {
    overflow: hidden;
}

.logs-source-item.is-active {
    border-color: #36c5aa;
    background:
        linear-gradient(
            135deg,
            rgba(60, 201, 173, 0.11),
            rgba(71, 118, 230, 0.04)
        );
}

@media (max-width: 760px) {

    .logs-modal {
        padding: 0;
    }

    .logs-modal__dialog {
        width: 100%;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .logs-modal__header {
        padding: 18px;
    }

    .logs-modal__controls {
        align-items: stretch;
        flex-direction: column;
        padding: 14px 18px;
    }

    .logs-modal__summary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .logs-modal__summary-item {
        justify-content: space-between;
    }

    .logs-modal__actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .logs-modal__status {
        padding: 10px 18px;
    }

    .logs-modal__viewer {
        padding: 18px;
        font-size: 12px;
    }

}
.logs-modal__toolbar{

    margin:0;

    border-left:0;

    border-right:0;

    border-radius:0;

}



.logs-modal__toolbar > label{

    flex:1.5;

}



.logs-modal__toolbar
.services-toolbar__filters{

    flex:2;

}



.logs-modal__toolbar
.services-toolbar__result{

    white-space:nowrap;

}



@media (max-width:900px){

    .logs-modal__toolbar{

        display:grid;

        grid-template-columns:1fr;

        gap:14px;

    }



    .logs-modal__toolbar
    .services-toolbar__filters{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:12px;

    }



    .logs-modal__toolbar
    .services-toolbar__result{

        text-align:left;

    }

}



@media (max-width:600px){

    .logs-modal__toolbar
    .services-toolbar__filters{

        grid-template-columns:1fr;

    }

}
.logs-modal__dialog{

    display:flex;

    flex-direction:column;

    width:min(1400px,calc(100vw - 48px));

    max-width:1400px;

    max-height:calc(100vh - 48px);

    overflow:hidden;

}



.logs-modal__controls{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    width:100%;

}



.logs-modal__status{

    width:100%;

}



.logs-modal__viewer{

    display:block;

    width:100%;

    max-width:100%;

    min-height:320px;

    margin:0;

    overflow:auto;

    box-sizing:border-box;

    white-space:pre-wrap;

    overflow-wrap:anywhere;

}



@media (max-width:900px){

    .logs-modal__dialog{

        width:calc(100vw - 20px);

        max-height:calc(100vh - 20px);

    }



    .logs-modal__controls{

        align-items:stretch;

        flex-direction:column;

    }

}
/*
 * Modul Zálohování
 */

.backup-history-panel{

    overflow:hidden;

    border:1px solid
        var(--border-color);

    border-radius:
        var(--radius-large);

    background:
        var(--surface-color);

    box-shadow:
        var(--shadow-small);

}



.backup-history-panel__header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:24px;

    padding:26px;

    border-bottom:1px solid
        var(--border-color);

}



.backup-history-panel__header h3{

    margin:5px 0 6px;

}



.backup-history-panel__header p{

    margin:0;

    color:
        var(--text-muted-color);

}



.backup-history-navigation{

    display:flex;

    align-items:flex-end;

    gap:10px;

}



.backup-history-navigation > .button{

    min-width:46px;

    padding-inline:14px;

    font-size:24px;

    line-height:1;

}



.backup-history-select{

    display:flex;

    flex-direction:column;

    gap:7px;

}



.backup-history-select > span{

    font-size:12px;

    font-weight:700;

    color:
        var(--text-muted-color);

    text-transform:uppercase;

    letter-spacing:.08em;

}



.backup-history-select select{

    min-width:270px;

}



.backup-history-view{

    padding:28px;

}



.backup-history-view__title{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:24px;

    padding-bottom:24px;

}



.backup-history-view__title h3{

    margin:6px 0;

    font-size:26px;

}



.backup-history-view__title p{

    margin:0;

    color:
        var(--text-muted-color);

}



.backup-history-metrics{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:14px;

    margin-bottom:26px;

}



.backup-history-metrics article{

    min-width:0;

    padding:17px;

    border-radius:
        var(--radius-medium);

    background:
        var(--surface-secondary-color);

}



.backup-history-metrics span{

    display:block;

    margin-bottom:7px;

    font-size:12px;

    color:
        var(--text-muted-color);

}



.backup-history-metrics strong{

    display:block;

    overflow-wrap:anywhere;

}



.backup-history-content{

    display:grid;

    grid-template-columns:
        minmax(0,2fr)
        minmax(260px,1fr);

    gap:20px;

}



.backup-history-steps,
.backup-history-result{

    min-width:0;

    padding:22px;

    border:1px solid
        var(--border-color);

    border-radius:
        var(--radius-medium);

}



.backup-history-steps__heading h4{

    margin:5px 0 18px;

    font-size:18px;

}



.backup-step-list{

    display:flex;

    flex-direction:column;

}
.backup-step{

    display:grid;

    grid-template-columns:

        42px

        minmax(0,1fr)

        auto;

    align-items:center;

    gap:18px;

    padding:18px 0;

    border-bottom:

        1px solid

        rgba(

            0,

            0,

            0,

            .06

        );

}



.backup-step:last-child{

    border-bottom:none;

}
.backup-step__indicator{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    font-weight:700;

}
.backup-step strong{

    display:block;

    margin-bottom:4px;

}



.backup-step small{

    color:

        var(

            --text-muted-color,

            #65758b

        );

}
.backup-step__indicator.is-operational{

    color:#087d62;

    background:rgba(8,125,98,.12);

}



.backup-step__indicator.is-outage{

    color:#ba3232;

    background:rgba(186,50,50,.12);

}



.backup-step__indicator.is-maintenance{

    color:#936a00;

    background:rgba(147,106,0,.12);

}



.backup-step strong,
.backup-step small{

    display:block;

}



.backup-step small{

    margin-top:4px;

    color:
        var(--text-muted-color);

    overflow-wrap:anywhere;

}



.backup-step__status{

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

}



.backup-history-result{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.backup-history-result strong{

    display:block;

    margin:10px 0 18px;

    font-size:24px;

}



.backup-history-result p{

    margin:0;

    line-height:1.7;

}



.backup-history-result__error{

    color:#c0392b;

    font-weight:600;

}



.backup-detail-button{

    width:100%;

    margin-top:auto;

}

.backup-history-result > strong{

    display:block;

    margin:10px 0 14px;

    font-size:25px;

}



.backup-history-result > strong.is-operational{

    color:#087d62;

}



.backup-history-result > strong.is-degraded{

    color:#936a00;

}



.backup-history-result > strong.is-outage{

    color:#ba3232;

}



.backup-history-result p{

    margin:0 0 22px;

    color:
        var(--text-muted-color);

}



.backup-history-result .button{

    width:100%;

    margin-top:auto;

}



.backup-history-result__error{

    color:#ba3232 !important;

}



@media (max-width:900px){

    .backup-history-panel__header{

        align-items:stretch;

        flex-direction:column;

    }



    .backup-history-navigation{

        width:100%;

    }



    .backup-history-select{

        flex:1;

    }



    .backup-history-select select{

        width:100%;

        min-width:0;

    }



    .backup-history-metrics{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }



    .backup-history-content{

        grid-template-columns:
            minmax(0,1fr);

    }

}



@media (max-width:600px){

    .backup-history-panel__header,
    .backup-history-view{

        padding:20px;

    }



    .backup-history-navigation{

        display:grid;

        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;

    }



    .backup-history-view__title{

        align-items:flex-start;

        flex-direction:column;

    }



    .backup-history-metrics{

        grid-template-columns:
            minmax(0,1fr);

    }



    .backup-step{

        grid-template-columns:
            34px
            minmax(0,1fr);

    }



    .backup-step__status{

        grid-column:2;

    }

}
.backup-storage{

    margin-top:18px;

}

.backup-storage__progress{

    overflow:hidden;

    height:8px;

    margin-bottom:16px;

    border-radius:999px;

    background:#e8edf5;

}

.backup-storage__progress-bar{

    height:100%;

    width:0;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #10b981,
        #0ea5e9
    );

    transition:width .35s ease;

}

.backup-storage__numbers{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;

    margin-bottom:12px;

}

.backup-storage__numbers span{

    display:block;

    margin-bottom:4px;

    font-size:12px;

    color:var(--text-muted-color);

}

.backup-storage__numbers strong{

    font-size:16px;

}

.backup-storage small{

    display:block;

    color:var(--text-muted-color);

}
/*
--------------------------------------------------
BACKUPS - Přehled
--------------------------------------------------
*/

.backup-overview-grid{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:24px;

    margin-bottom:32px;

}



.backup-overview-card{

    display:flex;

    flex-direction:column;

    min-width:0;

    min-height:270px;

    padding:24px;

    border:
        1px solid
        var(
            --border-color,
            #dfe6ec
        );

    border-radius:20px;

    background:
        var(
            --surface-color,
            #ffffff
        );

    box-shadow:
        0 8px 24px
        rgba(
            20,
            38,
            55,
            0.06
        );

}
.backup-overview-card__heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:24px;

}



.backup-overview-card__heading h3{

    margin:6px 0 0;

    font-size:24px;

}



.backup-overview-card__note{

    margin-top:auto;

    color:var(--text-muted-color);

    line-height:1.6;

}



.backup-overview-stats{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:14px;

}



.backup-overview-stats--four{

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

}
.backup-overview-stats > div{

    min-width:0;

    padding:16px;

    border:
        1px solid
        var(
            --border-color,
            #e4e9ee
        );

    border-radius:14px;

    background:
        var(
            --surface-secondary-color,
            #f6f8fa
        );

}
.backup-overview-stats span{

    display:block;

    margin-bottom:6px;

    font-size:12px;

    color:var(--text-muted-color);

}



.backup-overview-stats strong{

    display:block;

    font-size:18px;

}
/*
--------------------------------------------------
BACKUPS - OneDrive
--------------------------------------------------
*/

.backup-storage-percent{

    font-size:26px;

    font-weight:700;

}
.backup-storage-progress{

    overflow:hidden;

    width:100%;

    height:12px;

    margin-bottom:24px;

    border:
        1px solid
        var(
            --border-color,
            #dfe6ec
        );

    border-radius:999px;

    background:
        var(
            --surface-secondary-color,
            #e9eef2
        );

}
.backup-storage-progress__bar{

    width:0;

    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #10b981,
            #0ea5e9
        );

    transition:width .35s ease;

}



.backup-storage-values{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:14px;

}
.backup-storage-values > div{

    min-width:0;

    padding:16px;

    border:
        1px solid
        var(
            --border-color,
            #e4e9ee
        );

    border-radius:14px;

    background:
        var(
            --surface-secondary-color,
            #f6f8fa
        );

}
.backup-storage-values span{

    display:block;

    margin-bottom:6px;

    font-size:12px;

    color:var(--text-muted-color);

}



.backup-storage-values strong{

    display:block;

    font-size:17px;

}
/*
--------------------------------------------------
BACKUPS - Ruční záloha
--------------------------------------------------
*/

.backup-action-description{

    line-height:1.7;

    color:var(--text-muted-color);

}



.backup-action-button{

    width:100%;

    margin-top:auto;

}
.backup-action-status{

    padding:16px;

    border:
        1px solid
        var(
            --border-color,
            #e4e9ee
        );

    border-radius:14px;

    background:
        var(
            --surface-secondary-color,
            #f6f8fa
        );

}
.backup-action-status strong{

    display:block;

    margin-bottom:6px;

}



.backup-action-status span{

    color:var(--text-muted-color);

}
@media (max-width:960px){

    .backup-overview-grid{

        grid-template-columns:1fr;

    }

}



@media (max-width:640px){

    .backup-overview-stats,

    .backup-overview-stats--four,

    .backup-storage-values{

        grid-template-columns:1fr;

    }

}
/*
--------------------------------------------------
BACKUPS - Historie záloh
--------------------------------------------------
*/

.backup-history-panel{

    overflow:hidden;

    margin-top:24px;

    padding:28px;

    border:
        1px solid
        var(
            --border-color,
            #dfe6ec
        );

    border-radius:20px;

    background:
        var(
            --surface-color,
            #ffffff
        );

    box-shadow:
        0 8px 24px
        rgba(
            20,
            38,
            55,
            0.06
        );

}



.backup-history-panel__header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:28px;

    margin-bottom:28px;

    padding-bottom:24px;

    border-bottom:
        1px solid
        var(
            --border-color,
            #e4e9ee
        );

}



.backup-history-panel__header h3{

    margin:6px 0 4px;

}



.backup-history-panel__header p{

    margin:0;

    color:
        var(
            --text-muted-color,
            #65758b
        );

}
/*
--------------------------------------------------
BACKUPS - Navigace historie
--------------------------------------------------
*/

.backup-history-navigation{

    display:flex;

    align-items:flex-end;

    gap:10px;

    flex-shrink:0;

}



.backup-history-navigation > button{

    width:44px;

    min-width:44px;

    height:44px;

    padding:0;

    font-size:22px;

}



.backup-history-select{

    display:flex;

    flex-direction:column;

    gap:7px;

    min-width:290px;

}



.backup-history-select > span{

    font-size:11px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:
        var(
            --text-muted-color,
            #65758b
        );

}



.backup-history-select select{

    width:100%;

    min-height:44px;

    padding:0 38px 0 13px;

    border:
        1px solid
        var(
            --border-color,
            #dfe6ec
        );

    border-radius:12px;

    background:
        var(
            --surface-secondary-color,
            #f6f8fa
        );

    color:inherit;

    font:inherit;

    cursor:pointer;

}
/*
--------------------------------------------------
BACKUPS - Detail vybraného běhu
--------------------------------------------------
*/

.backup-history-views{

    min-width:0;

}



.backup-history-view{

    min-width:0;

    padding:26px;

    border:
        1px solid
        var(
            --border-color,
            #e4e9ee
        );

    border-radius:18px;

    background:
        var(
            --surface-secondary-color,
            #f7f9fb
        );

}



.backup-history-view[hidden]{

    display:none;

}



.backup-history-view__title{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:24px;

    margin-bottom:24px;

}



.backup-history-view__title h3{

    margin:6px 0 4px;

    font-size:24px;

}



.backup-history-view__title p{

    margin:0;

    color:
        var(
            --text-muted-color,
            #65758b
        );

}



.backup-history-view__title code{

    padding:3px 7px;

    border-radius:7px;

    background:
        var(
            --surface-color,
            #ffffff
        );

    font-size:.9em;

}
/*
--------------------------------------------------
BACKUPS - Metriky běhu
--------------------------------------------------
*/

.backup-history-metrics{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:14px;

    margin-bottom:24px;

}



.backup-history-metrics article{

    min-width:0;

    padding:16px;

    border:
        1px solid
        var(
            --border-color,
            #e4e9ee
        );

    border-radius:14px;

    background:
        var(
            --surface-color,
            #ffffff
        );

}



.backup-history-metrics span{

    display:block;

    margin-bottom:7px;

    font-size:12px;

    color:
        var(
            --text-muted-color,
            #65758b
        );

}



.backup-history-metrics strong{

    display:block;

    font-size:16px;

    line-height:1.4;

    overflow-wrap:anywhere;

}
@media (max-width:900px){

    .backup-history-panel__header{

        align-items:stretch;

        flex-direction:column;

    }



    .backup-history-navigation{

        width:100%;

    }



    .backup-history-select{

        flex:1;

        min-width:0;

    }



    .backup-history-metrics{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }

}



@media (max-width:600px){

    .backup-history-panel{

        padding:20px;

    }



    .backup-history-view{

        padding:20px;

    }



    .backup-history-view__title{

        flex-direction:column;

    }



    .backup-history-navigation{

        display:grid;

        grid-template-columns:
            44px
            minmax(0,1fr)
            44px;

    }



    .backup-history-metrics{

        grid-template-columns:
            minmax(0,1fr);

    }

}
/*
--------------------------------------------------
BACKUPS - Průběh + Výsledek
--------------------------------------------------
*/

.backup-history-content{

    display:grid;

    grid-template-columns:
        minmax(0,2fr)
        320px;

    gap:24px;

    align-items:start;

}



.backup-history-steps,

.backup-history-result{

    padding:22px;

    border:

        1px solid

        var(

            --border-color,

            #e4e9ee

        );

    border-radius:18px;

    background:

        var(

            --surface-color,

            #ffffff

        );

}



.backup-history-result{

    display:flex;

    flex-direction:column;

    height:100%;

}
.backup-history-steps__heading{

    margin-bottom:20px;

    padding-bottom:16px;

    border-bottom:

        1px solid

        var(

            --border-color,

            #e9edf1

        );

}



.backup-history-steps__heading h4{

    margin:6px 0 0;

    font-size:20px;

}

@media (max-width:1000px){

    .backup-history-content{

        grid-template-columns:

            minmax(0,1fr);

    }

}



@media (max-width:640px){

    .backup-step{

        grid-template-columns:

            38px

            1fr;

    }



    .backup-step__status{

        grid-column:

            2;

    }

}
/*
--------------------------------------------------
BACKUPS - Modal kompletního logu
--------------------------------------------------
*/

.backup-modal-open{

    overflow:hidden;

}



.backup-log-modal{

    position:fixed;

    z-index:1000;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

}



.backup-log-modal[hidden]{

    display:none;

}



.backup-log-modal__backdrop{

    position:absolute;

    inset:0;

    background:
        rgba(
            10,
            20,
            30,
            .66
        );

    backdrop-filter:
        blur(4px);

}



.backup-log-modal__window{

    position:relative;

    display:flex;

    flex-direction:column;

    width:min(
        1100px,
        100%
    );

    max-height:
        calc(
            100vh - 48px
        );

    overflow:hidden;

    border:
        1px solid
        var(
            --border-color,
            #dfe6ec
        );

    border-radius:20px;

    background:
        var(
            --surface-color,
            #ffffff
        );

    box-shadow:
        0 24px 70px
        rgba(
            0,
            0,
            0,
            .28
        );

}



.backup-log-modal__header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:24px;

    padding:24px 28px;

    border-bottom:
        1px solid
        var(
            --border-color,
            #e4e9ee
        );

}



.backup-log-modal__header h3{

    margin:6px 0 4px;

}



.backup-log-modal__header p{

    margin:0;

    color:
        var(
            --text-muted-color,
            #65758b
        );

}



.backup-log-modal__close{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    width:42px;

    height:42px;

    padding:0;

    border:
        1px solid
        var(
            --border-color,
            #dfe6ec
        );

    border-radius:12px;

    background:
        var(
            --surface-secondary-color,
            #f6f8fa
        );

    color:inherit;

    font-size:26px;

    cursor:pointer;

}



.backup-log-modal__body{

    min-height:0;

    overflow:auto;

    padding:24px 28px;

}



.backup-log-modal__content{

    min-height:300px;

    margin:0;

    padding:20px;

    overflow:auto;

    border:
        1px solid
        var(
            --border-color,
            #dfe6ec
        );

    border-radius:14px;

    background:#111820;

    color:#e9f1f7;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:13px;

    line-height:1.65;

    white-space:pre-wrap;

    overflow-wrap:anywhere;

}



.backup-log-modal__message{

    margin-bottom:18px;

    padding:14px 16px;

    border:1px solid #efb7b2;

    border-radius:12px;

    background:#fff2f0;

    color:#a93226;

}



.backup-log-modal__footer{

    display:flex;

    justify-content:flex-end;

    padding:18px 28px;

    border-top:
        1px solid
        var(
            --border-color,
            #e4e9ee
        );

}



@media (max-width:640px){

    .backup-log-modal{

        padding:12px;

    }



    .backup-log-modal__window{

        max-height:
            calc(
                100vh - 24px
            );

        border-radius:16px;

    }



    .backup-log-modal__header,

    .backup-log-modal__body,

    .backup-log-modal__footer{

        padding-left:18px;

        padding-right:18px;

    }



    .backup-log-modal__content{

        min-height:240px;

        padding:16px;

        font-size:12px;

    }

}
.backup-live-status {
    display: grid;
    gap: 14px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22));
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.06);
}

.backup-live-status__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.backup-live-status__indicator {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.14);
}

.backup-live-status__indicator.is-running {
    background: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
    animation: backup-status-pulse 1.6s infinite;
}

.backup-live-status__indicator.is-success {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.backup-live-status__indicator.is-failed {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}

.backup-live-status__progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
}

.backup-live-status__progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
    color: #3b82f6;
    transition: width 0.35s ease;
}

.backup-live-status__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.backup-live-status__details > div {
    display: grid;
    gap: 4px;
}

.backup-live-status__details span {
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
}

.backup-live-status__details strong {
    font-size: 0.9rem;
    line-height: 1.4;
}

@keyframes backup-status-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.65;
        transform: scale(0.85);
    }
}

@media (max-width: 640px) {
    .backup-live-status__details {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================

   Maintenance

========================================================== */
.maintenance-loading{

    padding:24px;

    text-align:center;

    color:var(--text-secondary);

}

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

.maintenance-card {
    min-width: 0;
    min-height: 210px;
    padding: 22px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);

    box-shadow:
        0 10px 30px rgba(25, 38, 58, 0.05);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.maintenance-card:hover {
    transform: translateY(-2px);
    border-color: rgba(22, 125, 104, 0.32);
    box-shadow:
        0 16px 36px rgba(25, 38, 58, 0.09);
}
.maintenance-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.maintenance-card-header > div:first-child {
    min-width: 0;
}

.maintenance-title {
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.maintenance-size {
    margin-top: 8px;

    color: var(--text);
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -0.035em;
}

.maintenance-description {
    margin-top: 18px;

    color: var(--text-soft);
    line-height: 1.6;
}

.maintenance-card-footer {
    margin-top: auto;
    padding-top: 22px;

    display: flex;
    justify-content: flex-end;
}
.maintenance-status{

    padding:6px 12px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}
.status-ok{

    color:#16a34a;

    font-weight:400;

}
.status-error{

    color:#dc2626;

    font-weight:600;

}

.status-warning{

    background:#fff7df;

    color:#b77900;

}

.status-critical{

    background:#ffe8e8;

    color:#d62828;

}
@media (max-width: 900px) {
    .maintenance-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .maintenance-card {
        min-height: 0;
        padding: 18px;
    }

    .maintenance-card-header {
        flex-direction: column;
    }

    .maintenance-status {
        align-self: flex-start;
    }

    .maintenance-card-footer {
        justify-content: stretch;
    }

    .maintenance-card-footer .button,
    .maintenance-card-footer .btn {
        width: 100%;
    }
}
.maintenance-summary {
    margin-top: 26px;
}

.maintenance-section-heading {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.maintenance-section-heading h2,
.maintenance-history-heading h2 {
    margin: 4px 0 0;

    font-size: 23px;
    letter-spacing: -0.025em;
}

.maintenance-section-eyebrow {
    display: block;

    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.maintenance-section-meta {
    color: var(--text-muted);
    font-size: 12px;
}

.maintenance-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.maintenance-summary-card {
    min-width: 0;
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.maintenance-summary-label,
.maintenance-summary-card small {
    display: block;
}

.maintenance-summary-label {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 750;
}

.maintenance-summary-value {
    display: block;
    margin: 10px 0 5px;

    font-size: 28px;
    letter-spacing: -0.04em;
}

.maintenance-summary-value--date {
    overflow-wrap: anywhere;

    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -0.015em;
}

.maintenance-summary-card small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.maintenance-history-panel {
    margin-top: 18px;
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.maintenance-history-heading {
    padding: 21px 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid var(--border);
}

.maintenance-history-heading > span {
    color: var(--text-muted);
    font-size: 12px;
}

.maintenance-history-empty {
    padding: 36px 24px;

    text-align: center;
}

.maintenance-history-empty strong,
.maintenance-history-empty p {
    display: block;
}

.maintenance-history-empty p {
    max-width: 620px;
    margin: 8px auto 0;

    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.6;
}

.maintenance-history-table-wrapper {
    overflow-x: auto;
}

.maintenance-history-table {
    width: 100%;
    min-width: 720px;

    border-collapse: collapse;
}

.maintenance-history-table th,
.maintenance-history-table td {
    padding: 14px 16px;

    border-bottom: 1px solid var(--border);

    text-align: left;
    vertical-align: middle;
}

.maintenance-history-table th {
    color: var(--text-muted);
    background: var(--surface-soft);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.maintenance-history-table td {
    color: var(--text-soft);
    font-size: 12px;
}

.maintenance-history-table tbody tr:last-child td {
    border-bottom: 0;
}

.maintenance-run-status {
    display: inline-flex;
    padding: 6px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}

.maintenance-run-status--success {
    color: var(--success);
    background: var(--success-soft);
}

.maintenance-run-status--running {
    color: var(--info);
    background: var(--info-soft);
}

.maintenance-run-status--failed {
    color: var(--danger);
    background: var(--danger-soft);
}

.maintenance-run-status--unknown {
    color: var(--text-soft);
    background: var(--surface-soft);
}

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

@media (max-width: 700px) {
    .maintenance-section-heading,
    .maintenance-history-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .maintenance-summary-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   SETTINGS
   ========================================================== */

.settings-page{

display:flex;
flex-direction:column;
gap:24px;

}

.settings-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
gap:24px;

}

.settings-panel{

background:var(--card-bg,#1d2430);
border:1px solid var(--border-color,#2b3444);
border-radius:18px;
padding:24px;

}

.settings-panel h2{

margin:0 0 20px;
font-size:1.2rem;
font-weight:600;

}

.settings-group{

display:flex;
flex-direction:column;
gap:16px;

}

.settings-field{

display:flex;
flex-direction:column;
gap:8px;

}

.settings-field label{

font-weight:600;

}

.settings-field input[type="text"],
.settings-field input[type="number"],
.settings-field textarea,
.settings-field select{

width:100%;
padding:12px 14px;
border-radius:10px;
border:1px solid var(--border-color,#384254);
background:var(--input-bg,#131922);
color:inherit;
font-size:.95rem;

}

.settings-field textarea{

min-height:110px;
resize:vertical;

}

.settings-checkbox{

display:flex;
align-items:center;
gap:12px;

}

.settings-checkbox input{

transform:scale(1.15);

}

.settings-actions{

display:flex;
justify-content:flex-end;
gap:12px;
margin-top:24px;

}

.settings-actions button{

min-width:170px;

}

.settings-info{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:16px;

}

.settings-stat{

padding:16px;
border-radius:12px;
background:rgba(255,255,255,.03);

}

.settings-stat-title{

font-size:.85rem;
opacity:.7;
margin-bottom:6px;

}

.settings-stat-value{

font-size:1.3rem;
font-weight:700;

}

@media (max-width:900px){

.settings-grid{

grid-template-columns:1fr;

}

.settings-actions{

flex-direction:column;

}

.settings-actions button{

width:100%;

}

}
/* ======================================================
   FORM COMPONENTS
   ====================================================== */

.form-grid{

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

}

.form-field{

display:flex;
flex-direction:column;
gap:8px;

}

.form-field--full{

grid-column:1/-1;

}

.form-label{

color:var(--text-soft);
font-size:12px;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;

}

.form-input,
.form-select,
.form-textarea{

width:100%;
min-height:46px;
padding:12px 14px;

border:1px solid var(--border);
border-radius:12px;

background:var(--surface-soft);
color:var(--text);

transition:
border-color .2s,
box-shadow .2s;

}

.form-textarea{

min-height:140px;
resize:vertical;

}

.form-input:focus,
.form-select:focus,
.form-textarea:focus{

outline:none;

border-color:var(--accent);

box-shadow:
0 0 0 3px rgba(22,125,104,.10);

}

.form-switch{

display:flex;
align-items:center;
gap:12px;

padding:14px;

border:1px solid var(--border);
border-radius:12px;

background:var(--surface-soft);

}

.form-switch input{

width:18px;
height:18px;

}

.form-actions{

margin-top:24px;

display:flex;
flex-wrap:wrap;
gap:12px;

}

@media(max-width:700px){

.form-grid{

grid-template-columns:1fr;

}

}