/* 
   ================================================================
   DRACONIGEN THEME FÜR HOSTRIVO (SIGNAL BASIS)
   ================================================================
   Farbschema-Mapping auf Signal-Variablen
   ================================================================
*/

:root {
    /* Haupt-Akzentfarbe (Draconigen Blau) */
    --accent: #00aaff;            
    --accent-hover: #0088cc;      /* Etwas dunkler für Hover */
    --on-accent: #ffffff;         /* Text auf Buttons/Links */
    
    /* Hintergründe */
    --bg: #0d1b2a;                /* Haupt-Hintergrund (tiefes Dunkelblau) */
    --surface: #1b263b;           /* Karten/Boxen (etwas heller) */
    --raised: #1a2635;            /* Menüs, Inputs (Kontrast für Tiefe) */
    
    /* Rahmen & Text */
    --border: #415a77;            /* dezentes Grau-Blau */
    --text: #e0e1dd;              /* Hellgrau für Lesbarkeit */
    --muted: #415a77;             /* Sekundärer Text */
    
    /* Formen & Schrift */
    --radius: 0px;                /* WICHTIG: Ecken scharf lassen für Clip-Path */
    --font: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Dark Mode explizit überschreiben (falls Nutzer umschaltet, soll es gleich bleiben) */
:root[data-theme="dark"] {
    --accent: #00aaff;
    --accent-hover: #0088cc;
    --on-accent: #ffffff;
    --bg: #0d1b2a;
    --surface: #1b263b;
    --raised: #1a2635;
    --border: #415a77;
    --text: #e0e1dd;
    --muted: #415a77;
    --radius: 0px;
}

/* ================================================================
   ERWEITERTE STYLES (Über die Variablen hinaus)
   ================================================================
*/

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

/* --- Buttons: Der Draconigen Clip-Path Look --- */
button, 
input[type="submit"], 
input[type="button"], 
.a-button, 
.btn, 
[role="button"] {
    background-color: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important; /* Variablen-Reset sicherstellen */
    
    /* Die charakteristische abgeschrägte Ecke */
    clip-path: polygon(15% 0%, 100% 0%, 100% 70%, 85% 100%, 0% 100%, 0% 30%) !important;
    padding: 8px 20px !important;
}

/* Button Hover: Füllt sich mit Blau */
button:hover, 
input[type="submit"]:hover, 
.a-button:hover, 
.btn:hover {
    background-color: var(--accent) !important;
    color: var(--on-accent) !important;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.6) !important;
}

/* --- Karten & Container (Surface) --- */
.card, 
.panel, 
.surface, 
div[class*="card"], 
div[class*="panel"] {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    /* Optional: Leichter Clip-Path für Karten */
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}

/* --- Überschriften --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--accent) !important;
    font-family: var(--font-heading);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 10px;
    margin-top: 1.5em;
}

/* --- Links --- */
a {
    color: #4cc9f0 !important; /* Etwas helleres Cyan für Links im Text */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent) !important;
    text-decoration: underline;
}

/* --- Inputs & Formulare --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important; /* Leichte Rundung nur hier für Komfort */
    padding: 8px 12px !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent) !important;
    outline: none;
    box-shadow: 0 0 8px rgba(0, 170, 255, 0.5) !important;
}

/* --- Scrollbars (Webkit) --- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: var(--surface);
    border: 1px solid var(--border);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* --- Tabellen (falls vorhanden) --- */
table {
    background-color: var(--raised) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
th {
    background-color: var(--bg) !important;
    color: var(--accent) !important;
    border-bottom: 2px solid var(--accent) !important;
}
td {
    border: 1px solid var(--border) !important;
}
tr:nth-child(even) {
    background-color: var(--surface) !important;
}