/* Author: Тищенко Александр */

/* Dark is the panel's original palette and stays the default. The light
   palette follows the vHosts panel: the same blue/teal accents on a soft
   blue-grey background, white cards and the same shadows. Both palettes are
   selected by data-theme on <html>; the templates render it from the
   monitor_theme cookie, so the page never flashes. */
:root {
    color-scheme: dark;
    --bg: #0b1020;
    --bg-2: #131a30;
    --sidebar: rgba(7, 12, 27, .92);
    --card: rgba(255, 255, 255, .045);
    --card-strong: rgba(255, 255, 255, .07);
    --border: rgba(255, 255, 255, .1);
    --text: #e8edf7;
    --muted: #8b97b4;
    --accent: #4f8cff;
    --accent-2: #22d3ee;
    --ok: #34d399;
    --warn: #fbbf24;
    --danger: #f87171;
    --radius: 12px;
    --shadow: 0 18px 40px rgba(0, 0, 0, .28);
    --surface: rgba(255, 255, 255, .035);
    --surface-soft: rgba(255, 255, 255, .025);
    --surface-strong: rgba(255, 255, 255, .07);
    --surface-hover: rgba(255, 255, 255, .1);
    --input-bg: rgba(0, 0, 0, .18);
    --track: rgba(255, 255, 255, .08);
    --code-bg: rgba(0, 0, 0, .25);
    --code-text: #b9c7e4;
    --backdrop: rgba(4, 8, 18, .72);
    --nav-active-text: #fff;
    --nav-active-bg: rgba(79, 140, 255, .15);
    --nav-active-border: rgba(79, 140, 255, .28);
    --btn-bg: rgba(255, 255, 255, .07);
    --btn-bg-hover: rgba(255, 255, 255, .12);
    --btn-primary-bg: linear-gradient(135deg, #3d78ea, #1ea7c0);
    --btn-danger-bg: rgba(185, 45, 65, .6);
    --btn-danger-bg-hover: rgba(212, 55, 78, .8);
    --ok-soft: rgba(52, 211, 153, .12);
    --ok-line: rgba(52, 211, 153, .3);
    --warn-soft: rgba(251, 191, 36, .12);
    --warn-line: rgba(251, 191, 36, .3);
    --danger-soft: rgba(248, 113, 113, .12);
    --danger-line: rgba(248, 113, 113, .3);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.75l5-5' fill='none' stroke='%238b97b4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* The native dropdown of a <select> is painted by the operating system and
       ignores the translucent --surface colours: a semi-transparent background
       there makes the option text unreadable. These are solid on purpose. */
    --option-bg: #1b2438;
    --option-text: #e8edf7;
    --option-checked: #2b3f66;
    --body-bg: radial-gradient(1100px 600px at 90% -10%, rgba(34, 211, 238, .12), transparent 58%),
               linear-gradient(150deg, var(--bg), var(--bg-2));
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f7f9fc;
    --bg-2: #f0f4fa;
    --sidebar: rgba(255, 255, 255, .9);
    --card: #fff;
    --card-strong: #f2f7ff;
    --border: #dce3ed;
    --text: #17243b;
    --muted: #52627a;
    --accent: #2563eb;
    --accent-2: #08758c;
    --ok: #14764f;
    --warn: #a16207;
    --danger: #b42318;
    --shadow: 0 3px 8px rgba(34, 61, 104, .04), 0 12px 28px rgba(34, 61, 104, .07);
    --surface: #f5f9ff;
    --surface-soft: #f8fbff;
    --surface-strong: #eaf1fb;
    --surface-hover: #e9f1fd;
    --input-bg: #fff;
    --track: #e2eaf6;
    --code-bg: #f2f6fc;
    --code-text: #26456e;
    --backdrop: rgba(15, 23, 42, .45);
    --nav-active-text: #1746a2;
    --nav-active-bg: rgba(37, 99, 235, .1);
    --nav-active-border: rgba(37, 99, 235, .26);
    --btn-bg: #fff;
    --btn-bg-hover: #eef4fd;
    --btn-primary-bg: linear-gradient(135deg, #2563eb, #08758c);
    --btn-danger-bg: #b42318;
    --btn-danger-bg-hover: #961c12;
    --ok-soft: rgba(20, 118, 79, .1);
    --ok-line: rgba(20, 118, 79, .28);
    --warn-soft: rgba(161, 98, 7, .1);
    --warn-line: rgba(161, 98, 7, .28);
    --danger-soft: rgba(180, 35, 24, .1);
    --danger-line: rgba(180, 35, 24, .28);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.75l5-5' fill='none' stroke='%2352627a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --option-bg: #fff;
    --option-text: #17243b;
    --option-checked: #dbe7fb;
    --body-bg: radial-gradient(900px 520px at 88% -8%, rgba(34, 211, 238, .075), transparent 62%),
               radial-gradient(760px 520px at 2% 8%, rgba(79, 140, 255, .07), transparent 62%),
               linear-gradient(150deg, var(--bg), var(--bg-2));
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    min-height: 100vh;
    color: var(--text);
    background: var(--body-bg);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, .btn { cursor: pointer; }

.shell { display: flex; min-height: 100vh; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 10;
    display: flex; flex-direction: column; width: 246px; padding: 22px 14px;
    background: var(--sidebar); border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 26px; }
.logo {
    display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: 11px; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 8px 22px rgba(79, 140, 255, .34);
}
.logo .brand-mark { width: 26px; height: 26px; }
.logo.big { width: 58px; height: 58px; margin: 0 auto 16px; }
.logo.big .brand-mark { width: 36px; height: 36px; }
.brand-text { display: grid; gap: 2px; }
.brand-text strong { font-size: 19px; letter-spacing: .3px; }
.brand-text span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.nav { display: grid; gap: 5px; }
.nav-item {
    display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px;
    border: 1px solid transparent; border-radius: 9px; color: var(--muted); font-size: 14px;
}
.nav-item:hover { color: var(--text); background: var(--surface-hover); text-decoration: none; }
.nav-item.active { color: var(--nav-active-text); background: var(--nav-active-bg); border-color: var(--nav-active-border); }
.nav-icon { width: 21px; text-align: center; color: var(--accent-2); font-size: 16px; }
.nav-icon .nav-glyph { display: block; width: 16px; height: 16px; margin: 0 auto; }
.sidebar-foot { margin-top: auto; display: grid; gap: 14px; padding: 14px 10px 0; border-top: 1px solid var(--border); }
.agent-state { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.agent-state.ok { color: var(--ok); }
.agent-state.bad { color: var(--danger); }
.user-box { min-width: 0; }
.user-name { font-weight: 600; overflow-wrap: anywhere; }
.user-actions { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.sidebar-copyright {
    margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center;
}
.sidebar-copyright a { color: inherit; }
.sidebar-copyright a:hover { color: var(--accent-2); }
.main { width: calc(100% - 246px); max-width: 1440px; margin-left: 246px; padding: 24px 28px 42px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.topbar h1 { margin: 0; font-size: 25px; letter-spacing: .1px; }
.sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.clock { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }

/* Theme switch. The icon shows the theme the click will bring. The button
   stays hidden until theme.js wires it up, because without JavaScript it
   would do nothing. */
.theme-toggle {
    display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
    padding: 0; color: var(--text); background: var(--btn-bg);
    border: 1px solid var(--border); border-radius: 9px;
}
.theme-toggle:hover { border-color: rgba(79, 140, 255, .55); background: var(--surface-hover); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle[hidden], .theme-icon-sun, [data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
.login-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 5; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); }
.card {
    min-width: 0; padding: 20px 22px; margin-bottom: 18px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card h2 {
    display: flex; align-items: center; gap: 9px; margin: 0 0 17px;
    color: var(--muted); font-size: 15px; font-weight: 600; letter-spacing: .6px;
    text-transform: uppercase;
}
.card h2 .ico { color: var(--accent-2); font-size: 17px; }
.card-link { margin-left: auto; color: var(--accent-2); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kv.compact { margin-top: 14px; font-size: 13px; }
.model { margin: 0 0 14px; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.metric { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.metric-value { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-value small { margin-left: 2px; color: var(--muted); font-size: 16px; }
.metric-label { color: var(--muted); font-size: 13px; text-align: right; }
.bar { height: 9px; overflow: hidden; border-radius: 999px; background: var(--track); }
.bar.thin { height: 6px; }
.bar .fill {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .4s ease;
}
.bar .fill.ok { background: linear-gradient(90deg, #22c55e, #34d399); }
.bar .fill.warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bar .fill.danger { background: linear-gradient(90deg, #ef4444, #f87171); }
.load { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; text-align: center; }
.load div { padding: 9px 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.load span { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.load small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.disk { display: grid; gap: 7px; margin-top: 14px; }
.disk-head { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.disk-value { text-align: right; font-variant-numeric: tabular-nums; }
.disk-value b { color: var(--text); }
.disk-device { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.subhead { margin: 19px 0 9px; color: var(--muted); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.services, .stack, .netlist, .list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.services li, .netlist li, .stack li, .list li {
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
}
.services li { display: flex; align-items: center; gap: 10px; }
.svc-name { font-weight: 600; }
.svc-state { margin-left: auto; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.stack li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack span { color: var(--muted); }
.stack b { font-variant-numeric: tabular-nums; }
.net-top { display: flex; justify-content: space-between; gap: 10px; }
.net-name { font-weight: 600; }
.net-ip { margin-top: 5px; color: var(--accent-2); font-size: 14px; }
.net-mac { margin-top: 3px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.dot { display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.dot.off { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
    border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.pill.ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.pill.bad { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }
.tag, .badge, .state {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
    border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.tag.ok, .state.ok, .badge.ok { color: var(--ok); background: var(--ok-soft); }
.tag.muted, .badge.muted, .state.muted { color: var(--muted); background: var(--surface-strong); }
.tag.bad { color: var(--danger); background: var(--danger-soft); }
.tag.warn { color: var(--warn); background: var(--warn-soft); }
.state.bad, .badge.warn { color: var(--danger); background: var(--danger-soft); }
.state.warn { color: var(--warn); background: var(--warn-soft); }
.ok-text { color: var(--ok); }
.bad-text { color: var(--danger); }
.warn-text { color: var(--warn); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
    padding: 0 10px 11px; color: var(--muted); font-size: 10px; font-weight: 600;
    letter-spacing: .7px; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.table td { padding: 13px 10px; border-top: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover { background: var(--surface-soft); }
.table tr.row-off { opacity: .55; }
/* A failed poll is stored as a row of zeros; the tint marks the gap in the
   history without reading the status cell, and the left edge keeps the marker
   visible when a wide table is scrolled horizontally. */
.table tr.row-failed td { background: var(--danger-soft); }
.table tr.row-failed td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.server-link { font-weight: 600; }
.cell-error { max-width: 260px; margin-top: 4px; color: var(--danger); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
/* Navigation under a paginated table. It stays on one line when it fits and
   wraps the counters above the numbers on a narrow screen. */
.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; }
.pager-info { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pager-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pager-link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px;
    padding: 0 9px; color: var(--text); background: var(--btn-bg); border: 1px solid var(--border);
    border-radius: 8px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.pager-link:hover { background: var(--btn-bg-hover); border-color: rgba(79, 140, 255, .55); text-decoration: none; }
.pager-link.current { color: #fff; background: var(--btn-primary-bg); border-color: transparent; font-weight: 600; }
.pager-link.disabled { color: var(--muted); background: transparent; opacity: .55; cursor: default; }
.pager-gap { padding: 0 2px; color: var(--muted); font-size: 12px; }

.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.field em { color: var(--danger); font-style: normal; }
.field small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.field-error { color: var(--danger); font-size: 11px; }
.field input, .field select, .field textarea, .inline-field select, .tiny {
    width: 100%; min-width: 0; padding: 9px 10px; color: var(--text); background: var(--input-bg);
    border: 1px solid var(--border); border-radius: 7px; outline: 0;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .tiny:focus {
    border-color: rgba(79, 140, 255, .75); box-shadow: 0 0 0 3px rgba(79, 140, 255, .12);
}
/* A select is drawn by the browser, which gives it its own height, its own
   arrow and its own padding. The box is normalised to the height of a text
   input and the arrow is replaced with the palette's own chevron, so a form
   does not show two kinds of controls side by side. */
.field select, .inline-field select {
    padding: 9px 34px 9px 10px;
    background-color: var(--input-bg);
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 7px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.field select:hover, .inline-field select:hover { border-color: rgba(79, 140, 255, .45); }
.field select:disabled, .field select:disabled:hover {
    opacity: .7; cursor: not-allowed; border-color: var(--border);
}
/* The popup list itself: solid colours, otherwise the platform paints the
   options over the page background and the text disappears in one of the two
   themes. */
.field select option, .inline-field select option {
    color: var(--option-text);
    background-color: var(--option-bg);
    padding: 6px 8px;
}
.field select option:checked, .inline-field select option:checked {
    color: var(--option-text);
    background-color: var(--option-checked);
}
.field input:disabled { opacity: .7; cursor: not-allowed; }
.check { display: flex; align-items: flex-start; gap: 9px; color: var(--text); font-size: 13px; line-height: 1.45; }
.check input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--accent); }
.check small { color: var(--muted); font-size: 11px; line-height: 1.45; }

.form-card { max-width: 980px; }
.form-section { padding: 22px 0; border-bottom: 1px solid var(--border); }
.form-section:first-of-type { padding-top: 4px; }
.form-section:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.form-section-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.section-number {
    display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
    color: var(--accent-2); background: rgba(34, 211, 238, .1);
    border: 1px solid rgba(34, 211, 238, .25); border-radius: 8px;
    font: 700 11px ui-monospace, SFMono-Regular, Consolas, monospace;
}
.form-section-head h3 { margin: 2px 0 4px; color: var(--text); font-size: 15px; font-weight: 650; }
.form-section-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.span-2 { grid-column: span 2; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 13px;
    color: var(--text); background: var(--btn-bg); border: 1px solid var(--border);
    border-radius: 7px; font-size: 13px; text-decoration: none;
}
.btn:hover { background: var(--btn-bg-hover); text-decoration: none; }
.btn.primary { color: #fff; background: var(--btn-primary-bg); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; }
.btn.danger { color: #fff; background: var(--btn-danger-bg); border-color: var(--danger-line); }
.btn.danger:hover { background: var(--btn-danger-bg-hover); }
.btn.small { min-height: 29px; padding: 0 8px; font-size: 11px; }
.btn.wide { width: 100%; min-height: 42px; }
.link-button { padding: 0; color: var(--accent-2); background: transparent; border: 0; font-size: inherit; }
.inline { display: inline-flex; align-items: center; gap: 6px; }

.flash { margin: 0 0 17px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.flash-ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.flash-warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.flash-error { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }
.code {
    max-width: 100%; margin: 0; padding: 14px; color: var(--code-text); background: var(--code-bg);
    border: 1px solid var(--border); border-radius: 8px;
    font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
code { color: var(--code-text); }

.login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card {
    width: min(420px, 100%); padding: 30px; background: var(--card);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.login-head { margin-bottom: 25px; text-align: center; }
.login-head h1 { margin: 0; font-size: 20px; }
.login-head p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.login-hint {
    margin: 0 0 17px; padding: 10px 12px; color: var(--muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px; font-size: 12px; line-height: 1.5;
}
.login-hint b { color: var(--text); }
.login-copyright {
    margin: 22px 0 0; padding-top: 15px; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 11px; text-align: center;
}
.login-copyright a { color: inherit; }
.login-copyright a:hover { color: var(--accent-2); }

/* Dashboard live strip, summary and footer. */
.live-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.live-strip .btn { margin-left: auto; }
.summary-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.summary-item {
    display: grid; gap: 3px; padding: 14px 16px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
/* The incidents counter is the only link of the strip; it must not look like
   body text, so it inherits the palette and only reacts on hover. */
.summary-link { color: inherit; }
.summary-link:hover { color: inherit; text-decoration: none; border-color: rgba(79, 140, 255, .42); }
.summary-value { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.summary-label { color: var(--muted); font-size: 11px; letter-spacing: .3px; }
.dash-foot {
    display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 14px;
    border-top: 1px solid var(--border); color: var(--muted); font-size: 12px;
}
.dash-foot .sep { opacity: .5; }

/* Server cards: one full-width row per server. The header is a 30/55/15 grid —
   name, address and description, one-day sparkline, state — and the body below
   repeats the same idea for the OS, CPU, memory and disks. The row layout keeps a
   fleet of servers scannable: the eye compares a column across rows instead of
   jumping between stacked cards. */
.server-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.server-card {
    display: grid; gap: 11px; min-width: 0; padding: 15px 20px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); transition: border-color .15s ease;
}
.server-card:hover { border-color: rgba(79, 140, 255, .42); }
.server-card.is-disabled { opacity: .72; }
.server-card.is-stale .server-card-body { opacity: .68; }
.server-card-head {
    /* Stretch instead of centre: the vertical rules between the cells are
       borders of the cells themselves, so only a stretched cell draws a
       full-height divider. The content inside every cell keeps its own
       alignment, which is why the height of the header does not move the name,
       the sparkline or the state badge out of place. */
    display: grid; align-items: stretch;
    grid-template-columns: minmax(0, 30fr) minmax(0, 55fr) minmax(0, 15fr);
}
.server-head-main { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding-right: 16px; }
/* The dot belongs to the first text line, not to the centre of the block: the
   name, the address and the description are stacked below each other. */
.server-head-main > .dot { margin-top: 5px; }
.server-title-text { display: grid; align-content: start; gap: 3px; min-width: 0; }
.server-name { color: var(--text); font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.server-name:hover { color: var(--accent-2); }
.server-address { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.server-head-chart {
    display: grid; gap: 4px; align-content: start; min-width: 0;
    padding: 0 16px; border-left: 1px solid var(--border);
}
.head-chart-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.head-chart-title {
    color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .8px;
    text-transform: uppercase; white-space: nowrap;
}
.head-chart-legend { display: flex; align-items: center; gap: 12px; font-size: 10px; }
.head-chart-legend .legend-dot { width: 7px; height: 7px; }
.spark-empty { margin: 0; padding: 12px 0; }
.server-head-meta {
    display: grid; align-content: start; justify-items: end; gap: 4px; min-width: 0;
    padding-left: 16px; border-left: 1px solid var(--border); text-align: right;
}
.server-desc {
    margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.server-error {
    padding: 8px 10px; color: var(--danger); background: var(--danger-soft);
    border: 1px solid var(--danger-line); border-radius: 7px; font-size: 11px; line-height: 1.45;
    overflow-wrap: anywhere;
}
.server-alert {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 8px 10px; color: var(--danger); background: var(--danger-soft);
    border: 1px solid var(--danger-line); border-radius: 7px; font-size: 11px; line-height: 1.45;
}
.server-alert-link { margin-left: auto; color: var(--danger); font-weight: 600; }
.server-alert.is-warn {
    color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line);
}
.server-alert.is-warn .server-alert-link { color: var(--warn); }
.server-empty { display: grid; justify-items: start; gap: 6px; padding: 14px 0 4px; }
.server-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr) minmax(0, .95fr) minmax(0, 1.35fr);
    padding-top: 12px; border-top: 1px solid var(--border);
}
.server-part { min-width: 0; padding: 0 18px; border-left: 1px solid var(--border); }
.server-part:first-child { padding-left: 0; border-left: 0; }
.server-part:last-child { padding-right: 0; }
.part-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 600;
    letter-spacing: .8px; text-transform: uppercase;
}
.part-head b {
    color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: 0;
    text-transform: none; font-variant-numeric: tabular-nums;
}
.part-value { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.part-sub {
    margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.45;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.disk-line { display: grid; gap: 4px; margin-top: 7px; }
.disk-line-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums;
}
.disk-line-head .mono { color: var(--text); }
.empty-state {
    grid-column: 1 / -1; display: grid; justify-items: center; gap: 7px;
    padding: 48px 20px; color: var(--muted); text-align: center;
}
.empty-state strong { color: var(--text); font-size: 14px; }
.empty-state span:last-child { font-size: 12px; }
.empty-state-icon {
    display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 5px;
    color: var(--accent-2); background: rgba(34, 211, 238, .1); border-radius: 10px; font-size: 21px;
}

/* Server detail. */
.page-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.server-header {
    margin-bottom: 18px; padding: 20px 22px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.server-header-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.server-heading { display: grid; gap: 4px; min-width: 0; }
.server-heading h2 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.server-header-desc { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.server-header-actions {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.warn-card { border-color: var(--warn-line); background: var(--warn-soft); font-size: 13px; line-height: 1.55; }
.warn-card strong { display: block; margin-bottom: 4px; color: var(--warn); }
.chart-legend { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 11px; letter-spacing: 0; text-transform: none; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.cpu { background: var(--accent); }
.legend-dot.mem { background: var(--accent-2); }
.chart { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.chart-axis { fill: var(--muted); font-size: 10px; font-family: "Segoe UI", system-ui, sans-serif; }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.cpu { stroke: var(--accent); }
.chart-line.mem { stroke: var(--accent-2); }
.chart-dot.cpu { fill: var(--accent); }
.chart-dot.mem { fill: var(--accent-2); }
.chart-note { margin: 8px 0 0; }

/* Default password warning. */
.pw-warning {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px;
    border: 1px solid var(--danger-line); border-radius: var(--radius); background: var(--danger-soft);
}
.pw-warning-ico { flex: 0 0 auto; font-size: 18px; line-height: 1.3; color: var(--danger); }
.pw-warning-text { font-size: 13px; line-height: 1.55; }
.pw-warning-text strong { color: var(--danger); }
.pw-attention { color: var(--danger) !important; font-weight: 600; }

.error-card { max-width: 640px; }
.error-code { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.error-card h2 { margin-top: 0; text-transform: none; letter-spacing: 0; color: var(--text); }

@media (max-width: 1000px) {
    .sidebar { position: static; width: 210px; }
    .main { width: calc(100% - 210px); margin-left: 0; padding: 20px; }
    .table { min-width: 760px; }
    .table-wrap { overflow-x: auto; }
    .server-card-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
    .server-head-main { padding-right: 16px; }
    .server-head-chart {
        grid-column: 1 / -1; grid-row: 2; padding: 12px 0 0;
        border-left: 0; border-top: 1px solid var(--border);
    }
    .server-head-meta { grid-column: 2; grid-row: 1; }
    .server-card-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
    .server-part { padding: 0; border-left: 0; }
}
@media (max-width: 720px) {
    .shell { display: block; }
    .sidebar { position: static; width: auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--border); }
    .brand { padding-bottom: 12px; }
    .nav { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nav-item { min-width: 0; justify-content: center; min-height: 36px; padding: 0 7px; font-size: 11px; }
    .nav-item > span:last-child { min-width: 0; overflow-wrap: anywhere; }
    .nav-icon { width: auto; }
    .sidebar-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; }
    .user-box, .user-actions { display: none; }
    .sidebar-copyright { min-width: 0; margin: 0; padding: 0; border-top: 0; font-size: 10px; text-align: right; overflow-wrap: anywhere; }
    .main { width: 100%; min-width: 0; padding: 18px 13px 30px; }
    .topbar { min-width: 0; flex-wrap: wrap; }
    .topbar h1 { min-width: 0; max-width: 100%; flex: 1 1 100%; overflow-wrap: anywhere; word-break: break-word; font-size: 21px; }
    .topbar-right { display: flex; margin-left: auto; }
    .topbar-right .clock { display: none; }
    .grid, .grid.two, .form-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .server-grid { grid-template-columns: 1fr; }
    .server-card { padding: 14px 16px; }
    .server-card-head { grid-template-columns: 1fr; row-gap: 12px; }
    .server-head-main { padding-right: 0; }
    .server-head-chart { grid-column: 1; grid-row: auto; }
    .server-head-meta {
        grid-column: 1; grid-row: auto; justify-items: start;
        padding-left: 0; border-left: 0; text-align: left;
    }
    .server-card-body { grid-template-columns: 1fr; gap: 14px; }
    .server-header-main { flex-direction: column; }
    .card { padding: 17px 15px; }
    .table { min-width: 680px; }
    .live-strip .btn { margin-left: 0; }
    .chart-legend { margin-left: 0; }
}