/* Brand tokens, logos and Manrope match the Argonaut Systems website. */
@font-face {
    font-family: "Manrope Variable";
    src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}
:root {
    color-scheme:light;
    --ink:#172c39;
    --muted:#5c6b74;
    --line:#dce3e6;
    --green:#1d658f;
    --accent:#5cb9f0;
    --nav:#081b29;
    --paper:#f3f6f7;
    --shadow:0 14px 50px #102c3314;
    font-family:"Manrope Variable",Manrope,Arial,sans-serif;
    font-size:14px
}
.brand img { width: 190px; height: auto; object-fit: contain; }
.product-brand { display: flex; align-items: center; gap: 10px; margin: 30px 0 0; padding-top: 24px; border-top: 1px solid #203a4c; font-size: 11px; font-weight: 650; letter-spacing: .8px; }
.product-brand img { object-fit: contain; }
.product-brand small { display: block; margin-top: 5px; font-size: 8px; letter-spacing: 1.5px; color: #93aabb; }
.login-logo { display: block; width: 245px; max-width: 100%; height: auto; margin-bottom: 32px; }
.login-product { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.login-product .eyebrow { margin: 0; font-size: 9px; }
.page-note > span { display: block; margin-top: 7px; }
.health-overview { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: center; background: white; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 9px; padding: 20px 28px; margin-bottom: 20px; }
.gauge-wrap { padding-right: 22px; border-right: 1px solid var(--line); }
.health-gauge { display: block; width: 100%; overflow: visible; }
.gauge-track,.gauge-fill { fill: none; stroke-width: 15; stroke-linecap: round; }
.gauge-track { stroke: #e8eef1; }
.gauge-fill { stroke: #2b916c; transition: stroke-dasharray .4s ease; }
#gauge-percent { font-size: 36px; font-weight: 650; fill: var(--ink); letter-spacing: -1.5px; }
.gauge-caption { font-size: 6.9px; fill: var(--muted); font-weight: 650; letter-spacing: .7px; }
.health-copy .eyebrow { margin-bottom: 7px; font-size: 9px; }
.health-copy h2 { font-size: 22px; margin-bottom: 5px; }
.health-copy > .muted { font-size: 12px; }
.traffic-lights { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 17px; }
.traffic-item { display: flex; align-items: center; gap: 10px; }
.traffic-lamp { display: inline-block; width: 25px; height: 25px; border-radius: 50%; background: #e7edef; border: 4px solid #f1f5f6; box-shadow: inset 0 1px 3px #142c3a15; }
.traffic-item.lit .red { background: #d54a4c; border-color: #fbe8e8; box-shadow: 0 0 0 1px #f5c8c9; }
.traffic-item.lit .amber { background: #e3a23a; border-color: #fff2d8; box-shadow: 0 0 0 1px #f5dfb4; }
.traffic-item.lit .green { background: #2b916c; border-color: #e3f4eb; box-shadow: 0 0 0 1px #c2e5d3; }
.traffic-item strong { display: block; font-size: 17px; line-height: 1.2; font-weight: 700; }
.traffic-item div > span { display: block; font-size: 9px; color: var(--muted); margin-top: 3px; }
.health-key { margin-top: 14px; font-size: 9px; line-height: 1.6; color: #7c8b94; }
.status-with-light { display: inline-flex; gap: 7px; align-items: center; }
.mini-signal { display: inline-flex; gap: 3px; background: #edf1f3; padding: 5px; border-radius: 5px; }
.mini-signal i { width: 5px; height: 5px; border-radius: 50%; background: #cbd4d9; }
.mini-signal.red i:nth-child(1) { background: #c34648; }
.mini-signal.amber i:nth-child(2) { background: #d89b2f; }
.mini-signal.green i:nth-child(3) { background: #2b916c; }
.status-with-light .badge:before { display: none; }
@media(max-width:1100px) {
    .brand img { width: 168px; }
    .product-brand { font-size: 9px; }
    .health-overview { grid-template-columns: 185px 1fr; gap: 20px; padding: 18px; }
}
@media(max-width:780px) {
    .brand img { width: 165px; }
    .product-brand { display: none; }
    .health-overview { grid-template-columns: 1fr; gap: 10px; }
    .gauge-wrap { width: 210px; margin: auto; padding: 0; border: 0; }
    .health-copy { text-align: center; }
    .traffic-lights { justify-content: center; }
    .traffic-item { text-align: left; }
}
@media(prefers-reduced-motion:reduce) { .gauge-fill { transition: none; } }
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink)
}
button,input,select,textarea {
    font:inherit
}
button,a,input,select,textarea {
    outline-offset:4px
}
button {
    cursor:pointer
}
button:disabled {
    cursor:not-allowed;
    opacity:.55
}
a {
    color:inherit;
    text-decoration:none
}
button {
    border:0
}
h1,h2,p {
    margin:0
}
h1 {
    font-size:32px;
    letter-spacing:-1px;
    font-weight:650;
    line-height:1.2
}
h2 {
    font-size:18px;
    font-weight:650;
    letter-spacing:-.3px
}
.muted {
    color:var(--muted);
    line-height:1.6
}
.eyebrow {
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:700;
    margin-bottom:12px;
    color:var(--green)
}
.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:238px;
    background:var(--nav);
    color:#d3e0e3;
    padding:32px 22px;
    display:flex;
    flex-direction:column
}
.brand {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px
}
.brand-mark {
    display:inline-grid;
    place-items:center;
    background:#cee7c7;
    color:#153b32;
    width:40px;
    height:42px;
    border-radius:10px;
    font-size:17px;
    letter-spacing:-.5px;
    font-weight:800;
    flex:none
}
.brand small {
    display:block;
    letter-spacing:2px;
    font-size:8px;
    color:#92a7ad;
    margin-top:5px
}
.nav-caption {
    font-size:9px;
    letter-spacing:1.8px;
    color:#849ca4;
    margin:57px 12px 13px
}
.nav-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:7px;
    font-weight:600
}
.nav-item>span:first-child {
    font-size:20px
}
.nav-item.active {
    background:#15354b;
    color:#dceefa
}
.nav-dot {
    margin-left:auto;
    width:6px;
    height:6px;
    background:var(--accent);
    border-radius:50%
}
.sidebar-bottom {
    margin-top:auto;
    border-top:1px solid #2d454d;
    padding-top:23px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    overflow-wrap:anywhere
}
.sidebar-bottom small {
    display:block;
    font-size:10px;
    color:#90a7ad;
    margin-top:4px
}
.avatar {
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#1c3b50;
    flex:none
}
.sidebar-bottom form {
    margin-left:auto
}
.signout {
    background:none;
    color:#bed0d3;
    font-size:24px;
    padding:6px
}
.workspace {
    margin-left:238px
}
.topbar {
    height:76px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 40px;
    background:#ffffffa8;
    font-size:12px;
    color:var(--muted)
}
.topbar strong {
    color:var(--ink);
    font-weight:500
}
.crumb {
    padding:0 15px;
    color:#bbc7ca
}
.live-label {
    font-size:11px;
    display:flex;
    align-items:center;
    gap:8px
}
.live-label i,.metrics i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#a9b4b9;
    display:inline-block
}
.live-label i,.metric-good i {
    background:#338c67
}
.page-content {
    max-width:1600px;
    margin:auto;
    padding:37px 40px
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:30px
}
.page-heading .muted {
    margin-top:11px;
    font-size:13px
}
.primary,.secondary {
    border-radius:6px;
    padding:11px 17px;
    font-weight:600;
    line-height:1.3;
    white-space:nowrap
}
.primary {
    color:var(--nav);
    background:var(--accent)
}
.primary:hover {
    background:#87ccf6
}
.secondary {
    border:1px solid #d7e1e3;
    background:white;
    color:#344d57
}
.secondary:hover {
    background:#edf3f6
}
.metrics {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:17px;
    margin-bottom:30px
}
.metrics .metric-card {
    padding:22px 23px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    text-align:left;
    color:var(--ink)
}
.metrics .metric-card:hover { border-color: #8ebbd6; background: #f7fbfe; }
.metrics .metric-card[aria-pressed="true"] { border-color: #77b7dd; box-shadow: inset 0 0 0 1px #77b7dd; }
.metrics .metric-card>span {
    font-size:12px;
    color:#60717a;
    display:flex;
    gap:8px;
    align-items:center
}
.metrics strong {
    display:block;
    font-size:35px;
    font-weight:600;
    letter-spacing:-1px;
    margin:12px 0 8px
}
.metrics small {
    font-size:10px;
    color:#7b8990
}
.metric-good strong {
    color:#20795f
}
.metric-alert strong {
    color:#aa6921
}
.metric-alert i {
    background:#c48a3a
}
.installation-panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 3px 12px #19333a03
}
.panel-heading {
    display:flex;
    justify-content:space-between;
    padding:25px 25px 20px
}
.panel-heading h2 {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:16px
}
.count {
    background:#edf2f2;
    color:#6f838a;
    border:1px solid #e2e9e9;
    border-radius:5px;
    font-size:10px;
    padding:3px 6px;
    letter-spacing:0
}
.panel-heading .muted {
    font-size:10px;
    margin-top:7px
}
.filters {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:14px;
    padding:0 25px 16px
}
.status-controls { padding: 0 25px 20px; }
.filter-caption { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; font-size: 11px; margin-bottom: 12px; }
.filter-caption > span { font-size: 10px; color: var(--muted); }
.status-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.status-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 600; }
.status-chip > span { background: #edf2f5; color: #506875; border-radius: 4px; padding: 1px 5px; font-size: 10px; font-variant-numeric: tabular-nums; }
.status-chip:hover { background: #f2f8fc; border-color: #94b9d1; }
.status-chip[aria-pressed="true"] { border-color: #438ab5; background: #eaf5fc; box-shadow: inset 0 0 0 1px #438ab5; }
.status-chip[data-status]:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #d89b2f; }
.status-chip[data-status="Healthy"]:before { background: #2b916c; }
.status-chip[data-status="Key issue"]:before,.status-chip[data-status="Stopped"]:before { background: #c34648; }
.status-chip[data-status="Disabled"]:before { background: #87969e; }
.filter-summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 0 25px 16px; min-height: 36px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.clear-filters { background: none; padding: 5px 0; color: var(--green); font-size: 11px; font-weight: 650; white-space: nowrap; }
.clear-filters:hover:not(:disabled) { text-decoration: underline; }
.sort-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; width: 100%; background: none; color: inherit; text-align: left; font-weight: 650; }
.sort-button:hover { color: var(--green); }
.sort-button span { font-size: 14px; }
th[aria-sort="ascending"],th[aria-sort="descending"] { color: #1d658f; background: #edf5fa; }
.search {
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid #dfe6e8;
    border-radius:6px;
    flex:1 1 260px;
    min-width:220px;
    padding:0 12px;
    color:#7e9198
}
.search>span {
    font-size:22px
}
.search input {
    border:0;
    outline:none;
    width:100%;
    padding:11px 0;
    font-size:12px
}
.view-filter {
    display:flex;
    gap:6px;
    flex-direction:column;
    align-items:flex-start;
    font-size:11px;
    color:var(--muted)
}
select {
    padding:10px 30px 10px 12px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:6px;
    color:var(--ink);
    font-size:11px
}
.table-wrap {
    overflow:auto
}
table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    white-space:nowrap
}
th {
    padding:13px 24px;
    background:#f7f9f9;
    border-block:1px solid var(--line);
    font-size:10px;
    color:#74858d;
    font-weight:600
}
td {
    padding:20px 24px;
    border-bottom:1px solid #edf1f2;
    font-size:11px
}
td small {
    display:block;
    margin-top:5px;
    color:#86959b;
    font-size:10px
}
td strong {
    font-size:12px;
    font-weight:600
}
.company-cell {
    display:flex;
    align-items:center;
    gap:12px
}
.company-icon {
    display:grid;
    place-items:center;
    width:33px;
    height:35px;
    background:#edf3f6;
    border:1px solid #dce7ee;
    border-radius:6px;
    color:#37657e;
    font-weight:600;
    font-size:12px
}
.badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:10px;
    font-weight:600;
    padding:5px 8px;
    border-radius:5px;
    background:#edf0f1;
    color:#6c7b82
}
.badge:before {
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:currentColor
}
.badge.healthy {
    background:#e9f4ec;
    color:#287549
}
.badge.key-issue,.badge.stopped {
    background:#fcecea;
    color:#b24d42
}
.badge.overdue,.badge.never-reported,.badge.awaiting-check {
    background:#fff2df;
    color:#ab752b
}
.details-button {
    background:none;
    font-size:11px;
    color:var(--green);
    font-weight:650;
    padding:7px 0
}
.details-button:hover {
    text-decoration:underline
}
.empty {
    text-align:center;
    padding:45px;
    color:var(--muted)
}
.panel-footer {
    display:flex;
    justify-content:space-between;
    padding:17px 24px;
    color:#86969c;
    font-size:10px
}
.page-note {
    font-size:10px;
    color:#8a989d;
    margin:20px 0;
    line-height:1.6
}
.notice {
    padding:13px 16px;
    border-radius:6px;
    background:#edf4f1;
    border:1px solid #d5e4dd;
    margin-bottom:20px;
    line-height:1.6;
    font-size:12px
}
.notice.error {
    background:#fff1ef;
    color:#9b3e34;
    border-color:#f0d2cc
}
.notice.warning {
    background:#fff6e8;
    color:#8f6525;
    border-color:#eddfc5
}
[hidden],.validation-summary-valid {
    display:none!important
}
dialog {
    border:1px solid var(--line);
    border-radius:12px;
    padding:28px;
    width:min(760px,calc(100% - 32px));
    max-height:90vh;
    box-shadow:var(--shadow);
    color:var(--ink)
}
dialog::backdrop {
    background:#071d2aa0;
    backdrop-filter:blur(2px)
}
.detail-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding-bottom:22px
}
.detail-heading h2 {
    font-size:25px;
    overflow-wrap:anywhere
}
.icon-button {
    background:#f0f4f4;
    border-radius:6px;
    padding:2px 11px;
    font-size:25px;
    color:#50646b
}
.detail-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    padding:24px 0
}
.detail-grid dt {
    font-size:10px;
    color:var(--muted);
    margin-bottom:7px
}
.detail-grid dd {
    margin:0;
    font-size:12px;
    overflow-wrap:anywhere
}
.detail-section {
    margin-top:25px
}
.detail-section h3 {
    font-size:13px;
    margin:0 0 12px
}
.detail-section table {
    white-space:normal
}
.detail-section td,.detail-section th {
    padding:11px 10px;
    font-size:11px
}
.detail-actions {
    display:flex;
    gap:10px;
    margin-top:16px
}
.detail-note {
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
    margin-top:13px
}
.dialog-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px
}
#confirm {
    width:min(480px,calc(100% - 32px))
}
#confirm h2 {
    font-size:23px;
    margin-bottom:16px
}
#confirm-description {
    line-height:1.7;
    color:var(--muted);
    margin-bottom:23px
}
#confirm label {
    display:block;
    margin-bottom:10px;
    font-weight:600
}
textarea {
    width:100%;
    resize:vertical;
    padding:12px;
    border:1px solid var(--line);
    border-radius:6px
}
#confirm .muted {
    font-size:11px;
    margin-top:10px
}
.login-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:var(--nav)
}
.login-card {
    background:var(--paper);
    max-width:455px;
    width:100%;
    padding:42px;
    border-radius:14px;
    box-shadow:0 20px 90px #0003
}
.login-card .brand-mark {
    margin-bottom:30px
}
.login-card h1 {
    font-size:34px;
    margin-bottom:18px
}
.login-card>.muted {
    margin-bottom:28px
}
.login-card label {
    display:block;
    font-size:12px;
    font-weight:600;
    margin:17px 0 9px
}
.login-card input {
    width:100%;
    border:1px solid #d4dfe2;
    border-radius:6px;
    padding:12px;
    background:white
}
.login-card .primary {
    width:100%;
    margin-top:24px;
    display:flex;
    justify-content:space-between
}
.login-foot {
    border-top:1px solid var(--line);
    padding-top:24px;
    margin-top:35px;
    font-size:10px;
    letter-spacing:1px;
    font-weight:700
}
.login-foot span {
    float:right;
    font-size:8px;
    color:var(--muted);
    font-weight:400
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0)
}
@media(min-width:1500px) {
    .page-content {
    padding-top:48px
}

}
@media(max-width:1100px) {
    .sidebar {
    width:200px;
    padding-inline:16px
}
.workspace {
    margin-left:200px
}
.page-content {
    padding:28px 24px
}
.topbar {
    padding-inline:24px
}
.metrics {
    gap:10px
}
.metrics .metric-card {
    padding:17px
}
td,th {
    padding-inline:16px
}
.brand {
    font-size:11px
}

}
@media(max-width:780px) {
    .sidebar {
    position:static;
    width:100%;
    padding:15px 20px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between
}
.nav-caption,.nav-item,.sidebar-bottom>div,.avatar {
    display:none
}
.sidebar-bottom {
    border:0;
    padding:0;
    margin:0
}
.workspace {
    margin:0
}
.topbar {
    height:55px;
    padding:0 20px
}
.page-content {
    padding:25px 16px
}
.page-heading {
    align-items:flex-start;
    gap:10px
}
h1 {
    font-size:26px
}
.page-heading .secondary span {
    display:none
}
.metrics {
    grid-template-columns:repeat(2,1fr)
}
.filters {
    flex-direction:column;
    align-items:stretch;
    gap:12px
}
.search {
    flex:auto;
    min-width:0;
    width:100%
}
.view-filter select { width: 100%; }
.status-controls,.filters,.filter-summary { padding-inline: 18px; }
.panel-footer {
    gap:15px;
    line-height:1.6
}
.detail-grid {
    grid-template-columns:repeat(2,1fr)
}
.login-card {
    padding:30px
}
.live-label {
    font-size:9px
}
.panel-heading {
    padding-inline:18px
}
.detail-actions {
    flex-wrap:wrap
}

}