/* =========================================================================
   Cayley Portal — Dark Theme
   Monochrome chrome on near-black, with a single cool-blue accent.
   Matches the brand: bold, geometric, architectural.
   ========================================================================= */

:root {
    /* Surfaces */
    --bg:            #08090b;
    --bg-raised:     #0c0e12;
    --surface:       #11141a;
    --surface-2:     #171b22;
    --surface-3:     #1e232c;
    --overlay:       rgba(10, 12, 16, 0.72);

    /* Borders & dividers */
    --border:        #22272f;
    --border-strong: #2f3642;
    --hairline:      #181c23;

    /* Text */
    --text:          #eef1f6;
    --text-dim:      #9ba3af;
    --text-mute:     #5b6472;
    --text-faint:    #3a414c;

    /* Brand chrome (matches logo shine) */
    --chrome-top:    #f5f7fa;
    --chrome-mid:    #c8cdd6;
    --chrome-bot:    #8b919c;

    /* Accent — electric cool-blue, used sparingly */
    --accent:        #7cc4ff;
    --accent-soft:   #4e9fe0;
    --accent-bg:     rgba(124, 196, 255, 0.10);
    --accent-ring:   rgba(124, 196, 255, 0.35);

    /* Semantic */
    --success:       #4ade80;
    --success-bg:    rgba(74, 222, 128, 0.12);
    --danger:        #f87171;
    --danger-bg:     rgba(248, 113, 113, 0.12);
    --warning:       #fbbf24;
    --warning-bg:    rgba(251, 191, 36, 0.12);

    /* Type */
    --font-sans:     -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
    --font-mono:     ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

    /* Geometry */
    --radius-sm:   4px;
    --radius:      8px;
    --radius-lg:   14px;
    --ring:        0 0 0 2px var(--accent-ring);
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.35);
    --shadow:      0 4px 16px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.5);
    --shadow-lg:   0 20px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.005em;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 50% -200px, rgba(124, 196, 255, 0.04), transparent 60%),
        radial-gradient(800px 400px at 100% 100%, rgba(124, 196, 255, 0.03), transparent 60%),
        var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #a9d7ff; text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

::selection { background: var(--accent-bg); color: #fff; }

h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.01em; margin-top: 0; font-weight: 600; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.15rem; color: var(--text); }
h3 { font-size: 1rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

p { margin: 0 0 0.75rem; }

/* ---------- Top navigation ---------- */

.topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.6rem 1.5rem;
    background: linear-gradient(180deg, rgba(17,20,26,0.94), rgba(12,14,18,0.88));
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.topnav .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.1rem 0.1rem;
}
.topnav .brand:hover { text-decoration: none; }
.topnav .brand-mark {
    height: 22px;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.topnav .brand-word {
    height: 18px;
    width: auto;
    opacity: 0.92;
}
.topnav nav {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    margin-left: 0.5rem;
}
.topnav nav a {
    color: var(--text-dim);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.topnav nav a:hover {
    color: var(--text);
    background: var(--surface-2);
    text-decoration: none;
}
.topnav nav a.active {
    color: var(--text);
    background: var(--surface-3);
}
.topnav .usermenu {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}
.topnav .usermenu .who {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-dim);
}
.topnav .usermenu .avatar {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    background: linear-gradient(180deg, var(--chrome-top), var(--chrome-bot));
    color: #0a0c10;
}
.topnav .inline { display: inline; margin: 0; }
.topnav .linklike {
    background: none;
    border: 1px solid transparent;
    color: var(--text-dim);
    cursor: pointer;
    font: inherit;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-sm);
    transition: border-color .15s, color .15s, background .15s;
}
.topnav .linklike:hover {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface-2);
}

/* ---------- Layout ---------- */

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 4rem;
}

/* ---------- Cards & sections ---------- */

.card {
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.card > h2:first-child,
.card > h3:first-child { margin-top: 0; margin-bottom: 0.75rem; }

.card-muted { background: var(--surface); }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 1rem;
}
.section-head h2 { margin: 0; }
.section-head .count {
    color: var(--text-mute);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Auth / login ---------- */

.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1000px 500px at 50% 30%, rgba(124, 196, 255, 0.06), transparent 65%),
        radial-gradient(600px 400px at 50% 70%, rgba(255, 255, 255, 0.025), transparent 70%),
        var(--bg);
    position: relative;
    overflow: hidden;
}
.auth-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/static/img/hero-a.png");
    background-repeat: no-repeat;
    background-position: center 38%;
    background-size: min(520px, 70vw);
    opacity: 0.07;
    filter: invert(1) contrast(1.1) brightness(1.1);
    pointer-events: none;
    z-index: 0;
}
.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    padding: 2.25rem 2rem 1.75rem;
    background: linear-gradient(180deg, rgba(20,24,30,0.92), rgba(14,17,22,0.92));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.auth-hero {
    text-align: center;
    margin-bottom: 1.4rem;
}
.auth-hero img.icon {
    height: 56px;
    width: auto;
    filter: drop-shadow(0 6px 20px rgba(124, 196, 255, 0.18));
    margin-bottom: 0.9rem;
}
.auth-hero img.wordmark {
    height: 20px;
    width: auto;
    opacity: 0.88;
}
.auth-hero .tagline {
    color: var(--text-mute);
    font-size: 0.82rem;
    margin-top: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Forms */
form label {
    display: block;
    margin-bottom: 0.9rem;
    color: var(--text-dim);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form textarea,
form select {
    display: block;
    width: 100%;
    padding: 0.65rem 0.85rem;
    margin-top: 0.3rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    letter-spacing: normal;
    text-transform: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
form input:hover,
form textarea:hover,
form select:hover { border-color: var(--border-strong); }
form input:focus,
form textarea:focus,
form select:focus {
    outline: none;
    border-color: var(--accent-soft);
    box-shadow: var(--ring);
    background: var(--surface);
}
form .error {
    color: var(--danger);
    background: var(--danger-bg);
    border: 1px solid rgba(248, 113, 113, 0.25);
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    margin-bottom: 0.9rem;
}

/* Buttons */
button, .btn {
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
}
button:hover, .btn:hover {
    background: var(--surface-3);
    border-color: #3d4450;
}
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: var(--ring); }

button.primary, .btn.primary {
    width: 100%;
    margin-top: 0.25rem;
    background: linear-gradient(180deg, #eef1f6 0%, #c8cdd6 50%, #a2a8b3 100%);
    color: #0a0c10;
    border: 1px solid #a2a8b3;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 2px 10px rgba(0,0,0,0.5);
}
button.primary:hover, .btn.primary:hover {
    background: linear-gradient(180deg, #ffffff 0%, #d8dde6 50%, #b0b6c2 100%);
    border-color: #b0b6c2;
}

button.ghost, .btn.ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-dim);
}
button.ghost:hover, .btn.ghost:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface);
}

/* ---------- Tables ---------- */

table.grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.92rem;
}
table.grid th,
table.grid td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
    vertical-align: middle;
}
table.grid.compact th,
table.grid.compact td { padding: 0.55rem 0.8rem; font-size: 0.88rem; }
table.grid thead th {
    background: var(--surface-2);
    color: var(--text-mute);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--border);
}
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover { background: rgba(255,255,255,0.02); }
table.grid a { color: var(--text); font-weight: 500; }
table.grid a:hover { color: var(--accent); }

/* ---------- Pills ---------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--surface-3);
    color: var(--text-mute);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.pill::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
}
.pill-online   { background: var(--success-bg); color: var(--success);  border-color: rgba(74,222,128,0.25); }
.pill-online::before { box-shadow: 0 0 8px var(--success); }
.pill-offline  { background: var(--danger-bg);  color: var(--danger);   border-color: rgba(248,113,113,0.25); }
.pill-unknown  { background: var(--surface-3);  color: var(--text-mute); }

/* ---------- Device header (detail page) ---------- */

.device-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.35rem 1.5rem;
    background:
        linear-gradient(180deg, var(--surface), var(--surface-2)),
        radial-gradient(400px 200px at 100% 0, rgba(124,196,255,0.05), transparent 60%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}
.device-header::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px; height: 300px;
    background-image: url("/static/img/icon-a.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.04;
    filter: invert(1);
    pointer-events: none;
}
.device-header h1 {
    margin: 0;
    font-size: 1.55rem;
    letter-spacing: -0.01em;
}
.device-header .meta {
    color: var(--text-dim);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.device-header .meta .sep { color: var(--text-faint); }

/* ---------- Misc utilities ---------- */

.mono  { font-family: var(--font-mono); font-size: 0.88em; color: var(--text-dim); }
.muted { color: var(--text-mute); }
.dim   { color: var(--text-dim); }
.tiny  { font-size: 0.78em; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li {
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 0.9rem;
}
.messages li.error   { background: var(--danger-bg);  color: var(--danger);  border-color: rgba(248,113,113,0.25); }
.messages li.success { background: var(--success-bg); color: var(--success); border-color: rgba(74,222,128,0.25); }
.messages li.warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(251,191,36,0.25); }

/* Empty state */
.empty {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--text-mute);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}
.empty .icon-a {
    opacity: 0.15;
    height: 48px;
    margin-bottom: 0.5rem;
    filter: invert(1);
}

/* Map canvas sits nicely in the card */
#map {
    height: 72vh;
    min-height: 480px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #0a0c10;
    border: 1px solid var(--border);
}

/* Chart.js canvas background */
#bwChart {
    background: transparent;
    max-width: 100%;
}

/* Responsive */
@media (max-width: 720px) {
    .topnav { padding: 0.5rem 1rem; gap: 1rem; }
    .topnav .brand-word { display: none; }
    .topnav nav { gap: 0; overflow-x: auto; }
    .topnav nav a { padding: 0.35rem 0.65rem; font-size: 0.85rem; }
    .topnav .usermenu .who { display: none; }
    .container { padding: 1.25rem 1rem 3rem; }
    table.grid th:nth-child(3),
    table.grid td:nth-child(3),
    table.grid th:nth-child(4),
    table.grid td:nth-child(4) { display: none; }
}