/* OVF v2 — same design language as the LU backend (backend.lanudlejning.dk):
   flat, sharp, petroleum accent, Ubuntu Sans hosted locally, three theme
   states (system / light / dark). Status colours are data, not decoration. */

@font-face {
    font-family: "Ubuntu Sans Variable";
    src: url("../fonts/ubuntusans-var.woff2") format("woff2-variations");
    font-weight: 100 800;
    font-stretch: 62.5% 100%;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #f4f4f2; --panel: #fff; --panel-2: #eceae6; --ink: #17181c; --muted: #5b5e66;
    --line: #dcdbd6;
    --brand: #0f5f78; --brand-2: #14788f; --brand-ink: #fff;
    --brand-tint: rgba(15,95,120,.10); --row-hover: rgba(15,95,120,.05);
    --brand-fill: #0f5f78; --brand-fill-2: #14788f;
    --ok: #16a34a; --warn: #d97706; --alert: #dc2626;
    --ok-ink: var(--ok); --warn-ink: var(--warn); --alert-ink: var(--alert);
    --radius: 0; --shadow: none;
    --side-bg: #eceae6; --side-bg-2: #e3e0da; --side-ink: #17181c; --side-muted: #5b5e66;
    --side-accent: #0f5f78; --side-line: rgba(0,0,0,.12); --side-hover: rgba(0,0,0,.06);
    --font: "Ubuntu Sans Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --topbar-h: 52px; --sidebar-w: 200px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:#06060a; --panel:#28282f; --panel-2:#34343f; --ink:#f2f3f5; --muted:#a9acb4; --line:#4c4f5c;
        --brand:#7fd6ec; --brand-2:#5fc4de; --brand-tint:rgba(127,214,236,.14); --row-hover:rgba(127,214,236,.07);
        --ok-ink:#4ade80; --warn-ink:#fbbf24; --alert-ink:#f87171;
        --side-bg:#0b0b11; --side-bg-2:#101018; --side-ink:#e7e8ec; --side-muted:#9296a0; --side-accent:#7fd6ec;
        --side-line:rgba(255,255,255,.11); --side-hover:rgba(255,255,255,.08);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg:#06060a; --panel:#28282f; --panel-2:#34343f; --ink:#f2f3f5; --muted:#a9acb4; --line:#4c4f5c;
    --brand:#7fd6ec; --brand-2:#5fc4de; --brand-tint:rgba(127,214,236,.14); --row-hover:rgba(127,214,236,.07);
    --ok-ink:#4ade80; --warn-ink:#fbbf24; --alert-ink:#f87171;
    --side-bg:#0b0b11; --side-bg-2:#101018; --side-ink:#e7e8ec; --side-muted:#9296a0; --side-accent:#7fd6ec;
    --side-line:rgba(255,255,255,.11); --side-hover:rgba(255,255,255,.08);
    color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); font-stretch:100%; word-spacing:.05em; background:var(--bg); color:var(--ink);
    -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.45; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
h1, h2, h3 { letter-spacing:-.02em; font-weight:600; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
code { background:var(--brand-tint); color:var(--ink); padding:.1rem .35rem; font-family:var(--mono); font-size:.85em; }
.muted { color:var(--muted); }
.small { font-size:.85rem; }
[hidden] { display:none !important; }

/* --- Topbar --- */
.topbar { display:flex; align-items:center; gap:.9rem; padding:0 1.25rem; height:var(--topbar-h); background:var(--side-bg);
    border-bottom:1px solid var(--side-line); position:sticky; top:0; z-index:20; }
.brand { font-weight:600; font-size:1.05rem; color:var(--side-ink); display:flex; align-items:center; gap:.6rem; }
.brand::before { content:"LU"; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
    background:var(--side-accent); color:var(--panel); font-size:.78rem; font-weight:700; letter-spacing:.04em; }
.brand:hover { text-decoration:none; }
.brand-big { justify-content:center; font-size:1.4rem; }
.brand-big::before { width:40px; height:40px; font-size:1rem; }
.topbar-spacer, .toolbar-spacer { flex:1; }
.topbar-live { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--side-muted); text-transform:uppercase; letter-spacing:.12em; }
.topbar-live.off .live-dot { background:var(--alert); animation:none; }
.menu-toggle, .theme-toggle { background:transparent; border:1px solid transparent; color:var(--side-ink); font:inherit; cursor:pointer; padding:.3rem .5rem; }
.menu-toggle:hover, .theme-toggle:hover { border-color:var(--side-line); }
.menu-toggle { display:none; font-size:1.2rem; }
.user-name { color:var(--side-muted); font-size:.9rem; }

/* --- Layout --- */
.layout { display:flex; min-height:calc(100vh - var(--topbar-h)); }
.sidebar { width:var(--sidebar-w); flex-shrink:0; padding:1rem 0; background:var(--side-bg); border-right:1px solid var(--side-line); }
.menu-group { margin-bottom:1rem; }
.menu-group-title { font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--side-muted); padding:.4rem 1.25rem; }
.menu-item { display:flex; align-items:center; gap:.6rem; padding:.5rem 1.25rem; color:var(--side-ink); border-left:3px solid transparent; }
.menu-item:hover { background:var(--side-hover); text-decoration:none; }
.menu-item.active { border-left-color:var(--side-accent); background:var(--side-hover); font-weight:600; }
.menu-icon { width:1.3rem; text-align:center; }
.menu-backdrop { display:none; }
.content { flex:1; min-width:0; display:flex; flex-direction:column; }
.navbar { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.75rem .6rem; }
.page-title { margin:0; font-size:1.5rem; font-weight:400; letter-spacing:-.03em; }
.page { padding:0 1.75rem 2rem; flex:1; }
.footer { padding:1rem 1.5rem; color:var(--muted); font-size:.78rem; text-align:center; border-top:1px solid var(--line); }

/* --- Flash & toasts --- */
.flash { padding:.7rem 1rem; margin:0 1.75rem 1rem; font-weight:500; }
.flash-success { background:rgba(22,163,74,.12); color:var(--ok-ink); border-left:4px solid var(--ok); }
.flash-error   { background:rgba(220,38,38,.12); color:var(--alert-ink); border-left:4px solid var(--alert); }
.flash-info    { background:var(--brand-tint); color:var(--brand); border-left:4px solid var(--brand); }
.flash-warning { background:rgba(217,119,6,.12); color:var(--warn-ink); border-left:4px solid var(--warn); }
.toasts { position:fixed; right:1rem; bottom:1rem; display:flex; flex-direction:column; gap:.5rem; z-index:100; max-width:min(28rem, calc(100% - 2rem)); }
.toast { padding:.7rem 1rem; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--brand); box-shadow:0 8px 30px rgba(0,0,0,.25); font-weight:500; animation:toast-in .15s ease-out; }
.toast-ok { border-left-color:var(--ok); }
.toast-error { border-left-color:var(--alert); }
@keyframes toast-in { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }

/* --- Stat tiles --- */
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.25rem; }
.stat-tile { background:var(--panel); border:1px solid var(--line); padding:.95rem 1.1rem; display:flex; flex-direction:column; gap:.35rem; color:inherit; }
a.stat-tile:hover { text-decoration:none; border-color:var(--brand); background:var(--brand-tint); }
.stat-value { font-size:2rem; font-weight:300; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; color:var(--brand); }
.stat-label { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; }
.stat-alert .stat-value { color:var(--alert); font-weight:500; }
.stat-warn .stat-value { color:var(--warn); }

/* --- Panels, tables --- */
.panel { background:var(--panel); border:1px solid var(--line); padding:1.1rem 1.25rem; margin-bottom:1.25rem; }
.panel h2 { font-size:1rem; font-weight:600; margin:0; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.panel-live { border-top:3px solid var(--brand); }
.live-dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; background:var(--ok); animation:pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow:0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow:0 0 0 0 rgba(22,163,74,0); } }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
.table th { font-size:.68rem; font-weight:400; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.table tbody tr:hover { background:var(--row-hover); }
.table td { font-variant-numeric:tabular-nums; }
.table .actions { text-align:right; white-space:nowrap; }
.table .row-muted { opacity:.55; }
.table-scroll { overflow-x:auto; }
.detail { display:grid; grid-template-columns:150px 1fr; gap:.4rem 1rem; margin:0 0 1rem; }
.detail dt { color:var(--muted); }
.detail dd { margin:0; }
.pager { display:flex; gap:.3rem; align-items:center; margin-top:.8rem; flex-wrap:wrap; }
.host-badges { display:flex; flex-wrap:wrap; gap:.3rem; }
.note { color:var(--alert-ink); }

/* --- Badges --- */
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.12rem .5rem; font-size:.74rem; font-weight:600;
    background:var(--panel-2); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
.badge::before { content:"●"; font-size:.6rem; }
.badge-online, .badge-ok { background:rgba(22,163,74,.12); color:var(--ok-ink); border-color:rgba(22,163,74,.45); }
.badge-alert { background:rgba(220,38,38,.12); color:var(--alert-ink); border-color:rgba(220,38,38,.5); }
.badge-warning { background:rgba(217,119,6,.13); color:var(--warn-ink); border-color:rgba(217,119,6,.45); }
.badge-offline { background:var(--panel-2); color:var(--muted); border-color:var(--line); }
.badge-plain::before { content:none; }

/* --- Forms & buttons --- */
.btn { display:inline-block; padding:.45rem .9rem; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer;
    font:inherit; font-weight:500; white-space:nowrap; transition:border-color .12s, background .12s, color .12s; line-height:1.2; }
.btn:hover { border-color:var(--brand); color:var(--brand); text-decoration:none; }
.btn:active { background:var(--brand-tint); }
.btn:disabled { opacity:.5; cursor:default; }
.btn-primary { background:var(--brand-fill); color:var(--brand-ink); border-color:var(--brand-fill); font-weight:600; }
.btn-primary:hover { background:var(--brand-fill-2); border-color:var(--brand-fill-2); color:var(--brand-ink); }
.btn-danger { background:var(--alert); color:#fff; border-color:var(--alert); }
.btn-danger:hover { filter:brightness(1.1); color:#fff; }
.btn-sm { padding:.28rem .6rem; font-size:.82rem; }
.btn-xs { padding:.15rem .45rem; font-size:.76rem; }
.btn-block { display:block; text-align:center; }
.input, select.input, textarea.input { padding:.45rem .65rem; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; width:100%; }
.input:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem; }
.form-grid label { display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; color:var(--muted); }
.form-grid label.span2, .form-grid .span2 { grid-column:1 / -1; }
.form-grid .check, .check { flex-direction:row; align-items:center; gap:.5rem; color:var(--ink); font-size:.9rem; display:flex; }
.filterbar { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; align-items:center; }
.filterbar .input { width:auto; min-width:9rem; }
.filterbar input[type="search"] { flex:1; min-width:14rem; }
form.inline { display:inline; }
.toolbar { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.9rem; }
.toolbar-title { font-size:1rem; margin:0; }
.seg { display:inline-flex; border:1px solid var(--line); }
.seg-btn { background:var(--panel); color:var(--ink); border:0; border-right:1px solid var(--line); padding:.3rem .7rem; font:inherit; font-size:.85rem; cursor:pointer; }
.seg-btn:last-child { border-right:0; }
.seg-btn:hover { text-decoration:none; color:var(--brand); }
.seg-btn.active { background:var(--brand-fill); color:var(--brand-ink); }

/* --- Login --- */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--side-bg); padding:1rem; }
.login-card { background:var(--panel); border:1px solid var(--line); padding:2rem; width:360px; max-width:100%; display:flex; flex-direction:column; gap:1rem; }
.login-card h1 { margin:0; font-size:1.3rem; font-weight:400; letter-spacing:-.03em; text-align:center; }

/* --- Modal (<dialog>) --- */
dialog.modal { border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:0; width:min(36rem, calc(100% - 2rem)); box-shadow:0 20px 60px rgba(0,0,0,.35); }
dialog.modal::backdrop { background:rgba(10,12,18,.6); }
.modal-body { padding:1.25rem 1.5rem 1rem; }
.modal-body h2 { margin:0 0 .8rem; font-size:1.1rem; font-weight:600; }
.modal-body p { margin:.4rem 0; }
.modal-actions { display:flex; justify-content:flex-end; gap:.5rem; margin:0; padding:.85rem 1.5rem; border-top:1px solid var(--line); background:var(--panel-2); flex-wrap:wrap; }
.modal-error { margin-top:.8rem; padding:.6rem .8rem; background:rgba(220,38,38,.12); color:var(--alert-ink); border-left:4px solid var(--alert); font-weight:500; }
.modal-loading { padding:2rem; text-align:center; color:var(--muted); }
.job-note { padding:.6rem .8rem; background:var(--panel-2); border-left:4px solid var(--alert); word-break:break-word; font-family:var(--mono); font-size:.82rem; }

/* --- Steps (job progress in the modal) --- */
.steps { list-style:none; margin:.5rem 0 1rem; padding:0; display:flex; flex-wrap:wrap; gap:.3rem; }
.steps li { font-size:.72rem; padding:.2rem .5rem; border:1px solid var(--line); color:var(--muted); background:var(--panel-2); }
.steps li.done { border-color:rgba(22,163,74,.45); color:var(--ok-ink); background:rgba(22,163,74,.10); }
.steps li.now { border-color:var(--brand); color:var(--brand); background:var(--brand-tint); font-weight:600; }
.steps li.error { border-color:var(--alert); color:var(--alert-ink); background:rgba(220,38,38,.12); font-weight:600; }

/* --- Overview --- */
.ovf-columns { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(320px, 1fr); gap:1.25rem; align-items:start; }
.host-card { background:var(--panel); border:1px solid var(--line); margin-bottom:1rem; }
.host-card.is-offline { opacity:.8; }
.host-card.is-archived { opacity:.55; }
.host-card.is-master { border-top:3px solid var(--brand); }
.host-head { display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.host-name { font-weight:600; font-size:1.02rem; }
.host-meta { color:var(--muted); font-size:.82rem; display:flex; gap:.9rem; flex-wrap:wrap; }
.host-actions { margin-left:auto; display:flex; gap:.4rem; }
.dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; background:var(--muted); flex:none; }
.dot-on { background:var(--ok); } .dot-off { background:var(--alert); } .dot-warn { background:var(--warn); } .dot-none { background:transparent; border:1px solid var(--muted); }
.vm-table { width:100%; border-collapse:collapse; }
.vm-table td { padding:.45rem 1rem; border-bottom:1px solid var(--line); vertical-align:middle; font-variant-numeric:tabular-nums; }
.vm-table tr:last-child td { border-bottom:0; }
.vm-table tr:hover td { background:var(--row-hover); }
.vm-table .vm-name { font-weight:500; }
.vm-table .vm-ip { color:var(--muted); font-size:.85rem; font-family:var(--mono); }
.vm-table .vm-act { text-align:right; white-space:nowrap; }
.vm-table .vm-ver { white-space:nowrap; }
.vm-empty { padding:.8rem 1rem; color:var(--muted); font-size:.9rem; }
.host-foot { padding:.6rem 1rem; display:flex; gap:.5rem; justify-content:flex-end; border-top:1px solid var(--line); background:var(--panel-2); }
.progress { height:6px; background:var(--panel-2); border:1px solid var(--line); margin-top:.25rem; width:100%; }
.progress > span { display:block; height:100%; background:var(--brand-fill); transition:width .6s ease; }
.progress.error > span { background:var(--alert); }
.jobstate { display:flex; flex-direction:column; gap:.15rem; min-width:9rem; font-size:.82rem; }
.jobstate .muted { font-size:.76rem; }
.job-list { display:flex; flex-direction:column; }
.job-row { display:grid; grid-template-columns:auto 1fr auto; gap:.2rem .7rem; padding:.55rem 0; border-bottom:1px solid var(--line); align-items:center; }
.job-row:last-child { border-bottom:0; }
.job-row .job-id { color:var(--muted); font-variant-numeric:tabular-nums; font-size:.85rem; }
.job-row .job-main { min-width:0; }
.job-row .job-title { display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.job-row .job-sub { display:block; color:var(--muted); font-size:.8rem; }
.job-row .job-sub .note { font-family:var(--mono); font-size:.76rem; }
.job-row .progress { grid-column:1 / -1; }
.job-row .job-when { text-align:right; font-size:.82rem; color:var(--muted); white-space:nowrap; }
.export-row { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.export-row:last-child { border-bottom:0; }
.export-main { flex:1; min-width:10rem; }
.export-sub { color:var(--muted); font-size:.8rem; }
.empty { color:var(--muted); padding:.5rem 0; }

/* --- Bandwidth --- */
.bw-stats { display:flex; gap:2rem; flex-wrap:wrap; margin-bottom:.6rem; }
.bw-num { font-size:1.5rem; font-weight:300; color:var(--brand); letter-spacing:-.03em; }
.spark { width:100%; height:110px; display:block; background:var(--bg); border:1px solid var(--line); }
.spark-axis { stroke:var(--line); stroke-width:1; }
.spark-down { fill:none; stroke:var(--brand); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.spark-up { fill:none; stroke:var(--warn); stroke-width:1.2; vector-effect:non-scaling-stroke; }
.spark-label { fill:var(--muted); font-size:11px; font-family:var(--font); }
.legend { display:inline-block; width:1.2rem; height:3px; vertical-align:middle; margin-right:.3rem; }
.legend-down { background:var(--brand); } .legend-up { background:var(--warn); }

/* --- Mobile (820 px, same breakpoint as the LU backend) --- */
@media (max-width: 1100px) { .ovf-columns { grid-template-columns:1fr; } }
@media (max-width: 820px) {
    .layout { display:block; }
    .menu-toggle { display:inline-block; }
    .sidebar { position:fixed; top:var(--topbar-h); left:0; bottom:0; z-index:40; width:min(280px, 82vw); overflow-y:auto;
        transform:translateX(-100%); transition:transform .2s ease; box-shadow:6px 0 24px rgba(0,0,0,.35); }
    html.menu-open .sidebar { transform:translateX(0); }
    .menu-backdrop { display:block; position:fixed; inset:var(--topbar-h) 0 0; z-index:35; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s ease; }
    html.menu-open .menu-backdrop { opacity:1; pointer-events:auto; }
    html.menu-open { overflow:hidden; }
    .topbar { gap:.5rem; padding:0 .75rem; }
    .user-name { display:none; }
    .navbar { padding:.85rem 1rem .5rem; flex-wrap:wrap; gap:.5rem; }
    .page-title { font-size:1.25rem; }
    .page { padding:0 .8rem 2rem; }
    .flash { margin:0 .8rem 1rem; }
    .panel { padding:.9rem .8rem; margin-bottom:1rem; }
    .stat-row { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.5rem; }
    .stat-tile { padding:.7rem .75rem; } .stat-value { font-size:1.5rem; }
    .table-scroll > .table { width:max-content; min-width:100%; }
    .table-scroll > .table th, .table-scroll > .table td { max-width:45vw; }
    .form-grid { grid-template-columns:1fr; }
    .detail { grid-template-columns:1fr; gap:.1rem .5rem; }
    .detail dt { margin-top:.4rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
    .input, select, input, textarea { font-size:16px; }
    .host-head { padding:.6rem .7rem; }
    .host-actions { margin-left:0; width:100%; }
    .vm-table td { padding:.4rem .6rem; }
    .vm-table .vm-ip { display:none; }
    .vm-table .vm-act .btn { padding:.35rem .5rem; }
}
@media (pointer: coarse) {
    .btn { min-height:38px; display:inline-flex; align-items:center; justify-content:center; }
    .btn-sm { min-height:32px; } .btn-xs { min-height:28px; }
}