/*
 * dataforest-Theme für SmokePing 2.7.x – 2.9.x
 * Wird NACH css/smokeping-screen.css geladen. Das Grundlayout (Sidebar,
 * Navbar, Inhalt) wird hier komplett selbst gesetzt, weil sich das
 * Original-CSS zwischen den SmokePing-Versionen stark unterscheidet.
 *
 * Farben: alle hier oben in :root. Das Grün #02C382 stammt aus dem Logo.
 */

:root {
    --df-navy:        #0e2235;   /* Sidebar, Überschriften */
    --df-navy-2:      #16314a;   /* Hover/aktiv in der Sidebar */
    --df-navy-line:   #23425f;   /* Linien in der Sidebar */
    --df-green:       #02c382;   /* dataforest-Grün (aus dem Logo): Flächen, Marker */
    --df-green-text:  #00805a;   /* dunkleres Grün für Text/Links auf hellem Grund */
    --df-green-soft:  #02c382;   /* Akzent auf dunklem Grund */
    --df-bg:          #f2f5f4;   /* Seitenhintergrund */
    --df-surface:     #ffffff;   /* Karten, Navbar */
    --df-surface-2:   #f7faf9;   /* Kartenkopf */
    --df-line:        #dfe6e3;
    --df-text:        #13202c;
    --df-muted:       #5b6b78;
    --df-side-text:   #b9c7d3;
    --df-font: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --df-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* Variablen aus smokeping-screen.css mit umbiegen */
    --sidebar-bg:   var(--df-navy);
    --navbar-bg:    var(--df-surface);
    --body-bg:      var(--df-bg);
    --text-primary: var(--df-text);
    --text-muted:   var(--df-muted);
}

@media (prefers-color-scheme: dark) {
    :root {
        --df-navy:       #0a1826;
        --df-navy-2:     #132a40;
        --df-navy-line:  #1f3a54;
        --df-green-text: #2fd89a;
        --df-bg:         #0f1d2a;
        --df-surface:    #152738;
        --df-surface-2:  #1a2f43;
        --df-line:       #263f56;
        --df-text:       #e4ecf1;
        --df-muted:      #93a6b5;
    }
}

/* ---------- Grundlagen ---------- */

body {
    font-family: var(--df-font);
    background: var(--df-bg);
    color: var(--df-text);
}

h1 { color: var(--df-text); font-weight: 700; letter-spacing: -0.01em; }
h2 { color: var(--df-muted); }
a  { color: var(--df-green-text); }


/* ---------- Grundlayout (versionsunabhängig) ---------- */

:root { --df-side-w: 250px; --df-bar-h: 54px; }

body { display: block; width: auto; margin: 0; }

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--df-side-w);
    height: auto;
    display: flex;
    flex-direction: column;
    z-index: 200;
    transition: left 0.3s ease;
}
.sidebar-header {
    position: static;
    height: var(--df-bar-h);
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.sidebar-header .logo { padding: 0; margin: 0; display: flex; }
.sidebar-menu {
    position: static;
    top: auto; bottom: auto;
    width: auto;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 0 12px;
}
.sidebar-menu > br { display: none; }
.sidebar .filter-text, .sidebar .hierarchy-popup { margin: 0 12px 12px; }
.sidebar .filter-text input { padding: 7px 10px; border-radius: 6px; font: 13px var(--df-font); }
.sidebar ul.menu { padding: 0 8px 10px; }
.sidebar ul.menu li { margin: 1px 0; border: 0; border-radius: 6px; }
.sidebar ul.menu li a { line-height: 2.2em; padding: 0 10px; font-size: 13px; border-radius: 6px; }
.sidebar ul.menu li ul { padding: 2px 0 4px 10px; }
.sidebar-menu .logo { padding: 12px 18px; }

.navbar {
    position: fixed;
    top: 0; right: 0;
    left: var(--df-side-w);
    height: var(--df-bar-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    text-shadow: none;
    z-index: 100;
    transition: left 0.3s ease;
}
.navbar .navbar-menu,
.navbar .navbar-refresh,
.navbar .navbar-user,
.navbar .navbar-site {
    position: static;
    display: flex;
    align-items: center;
    height: 100%;
    line-height: normal;
    flex-shrink: 0;
}
.navbar .navbar-menu { padding: 0 2px; border-right: 1px solid var(--df-line); }
.navbar .navbar-refresh { padding: 0 16px; font-size: 13px; border-left: 1px solid var(--df-line); border-right: 0; }
.navbar .navbar-user { margin-left: 0; padding: 0 16px; gap: 8px; font-size: 13px; border-left: 1px solid var(--df-line); }
.df-brandline { flex: 1; min-width: 0; }
a#menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    margin: 3px;
    border-radius: 6px;
    opacity: 1;
    text-indent: 0;
    background-image: none;
}
.navbar .navbar-user .icon-person {
    display: flex;
    width: auto; height: auto;
    padding: 0;
    opacity: 0.7;
    background-image: none;
}

.main {
    display: block;
    margin: 0;
    padding: calc(var(--df-bar-h) + 22px) 20px 24px calc(var(--df-side-w) + 20px);
    box-sizing: border-box;
    transition: padding-left 0.3s ease;
}
.main > h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; }
.main > h2 { margin: 0 0 20px; font-size: 15px; line-height: 1.4; }
.main .panel, .main .panel-no-border { margin: 6px; vertical-align: top; }
.main .panel-heading h2 { line-height: 36px; font-size: 13px; font-weight: 600; padding: 0 12px; }
.main .panel-body { padding: 8px; }

.footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 12px 20px 12px calc(var(--df-side-w) + 20px);
    transition: padding-left 0.3s ease;
}
.footer p { margin: 0; }
.footer p.footer-right { float: none; order: 2; }

/* Sidebar per Menü-Knopf ein-/ausblenden */
body.sidebar-hidden .sidebar { left: calc(0px - var(--df-side-w)) !important; }
body.sidebar-hidden .navbar { left: 0 !important; }
body.sidebar-hidden .main,
body.sidebar-hidden .footer { padding-left: 20px !important; }

@media (max-width: 900px) {
    .sidebar { left: calc(0px - var(--df-side-w)); }
    .navbar { left: 0; }
    .main, .footer { padding-left: 20px; }
    body.sidebar-visible .sidebar { left: 0 !important; }
    body.sidebar-visible .navbar { left: var(--df-side-w) !important; }
}

/* ---------- Sidebar ---------- */

.sidebar {
    background: var(--df-navy);
    color: var(--df-side-text);
    border-right: 0;
}
.sidebar-header {
    border-bottom: 1px solid var(--df-navy-line);
}
.sidebar-header .logo a { display: flex; align-items: center; text-decoration: none; }
.sidebar-header .logo img { height: 30px; width: auto; max-width: 180px; }

/* Text-Fallback, falls img/dataforest-logo.svg fehlt */
.df-wordmark {
    display: none;
    align-items: baseline;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #ffffff;
}
.df-wordmark b { font-weight: 700; color: var(--df-green-soft); }

.df-section {
    margin: 4px 18px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6f8597;
}

.sidebar .filter-text input,
.sidebar .hierarchy-popup select {
    background-color: var(--df-navy-2);
    border: 1px solid var(--df-navy-line);
    color: var(--df-side-text);
}
.sidebar .filter-text input:focus {
    background-color: var(--df-navy-2);
    border-color: var(--df-green-soft);
    outline: none;
}

.sidebar ul.menu li:hover { background: var(--df-navy-2); }
.sidebar ul.menu li.menuopen,
.sidebar ul.menu li.menuactive {
    background: var(--df-navy-2);
    box-shadow: inset 3px 0 0 var(--df-green-soft);
}
.sidebar ul.menu li ul { background: transparent; }
.sidebar ul.menu li a { color: var(--df-side-text); }
.sidebar ul.menu li a:hover { color: #ffffff; }
.sidebar ul.menu li a.menulinkactive { color: #ffffff; font-weight: 600; }

/* RRDtool-/SmokePing-Logos unten in der Sidebar dezent halten */
.sidebar-menu img { opacity: 0.25; filter: grayscale(1) invert(1); }

.df-sidebar-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--df-navy-line);
    font-size: 12px;
    color: #6f8597;
    flex-shrink: 0;
}
.df-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--df-green-soft);
    box-shadow: 0 0 0 3px rgba(2, 195, 130, 0.2);
}

/* ---------- Navbar ---------- */

.navbar {
    background: var(--df-surface);
    border-bottom: 1px solid var(--df-line);
    box-shadow: none;
}
.navbar .navbar-menu,
.navbar .navbar-refresh,
.navbar .navbar-user { border-color: var(--df-line); }
.navbar a { color: var(--df-muted); }
.navbar a:hover { color: var(--df-text); }
a#menu-button { color: var(--df-muted); filter: none; }
a#menu-button:hover { background: var(--df-bg); color: var(--df-text); }
.navbar .navbar-user .icon-person { color: var(--df-muted); filter: none; }
a#refresh-button { color: var(--df-muted); }

.df-brandline {
    padding: 0 18px;
    font-weight: 600;
    font-size: 14px;
    color: var(--df-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.df-brandline span {
    margin-left: 8px;
    font-weight: 400;
    color: var(--df-muted);
}

/* ---------- Inhalt ---------- */

.main .panel {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(14, 34, 53, 0.06);
}
.main .panel:hover { box-shadow: 0 4px 12px rgba(14, 34, 53, 0.10); }
.main .panel-heading {
    background: var(--df-surface-2);
    border-bottom: 1px solid var(--df-line);
    border-radius: 6px 6px 0 0;
}
.main .panel-heading h2,
.main .panel-heading-no-border h2 { color: var(--df-text); }
.main .panel-heading h2 a { color: var(--df-text); text-decoration: none; }
.main .panel-heading h2 a:hover { color: var(--df-green-text); }

/* RRD-Grafiken sind immer weiß; im Dark Mode bekommen sie einen Rahmen */
.main .panel-body img { border-radius: 3px; }

/* Zeitbereichs-Formular unter dem Zoom-Graphen */
.main input[type="text"],
.main input[type="submit"],
.main select {
    font-family: var(--df-font);
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--df-line);
    border-radius: 4px;
    background: var(--df-surface);
    color: var(--df-text);
}
.main input[type="submit"] {
    background: var(--df-green);
    border-color: var(--df-green);
    color: #062a1c;
    font-weight: 600;
    cursor: pointer;
}
.main input[type="submit"]:hover { filter: brightness(1.08); }

/* Zoom-Auswahl (Cropper) */
.imgCrop_selArea { border-color: var(--df-green) !important; }

/* ---------- Footer ---------- */

.footer {
    background: var(--df-surface);
    border-top: 1px solid var(--df-line);
}
.footer p, .footer { color: var(--df-muted); font-size: 12px; }
.footer a { color: var(--df-green-text); }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 600px) {
    .df-brandline span { display: none; }
}

/* ---------- Standort-Wechsler (js/standorte.js + js/dataforest.js) ---------- */

.navbar .navbar-site {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    border-right: 1px solid var(--df-line);
    flex-shrink: 0;
}
.df-site { position: relative; }
.df-site-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--df-line);
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    color: var(--df-text);
    user-select: none;
}
.df-site-btn::-webkit-details-marker { display: none; }
.df-site-btn::after {
    content: "";
    width: 6px; height: 6px;
    border-right: 2px solid var(--df-muted);
    border-bottom: 2px solid var(--df-muted);
    transform: translateY(-2px) rotate(45deg);
    margin-left: 2px;
}
.df-site[open] .df-site-btn::after { transform: translateY(1px) rotate(-135deg); }
.df-site-btn:hover, .df-site[open] .df-site-btn { border-color: var(--df-green); }
.df-site-btn:focus-visible { outline: 2px solid var(--df-green); outline-offset: 2px; }
.df-site-label { color: var(--df-muted); }
.df-site-btn strong { font-weight: 700; letter-spacing: 0.02em; }

.df-site-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 300;
    min-width: 260px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(14, 34, 53, 0.16);
}
.df-site-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--df-text);
}
.df-site-menu a:hover { background: var(--df-bg); color: var(--df-text); }
.df-site-kurz {
    min-width: 40px;
    padding: 3px 0;
    text-align: center;
    border-radius: 4px;
    font: 600 11px var(--df-mono);
    background: var(--df-bg);
    color: var(--df-muted);
}
.df-site-txt { display: flex; flex-direction: column; line-height: 1.3; }
.df-site-name { font-weight: 600; font-size: 13px; }
.df-site-ort { font-size: 12px; color: var(--df-muted); }
.df-site-active .df-site-kurz { background: var(--df-green); color: #062a1c; }
.df-site-active a { box-shadow: inset 3px 0 0 var(--df-green); }

@media (max-width: 600px) {
    .df-site-label { display: none; }
    .df-brandline { display: none; }
}