:root {
    color-scheme: light dark;
    font-size: 15px;
    --bg-body: #f2f2f2;
    --bg-content: white;
    --text-dark: black;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);
}

nav#topbar {
    background-color: rgb(2, 11, 64);
    padding: 0.75rem 0;
}

nav#topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

/* Larger brand text */
#topbar .brand {
    font-size: 1.8rem;
    font-weight: 600;
    color: white;
}

nav#topbar a,
nav#topbar summary {
    color: white;
}

nav#topbar a:hover,
nav#topbar summary:hover {
    color: #d0d8ff;
}

/* User dropdown */
nav#topbar details.dropdown summary {
    color: var(--text-dark);
    cursor: pointer; /* ensures pointer cursor */
}

nav#topbar details.dropdown ul a {
    color: var(--text-dark);
}

nav#subnav {
    background: var(--bg-content);
    padding: 0.5rem 0;
}

nav#subnav .container {
    display: flex;
    gap: 1.5rem; /* spacing between tabs */
}

nav#subnav a {
    color: rgb(2, 11, 64);
    font-size: 1.2rem;
    text-decoration: none !important;   /* remove underline */
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

nav#subnav a:hover {
    text-decoration: none !important;
    border-bottom-color: rgb(2, 11, 64);
}

nav#subnav a.selected {
    border-bottom: 2px solid rgb(2, 11, 64);
}

div.device-details dt {
    font-weight: bold;
}
div.device-details dd {
    margin-left: 0px;
}

.content-section {
    background: var(--bg-content);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

i.user {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="6" r="4" fill="%23000"/><path d="M3 17c0-3.3 2.7-6 7-6s7 2.7 7 6H3z" fill="%23000"/></svg>');
    vertical-align: middle;
}

i.check {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 10l4 4 6-8" stroke="%23000" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

i.edit {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='2.5' width='13' height='15' rx='1.6'/%3E%3Cline x1='6' y1='7' x2='14' y2='7'/%3E%3Cline x1='6' y1='10' x2='14' y2='10'/%3E%3Cline x1='6' y1='13' x2='11.5' y2='13'/%3E%3C/svg%3E");
}

i.history {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="3" x2="8" y2="13"/><circle cx="8" cy="4" r="0.8" fill="currentColor"/><circle cx="8" cy="8" r="0.8" fill="currentColor"/><circle cx="8" cy="12" r="0.8" fill="currentColor"/><circle cx="12" cy="4" r="2"/><line x1="12" y1="4" x2="12" y2="2.5"/><line x1="12" y1="4" x2="13" y2="4"/></svg>');
    background-size: contain;
}

i.trash {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='1.5' width='6' height='1.5' rx='0.4' fill='black'/%3E%3Crect x='3.5' y='3.8' width='13' height='2' rx='0.6'/%3E%3Crect x='4.5' y='6.2' width='11' height='11' rx='1.2'/%3E%3Cline x1='7.5' y1='8.5' x2='7.5' y2='15.5'/%3E%3Cline x1='10' y1='8.5' x2='10' y2='15.5'/%3E%3Cline x1='12.5' y1='8.5' x2='12.5' y2='15.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

i.password-reset {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.62 120.72"><path d="M11.64,100.12l-.4-.47-1.06,8.63a5.08,5.08,0,0,1-1.92,3.41A5.11,5.11,0,0,1,0,107L2.79,84.65v-.07a3.28,3.28,0,0,1,.08-.41h0A5.09,5.09,0,0,1,9,80.39q11.22,2.53,22.42,5.15a5,5,0,0,1,3.17,2.25,5.14,5.14,0,0,1,.64,3.84v0a5,5,0,0,1-2.25,3.16,5.08,5.08,0,0,1-3.83.65c-3.31-.75-6.62-1.52-9.92-2.28a40.71,40.71,0,0,0,2.84,3,50.09,50.09,0,0,0,26.23,13.49,48.67,48.67,0,0,0,14.71.34A47.35,47.35,0,0,0,77,106h0q2.52-1.19,4.83-2.54c1.56-.93,3.07-1.92,4.51-3a50.8,50.8,0,0,0,8.56-7.88,48.92,48.92,0,0,0,6.39-9.45l.56-1.1,10,2.69-.8,1.66a58.64,58.64,0,0,1-7.9,12.24,61.28,61.28,0,0,1-10.81,10.1c-1.68,1.23-3.46,2.4-5.32,3.5s-3.73,2.07-5.74,3a58,58,0,0,1-17,5,58.56,58.56,0,0,1-17.79-.39,60.21,60.21,0,0,1-31.58-16.26c-1.2-1.16-2.26-2.31-3.24-3.45ZM101,20.6l.4.47,1-8.63a5.11,5.11,0,1,1,10.14,1.26l-2.74,22.37,0,.07c0,.13,0,.27-.07.41h0a5.09,5.09,0,0,1-6.08,3.78c-7.47-1.69-15-3.4-22.42-5.15a5,5,0,0,1-3.16-2.25,5.1,5.1,0,0,1-.65-3.84v0a5,5,0,0,1,2.25-3.16,5.1,5.1,0,0,1,3.84-.65c3.31.75,6.61,1.52,9.92,2.28-.84-1-1.77-2-2.84-3.05a50.09,50.09,0,0,0-12.13-8.73A49.49,49.49,0,0,0,64.37,11a48.6,48.6,0,0,0-14.7-.34,47.26,47.26,0,0,0-14,4.1h0q-2.53,1.18-4.83,2.54c-1.57.93-3.07,1.92-4.52,3a50.34,50.34,0,0,0-8.55,7.88,48,48,0,0,0-6.39,9.45l-.57,1.1L.76,36l.8-1.66A58.9,58.9,0,0,1,9.46,22.1,61.63,61.63,0,0,1,20.27,12q2.54-1.85,5.32-3.5c1.81-1.06,3.73-2.07,5.74-3a58,58,0,0,1,17-5A58.56,58.56,0,0,1,66.16.89a59.77,59.77,0,0,1,17,5.74A60.4,60.4,0,0,1,97.75,17.15c1.19,1.16,2.26,2.31,3.24,3.45Z"/><circle cx="40" cy="60.36" r="4"/><circle cx="56.31" cy="60.36" r="4"/><circle cx="72.62" cy="60.36" r="4"/></svg>');
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-body: #11191f;
        --bg-content: #1a2632;
        --text-dark: white;
    }

    nav#subnav a {
        color: #a3b4ff;
    }
    nav#subnav a:hover {
        border-bottom-color: #a3b4ff;
    }
    nav#subnav a.selected {
        border-bottom-color: #a3b4ff;
    }

    .content-section {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    i.user {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="6" r="4" fill="%23fff"/><path d="M3 17c0-3.3 2.7-6 7-6s7 2.7 7 6H3z" fill="%23fff"/></svg>');
    }

    i.check {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 10l4 4 6-8" stroke="%23fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    }
}