:root {
    color-scheme: dark;
}

html,
body {
    background: #09060f !important;
    color: #e9e3f4 !important;
}

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif !important;
}

/* Top navigation */
.navbar,
.navbar-inner,
header,
.topbar {
    background: #120a1e !important;
    border-color: #34204d !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Left navigation */
.sidebar-nav,
.well,
#sidebar,
.menu,
.menubar {
    background: #130c20 !important;
    border-color: #34204d !important;
    color: #e9e3f4 !important;
}

.nav-list a,
.nav a,
.menu a {
    color: #cab5f7 !important;
    border-radius: 7px !important;
}

.nav-list a:hover,
.nav a:hover,
.nav-list > .active > a,
.nav-list > .active > a:hover {
    background: #6d28d9 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Main page */
.container,
.container-fluid,
.content,
#content,
.main,
main {
    background: #09060f !important;
    color: #e9e3f4 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #faf7ff !important;
    font-weight: 600 !important;
}

a {
    color: #a78bfa !important;
}

a:hover {
    color: #d8b4fe !important;
}

/* Graph cards and general boxes */
.well,
.panel,
.box,
.graph,
.graphbox,
table {
    background: #151020 !important;
    color: #e9e3f4 !important;
    border: 1px solid #382653 !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28) !important;
}

th,
td {
    border-color: #382653 !important;
}

/* Keep generated RRDtool graphs readable */
img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* Form fields used by navigator graph */
input,
select,
textarea,
button,
.btn {
    background: #1d1230 !important;
    color: #ffffff !important;
    border: 1px solid #6845a0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

button:hover,
.btn:hover {
    background: #6d28d9 !important;
}

/* Muted labels and footer */
small,
.muted,
footer {
    color: #a99bbd !important;
}

hr {
    border-color: #34204d !important;
}

/* =========================================================
   Readability correction for SmokePing RRDtool graph cards
   ========================================================= */

/* Graph card */
.well,
.panel,
.box,
.graph,
.graphbox {
    background: #ffffff !important;
    color: #17121f !important;
    border: 1px solid #4c2b70 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Purple graph title/header bars */
.panel-heading,
.panel-title,
.graph-title,
.box-title,
.well > h2,
.well > h3,
.panel > h2,
.panel > h3,
.box > h2,
.box > h3,
.graph > h2,
.graph > h3,
.graphbox > h2,
.graphbox > h3 {
    background: #291342 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #65438c !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

/* SmokePing/RRDtool generated graph images */
img[src*="/smokeping/images/"],
img[src*="smokeping/images/"],
.graph img,
.graphbox img,
.panel img,
.box img,
.well img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    padding: 8px !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    border-radius: 0 !important;
}

/* Text inside white graph cards */
.well p,
.well span,
.well div,
.panel p,
.panel span,
.panel div,
.graph p,
.graph span,
.graph div,
.graphbox p,
.graphbox span,
.graphbox div {
    color: #17121f;
}

/* Keep links readable inside cards */
.well a,
.panel a,
.graph a,
.graphbox a {
    color: #5b21b6 !important;
}

/* Better mobile page title */
h1 {
    font-size: clamp(30px, 8vw, 48px) !important;
    line-height: 1.1 !important;
    margin: 22px 14px !important;
}

/* Add some spacing around graph cards */
.content .well,
.content .panel,
.content .graph,
.content .graphbox,
.container-fluid .well,
.container-fluid .panel {
    margin-bottom: 18px !important;
}


/* =========================================================
   Remove default SmokePing and RRDtool branding
   ========================================================= */

#logo,
#smokeping-logo,
#rrdtool,
#rrdtool-logo,
.smokeping-logo,
.rrdtool-logo,
img[alt="SmokePing"],
img[alt="smokeping"],
img[alt="RRDtool"],
img[alt="RRDTool"],
img[src$="/smokeping.png"],
img[src$="/smokeping.gif"],
img[src$="/smokeping-logo.png"],
img[src$="/smokeping-logo.gif"],
img[src$="/rrdtool.png"],
img[src$="/rrdtool.gif"],
img[src$="/rrdtool-logo.png"],
img[src$="/rrdtool-logo.gif"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Remove the empty links or containers left by hidden logos */
a:has(> img[src$="/smokeping.png"]),
a:has(> img[src$="/smokeping.gif"]),
a:has(> img[src$="/rrdtool.png"]),
a:has(> img[src$="/rrdtool.gif"]),
div:has(> a > img[src$="/smokeping.png"]),
div:has(> a > img[src$="/rrdtool.png"]) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Custom footer */
.qailab-footer {
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 18px 0 0 !important;
    padding: 14px 12px !important;
    border-top: 1px solid #4c2b70 !important;
    background: #09060f !important;
    color: #c4b5fd !important;
    text-align: center !important;
    font-size: 13px !important;
    letter-spacing: 0.4px !important;
}

/* Hide SmokePing branding in the left sidebar */
.sidebar-nav img[alt*="smoke" i],
.sidebar-nav img[src*="smoke" i],
#sidebar img[alt*="smoke" i],
#sidebar img[src*="smoke" i],
.menu img[alt*="smoke" i],
.menu img[src*="smoke" i],
.navbar img[alt*="smoke" i],
.navbar img[src*="smoke" i] {
    display: none !important;
}

/* Hide the link/container left behind by the logo */
.sidebar-nav a:has(img[alt*="smoke" i]),
.sidebar-nav a:has(img[src*="smoke" i]),
#sidebar a:has(img[alt*="smoke" i]),
#sidebar a:has(img[src*="smoke" i]) {
    display: none !important;
}

/* =========================================================
   QaiLab Trace Route sidebar link
   ========================================================= */

.qailab-sidebar-tool {
    margin: 14px 10px 10px !important;
    padding-top: 14px !important;
    border-top: 1px solid #4c2b70 !important;
}

.qailab-trace-link {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 13px !important;
    border: 1px solid #65438c !important;
    border-radius: 9px !important;
    background: #291342 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition:
        background 0.15s ease,
        border-color 0.15s ease !important;
}

.qailab-trace-link:hover,
.qailab-trace-link:focus {
    background: #3b1b5c !important;
    border-color: #9f7aea !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.qailab-trace-icon {
    color: #c4b5fd !important;
    font-size: 18px !important;
    line-height: 1 !important;
}