html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===================== CC32 theme (dark navy, matching the holding page) ===================== */
:root {
    --cc-bg: #111827;       /* deep navy */
    --cc-bg2: #1f2937;      /* panel */
    --cc-accent: #38bdf8;   /* sky */
    --cc-text: #f9fafb;
    --cc-muted: #9ca3af;
}

.page { background: #f3f4f6; }

/* Sidebar */
.sidebar {
    background: var(--cc-bg) !important;
    border-right: 1px solid #0b101b;
}
.sidebar .top-row { background: #0b101b !important; }
.navbar-brand { font-weight: 700; letter-spacing: .3px; color: var(--cc-text) !important; }
.cc-accent { color: var(--cc-accent); }
.cc-ver { font-size: .62rem; font-weight: 600; color: #93c5fd; background: rgba(56,189,248,.15);
          border: 1px solid rgba(56,189,248,.35); border-radius: 6px; padding: 1px 5px; vertical-align: middle; }

/* Documentation page */
.docs { max-width: 920px; }
.docs-head { margin-bottom: 1.25rem; }
.docs-index { margin: 0; padding-left: 1.1rem; line-height: 1.9; }
.docs-index ul { list-style: none; padding-left: 1rem; }
.docs-sec { margin-bottom: 2rem; scroll-margin-top: 1rem; }
.docs-sec h3 { color: #111827; border-bottom: 2px solid #e5e7eb; padding-bottom: .35rem; margin-bottom: .75rem; }
.docs-sec h4 { color: #1f2937; margin-top: 1.1rem; font-size: 1.02rem; }
.docs-sec p, .docs-sec li { color: #374151; }
.docs pre { background: #0b101b; color: #e5e7eb; border-radius: 10px; padding: .8rem 1rem;
            font-family: Consolas, monospace; font-size: .82rem; overflow: auto; }
.docs pre code { color: #e5e7eb; }
.docs code { background: #eef2f7; color: #0369a1; padding: 1px 5px; border-radius: 5px; font-size: .86em; }
.docs pre code { background: transparent; color: #e5e7eb; }
.docs pre.docs-fig { background: #0b101b; color: #d1fae5; line-height: 1.25; }
.docs .docs-table th { white-space: nowrap; }
/* Narrow viewports: wide tables (HTTP API, protocol changes) scroll inside themselves instead of
   forcing whole-page horizontal scroll — th nowrap above makes them overflow otherwise. */
@media (max-width: 768px) {
    .docs .docs-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}
.docs .docs-note { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: .6rem .8rem; color: #7c2d12; }

/* "DOWN" clickable in Fleet Review */
.cc-down { color:#dc2626; font-weight:600; text-decoration:underline; cursor:pointer; }
.cc-down:hover { color:#b91c1c; }

.nav-item .nav-link { color: #cbd5e1 !important; border-radius: 8px; margin: 2px 6px; }
.nav-item .nav-link:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.nav-item .nav-link.active { background: var(--cc-accent) !important; color: #07121f !important; font-weight: 600; }

/* Connection pill in sidebar */
.cc-conn { display: flex; align-items: center; gap: .5rem; color: var(--cc-muted); font-size: .85rem; }
.cc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cc-dot.on { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.cc-dot.off { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

/* Sidebar image under the MQTT Traffic link */
.cc-sidebar-img img { width: 100%; border-radius: 8px; display: block; opacity: .95; }

/* Device filter chips */
.cc-filters { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.cc-filters .cc-chk { background:#fff; border:1px solid #e5e7eb; border-radius:7px; padding:.15rem .55rem;
                      font-size:.82rem; cursor:pointer; user-select:none; margin:0; }
.cc-filters .cc-chk input { margin-right:.35rem; vertical-align:middle; }

/* Device map */
.cc-map { height: calc(100vh - 200px); min-height: 320px; border-radius: 12px; border: 1px solid #e5e7eb; }
.cc-pin { display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; margin:0 2px 0 8px; border:1px solid #1f2937; }

/* Top bar */
.top-row.px-4 { background: #fff; border-bottom: 1px solid #e5e7eb; }

/* Headings / page chrome */
.cc-page-title { font-weight: 700; color: #111827; }
.cc-sub { color: #6b7280; }

/* Cards & panels */
.cc-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.cc-card .cc-card-head { padding: .75rem 1rem; border-bottom: 1px solid #eef0f3; font-weight: 600; color: #111827; }
.cc-card .cc-card-body { padding: 1rem; }

/* Status dot/badge cells */
.cc-state { display:inline-block; width:16px; height:16px; border-radius:4px; vertical-align:middle; }
.cc-state.ok   { background:#22c55e; }
.cc-state.bad  { background:#ef4444; }
.cc-state.warn { background:#f59e0b; }
.cc-state.unk  { background:#cbd5e1; }
.cc-state.dcut { background:#9e978a; }   /* disabled cable that is actually cut: mostly grey, faint warm tint */
.cc-state.ble  { background:#3b82f6; }   /* watched-BLE-cards box (owner-only device-list column) */

/* Per-card watched-BLE blocks (owner-only device-list column). One block PER configured card:
   blue = present (RSSI shown as a vertical signal staircase), red = removed (present->absent) &
   not silenced, amber = removed & silenced, grey = otherwise. A small count number trails.
   NOTE: uses a UNIQUE class prefix (.cc-cblk*) — must NOT collide with the site-wide .cc-card panel. */
.cc-cblks  { display:inline-flex; align-items:center; gap:3px; vertical-align:middle; }
.cc-cblk   { display:inline-flex; align-items:flex-end; justify-content:center; gap:1px;
             width:18px; height:16px; border-radius:4px; padding:2px; box-sizing:border-box; }
.cc-cblk.blue  { background:#3b82f6; }
.cc-cblk.amber { background:#f59e0b; }
.cc-cblk.red   { background:#ef4444; }
.cc-cblk.grey  { background:#cbd5e1; }
.cc-cblk.faint { opacity:.55; }                          /* present but RSSI unknown */
.cc-cblk .b    { width:2px; background:#fff; border-radius:1px; opacity:.3; }
.cc-cblk .b.on { opacity:1; }
.cc-cblkcount  { font-size:11px; font-weight:700; color:#64748b; }

/* Tables */
table.cc-table { width:100%; }
table.cc-table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; border-bottom:2px solid #e5e7eb; }
/* Viewport-filling devices dashboard: header + bottom panels pinned, only the table scrolls */
.dev-dash { display:flex; flex-direction:column; height: calc(100vh - 70px); }
.dev-dash .dev-grid { flex:1 1 auto; min-height:160px; display:flex; }
.dev-dash .dev-grid-body { flex:1 1 auto; min-height:0; display:flex; }
.dev-dash .dev-grid-scroll { flex:1 1 auto; min-height:0; overflow:auto; width:100%; }
.dev-dash .dev-bottom { flex:0 0 auto; }
.dev-grid-scroll table.cc-table thead th { position:sticky; top:0; background:#fff; z-index:2; }
table.cc-table tbody td { vertical-align: middle; }
table.cc-table tbody tr:hover { background:#f9fafb; }
/* Stale rows = pale amber. Set on the cells (Bootstrap paints td bg over the tr bg). */
table.cc-table tbody tr.dead td { background:#fef3c7 !important; color:#a16207; }
table.cc-table tbody tr.dead:hover td { background:#fde68a !important; }

/* Small action buttons */
.cc-btn { border:1px solid #d1d5db; background:#fff; border-radius:7px; padding:.15rem .5rem; font-size:.78rem; cursor:pointer; }
.cc-btn:hover { background:#f3f4f6; }
.cc-btn:disabled, .cc-btn[disabled] { opacity:.5; cursor:not-allowed; background:#f3f4f6; color:#9ca3af; border-color:#e5e7eb; }
.cc-btn.act { border-color: var(--cc-accent); color:#0369a1; }
.cc-btn.danger { border-color:#fecaca; color:#b91c1c; }

/* spinner */
.cc-spin { animation: ccspin 1s linear infinite; display:inline-block; }
@keyframes ccspin { to { transform: rotate(360deg); } }

/* KPI tiles */
.cc-kpis { display:flex; gap:.75rem; flex-wrap:wrap; }
.cc-kpi { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.6rem 1rem; min-width:110px; }
.cc-kpi .v { font-size:1.5rem; font-weight:700; color:#111827; }
.cc-kpi .l { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; }
.cc-kpi.alarm .v { color:#ef4444; }
.cc-kpi.armed .v { color:#16a34a; }
.cc-kpi.ok .v { color:#16a34a; }
.cc-kpi.stale .v { color:#f59e0b; }
/* ---- auth (login/register) pages ---- */
/* ===================== CC32 theme (dark navy, matching the holding page) ===================== */
:root {
    --cc-bg: #111827;       /* deep navy */
    --cc-bg2: #1f2937;      /* panel */
    --cc-accent: #38bdf8;   /* sky */
    --cc-text: #f9fafb;
    --cc-muted: #9ca3af;
}
.cc-accent { color: var(--cc-accent); }
.nav-item .nav-link.active { background: var(--cc-accent) !important; color: #07121f !important; font-weight: 600; }
.cc-btn.act { border-color: var(--cc-accent); color:#0369a1; }
/* ---- auth pages (login / register / denied) ---- */
.cc-auth-body { background:#111827; min-height:100vh; display:flex; align-items:center; justify-content:center; margin:0; }
.cc-auth-card { background:#fff; border-radius:12px; padding:2rem; width:100%; max-width:380px; box-shadow:0 10px 40px rgba(0,0,0,.4); }
.cc-auth-card.cc-auth-wide { max-width:460px; }
.cc-auth-title { font-size:1.5rem; font-weight:700; color:#111827; margin:0 0 .25rem; text-align:center; }
.cc-auth-sub { color:#6b7280; text-align:center; margin-bottom:1.25rem; }
.cc-auth-notify { background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:.75rem .9rem; margin-top:.5rem; }