/*
 Urheberrechtshinweis
 ====================

 Copyright (c) 2013– DROPPY.ch
 
 Alle Rechte vorbehalten.
 
 Der vorliegende Code ist urheberrechtlich geschuetzt.
 Jede unbefugte Nutzung, Vervielfaeltigung oder Verbreitung dieses Codes ist ausdruecklich untersagt und kann rechtliche Konsequenzen haben.
 
 Jede Person, die diesen Code herunterlaedt, kopiert oder verwendet, ohne dazu berechtigt zu sein, begeht eine Urheberrechtsverletzung und verstoesst gegen das geltende Recht.
 
 Wir behalten uns das Recht vor, Verstoesse gegen das Urheberrecht straf- und zivilrechtlich zu verfolgen und Schadensersatzansprueche geltend zu machen.
 
 Bei Fragen oder Genehmigungsanfragen benutzen Sie unser Kontaktformular [https://www.cloud.droppy.ch/contact.html]. 
*/

/* --- 1. GRUNDSTILE (HTML, BODY) --- */
html,body{
    border:none; padding:0; margin:0;
    color:#212529;
}
body{
    text-align:center;
    font-family: 'Arial', sans-serif; 
}

/* --- 2. BRANDING / FARBEN --- */
.text-primary, .custom-card-primary .text-primary { color: #6060AA !important; }
.btn-primary { 
    --bs-btn-bg: #6060AA; 
    --bs-btn-border-color: #6060AA;
    --bs-btn-hover-bg: #4c4c89;
    --bs-btn-hover-border-color: #4c4c89;
    --bs-btn-active-bg: #383868;
    --bs-btn-active-border-color: #383868;
}
.text-success, .custom-card-secondary .text-success { color: #309030 !important; }

/* Spezielle Karten-Border */
.custom-card-primary {
    border-left: 5px solid #6060AA !important; 
}
.custom-card-secondary {
    border-left: 5px solid #309030 !important; 
}


/* --- 3. TEST-BEREICH (Gauge Meter) --- */
div.test_area{
    height:12.5em;
    position:relative;
    box-sizing:border-box;
}
div.test_name{
    position:absolute;
    top:0.1em; left:0;
    width:100%;
    font-size:1.4em;
    z-index:9;
}
div.meter_text{
    position:absolute;
    bottom:1.55em; left:0;
    width:100%;
    font-size:2.5em;
    z-index:9;
    font-weight: bold;
    color: #444444; 
}
div.meter_text:empty:before {
    content:"0.00";
}
div.unit {
    position:absolute;
    bottom:2em; left:0;
    width:100%;
    z-index:9;
}
div.test_area canvas {
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    z-index:1;
}


/* --- 4. ADVANCED SEKTION (Tabellen und Protokolle) --- */
.log-scroll-area {
    overflow-y: visible; 
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    padding: 5px; 
}

/* Protokoll-Tabellen (Rechts) */
.right_tables thead th {
    background-color: #6060AA !important; 
    color: #FFFFFF;
    font-weight: bold;
    position: sticky; 
    top: 0;
    z-index: 10;
}

/* Statistik/Einstellungs-Tabellen (Links) */
.left_tables th {
    color: #555;
    text-align: right;
    width: 53%;
    /* Verringert den vertikalen Abstand in den Header-Zellen */
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.left_tables td {
    color: #6060AA; 
    font-weight: bold;
    /* Verringert den vertikalen Abstand in den Daten-Zellen */
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Spezielle Korrektur für die Trennzeilen in der Statistik */
#stats_table tr[style*="line-height: 5px"] td {
    padding: 0 !important;
    line-height: 5px !important;
}

/* Streifen für alle Tabellen mit Klasse .left_tables und .table-striped */
.left_tables.table-striped > tr:nth-of-type(odd) > *,
.left_tables.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #f0f0f0 !important;
}
.left_tables.table-striped > tr:nth-of-type(even) > *,
.left_tables.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #ffffff !important;
}


/* --- 5. FOOTER --- */
#footer a {
    text-decoration: none;
}
#footer a:hover {
    text-decoration: underline;
}

/* Link-Stil für 'show_advanced' */
.footer-link-toggle {
    font-weight: bold;
    color: #6060AA; 
    cursor: pointer;
    text-decoration: underline; 
    transition: color 0.2s;
}
.footer-link-toggle:hover {
    color: #4c4c89; 
}

/* --- ZUSÄTZLICHE ANPASSUNGEN FÜR IPV6-ANZEIGE (Advanced Area) --- */

/* Der gesamte Container der linken Tabellen (ipArea und test_group) */
#ipArea, .test_group {
    /* Setzt die minimale Flex-Basis auf 20em (ca. 320px) im Flex-Layout, 
       um dem IP-Feld mehr Platz zu geben, wenn es auf Mobilgeräten umbricht */
    flex: 1 1 20em; 
    min-width: 20em; 
}

/* Der Log-Container (Download/Upload Protokolle) wird im Verhältnis etwas verkleinert, 
   um dem IP-Block mehr Breite zu ermöglichen, wenn die Elemente nebeneinander stehen */
.log_container {
    flex: 1 1 30em;
    min-width: 30em; 
}

/* Für die Zelle (<td>) der linken Tabellen: Ermöglicht das Umbrechen sehr langer Strings (wie IPv6) */
.left_tables td {
    /* Erlaubt dem Browser, lange Wörter an beliebiger Stelle zu trennen */
    word-break: break-all;
    /* Reduziert die Schriftgröße leicht, falls der Text sehr lang ist */
    font-size: 0.9em; 
}

/* Stellt sicher, dass das IP-Feld die gesamte verfügbare Breite im Block nutzt */
#ipArea #ip {
    display: block; 
}