/* =========================================================================
   SmokePing — modern screen theme  (hostmybot.net)
   Full dark theme: dark content + dark graph cards, responsive.
   ========================================================================= */

:root {
    --sidebar-w: 264px;
    --bg:            #0d1220;
    --card:          #151d2e;
    --card-border:   #263149;
    --card-hover:    #35425f;
    --ink:           #e7ecf5;
    --ink-soft:      #aab4c6;
    --ink-faint:     #768398;
    --accent:        #5b8bff;
    --accent-strong: #86a9ff;
    --accent-soft:   rgba(91,139,255,.16);
    --side-bg:       #131a2a;
    --side-bg-2:     #0d1320;
    --side-ink:      #c4ccdb;
    --side-ink-soft: #7d879b;
    --side-hover:    rgba(255,255,255,.06);
    --side-active:   #4f7cff;
    --radius:        14px;
    --radius-sm:     9px;
    --shadow:        0 1px 2px rgba(0,0,0,.30), 0 10px 26px rgba(0,0,0,.38);
    --shadow-hover:  0 6px 14px rgba(0,0,0,.45), 0 22px 46px rgba(0,0,0,.55);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body#body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Sidebar */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--side-bg);
    color: var(--side-ink);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 40;
    border-right: 1px solid rgba(255,255,255,.05);
    transition: transform .25s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 8px; }

.sidebar-header {
    padding: 24px 22px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
/* text wordmark instead of the old bitmap logo */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #f2f5fb;
    text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-accent { color: var(--accent); }
.brand-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}

.sidebar-menu { padding: 16px 12px 24px; }

/* Filter box */
form[name="hswitch"] { margin: 4px 6px 6px; }
#filter_title {
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--side-ink-soft);
    margin-bottom: 6px;
}
#filter_title small { font-size: inherit; }
#filter_text input,
input[name="filter"] {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    color: #eef2fb;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
#filter_text input::placeholder { color: var(--side-ink-soft); }
#filter_text input:focus {
    border-color: var(--accent);
    background: rgba(79,124,255,.10);
    box-shadow: 0 0 0 3px rgba(79,124,255,.20);
}

/* Menu tree (rendered as nested <table class="menu">) */
table.menu {
    width: 100% !important;
    border-collapse: collapse;
    margin-top: 4px;
}
table.menu table.menu { margin-top: 0; }

/* hide the "-" bullet + padding nbsp that SmokePing injects */
td.menuitem, td.menuopen, td.menuactive { color: transparent; }

td.menuitem, td.menuopen, td.menuactive {
    padding: 1px 4px;
    line-height: 1.2;
}

a.menulink, a.menulinkactive {
    display: block;
    padding: 8px 12px;
    margin: 1px 0;
    border-radius: var(--radius-sm);
    color: var(--side-ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .14s, color .14s;
}
a.menulink:hover {
    background: var(--side-hover);
    color: #ffffff;
    text-decoration: none;
}
a.menulinkactive,
td.menuactive a.menulinkactive {
    background: var(--side-active);
    color: #ffffff;
}
a.menulinkactive:hover { background: var(--accent-strong); color:#fff; text-decoration:none; }

/* expanded parent gets a subtle accent bar */
td.menuopen > a.menulink {
    color: #eef2fb;
    font-weight: 600;
}

/* subtle "powered by RRDtool" footer text in the sidebar */
.powered {
    margin-top: 26px;
    padding: 16px 12px 4px;
    border-top: 1px solid rgba(255,255,255,.06);
    text-align: center;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--side-ink-soft);
}
.powered b { color: #9fb0cf; font-weight: 700; }

/* ----------------------------------------------------------------- Navbar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-left: var(--sidebar-w);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 60px;
    padding: 0 26px;
    background: rgba(13,18,32,.82);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--card-border);
}
.navbar-menu #menu-button {
    display: none;               /* only shown on small screens */
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
    font-size: 14px;
}
.navbar-menu #menu-button:hover { background: rgba(79,124,255,.18); text-decoration: none; }

.navbar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
}
.icon-person {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: none;
}
.icon-person::before {   /* head */
    content: ""; position: absolute; left: 50%; top: 7px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff; transform: translateX(-50%);
}
.icon-person::after {    /* shoulders */
    content: ""; position: absolute; left: 50%; bottom: 5px;
    width: 15px; height: 9px; border-radius: 9px 9px 0 0;
    background: #fff; transform: translateX(-50%);
}

/* ------------------------------------------------------------------- Main */
.main {
    margin-left: var(--sidebar-w);
    padding: 30px 34px 10px;
    max-width: 1100px;
}
.main h1 {
    margin: 4px 0 2px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}
.main h2 {
    margin: 0 0 22px;
    font-size: 15px;
    font-weight: 400;
    color: var(--ink-soft);
}
.main h2:empty { margin: 0; }

/* Section labels for overview / details */
.overview, .details { display: block; }
.overview::before {
    content: "Overview";
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 6px 0 12px;
}
.details:not(:empty)::before {
    content: "Detail";
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 26px 0 12px;
}
.overview:empty, .overview:empty::before { display: none; }

/* Each graph sits in its own card */
.overview > div,
.details > div {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    margin: 0 0 16px;
    overflow-x: auto;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s;
}
.overview > div:hover,
.details > div:hover {
    border-color: var(--card-hover);
}
.overview > div img,
.details > div img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.overview > div a,
.details > div a { display: inline-block; }

/* zoom / cropper image on detailed single-graph view */
#zoom { max-width: 100%; height: auto; }

/* generic images inside main (charts pages etc.) */
.main img { border-radius: 6px; }

/* ------------------------------------------------------------------ Rules */
body#body > hr {
    margin-left: var(--sidebar-w);
    border: none;
    border-top: 1px solid var(--card-border);
    margin-top: 28px;
}

/* ----------------------------------------------------------------- Footer */
.footer {
    margin-left: var(--sidebar-w);
    padding: 16px 34px 34px;
    color: var(--ink-faint);
    font-size: 12.5px;
}
.footer p { margin: 3px 0; }
.footer a { color: var(--ink-soft); }
.footer-right { float: right; }
.footer::after { content: ""; display: block; clear: both; }

/* ------------------------------------------------------- Responsive / mobile */
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.35); }
    body.menu-open .sidebar { transform: translateX(0); }
    .navbar, .main, .footer, body#body > hr { margin-left: 0; }
    .navbar-menu #menu-button { display: inline-flex; }
    .main { padding: 22px 18px 10px; }
    .footer, body#body > hr { padding-left: 18px; padding-right: 18px; }
    .footer-right { float: none; display: block; }

    /* dim backdrop when menu open */
    body.menu-open::after {
        content: ""; position: fixed; inset: 0;
        background: rgba(10,15,25,.45);
        z-index: 35;
    }
}

@media (max-width: 480px) {
    .main h1 { font-size: 22px; }
    body#body { font-size: 14px; }
}