/* ==============================================
 * Karriere.Haus CI/UX - KOMPLETT HELLES DESIGN
 * ==============================================
 * 
 * Diese Datei stellt die gesamte Seite auf ein helles,
 * freundliches Design um (ähnlich dem CDS Design).
 * Muss als LETZTE CSS-Datei geladen werden!
 */

/* ==============================================
 * GLOBALE ÜBERSCHREIBUNGEN - HÖCHSTE PRIORITÄT
 * ============================================== */

/* Body und HTML - Komplett helles Design */
html,
body {
    background: #faf6f3 !important; /* Karriere.Haus Cream (wie CDS) */
    background-image: none !important;
    color: #23282d !important; /* Charcoal für Text */
}

/* Alle Sections und Container - Helles Design */
section,
.container,
.wrapper,
.main-container,
#room,
#roomContainer {
    background: #faf6f3 !important; /* Cream */
    color: #23282d !important; /* Charcoal */
}

/* ==============================================
 * Init-User Modal (Pre-Join) - KOMPLETT HELL
 * ============================================== */

.init-modal-size,
.init-user {
    background-color: #ffffff !important; /* Weiß */
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(35, 40, 45, 0.1) !important;
    color: #23282d !important; /* Charcoal */
}

.init-user *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]) {
    color: #23282d !important; /* Alle Texte Charcoal */
}

.init-video-container {
    background-color: #faf6f3 !important; /* Cream */
    border: 1px solid rgba(35, 40, 45, 0.1) !important;
    border-radius: 0.5rem !important;
}

.initComands {
    background-color: #ffffff !important; /* Weiß */
    padding: 15px;
    border-radius: 0.5rem;
}

.init-user select,
#initVideoSelect,
#initMicrophoneSelect,
#initSpeakerSelect {
    background-color: #ffffff !important;
    color: #23282d !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
}

.init-user select:focus {
    border-color: #f89e17 !important;
    box-shadow: 0 0 0 3px rgba(248, 158, 23, 0.1) !important;
}

.init-user button {
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
    color: #23282d !important;
}

.init-user button:hover {
    background-color: #faf6f3 !important;
    border-color: #f89e17 !important;
    color: #f89e17 !important;
}

.init-user button.active {
    background-color: #f89e17 !important;
    border-color: #d38714 !important;
    color: #ffffff !important;
}

/* ==============================================
 * Swal2 Modals - Komplett helles Design (HÖCHSTE PRIORITÄT)
 * ============================================== */

/* Überschreibe ALLE Swal Hintergründe - auch inline styles */
.swal2-popup,
.swal2-container,
.swal2-container.swal2-backdrop-show,
[class*="swal2-"] {
    background-color: #ffffff !important; /* Weiß */
    background: #ffffff !important; /* Überschreibe auch background (nicht nur background-color) */
    color: #23282d !important; /* Charcoal */
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Überschreibe auch wenn background per style-Attribut gesetzt ist */
.swal2-popup[style*="background"],
.swal2-container[style*="background"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.swal2-title,
.swal2-content,
.swal2-html-container,
.swal2-validation-message,
.swal2-text {
    color: #23282d !important; /* Charcoal */
    background-color: transparent !important;
}

.swal2-input,
.swal2-textarea {
    background-color: #ffffff !important;
    color: #23282d !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
    border-color: #f89e17 !important;
    box-shadow: 0 0 0 3px rgba(248, 158, 23, 0.1) !important;
    background-color: #ffffff !important;
    color: #23282d !important;
}

.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: rgba(35, 40, 45, 0.5) !important;
}

/* Swal Buttons - Orange statt Standard */
.swal2-confirm {
    background-color: #f89e17 !important; /* Orange */
    color: #ffffff !important;
    border: none !important;
}

.swal2-confirm:hover {
    background-color: #d38714 !important;
}

.swal2-cancel {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

.swal2-deny {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Swal Toast Notifications */
.swal2-toast {
    background-color: #ffffff !important;
    color: #23282d !important;
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* ==============================================
 * Settings Modal - Helles Design
 * ============================================== */

#settings,
#mySettings {
    background-color: #ffffff !important; /* Weiß */
    border: 1px solid rgba(35, 40, 45, 0.1) !important;
    color: #23282d !important; /* Charcoal */
}

#settings *,
#mySettings * {
    color: #23282d !important; /* Alle Texte Charcoal */
}

#settings .tab button,
#mySettings .tab button {
    color: #23282d !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.1) !important;
}

#settings .tab button.active,
#mySettings .tab button.active {
    background-color: rgba(248, 158, 23, 0.15) !important;
    color: #f89e17 !important;
    border-color: #f89e17 !important;
}

/* ==============================================
 * Chat/Messenger - Helles Design
 * ============================================== */

#msger {
    background-color: #ffffff !important; /* Weiß */
    border: 1px solid rgba(35, 40, 45, 0.1) !important;
}

/* ==============================================
 * Video Grid - Helles Design
 * ============================================== */

.video-grid,
#videoGrid {
    background-color: #faf6f3 !important; /* Cream */
}

.video-box {
    background-color: #ffffff !important; /* Weiß */
    border: 1px solid rgba(35, 40, 45, 0.1) !important;
}

/* ==============================================
 * Dropdown Menus - Helles Design
 * ============================================== */

.dropdown-menu,
.dropup .dropdown-menu {
    background-color: #ffffff !important; /* Weiß */
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    color: #23282d !important; /* Charcoal */
}

.dropdown-menu button,
.dropdown-menu li,
.dropdown-menu a {
    color: #23282d !important; /* Charcoal */
    background-color: #ffffff !important;
}

.dropdown-menu button:hover,
.dropdown-menu li:hover {
    background-color: #faf6f3 !important; /* Cream beim Hover */
    color: #f89e17 !important; /* Orange Text */
}

/* ==============================================
 * Image URL Modal - Helles Design
 * ============================================== */

.imageUrlModal,
.imageUrlModal-content {
    background-color: #ffffff !important; /* Weiß */
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    color: #23282d !important; /* Charcoal */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.imageUrlModal input {
    background-color: #ffffff !important;
    color: #23282d !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
}

.imageUrlModal button {
    background-color: #f89e17 !important;
    color: #ffffff !important;
}

.imageUrlModal button:hover {
    background-color: #d38714 !important;
}

/* ==============================================
 * Alle anderen Modals/Overlays - Helles Design
 * ============================================== */

.modal,
.dialog,
.popup,
.overlay {
    background-color: #ffffff !important; /* Weiß */
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    color: #23282d !important; /* Charcoal */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* ==============================================
 * Tables - Helles Design
 * ============================================== */

table,
.settingsTable,
.file-table {
    background-color: #ffffff !important; /* Weiß */
    color: #23282d !important; /* Charcoal */
}

table td,
table th,
.settingsTable td,
.settingsTable th {
    color: #23282d !important; /* Charcoal */
    background-color: #ffffff !important;
}

/* ==============================================
 * Input Fields - Helles Design
 * ============================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea {
    background-color: #ffffff !important;
    color: #23282d !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(35, 40, 45, 0.5) !important;
}

/* ==============================================
 * Alle Bereiche die noch dunkel sein könnten
 * ============================================== */

[style*="background"][style*="dark"],
[style*="background"][style*="black"],
[style*="background"][style*="#1a"],
[style*="background"][style*="#232"],
[style*="background"][style*="#2d"],
[style*="background"][style*="#151"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* ==============================================
 * Font Awesome Icons - Sicherstellen dass sichtbar
 * ============================================== */

.fas,
.far,
.fab,
.fa,
.fa-solid,
.fa-regular,
.fa-brands,
[class*="fa-"],
i[class*="fa-"],
button[class*="fa-"],
button .fas,
button .far,
button .fab,
button .fa,
button i[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.far,
.fa-regular {
    font-weight: 400 !important;
}

.fab,
.fa-brands {
    font-weight: 400 !important;
}