/*
 * Xagio Backups — styled after app.xagio.net's 2026 redesign (xagio-panel assets/stylesheets/redesign.css + dark.css):
 * same tokens, navy sidebar in both themes, Inter, shadowed cards without outlines, tinted icon tiles.
 */
:root {
    --rd-sidebar-w: 252px;
    --rd-topbar-h: 64px;
    --gutter: clamp(1rem, 0.4718rem + 2.2535vw, 2.25rem);
    --rd-navy: #111a32;
    --rd-navy-2: #1e2743;
    --rd-side-ink: #c9cfdd;
    --rd-side-label: #67728c;
    --rd-primary: #6364f1;
    --rd-primary-hover: #5758ee;
    --rd-primary-soft: #f0ecff;
    --rd-logo-accent: #7b7cff;
    --rd-violet: #8a5cf5;
    --rd-canvas: #f5f7fb;
    --rd-surface: #ffffff;
    --rd-surface-2: #f8f9fc;
    --rd-thead: #f8f9fc;
    --rd-border: #e8ebf2;
    --rd-border-strong: #dde1ea;
    --rd-line-soft: #f1f3f8;
    --rd-raised: #f4f6fa;
    --rd-input: #f4f6fa;
    --rd-text: #172033;
    --rd-text-2: #4a5468;
    --rd-muted: #6e798d;
    --rd-eyebrow: #8a93a6;
    --rd-green: #16a34a;
    --rd-green-text: #12813b;
    --rd-red: #ff4f61;
    --rd-red-text: #d4102a;
    --rd-orange: #f59d3d;
    --rd-orange-text: #b8650c;
    --rd-blue: #2474f5;
    --rd-red-soft: #ffebee;
    --rd-green-soft: #e8f8ef;
    --rd-orange-soft: #fff3e6;
    --rd-blue-soft: #e9f2ff;
    --rd-purple-soft: #f0ecff;
    --rd-gray-soft: #eef0f5;
    --rd-radius: 12px;
    --rd-radius-sm: 8px;
    --rd-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px rgba(16, 24, 40, .05);
    --rd-shadow-pop: 0 8px 24px rgba(16, 24, 40, .12);
    --rd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --rd-primary: #6c6df3;
    --rd-primary-hover: #7d7ef5;
    --rd-primary-soft: #23235a;
    --rd-canvas: #12161d;
    --rd-surface: #1a1f27;
    --rd-surface-2: #20262f;
    --rd-thead: #1f252e;
    --rd-border: #2e3540;
    --rd-border-strong: #384050;
    --rd-line-soft: #2e3540;
    --rd-raised: #262c34;
    --rd-input: #262c34;
    --rd-text: #f5f7fb;
    --rd-text-2: #c3c9d4;
    --rd-muted: #aab2c0;
    --rd-eyebrow: #7b8494;
    --rd-green: #3cc97a;
    --rd-green-text: #4fd68a;
    --rd-red: #ff5c6b;
    --rd-red-text: #ff7a86;
    --rd-orange: #ff9e5e;
    --rd-orange-text: #ffb27e;
    --rd-blue: #5a9bff;
    --rd-violet: #a68bfa;
    --rd-red-soft: #3a1a1f;
    --rd-green-soft: #14301f;
    --rd-orange-soft: #3a2a16;
    --rd-blue-soft: #16263f;
    --rd-purple-soft: #262046;
    --rd-gray-soft: #262c34;
    --rd-shadow: none;
    --rd-shadow-pop: 0 8px 24px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: var(--rd-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--rd-text);
    background: var(--rd-canvas);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--rd-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.01em; }
code, pre { font-family: var(--mono); font-size: 12.5px; }
.bx-ic { flex-shrink: 0; vertical-align: -3px; }
.muted { color: var(--rd-muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* ---------------- sidebar ---------------- */
.bx-side {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: var(--rd-sidebar-w);
    display: flex; flex-direction: column;
    padding: 30px 18px 20px;
    background: var(--rd-navy);
    color: #fff;
}
.bx-logo { display: flex; align-items: center; gap: 7px; padding: 2px 10px 26px; text-decoration: none !important; }
.bx-logo img { width: 26px; height: auto; }
.bx-logo-word { color: #fff; font-size: 25px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.bx-logo-tag { align-self: flex-end; margin-left: -2px; color: #6f6cff; font-size: 13px; font-weight: 700; line-height: 1; }
.bx-side-label { margin: 4px 0 8px; padding: 0 13px; font-size: 10px; font-weight: 600; letter-spacing: .16em; color: #fff; }
.bx-side nav { flex: 1; overflow-y: auto; }
.bx-nav {
    display: flex; align-items: center; gap: 13px;
    margin-bottom: 2px; padding: 11px 15px;
    border: 1px solid transparent; border-radius: 7px;
    color: #fff; font-size: 13px; text-decoration: none !important;
    transition: background .15s;
}
.bx-nav:hover { background: rgba(255, 255, 255, .06); }
.bx-nav.active { background: linear-gradient(125deg, #465ecd, #614dad); border-color: #4862ce; font-weight: 500; }
.bx-nav span { flex: 1; }
.bx-nav-count { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: var(--rd-red); color: #fff; font-size: 11px; font-weight: 600; text-align: center; }
.bx-side-card { margin-top: 14px; padding: 16px; border: 1px solid #2a334a; border-radius: 16px; }
.bx-side-card-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.bx-side-card p { margin: 6px 0 0; color: var(--rd-side-ink); font-size: 12px; line-height: 1.45; }

/* ---------------- top bar + content ---------------- */
.bx-main { margin-left: var(--rd-sidebar-w); min-height: 100vh; }
.bx-top {
    position: sticky; top: 0; z-index: 40;
    height: var(--rd-topbar-h);
    display: flex; align-items: center; gap: 14px;
    padding: 0 var(--gutter);
    background: var(--rd-surface);
    border-bottom: 1px solid var(--rd-border);
}
.bx-top-title { flex: 1; font-size: 17px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-top-right { display: flex; align-items: center; gap: 10px; }
.bx-top-right form { margin: 0; }
.bx-icon-btn {
    width: 36px; height: 36px; display: grid; place-items: center;
    border: 1px solid var(--rd-border-strong); border-radius: var(--rd-radius-sm);
    background: var(--rd-surface); color: var(--rd-text-2); cursor: pointer;
}
.bx-icon-btn:hover { color: var(--rd-primary); border-color: var(--rd-primary); background: var(--rd-primary-soft); }
.bx-burger { display: none; }
.bx-user { display: flex; align-items: center; gap: 9px; }
.bx-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #6364f1, #8a5cf5); color: #fff; font-weight: 600; }
.bx-user-text { display: flex; flex-direction: column; line-height: 1.2; }
.bx-user-text b { font-size: 13px; font-weight: 500; }
.bx-user-text small { font-size: 11px; color: var(--rd-muted); }
.bx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.bx-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bx-pill-ok { background: var(--rd-green-soft); color: var(--rd-green-text); }
.bx-pill-bad { background: var(--rd-red-soft); color: var(--rd-red-text); }
.bx-content { padding: 28px var(--gutter) 60px; max-width: 1600px; }

/* ---------------- building blocks ---------------- */
.bx-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.bx-head h1 { font-size: 27px; font-weight: 400; letter-spacing: -.02em; }
.bx-head p { margin: 4px 0 0; color: var(--rd-muted); }
.bx-head .grow { flex: 1; min-width: 260px; }
.bx-hero {
    display: flex; align-items: center; gap: 18px;
    padding: 22px 24px; margin-bottom: 20px;
    border-radius: var(--rd-radius); color: #fff;
    background: linear-gradient(125deg, #465ecd, #614dad);
}
.bx-hero.bad { background: linear-gradient(125deg, #d93a4f, #b4335f); }
.bx-hero.warn { background: linear-gradient(125deg, #e0812a, #c4593a); }
.bx-hero h2 { font-size: 20px; font-weight: 500; }
.bx-hero p { margin: 4px 0 0; opacity: .88; }
.bx-hero .bx-tile { background: rgba(255, 255, 255, .16); color: #fff; }

.bx-grid { display: grid; gap: 18px; }
.bx-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.bx-card { background: var(--rd-surface); border-radius: var(--rd-radius); box-shadow: var(--rd-shadow); padding: 22px; min-width: 0; }
.bx-card + .bx-card { margin-top: 18px; }
.bx-grid > .bx-card + .bx-card { margin-top: 0; }
.bx-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.bx-card-head .t { flex: 1; min-width: 0; }
.bx-card-head h3 { font-size: 16px; font-weight: 500; line-height: 1.25; }
.bx-card-head p { margin: 3px 0 0; font-size: 12px; color: var(--rd-muted); }
.bx-tile { flex-shrink: 0; display: grid; place-items: center; border-radius: var(--rd-radius-sm); }
.bx-t-blue { background: var(--rd-blue-soft); color: var(--rd-blue); }
.bx-t-violet { background: var(--rd-primary-soft); color: var(--rd-primary); }
.bx-t-purple { background: var(--rd-purple-soft); color: var(--rd-violet); }
.bx-t-green { background: var(--rd-green-soft); color: var(--rd-green); }
.bx-t-orange { background: var(--rd-orange-soft); color: var(--rd-orange); }
.bx-t-red { background: var(--rd-red-soft); color: var(--rd-red); }
.bx-t-gray { background: var(--rd-gray-soft); color: var(--rd-muted); }

.bx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 17px; margin-bottom: 20px; }
.bx-kpi { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 20px; background: var(--rd-surface); border-radius: var(--rd-radius); box-shadow: var(--rd-shadow); }
.bx-kpi p { margin: 0; font-size: 12px; color: var(--rd-muted); }
.bx-kpi strong { display: block; font-size: 20px; font-weight: 600; line-height: 1.3; }
.bx-kpi small { display: block; font-size: 11.5px; color: var(--rd-muted); }

.bx-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.bx-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bx-green { background: var(--rd-green-soft); color: var(--rd-green-text); }
.bx-orange { background: var(--rd-orange-soft); color: var(--rd-orange-text); }
.bx-red { background: var(--rd-red-soft); color: var(--rd-red-text); }
.bx-blue { background: var(--rd-blue-soft); color: var(--rd-blue); }
.bx-purple { background: var(--rd-purple-soft); color: var(--rd-violet); }
.bx-gray { background: var(--rd-gray-soft); color: var(--rd-muted); }

/* tables */
.bx-table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table.bx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bx-table th { padding: 10px 12px; text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--rd-eyebrow); background: var(--rd-thead); border-bottom: 1px solid var(--rd-border); white-space: nowrap; }
.bx-table th:first-child { border-radius: 8px 0 0 8px; }
.bx-table th:last-child { border-radius: 0 8px 8px 0; }
.bx-table td { padding: 11px 12px; border-bottom: 1px solid var(--rd-line-soft); vertical-align: top; }
.bx-table tbody tr:hover td { background: var(--rd-surface-2); }
.bx-table tr:last-child td { border-bottom: 0; }
.bx-table .right { text-align: right; }
.bx-table td.title a { color: var(--rd-text); font-weight: 500; }
.bx-table td.title small { display: block; color: var(--rd-muted); font-family: var(--mono); font-size: 11.5px; }
.bx-group-row td { background: transparent !important; padding-top: 18px; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--rd-eyebrow); text-transform: uppercase; }

/* toolbar */
.bx-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.bx-input, .bx-select, textarea.bx-input {
    padding: 9px 13px; background: var(--rd-input); color: var(--rd-text);
    border: 1px solid var(--rd-border); border-radius: var(--rd-radius-sm);
    font: inherit; font-size: 13px;
}
.bx-input:focus, .bx-select:focus { outline: 0; background: var(--rd-surface); border-color: var(--rd-primary); box-shadow: 0 0 0 3px rgba(97, 98, 241, .14); }
.bx-input.grow { flex: 1; min-width: 200px; }
.bx-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 0; border-radius: var(--rd-radius-sm); background: var(--rd-primary); color: #fff; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none !important; }
.bx-btn:hover { background: var(--rd-primary-hover); }
.bx-btn.outline { background: var(--rd-surface); color: var(--rd-text-2); border: 1px solid var(--rd-border-strong); }
.bx-btn.outline:hover { color: var(--rd-primary); border-color: var(--rd-primary); background: var(--rd-primary-soft); }
.bx-btn.sm { padding: 5px 10px; font-size: 12px; }

/* tabs */
.bx-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--rd-border); overflow-x: auto; }
.bx-tabs a { padding: 10px 14px; color: var(--rd-muted); font-weight: 500; font-size: 13px; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none !important; }
.bx-tabs a:hover { color: var(--rd-text); }
.bx-tabs a.active { color: var(--rd-primary); border-bottom-color: var(--rd-primary); }

/* checks */
.bx-checks { list-style: none; margin: 0; padding: 0; }
.bx-checks li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rd-line-soft); }
.bx-checks li:last-child { border-bottom: 0; }
.bx-checks .lbl { width: 210px; flex-shrink: 0; font-weight: 500; }
.bx-checks .dot { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; }
.bx-checks .r-ok .dot { background: var(--rd-green-soft); color: var(--rd-green); }
.bx-checks .r-warn .dot { background: var(--rd-orange-soft); color: var(--rd-orange); }
.bx-checks .r-fail .dot { background: var(--rd-red-soft); color: var(--rd-red); }
.bx-checks .r-note .dot { background: var(--rd-purple-soft); color: var(--rd-violet); }
.bx-checks .r-info .dot { background: var(--rd-blue-soft); color: var(--rd-blue); }

/* key/value list */
.bx-kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin: 0; font-size: 13px; }
.bx-kv dt { color: var(--rd-muted); }
.bx-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* meter */
.bx-meter { height: 8px; border-radius: 6px; background: var(--rd-raised); overflow: hidden; }
.bx-meter > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #6364f1, #8a5cf5); }
.bx-meter.hot > span { background: linear-gradient(90deg, #f59d3d, #ff4f61); }

/* code */
pre.bx-code { position: relative; margin: 8px 0 0; padding: 14px 16px; background: #0f1528; color: #dfe4f2; border-radius: var(--rd-radius-sm); overflow-x: auto; line-height: 1.55; }
html[data-theme="dark"] pre.bx-code { background: #0c0f15; }
pre.bx-plain { margin: 0; padding: 12px 14px; background: var(--rd-raised); border-radius: var(--rd-radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--rd-text-2); }
.bx-copy { position: absolute; top: 8px; right: 8px; padding: 3px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; background: rgba(255,255,255,.08); color: #dfe4f2; font: 500 11px var(--rd-font); cursor: pointer; }
.bx-copy:hover { background: rgba(255,255,255,.18); }
.bx-steps { margin: 6px 0 0; padding-left: 20px; }
.bx-steps li { margin: 5px 0; }
.bx-rb { padding: 16px 0; border-bottom: 1px solid var(--rd-line-soft); }
.bx-rb:last-child { border-bottom: 0; }
.bx-rb h4 { font-size: 14px; font-weight: 600; }
.bx-rb p { margin: 6px 0 0; white-space: pre-line; color: var(--rd-text-2); }

/* list rows */
.bx-list { list-style: none; margin: 0; padding: 0; }
.bx-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rd-line-soft); }
.bx-list li:last-child { border-bottom: 0; }
.bx-list .grow { flex: 1; min-width: 0; }
.bx-list .grow b { display: block; font-weight: 500; }
.bx-list .grow small { color: var(--rd-muted); }
.bx-empty { padding: 26px; text-align: center; color: var(--rd-muted); background: var(--rd-raised); border-radius: var(--rd-radius-sm); }

/* chart */
.bx-chart { width: 100%; height: 120px; display: block; }
.bx-chart .area { fill: var(--rd-primary-soft); }
.bx-chart .line { fill: none; stroke: var(--rd-primary); stroke-width: 2; }
.bx-chart .grid { stroke: var(--rd-line-soft); }
.bx-chart text { fill: var(--rd-muted); font-size: 10px; font-family: var(--rd-font); }
.bx-bars { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.bx-bars span { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; }
.bx-bars .ok { background: var(--rd-green); }
.bx-bars .bad { background: var(--rd-red); }
.bx-bars .none { background: var(--rd-raised); }

/* login */
.bx-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--rd-navy); }
.bx-login-card { width: 100%; max-width: 400px; padding: 34px; background: var(--rd-surface); border-radius: 16px; box-shadow: var(--rd-shadow-pop); }
.bx-login-card .bx-logo { justify-content: center; padding-bottom: 18px; }
.bx-login-card .bx-logo-word { color: var(--rd-text); }
.bx-login-card h1 { font-size: 20px; text-align: center; }
.bx-login-card p.sub { text-align: center; color: var(--rd-muted); margin: 6px 0 22px; }
.bx-login-card label { display: block; margin: 12px 0 5px; font-size: 12px; font-weight: 500; color: var(--rd-text-2); }
.bx-login-card .bx-input { width: 100%; }
.bx-login-card .bx-btn { width: 100%; justify-content: center; padding: 12px; margin-top: 18px; }
.bx-err { margin-bottom: 14px; padding: 10px 12px; border-radius: var(--rd-radius-sm); background: var(--rd-red-soft); color: var(--rd-red-text); font-size: 13px; }
.bx-note { padding: 12px 14px; border-radius: var(--rd-radius-sm); background: var(--rd-blue-soft); color: var(--rd-text-2); font-size: 13px; }
.bx-note.warn { background: var(--rd-orange-soft); }
.bx-note.bad { background: var(--rd-red-soft); }

/* responsive */
@media (max-width: 1200px) { .bx-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx-g-main { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
    .bx-side { transform: translateX(-100%); transition: transform .2s; }
    body.side-open .bx-side { transform: none; box-shadow: var(--rd-shadow-pop); }
    .bx-main { margin-left: 0; }
    .bx-burger { display: grid; }
    .bx-g2, .bx-g3 { grid-template-columns: 1fr; }
    .bx-user-text { display: none; }
    .bx-checks .lbl { width: 130px; }
    .bx-kv { grid-template-columns: 110px 1fr; }
}
@media (max-width: 560px) { .bx-content { padding: 18px 16px 40px; } .bx-top { padding: 0 16px; } .bx-pill { display: none; } .bx-checks li { flex-wrap: wrap; } }

@media print {
    .bx-side, .bx-top, .bx-copy, .no-print { display: none !important; }
    .bx-main { margin: 0; }
    body { background: #fff; }
    .bx-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
    pre.bx-code { background: #f4f4f4; color: #000; white-space: pre-wrap; }
}