/* --- DeployForge CLIENT THEME (Optimized & Clean) --- */

/* ==============================================
   1. GLOBAL & HINTERGRUND
   ============================================== */
html, body {
    /* Verlauf: Magenta -> Lila -> Dunkelblau -> Teal */
    background: linear-gradient(to right, #80075b, #3e266b, #3d4b76, #005c64) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    min-height: 100vh !important;
    margin: 0 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Haupt-Container (Weißer Kasten) */
/* Haupt-Container (Weißer Kasten) */
#container {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    
    /* HIER IST DIE ÄNDERUNG: */
    margin-top: 20px !important;       /* 20px Abstand nach oben */
    margin-bottom: 20px !important;    /* Etwas Abstand nach unten */
    margin-left: auto !important;      /* Zentriert den Kasten horizontal */
    margin-right: auto !important;
    
    /* Ecken rundherum abrunden (sieht beim Schweben besser aus) */
    border-radius: 8px !important;     
}
/* Fußzeile */
#footer {
    color: rgba(255,255,255,0.8) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#footer a {
    color: #ffffff !important;
}

/* ==============================================
   2. TYPOGRAPHIE & LINKS
   ============================================== */
h1, h2, h3 {
    color: #3d4b76 !important; /* Navy */
}

a {
    color: #005c64; /* Teal Links im Text */
}

/* ==============================================
   3. HEADER (Magenta)
   ============================================== */
#header {
    background-color: #80075b !important;
    background-image: none !important;
    border-bottom: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    margin: 0 !important;
    padding-bottom: 0 !important;
    
    /* WICHTIG: Die oberen Ecken müssen exakt zum Container passen */
    border-radius: 8px 8px 0 0 !important; 
}

#header a, 
#header .login-info {
    color: #ffffff !important;
}

/* ==============================================
   4. NAVIGATION (Runde Buttons, Schwebend, Keine Linie)
   ============================================== */

/* Container für die Tabs */
html body div#container ul#nav,
html body div#container ul#nav.flush-left {
    border-bottom: none !important;    /* Linie entfernen */
    min-height: 60px !important;
    padding: 10px 5px !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* Style für ALLE Navigations-Buttons */
html body div#container ul#nav li a,
html body div#container ul#nav.flush-left li a {
    /* Form & Farbe */
    border-radius: 6px !important;     /* Rundherum abgerundet */
    background-color: #3e266b !important; /* Lila */
    color: #ffffff !important;
    border: none !important;
    opacity: 1 !important;

    /* Größe & Position */
    height: auto !important;
    line-height: 1.5 !important;
    padding: 10px 20px !important;
    display: inline-block !important;
    margin-right: 8px !important;
    margin-bottom: 5px !important;

    /* Schatten statt Linie */
    box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;
}

/* Hover-Effekt (Magenta & Schweben) */
html body div#container ul#nav li a:hover,
html body div#container ul#nav.flush-left li a:hover {
    background-color: #80075b !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}

/* Aktiver Tab */
html body div#container ul#nav li.active a,
html body div#container ul#nav li a.active,
html body div#container ul#nav.flush-left li.active a {
    background-color: #80075b !important;
    font-weight: bold !important;
    color: #ffffff !important;
}

/* Icons korrigieren (Platz links schaffen) */
html body div#container ul#nav li a.home,
html body div#container ul#nav li a.new,
html body div#container ul#nav li a.status,
html body div#container ul#nav li a.tickets {
    padding-left: 40px !important;
    background-position: 10px center !important;
}

/* ==============================================
   5. SUB-NAVIGATION (Falls vorhanden)
   ============================================== */
html body #sub_nav,
html body ul#sub_nav,
html body div#sub_nav {
    background-color: #ffffff !important;
    border-bottom: 1px solid #ccc !important;
}

html body #sub_nav li a,
html body ul#sub_nav li a,
html body div#sub_nav a {
    color: #3d4b76 !important; /* Dunkelblau */
    text-shadow: none !important;
    font-weight: 600 !important;
    background-color: transparent !important;
}

html body #sub_nav li a:hover,
html body ul#sub_nav li a:hover {
    color: #80075b !important; /* Magenta Hover */
    background-color: #f1f5f9 !important;
    text-decoration: none !important;
}

/* ==============================================
   6. BUTTONS & FORMULARE
   ============================================== */

/* Standard Buttons (Teal) */
.button, input[type="submit"], input[type="button"], a.button {
    background-image: none !important;
    background-color: #005c64 !important; /* Teal */
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    text-shadow: none !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
}

.button:hover, input[type="submit"]:hover {
    background-color: #00454b !important;
}

/* Zurücksetzen Button (Reset) - Style angepasst */
input[type="reset"], input.reset, button[type="reset"] {
    background-color: #005c64 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 13px;
    height: auto !important;
}

input[type="reset"]:hover, button[type="reset"]:hover {
    background-color: #00454b !important;
}

/* Suchfeld (Wissensdatenbank) */
.search-form {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px;
    padding: 15px !important;
}

/* --- FIX: FORMULAR-BUTTONS (Volle Breite & Verteilt) --- */

/* 1. Der Container der Buttons */
form#ticketForm p:last-child,
div.buttons {
    display: flex !important;
    width: 100% !important;        /* Nimm die ganze Breite der Seite */
    gap: 15px !important;          /* Abstand zwischen den Buttons */
    margin-top: 30px !important;
    padding: 0 10px !important;    /* Etwas Abstand zum Rand */
    box-sizing: border-box !important;
}

/* 2. Die Buttons selbst (Sollen den Platz füllen) */
form#ticketForm input[type="submit"],
form#ticketForm input[type="reset"],
form#ticketForm input[type="button"], 
form#ticketForm button,
form#ticketForm a.button {
    /* WICHTIG: flex: 1 sorgt für die Aufteilung */
    flex: 1 !important;            /* Jeder Button kriegt gleich viel Platz */
    width: 100% !important;        /* Versuche die Breite zu füllen */
    
    /* STYLE */
    background-color: #005c64 !important; /* Teal */
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 10px !important; /* Etwas höher für bessere Klickbarkeit */
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    display: flex !important;      /* Hilft beim Zentrieren von Text im Button */
    align-items: center !important;
    justify-content: center !important;
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
    margin: 0 !important;          /* Margin wird durch GAP ersetzt */
}

/* 3. Hover-Effekt */
form#ticketForm input[type="submit"]:hover,
form#ticketForm input[type="reset"]:hover,
form#ticketForm input[type="button"]:hover,
form#ticketForm button:hover {
    background-color: #00454b !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}

/* 4. Spezialfall "Abbrechen" (Oft Rot gewünscht, sonst Teal lassen) */
form#ticketForm input[value="Abbrechen"],
form#ticketForm input[value="Cancel"],
form#ticketForm button:contains("Cancel") {
    background-color: #b91c1c !important; /* Rot zur Warnung */
}