/* ============================================
   KOMPLETT TRANSPARENT – NUR HINTERGRUNDBILD + WEISSE RÄNDER
   ============================================ */
html, body {
    background-color: transparent !important;
    background-image: url('/assets/img/background.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    color: #ffffff !important;
}

/* Alle Karten, Container, Navbar etc. – komplett transparent mit weißen Rändern */
.card, .modal-content, .dropdown-menu, 
.form-control, .form-select, .navbar,
.table, .list-group-item, .page-link,
.accordion-item, .accordion-button,
.toast, .popover, .offcanvas,
.progress, .bg-light, .bg-white,
.sidebar, .main-panel, .content-wrapper,
.card-header, .card-footer, .card-body,
.modal-header, .modal-footer, .modal-body,
.sidebar .nav, .sidebar .nav-item, .sidebar .nav-link,
.navbar-nav, .nav-item, .top-bar, .user-menu,
.nav-link, .dropdown-menu, .dropdown-item {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Buttons & Navigationslinks – transparent mit weißen Rändern */
.nav-link, .btn, .dropdown-item, .btn-link,
.navbar .nav-link, .sidebar .nav-link,
button:not(.no-style), [role="button"], 
input[type="button"], input[type="submit"],
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.dropdown-toggle, .user-menu .btn, .top-bar .btn, .action-btn, .menu-btn {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Hover-Zustand – leicht weißer Hintergrund */
.nav-link:hover, .btn:hover, .dropdown-item:hover, .btn-link:hover,
.navbar .nav-link:hover, .sidebar .nav-link:hover,
button:hover:not(.no-style), [role="button"]:hover,
input[type="button"]:hover, input[type="submit"]:hover,
.btn-primary:hover, .btn-secondary:hover, .btn-success:hover,
.btn-outline-primary:hover, .dropdown-toggle:hover,
.user-menu .btn:hover, .top-bar .btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

/* Aktive Links */
.nav-link.active, .sidebar .nav-link.active, .navbar .nav-link.active,
.btn.active, .dropdown-item.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Dropdown-Menüs */
.dropdown-menu {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background-color: transparent !important;
}

/* Links (Textlinks) */
a, .text-primary, .link-primary {
    color: #ffffff !important;
}
a:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Tabellen */
.table {
    --bs-table-bg: transparent !important;
    --bs-table-color: #ffffff !important;
    --bs-table-border-color: rgba(255, 255, 255, 0.2) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}
.table thead th {
    background-color: transparent !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Formulare */
.form-control, .form-select {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}
.form-control:focus, .form-select:focus {
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.input-group-text {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* Badges */
.badge {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}
.badge.bg-success, .badge.bg-danger, .badge.bg-warning {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* Code-Blöcke */
pre, code {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Scrollbalken */
::-webkit-scrollbar {
    width: 12px;
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px;
}

/* Buttons ausblenden (optional) */
#view-cards {
    display: none !important;
}
.dropdown-settings {
    display: none !important;
}

/* Sicherstellen, dass alle Button-Texte weiß bleiben */
button, .btn, [type="button"], [type="submit"], .nav-link, .dropdown-item {
    color: #ffffff !important;
}

/* Card, Modal etc. */
.card, .modal-content, .dropdown-menu, 
.form-control, .form-select, .navbar,
.table, table.datagrid,
.list-group-item, .page-link {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Tabellen-Hover */
table.datagrid tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Smartphone-Optimierung für Console-Tab */
@media (max-width: 768px) {
    .xterm {
        width: 100% !important;
        max-width: 100vw;
        overflow-x: auto !important;
    }
    .xterm-screen {
        width: auto !important;
        max-width: 100%;
    }
    .xterm-viewport {
        width: auto !important;
        max-width: 100%;
        overflow-y: auto !important;
    }
    .xterm-rows {
        font-size: 12px !important;
    }
    .nav-tabs {
        flex-wrap: wrap;
    }
    .nav-tabs .nav-item {
        flex: 1 0 auto;
        text-align: center;
    }
    .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
}