/* Northscale Platform portal, in the northscale.se brand.
   Tokens first. Square corners everywhere except buttons (pills); no shadows. */

@font-face { font-family: "Magistral Condensed"; src: url("fonts/magistral-condensed-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Magistral Condensed"; src: url("fonts/magistral-condensed-extrabold.otf") format("opentype"); font-weight: 800; font-display: swap; }

:root {
    --ns-navy: #1A3250;
    --ns-navy-2: #24406A;
    --ns-navy-hover: #213C60;
    --ns-ink: #1E1A1A;
    --ns-paper: #F6F3EE;
    --ns-white: #FFFFFF;
    --ns-lime: #DEFF8E;
    --ns-red: #D10A07;
    --ns-text-2: #3A3434;
    --ns-text-3: #5C5454;
    --ns-line: rgba(30, 26, 26, .10);
    --ns-line-soft: rgba(30, 26, 26, .08);
    --ns-row-hover: #FAF8F5;

    /* Status chips: background / text */
    --chip-error-bg: #FDE7E6;   --chip-error: #A30805;
    --chip-warn-bg: #FFF1D6;    --chip-warn: #7A4A00;   --warn-list-bg: #FFF8EA;
    --chip-off-bg: #E3E1DD;     --chip-off: #3A3434;
    --chip-neutral-bg: #EDEBE7; --chip-neutral: #3A3434;
    --chip-ok-bg: #DEFF8E;      --chip-ok: #1E1A1A;

    --display: "Magistral Condensed", "Arial Narrow", Arial, sans-serif;
    --font: "Mulish", system-ui, sans-serif;
    --mono: ui-monospace, Menlo, monospace;

    /* Older names used across the portal, mapped onto the brand tokens. */
    --bg: var(--ns-paper);
    --surface: var(--ns-white);
    --surface-2: var(--ns-paper);
    --border: var(--ns-line);
    --text: var(--ns-ink);
    --muted: var(--ns-text-3);
    --accent: var(--ns-navy);
    --accent-soft: var(--ns-paper);
    --bad: var(--chip-error);
    --warn: var(--chip-warn);
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--ns-paper);
    color: var(--ns-ink);
    font: 15px/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ns-navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
h1 { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1; color: var(--ns-navy); }
h2 { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ns-navy); }
h3 { font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--ns-ink); }
h1:focus { outline: none; }
code, .mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--ns-text-3); }
.sub { color: var(--ns-text-3); font-size: 13px; }
.nowrap { white-space: nowrap; }
.wrap { word-break: break-all; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

/* ------------------------------------------------------------------ Shell */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: var(--ns-navy); color: var(--ns-paper);
    display: flex; flex-direction: column;
    padding: 28px 16px 24px;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; }
.brand { display: block; padding: 0 12px 32px; }
.brand img { height: 19px; width: auto; display: block; }
.menu-toggle { display: none; }
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.menu-toggle .when-open { display: none; }
.sidebar-menu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    flex: none; white-space: nowrap;
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 12px;
    color: #D5DCE6; font-size: 15px; font-weight: 500;
}
.nav-item:hover { background: var(--ns-navy-hover); color: var(--ns-white); text-decoration: none; }
.nav-item.active { background: var(--ns-navy-2); color: var(--ns-white); font-weight: 700; }
.nav-item.active::after { content: ""; width: 6px; height: 6px; background: var(--ns-lime); }
.nav-group {
    display: block; padding: 28px 12px 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8FA0B8;
}
.sidebar-foot {
    margin-top: auto; flex: none; min-width: 0;
    border-top: 1px solid rgba(246, 243, 238, .18);
    padding: 20px 12px 0;
    display: flex; flex-direction: column; gap: 12px;
}
.me { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me-name { font-size: 15px; font-weight: 700; color: var(--ns-white); }
.me-mail { font-size: 13px; color: #B9C4D3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout {
    align-self: flex-start; white-space: nowrap;
    padding: 8px 16px; border: 1px solid rgba(246, 243, 238, .5); border-radius: 999px;
    background: transparent; color: var(--ns-paper); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.logout:hover { border-color: var(--ns-white); }

.content { min-width: 0; }
/* Pages that don't wrap themselves in .page get the same frame. */
.content:not(:has(> .page)),
.page {
    max-width: 1320px;
    padding: 48px 56px 80px;
    display: flex; flex-direction: column; gap: 32px;
}
.page.wide-gap { gap: 40px; }
.page.detail { padding-top: 40px; }

/* ------------------------------------------------------------------ Page header */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.page-title { display: flex; flex-direction: column; gap: 8px; }
.page-title > p { font-size: 16px; color: var(--ns-text-3); }
.page-actions { display: flex; align-items: center; gap: 16px; }
.updated { font-size: 13px; color: var(--ns-text-3); white-space: nowrap; }
.detail-head { display: flex; flex-direction: column; gap: 12px; }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--ns-text-3); }
.crumbs a { font-weight: 700; }
.crumbs .mono { font-size: 13px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.search {
    width: 280px; padding: 10px 14px;
    background: var(--ns-white); border: 1px solid rgba(30, 26, 26, .18);
    font: inherit; font-size: 14px; color: var(--ns-ink);
}
.search::placeholder { color: #8A8380; }

/* ------------------------------------------------------------------ KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.kpi { border-top: 2px solid var(--ns-navy); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.kpi-label { font-size: 14px; font-weight: 600; color: var(--ns-text-2); }
.kpi-value { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--ns-navy); }
.kpi-hint { font-size: 13px; color: var(--ns-text-3); min-height: 18px; }
.kpi.bad .kpi-value { color: var(--ns-red); }
.kpi.warn .kpi-value { color: var(--ns-navy); }

/* ------------------------------------------------------------------ Panels */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; align-items: start; }
.card, .panel { background: var(--ns-white); border: 1px solid var(--ns-line); min-width: 0; }
.card { padding: 24px; }
.panel { display: flex; flex-direction: column; }
.card.flush { padding: 0; }
.panel-head, .card-head {
    display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px;
}
.panel-head { padding: 22px 24px 16px; }
.card-head { margin-bottom: 16px; }
.card.flush > .card-head { padding: 22px 24px 16px; margin: 0; }
.panel-head a, .card-head a, .link-more { font-size: 14px; font-weight: 700; white-space: nowrap; }
.panel-body { border-top: 1px solid var(--ns-line); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.empty-state { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty { color: var(--ns-text-3); margin: 0; }
.card.flush > .empty, .panel > .empty { padding: 18px 24px; border-top: 1px solid var(--ns-line-soft); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; align-items: start; }

/* ------------------------------------------------------------------ Tables */
.table-wrap { overflow-x: auto; }
.card:not(.flush) > .table-wrap { margin: 0 -24px; }
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left; white-space: nowrap;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-text-3);
    padding: 14px 12px; border-bottom: 1px solid var(--ns-line);
}
td { padding: 14px 12px; border-bottom: 1px solid var(--ns-line-soft); vertical-align: top; }
th:first-child, td:first-child { padding-left: 24px; }
th:last-child, td:last-child { padding-right: 24px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--ns-row-hover); }
tr.clickable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; white-space: nowrap; }
td.error-cell { color: var(--chip-error); font-size: 13px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Grid tables (Kunder, failed-job fallback) */
.grid-table { min-width: 980px; }
.grid-row { display: grid; gap: 16px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--ns-line-soft); color: inherit; }
.grid-row:last-child { border-bottom: none; }
a.grid-row:hover, .grid-row.hover:hover { background: var(--ns-row-hover); text-decoration: none; }
.grid-head {
    padding: 14px 24px; border-bottom: 1px solid var(--ns-line);
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-text-3);
}
.grid-head .num, .grid-row .num { text-align: right; }
.cols-kunder { grid-template-columns: 200px 110px minmax(0, 1fr) 120px 80px 100px 110px; }
.cols-failed { grid-template-columns: 44px 110px minmax(0, 1fr) 108px 60px; gap: 12px; }
.cols-failed.grid-row { padding: 14px 24px; }
.cols-failed.grid-head { padding: 10px 24px; border-top: 1px solid var(--ns-line); }
.failed-list { min-width: 560px; }
.failed-list .grid-row { font-size: 14px; }
.job-title { font-size: 14px; font-weight: 600; }
.name-cell { display: flex; flex-direction: column; gap: 2px; }
.name-cell .name { font-size: 16px; font-weight: 700; color: var(--ns-navy); }
.name-cell .mono { font-size: 12px; color: var(--ns-text-3); }
.name-cell .sub { font-size: 14px; color: var(--ns-text-3); }
/* Integrations and apps on a customer: one row each, details on their own page. */
.cols-items { grid-template-columns: minmax(0, 1fr) auto 20px; }
.row-arrow { color: var(--ns-text-3); font-weight: 700; text-align: right; }
a.grid-row:hover .row-arrow { color: var(--ns-navy); }
.cell-num { font-size: 15px; text-align: right; }

/* ------------------------------------------------------------------ Chips */
.badge {
    display: inline-block; white-space: nowrap;
    padding: 4px 9px; font-size: 12px; font-weight: 700; line-height: 1.5;
    background: var(--chip-neutral-bg); color: var(--chip-neutral);
}
.badge.neutral, .badge.info { background: var(--chip-neutral-bg); color: var(--chip-neutral); font-weight: 600; }
.badge.bad { background: var(--chip-error-bg); color: var(--chip-error); }
.badge.warn { background: var(--chip-warn-bg); color: var(--chip-warn); }
.badge.off { background: var(--chip-off-bg); color: var(--chip-off); }
.badge.good { background: var(--chip-ok-bg); color: var(--chip-ok); }
.badge.category { background: var(--ns-navy); color: var(--ns-lime); }
.badge.outline { background: transparent; color: var(--ns-text-2); border: 1px solid rgba(30, 26, 26, .2); font-weight: 600; }
.badge.count { padding: 4px 10px; font-size: 13px; }
.badge.small { padding: 2px 7px; font-size: 11px; }
.badge.tight { padding: 3px 8px; }

/* ------------------------------------------------------------------ Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
    padding: 10px 20px; border: 1.5px solid var(--ns-navy); border-radius: 999px;
    background: transparent; color: var(--ns-navy);
    font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.btn:hover { background: var(--ns-navy); color: var(--ns-white); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--ns-navy); }
.btn.primary { border-color: var(--ns-ink); background: var(--ns-ink); color: var(--ns-paper); }
.btn.primary:hover { background: var(--ns-navy); border-color: var(--ns-navy); color: var(--ns-white); }
.btn.primary:disabled:hover { background: var(--ns-ink); border-color: var(--ns-ink); color: var(--ns-paper); }
.btn.tertiary, .btn.ghost { border-color: transparent; background: transparent; color: var(--ns-navy); padding-left: 4px; padding-right: 4px; }
.btn.tertiary:hover, .btn.ghost:hover { background: transparent; color: var(--ns-ink); }
.btn.lime { border-color: var(--ns-lime); background: var(--ns-lime); color: var(--ns-ink); flex: none; }
.btn.lime:hover { background: var(--ns-white); border-color: var(--ns-white); color: var(--ns-ink); }
.btn.small { padding: 9px 18px; font-size: 13px; }
.btn.small.tertiary, .btn.small.ghost { padding: 9px 4px; }
.actions-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ Forms */
label { display: flex; flex-direction: column; gap: 6px; }
label > span { color: var(--ns-text-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
label > span.sub, label > span.help, label > span.field-error { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
input, textarea, select {
    font: inherit; font-size: 15px; color: var(--ns-ink);
    background: var(--ns-white); border: 1px solid rgba(30, 26, 26, .18); border-radius: 0;
    padding: 10px 14px; width: 100%;
}
input:focus, textarea:focus, select:focus, .btn:focus-visible, .tabs button:focus-visible, .nav-item:focus-visible, a:focus-visible {
    outline: 2px solid var(--ns-navy); outline-offset: 2px;
}
.inline-form { display: flex; gap: 12px; align-items: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ns-line-soft); flex-wrap: wrap; }
.inline-form label { min-width: 240px; }
.inline-form .grow { flex: 1; }
.secret-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ns-line-soft); }

/* ------------------------------------------------------------------ Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(30, 26, 26, .15); overflow-x: auto; }
.tabs button {
    white-space: nowrap; padding: 12px 16px; margin-bottom: -1px;
    border: 0; border-bottom: 3px solid transparent; background: transparent;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--ns-text-3); cursor: pointer;
}
.tabs button:hover { color: var(--ns-ink); }
.tabs button.active { color: var(--ns-navy); font-weight: 700; border-bottom-color: var(--ns-navy); }
.tabs .count { margin-left: 6px; color: var(--ns-text-3); font-size: 12px; font-weight: 600; }

/* ------------------------------------------------------------------ Notices */
.alert {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 16px; font-size: 14px;
    background: var(--chip-neutral-bg); color: var(--ns-ink);
}
.alert.good { background: var(--chip-ok-bg); color: var(--chip-ok); }
.alert.bad { background: var(--chip-error-bg); color: var(--chip-error); }
.alert.warn { background: var(--chip-warn-bg); color: var(--chip-warn); }
.alert-close { background: none; border: none; color: inherit; font-size: 18px; cursor: pointer; line-height: 1; }

/* Problem strip on a customer whose flow is blocked */
.problem-strip {
    background: var(--ns-navy); color: var(--ns-paper); padding: 20px 24px;
    display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.problem-strip > div { display: flex; flex-direction: column; gap: 4px; }
.problem-strip strong { font-size: 16px; color: var(--ns-white); }
.problem-strip span { font-size: 14px; color: #D5DCE6; }

/* ------------------------------------------------------------------ Events */
.events { list-style: none; margin: 0; padding: 0; }
.events li {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px;
    padding: 14px 24px; border-top: 1px solid var(--ns-line-soft);
}
.events.wide li { grid-template-columns: 120px minmax(0, 1fr); }
.event-time { font-family: var(--mono); font-size: 13px; color: var(--ns-text-3); padding-top: 2px; }
.event-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.event-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.event-tenant { font-size: 13px; font-weight: 700; color: var(--ns-navy); }
.event-message { font-size: 14px; line-height: 1.45; color: var(--ns-ink); }
.event-meta { font-size: 12px; color: var(--ns-text-3); }

/* ------------------------------------------------------------------ Failed-job groups (Översikt) */
.failure { display: flex; flex-direction: column; gap: 18px; }
.failure + .failure { border-top: 1px solid var(--ns-line); padding-top: 24px; }
.failure-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.failure-title { display: flex; flex-direction: column; gap: 10px; }
.failure-meta { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.failure-meta a { font-size: 14px; font-weight: 700; }
.failure-meta span:last-child { font-size: 13px; color: var(--ns-text-3); white-space: nowrap; }
.failure-count { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.failure-count strong { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--ns-red); }
.failure-count span { font-size: 12px; color: var(--ns-text-3); white-space: nowrap; }
.failure-raw { font-size: 14px; color: var(--ns-text-2); }
.grey-list { display: flex; flex-direction: column; background: var(--ns-paper); }
.grey-list > .list-label { padding: 12px 16px 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ns-text-3); }
.grey-list > div {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 10px 16px; border-top: 1px solid var(--ns-line-soft); font-size: 14px; color: var(--ns-text-2);
}
.grey-list strong { color: var(--ns-ink); }

/* ------------------------------------------------------------------ Integrations (Kund) */
.lead { max-width: 70ch; }
.tab-body { display: flex; flex-direction: column; gap: 24px; }
.integration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.integration-card {
    background: var(--ns-white); border: 1px solid var(--ns-line); padding: 24px;
    display: flex; flex-direction: column; gap: 16px; color: var(--ns-ink);
}
.integration-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.integration-head > div { display: flex; flex-direction: column; gap: 4px; }
.integration-head h3, .integration-card h3 { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--ns-navy); }
.integration-head .vendor { font-size: 14px; color: var(--ns-text-3); }
.integration-state { font-size: 14px; line-height: 1.5; color: var(--ns-text-2); }
.missing-list { display: flex; flex-direction: column; background: var(--warn-list-bg); }
.missing-list > span { padding: 8px 14px; border-top: 1px solid rgba(122, 74, 0, .12); font-size: 14px; color: var(--ns-ink); }
.missing-list > .list-label { padding: 10px 14px 4px; border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--chip-warn); }
.card-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ns-line-soft); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.toggle-panel > button {
    width: 100%; display: flex; justify-content: space-between; align-items: center; white-space: nowrap;
    padding: 18px 24px; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit;
}
.toggle-panel .toggle-title { font-size: 16px; font-weight: 700; color: var(--ns-ink); }
.toggle-panel .toggle-title span { font-weight: 500; color: var(--ns-text-3); }
.toggle-panel .toggle-sign { font-size: 20px; color: var(--ns-navy); }
.toggle-panel > .toggle-body { border-top: 1px solid var(--ns-line-soft); }
.toggle-body > p { padding: 14px 24px 0; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--ns-line-soft); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .name { font-size: 15px; font-weight: 600; }
.toggle-row .row { flex-wrap: nowrap; }
.catalog { display: flex; flex-direction: column; }
.catalog-item {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 14px 0; border-top: 1px solid var(--ns-line-soft);
}
.catalog-item:first-child { border-top: none; padding-top: 0; }
.catalog-item p { margin: 4px 0 6px; }
.flow-card { display: flex; flex-direction: column; gap: 16px; }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.field-error { color: var(--chip-error); font-size: 13px; }
.flow-actions { justify-content: flex-end; }
.plain-list { margin: 0; padding-left: 18px; }
.plain-list li { padding: 2px 0; }
.config-form { max-width: 640px; }
.field-group { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ns-line-soft); display: flex; flex-direction: column; gap: 4px; }
.field-group h3 { font-size: 18px; }
.config-form label > span { display: flex; align-items: center; gap: 6px; }
.config-form em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 12px 0 0; }
.facts dt { color: var(--ns-text-3); }
.facts dd { margin: 0; }

/* ------------------------------------------------------------------ Login and empty layout */
.empty-layout { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--ns-paper); }
.center-card {
    background: var(--ns-white); border: 1px solid var(--ns-line);
    padding: 32px; width: 100%; max-width: 420px;
    display: flex; flex-direction: column; gap: 16px;
}
.center-card .brand { padding: 0 0 8px; }
.center-card.login .btn.primary { margin-top: 4px; }

/* Blazor */
.blazor-error-boundary { background: var(--chip-error-bg); color: var(--chip-error); padding: 1rem; }
.blazor-error-boundary::after { content: "Ett fel uppstod."; }

/* ------------------------------------------------------------------ Time reporting */
.timer-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-color: var(--ns-navy); }
.timer-card > div:first-child { display: flex; flex-direction: column; }
.timer-dot { display: inline-block; width: 8px; height: 8px; background: var(--ns-navy); margin-right: 8px; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.timer-elapsed { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--ns-navy); }
.week-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.week-strip .day {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--ns-white); border: 1px solid var(--ns-line);
    padding: 10px 6px; font: inherit; color: var(--ns-ink); cursor: pointer;
}
.week-strip .day:hover { background: var(--ns-row-hover); }
.week-strip .day.active { border: 2px solid var(--ns-navy); }
.week-strip .day.today .day-name { color: var(--ns-navy); }
.week-strip .day.total { cursor: default; background: var(--ns-paper); }
.day-name { font-size: 12px; color: var(--ns-text-3); font-weight: 700; }
.day-date { font-size: 12px; color: var(--ns-text-3); }
.day-hours { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--ns-navy); }
.entries tr.running td { background: var(--ns-row-hover); }
.entry-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ns-line-soft); }
.entry-form label { min-width: 160px; }
.entry-form label.hours { min-width: 110px; max-width: 130px; }
.entry-form .grow { flex: 1; }
.filters { display: flex; flex-direction: column; gap: 12px; }
.filters .row { align-items: flex-end; }
.filters label { min-width: 150px; }
label.check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 8px; }
label.check input { width: auto; }
label.check span { color: var(--ns-ink); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
form.inline { gap: 6px; }
form.inline input { width: 140px; padding: 6px 10px; }
tfoot td { border-top: 2px solid var(--ns-navy); font-weight: 700; }
tr.inactive td { color: var(--ns-text-3); }
.edit-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ns-line-soft); align-items: flex-end; }
.edit-form .row { align-items: flex-end; }
.wrap-row { margin-bottom: 4px; }
.chip {
    white-space: nowrap; padding: 6px 14px; border: 1px solid rgba(30, 26, 26, .2); border-radius: 999px;
    background: var(--ns-white); font: inherit; font-size: 13px; font-weight: 600; color: var(--ns-ink); cursor: pointer;
}
.chip:hover { border-color: var(--ns-navy); }
.chip.inactive { color: var(--ns-text-3); text-decoration: line-through; }
@media (max-width: 960px) { .week-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .roles { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Narrow screens: top bar + drawer */
@media (max-width: 899px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: sticky; top: 0; z-index: 10; height: auto; overflow: visible; padding: 14px 20px; }
    .brand { padding: 4px 0; }
    .menu-toggle {
        display: inline-flex; align-items: center; white-space: nowrap;
        padding: 8px 16px; border: 1px solid rgba(246, 243, 238, .5); border-radius: 999px;
        background: transparent; color: var(--ns-paper); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .sidebar-menu { display: none; padding-top: 16px; max-height: calc(100vh - 64px); overflow-y: auto; }
    .nav-toggle:checked ~ .sidebar-menu { display: flex; }
    .nav-toggle:checked ~ .sidebar-top .when-open { display: inline; }
    .nav-toggle:checked ~ .sidebar-top .when-closed { display: none; }
    .nav-toggle:focus-visible ~ .sidebar-top .menu-toggle { outline: 2px solid var(--ns-lime); outline-offset: 2px; }
    .sidebar-foot { margin-top: 20px; padding-bottom: 8px; }
    .page, .content:not(:has(> .page)) { padding: 24px 20px; }
    .page.detail { padding-top: 24px; }
    .search { width: 100%; }
    .page-head > .search { flex: 1 1 100%; }
    .page-head > .page-actions { flex: 1 1 100%; }
    .page-actions .search { flex: 1; width: auto; min-width: 0; }
    .new-tenant label { min-width: 0; flex: 1 1 100%; }
    .events li { grid-template-columns: 1fr; gap: 2px; }
}

/* In-apps */
.spaced { margin-top: 12px; }