/* ==============================================
 * Karriere.Haus Theme Overrides für MiroTalk SFU
 * ==============================================
 * 
 * Diese Datei überschreibt MiroTalk-Standardstyles
 * und passt sie an das Karriere.Haus CI/UX an.
 */

/* ==============================================
 * KRITISCH: Font Awesome Icons - HÖCHSTE PRIORITÄT
 * ============================================== */

/* Font Awesome Basis - WICHTIG: Muss vor allen anderen Styles stehen */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-solid-900.woff2") format("woff2"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-solid-900.woff") format("woff");
}

/* Font Awesome Font-Familie für ALLE Icons erzwingen - auch auf Buttons direkt */
.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 .fas,
button .far,
button .fab,
button .fa,
button i[class*="fa-"],
i.fas,
i.far,
i.fab,
i.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;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
}

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

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

/* Font Awesome Icon-Unicode wird automatisch von Font Awesome bereitgestellt - keine manuellen :before Inhalte nötig */

/* Globale Schriftart - AUSSER für Icons */
*:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]):not(button[class*="fa-"]) {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Body Background */
body {
    background: linear-gradient(135deg, #faf6f3 0%, #fff5ea 100%) !important;
}

/* ==============================================
 * Buttons - Karriere.Haus Orange
 * ============================================== */

/* Alle aktiven Buttons in Orange */
button.active,
.btn-active,
button[aria-pressed="true"],
.btn[aria-pressed="true"] {
    background-color: #f89e17 !important;
    border-color: #d38714 !important;
    color: #ffffff !important;
}

/* Hover-Effekt für Buttons */
button:not(.disabled):not([disabled]):hover,
.btn:not(.disabled):not([disabled]):hover {
    background-color: #d38714 !important;
    border-color: #b37511 !important;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

/* Join-Button im Hauptstil */
.join-button,
#joinButton,
button[type="submit"]:not(.disabled) {
    background: linear-gradient(135deg, #f89e17 0%, #d38714 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 8px rgba(248, 158, 23, 0.3) !important;
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
}

.join-button:hover,
#joinButton:hover,
button[type="submit"]:not(.disabled):hover {
    background: linear-gradient(135deg, #d38714 0%, #b37511 100%) !important;
    box-shadow: 0 6px 12px rgba(248, 158, 23, 0.4) !important;
    transform: translateY(-1px);
}

/* Primäre Action-Buttons */
.btn-primary,
button.primary {
    background-color: #f89e17 !important;
    border-color: #d38714 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
button.primary:hover {
    background-color: #d38714 !important;
    border-color: #b37511 !important;
}

/* ==============================================
 * Init-User Modal (Pre-Join Screen) - HÖCHSTE PRIORITÄT
 * ============================================== */

.init-user,
.init-modal-size,
.swal2-popup.swal2-modal {
    background-color: #ffffff !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(35, 40, 45, 0.1) !important;
}

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

/* KRITISCH: Init-User Buttons mit Font Awesome Klassen direkt am Button */
.init-user button.fas,
.init-user button.far,
.init-user button.fab,
.init-user button.fa,
.init-user button.fa-solid,
.init-user button[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;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
}

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

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

/* Join Button im Init-User Modal */
.init-user button[type="submit"],
.init-user #joinButton,
.swal2-popup button.swal2-confirm {
    background: linear-gradient(135deg, #f89e17 0%, #d38714 100%) !important;
    border-color: #d38714 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.init-user button[type="submit"]:hover,
.init-user #joinButton:hover,
.swal2-popup button.swal2-confirm:hover {
    background: linear-gradient(135deg, #d38714 0%, #b37511 100%) !important;
    border-color: #b37511 !important;
}

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

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

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

/* ==============================================
 * Modals und Overlays
 * ============================================== */

.swal2-popup,
.modal,
.dialog,
.popup {
    background-color: #ffffff !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(35, 40, 45, 0.1) !important;
}

.swal2-title {
    color: #23282d !important;
    font-family: 'Roboto', sans-serif !important;
}

.swal2-content {
    color: #23282d !important;
}

.swal2-confirm,
.modal-confirm,
.dialog-confirm {
    background-color: #f89e17 !important;
    border-color: #d38714 !important;
    color: #ffffff !important;
}

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

.swal2-cancel,
.modal-cancel {
    background-color: #f1f1f1 !important;
    border-color: rgba(35, 40, 45, 0.2) !important;
    color: #23282d !important;
}

.swal2-cancel:hover,
.modal-cancel:hover {
    background-color: #e0e0e0 !important;
}

/* ==============================================
 * Chat-Bereich
 * ============================================== */

.msger {
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.12) !important;
}

.msger-header {
    background-color: #f89e17 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #d38714 !important;
}

.msger-inputarea {
    background-color: #faf6f3 !important;
    border-top: 1px solid rgba(35, 40, 45, 0.1) !important;
}

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

.msger-send-btn {
    background-color: #f89e17 !important;
    color: #ffffff !important;
}

.msger-send-btn:hover {
    background-color: #d38714 !important;
}

/* Chat-Nachrichten */
.msg.left-msg {
    background-color: #f1f1f1 !important;
    color: #23282d !important;
}

.msg.right-msg {
    background-color: #f89e17 !important;
    color: #ffffff !important;
}

.msg.private-msg {
    background-color: #fff5ea !important;
    border-left: 3px solid #d38714 !important;
    color: #23282d !important;
}

/* ==============================================
 * Settings Panel
 * ============================================== */

.settings-panel,
#settings,
.settings {
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.12) !important;
}

.settings-tab,
.tab-button {
    color: #23282d !important;
    border-bottom: 2px solid transparent !important;
}

.settings-tab.active,
.tab-button.active {
    color: #f89e17 !important;
    border-bottom-color: #f89e17 !important;
}

.settings-tab:hover,
.tab-button:hover {
    color: #d38714 !important;
}

/* ==============================================
 * Video Grid
 * ============================================== */

.video-grid,
#videoGrid {
    background: linear-gradient(135deg, #faf6f3 0%, #fff5ea 100%) !important;
}

.video-container,
.participant-video {
    background-color: #ffffff !important;
    border: 2px solid rgba(35, 40, 45, 0.1) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
}

.video-container.active,
.participant-video.active {
    border-color: #f89e17 !important;
    box-shadow: 0 4px 8px rgba(248, 158, 23, 0.3) !important;
}

.video-label,
.participant-name {
    background-color: rgba(248, 158, 23, 0.9) !important;
    color: #ffffff !important;
    border-radius: 0.25rem !important;
}

/* ==============================================
 * Teilnehmer-Liste
 * ============================================== */

.participants-list,
#participants {
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.12) !important;
}

.participant-item,
.participant {
    border-bottom: 1px solid rgba(35, 40, 45, 0.1) !important;
    color: #23282d !important;
}

.participant-item:hover,
.participant:hover {
    background-color: #faf6f3 !important;
}

.participant-item.active,
.participant.active {
    background-color: rgba(248, 158, 23, 0.1) !important;
    border-left: 3px solid #f89e17 !important;
}

/* ==============================================
 * Typography - KRITISCH für Lesbarkeit
 * ============================================== */

/* Alle Texte explizit auf dunkle Farbe setzen für guten Kontrast */
body, html {
    color: #23282d !important;
}

p, span, div, label, li, td, th {
    color: #23282d !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #23282d !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
}

h1 {
    font-weight: 700 !important;
    color: #23282d !important;
}

/* Überschreibe text-light und bg-dark Klassen */
.text-light, .text-white {
    color: #23282d !important;
}

.bg-dark, .bg-black {
    background-color: #ffffff !important;
    color: #23282d !important;
}

/* Form Select Felder - Helles Design */
.form-select, select {
    background-color: #ffffff !important;
    color: #23282d !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
}

.form-select.text-light, select.text-light {
    color: #23282d !important;
    background-color: #ffffff !important;
}

.form-select.bg-dark, select.bg-dark {
    background-color: #ffffff !important;
    color: #23282d !important;
}

/* Text in weißen/hellen Bereichen sollte dunkel sein */
.white, .light, [class*="white"], [class*="light"] {
    color: #23282d !important;
}

/* Links */
a:not(.button):not(.btn) {
    color: #f89e17 !important;
    text-decoration: none !important;
}

a:not(.button):not(.btn):hover {
    color: #d38714 !important;
    text-decoration: underline !important;
}

/* ==============================================
 * Input-Felder - HÖCHSTE PRIORITÄT
 * ============================================== */

/* Überschreibe ALLE bg-dark und text-light Klassen */
.bg-dark,
.bg-black,
select.bg-dark,
.form-select.bg-dark,
input.bg-dark {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

.text-light,
.text-white,
select.text-light,
.form-select.text-light,
input.text-light {
    color: #23282d !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select,
.form-select {
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
    color: #23282d !important;
    border-radius: 0.375rem !important;
    font-family: 'Roboto', sans-serif !important;
}

/* Spezifisch für Select-Felder mit bg-dark text-light Klassen */
select.form-select.bg-dark.text-light,
.form-select.bg-dark.text-light,
select.bg-dark.text-light,
#initVideoSelect,
#initMicrophoneSelect,
#initSpeakerSelect,
#videoSelect,
#microphoneSelect,
#speakerSelect {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #23282d !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
}

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

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

/* Option-Elemente in Select-Feldern */
select option,
.form-select option {
    background-color: #ffffff !important;
    color: #23282d !important;
}

/* ==============================================
 * Loading Spinner
 * ============================================== */

.loading-spinner,
.spinner,
.loader {
    border-top-color: #f89e17 !important;
}

#loadingDiv {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #23282d !important;
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
}

#loadingDiv h1 {
    color: #f89e17 !important;
}

/* ==============================================
 * Scrollbars (Webkit)
 * ============================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #faf6f3 !important;
}

::-webkit-scrollbar-thumb {
    background-color: #f89e17 !important;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #d38714 !important;
}

/* ==============================================
 * Dropdowns / Select
 * ============================================== */

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

.dropdown-item:hover,
.select-option:hover {
    background-color: #faf6f3 !important;
    color: #f89e17 !important;
}

.dropdown-item.active,
.select-option.active {
    background-color: rgba(248, 158, 23, 0.1) !important;
    color: #f89e17 !important;
}

/* ==============================================
 * Tabs
 * ============================================== */

.tab,
.tab-button {
    color: #23282d !important;
    border-bottom: 2px solid transparent !important;
}

.tab.active,
.tab-button.active {
    color: #f89e17 !important;
    border-bottom-color: #f89e17 !important;
}

.tab:hover,
.tab-button:hover {
    color: #d38714 !important;
}

/* ==============================================
 * Whiteboard
 * ============================================== */

.whiteboard,
#whiteboard {
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
}

/* ==============================================
 * Editor
 * ============================================== */

.editor,
#editor {
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
}

/* ==============================================
 * Tooltips
 * ============================================== */

.tooltip,
[data-tooltip]::before {
    background-color: #23282d !important; /* Charcoal/schwarz */
    color: #ffffff !important; /* Weiß für gute Lesbarkeit */
    border-radius: 0.5rem !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

/* Tippy.js Tooltips - Helles Design (heller Hintergrund mit dunkler Schrift) */
.tippy-box,
[data-tippy-root] .tippy-box {
    background-color: #ffffff !important; /* Weiß für Tooltip-Hintergrund */
    color: #23282d !important; /* Charcoal für Tooltip-Text */
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.tippy-content,
.tippy-box .tippy-content {
    color: #23282d !important; /* Charcoal für Tooltip-Text */
    background-color: transparent !important;
}

.tippy-box[data-theme~='light'],
.tippy-box[data-theme~='white'] {
    background-color: #ffffff !important; /* Weiß */
    color: #23282d !important; /* Charcoal */
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
}

.tippy-box[data-theme~='dark'] {
    background-color: #ffffff !important; /* Weiß (überschreibt dark theme für bessere Lesbarkeit) */
    color: #23282d !important; /* Charcoal */
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
}

/* Tippy.js Arrow (Pfeil) - muss zum Tooltip-Hintergrund passen (weiß) */
.tippy-arrow,
.tippy-box .tippy-arrow {
    color: #ffffff !important; /* Weiß für Arrow */
}

.tippy-box[data-placement^='top'] > .tippy-arrow::before {
    border-top-color: #ffffff !important; /* Weiß */
}

.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: #ffffff !important; /* Weiß */
}

.tippy-box[data-placement^='left'] > .tippy-arrow::before {
    border-left-color: #ffffff !important; /* Weiß */
}

.tippy-box[data-placement^='right'] > .tippy-arrow::before {
    border-right-color: #ffffff !important; /* Weiß */
}

/* ==============================================
 * Notifications / Alerts
 * ============================================== */

.notification,
.alert,
.toast {
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.12) !important;
    color: #23282d !important;
}

.notification.success,
.alert.success {
    border-left: 4px solid #f89e17 !important;
}

.notification.error,
.alert.error {
    border-left: 4px solid #dc2626 !important;
}

/* ==============================================
 * Status Badges
 * ============================================== */

.badge,
.status-badge {
    border-radius: 0.25rem !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
}

.badge.active,
.status-badge.active {
    background-color: #f89e17 !important;
    color: #ffffff !important;
}

.badge.inactive,
.status-badge.inactive {
    background-color: #f1f1f1 !important;
    color: #23282d !important;
}

/* ==============================================
 * Bottom Control Bar - HÖCHSTE PRIORITÄT
 * ============================================== */

#bottomButtons,
.bottom-btns,
.control-bar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(35, 40, 45, 0.1) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
}

#bottomButtons button,
.bottom-btns button,
.control-bar button {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
    color: #23282d !important;
}

#bottomButtons button:hover,
.bottom-btns button:hover,
.control-bar button:hover {
    background-color: #faf6f3 !important;
    border-color: #f89e17 !important;
    color: #f89e17 !important;
}

#bottomButtons button.active,
#bottomButtons button[aria-pressed="true"],
.bottom-btns button.active,
.control-bar button.active {
    background-color: #f89e17 !important;
    border-color: #d38714 !important;
    color: #ffffff !important;
}

/* ==============================================
 * Font Awesome Icons - KRITISCH: Icons sichtbar machen
 * ============================================== */

/* Font Awesome Basis-Styles - WICHTIG für alle Icons */
.fas,
.far,
.fab,
.fa,
.fa-solid,
.fa-regular,
.fa-brands,
[class*="fa-"],
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;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

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

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

/* Icon Styles in Buttons - Sicherstellen dass Icons sichtbar sind */
button .fas,
button .far,
button .fab,
button .fa,
button .fa-solid,
button [class*="fa-"],
button i[class*="fa-"],
#bottomButtons button i,
#bottomButtons button .fa,
#bottomButtons button [class*="fa-"],
.bottom-btns button i,
.control-bar button i {
    color: inherit !important;
    font-size: inherit !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-style: normal !important;
}

/* Spezifische Icon-Größen */
#bottomButtons button i,
#bottomButtons button .fa,
#bottomButtons button [class*="fa-"] {
    font-size: 1.6rem !important;
}

.init-user button i,
.init-user button .fa,
.init-user button [class*="fa-"] {
    font-size: 1.2rem !important;
}

#bottomButtons button.active i,
#bottomButtons button[aria-pressed="true"] i,
#bottomButtons button.toggled i,
.bottom-btns button.active i {
    color: #ffffff !important;
}

/* Init-User Modal Icons */
.init-user button i,
.init-user button .fa,
.init-user button [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==============================================
 * Video Controls
 * ============================================== */

.video-controls {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.video-controls button {
    color: #23282d !important;
}

.video-controls button.active {
    color: #f89e17 !important;
}

.video-controls button:hover {
    color: #d38714 !important;
}

/* ==============================================
 * Room Info / Header
 * ============================================== */

.room-info,
.room-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(35, 40, 45, 0.1) !important;
    color: #23282d !important;
}

.room-name {
    color: #23282d !important;
    font-weight: 600 !important;
}

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

.init-user,
.init-modal {
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.12) !important;
}

.init-video-container {
    background-color: #faf6f3 !important;
    border-radius: 0.5rem !important;
}

/* ==============================================
 * Who Are You Page
 * ============================================== */

.who-are-you,
.whoAreYou {
    background: linear-gradient(135deg, #faf6f3 0%, #fff5ea 100%) !important;
}

.who-are-you .modal,
.whoAreYou .modal {
    background-color: #ffffff !important;
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
}

/* ==============================================
 * Responsive Adjustments
 * ============================================== */

@media (max-width: 768px) {
    .bottom-btns,
    .control-bar {
        background-color: rgba(255, 255, 255, 0.98) !important;
    }
}

/* ==============================================
 * Print Styles (falls benötigt)
 * ============================================== */

@media print {
    body {
        background: #ffffff !important;
    }
    
    .bottom-btns,
    .control-bar,
    button:not(.print-visible) {
        display: none !important;
    }
}