/* ******************** */
/* * JQUERY-STYLESHEETS */
/* ******************** */

/* Das Overlay (Hintergrund abdunkeln) */
.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
    z-index: 10000 !important;
}

/* Dialog-Styles */
/* ************* */

.ui-dialog {
    border: 2px solid var(--text-inverted-main) !important;
    border-radius: 10px !important;
    box-shadow: var(--dialog-box-shadow) !important;
    padding: 0 !important;
    background: var(--box-bg) !important;
    z-index: 10002 !important;
}

/* Die Titelleiste (Header) */
.ui-dialog .ui-dialog-titlebar {
    background: var(--box-header-bg); /* Dein Spiele-Check Rot */
    color: var(--text-main);
    border: none;
	border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 8px 10px;
}

.ui-dialog .ui-dialog-title {
    font-weight: 600;
	font-variant: small-caps;
    display: flex !important;
    align-items: center;

}

.ui-dialog .ui-dialog-title i:first-of-type {
    color: var(--secondary-color);
    font-size: 0.9rem;
    vertical-align: middle;
    display: inline-block;
	text-shadow: var(--icon-secondary-shadow);
}

/* Der Schließen-Button (Das X) */
.ui-dialog .ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    right: 10px !important;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
    background-image: none !important; /* Entfernt die ui-icons_777777... Datei */
    text-indent: 0 !important;         /* jQuery schiebt Text normalerweise weit weg */
    background-position: 0 0 !important;
}

.ui-dialog-titlebar-close {
    display: none !important;
}

/* ... das Font-Awesome Icon stattdessen einfügen */
.ui-dialog .ui-dialog-titlebar-close .ui-icon::before {
    content: "\f00d";                  /* Unicode für das 'xmark' (X) */
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--primary-color);                    /* Deine gewünschte Icon-Farbe */
    font-size: 0.9rem;
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
	transform: scale(0.9);
	transition: transform 0.2s;
}
/* Der Zustand, wenn man mit der Maus über den Schließen-Button fährt */
.ui-dialog .ui-dialog-titlebar-close:hover .ui-icon::before {
    color: var(--text-main) !important;
    transform: scale(1.2);
}

/* Der Inhaltsbereich */
.ui-dialog .ui-dialog-content {
    padding: 10px !important;
    color: var(--text-main) !important;
    font-size: 0.85rem;
    line-height: 1.2;
}

/* Die Button-Leiste unten */
.ui-dialog .ui-dialog-buttonpane {
    background: var(--box-footer-bg); 
    border-top: 1px solid var(--border-color);
    margin-top: 0;
    padding: 3px 10px;
}

.ui-dialog .ui-dialog-buttonpane .modern-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--primary-color);
    /* Dezenter Verlauf */
    background: var(--button-bg-color);
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.ui-dialog .ui-dialog-buttonpane .modern-btn i {
    color: var(--primary-color); 
}
.ui-dialog .ui-dialog-buttonpane .modern-btn:hover {
    background: var(--button-hover-bg-color);
    box-shadow: var(--button-shadow-color);
	color: var(--text-main);
}

.ui-dialog .ui-dialog-buttonpane .modern-btn.btn-small {
    padding: 4px 12px;       /* Reduziertes Padding oben/unten */
    font-size: 0.8rem;       /* Etwas kleinere Schrift */
    gap: 6px;                /* Weniger Abstand zwischen Icon und Text */
    min-height: auto;        /* Hebt eventuelle Mindesthöhen auf */
}
.ui-dialog .ui-dialog-buttonpane .modern-btn.btn-small i {
    font-size: 0.9rem;
}






/* AUTOCOMPLETE */
/* ************ */

/* Der Container der Liste */
.ui-autocomplete {
    background-color: var(--input-bg) !important; 
    border: 1px solid var(--text-main) !important;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999999 !important; /* Damit sie über dem Dialog liegt */
    padding: 5px !important;
    list-style: none;
}

/* Die einzelnen Einträge */
.ui-menu-item {
    padding: 2px;
}

.ui-menu-item .ui-menu-item-wrapper {
    color: var(--text-main);
    padding: 5px 10px;
    display: block;
    border-radius: 4px;
    cursor: pointer;
	font-size:0.8rem;
	background: var(--autocomplete-bg);
}

/* Hover-Effekt / Aktive Auswahl */
.ui-menu-item .ui-menu-item-wrapper.ui-state-active,
.ui-menu-item .ui-menu-item-wrapper:hover,
.ui-menu-item .ui-menu-item-wrapper:focus {
	outline: none !important;
	border: none;
    background: var(--autocomplete-bg-hover);
    margin: 0 !important;
}

/* Scrollbar-Styling für die Liste (passend zum Dark-Mode) */
.ui-autocomplete::-webkit-scrollbar {
    width: 8px;
}
.ui-autocomplete::-webkit-scrollbar-track {
    background: transparent;
}
.ui-autocomplete::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}
.ui-autocomplete::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}
.ui-state-disabled div {
	padding: 5px !important; 
	color: var(--text-main) !important;
}
.ui-state-enabled div {
	padding: 5px !important; 
	color: var(--text-main) !important;
}
.ui-state-enabled div i {
	margin-right: 8px !important; 
	opacity: 0.5 !important;
}


/* Die Tab-Leiste */
/* ************** */
.ui-widget {
	font-family: inherit;
}
.ui-widget-content {
	background: var(--box-bg) !important;
	/* border: 1px solid var(--border-color) !important;   // Doppelte Linie erschien bei Dialogen */
}
.ui-widget-content a {
	color: var(--primary-color) !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
}
.ui-widget-content a:hover {
	color: var(--text-main) !important;
	text-decoration: underline !important;
}

.ui-tabs-panel {
	padding: 10px;
}
/* Der Container der Tab-Liste (Hintergrund des gesamten Reiter-Balkens) */
.ui-tabs-nav {
    background: var(--tabs-header-col) !important; /* Sehr helles Grau */
    border: 1px solid var(--border-color) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 4px 4px 0 4px !important;
    display: flex;
    gap: 2px;
}

.ui-tabs-nav li {
    list-style: none;
    border: 1px solid transparent !important;
    background: transparent !important; /* Inaktiv sind sie "nackt" */
    margin-bottom: -1px; /* Damit sie auf der Linie sitzen */
    border-radius: 6px 6px 0 0;
    transition: all 0.2s ease;
}

/* Text-Link in den Tabs */
.ui-tabs-nav li a {
    color: var(--light-color) !important; /* Grauer Text für inaktive Tabs */
    padding: 6px 10px !important;
    display: block;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

/* --- DER AKTIVE TAB --- */
.ui-tabs-nav li.ui-tabs-active {
    background: var(--tabs-header-activecol) !important; /* Weißer Hintergrund */
    border: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid var(--border-color) !important; /* Verdeckt die untere Linie */
}

.ui-tabs-nav li.ui-tabs-active a {
    color: var(--text-main) !important;
}

/* --- HOVER EFFEKT (Inaktive Tabs beim Drüberfahren) --- */
.ui-tabs-nav li:not(.ui-tabs-active):hover {
    background: var(--tabs-header-hovercol) !important;
    border-color: var(--border-color) !important;
}




/* ******************** */
/* * DATEPICKER STYLES  */
/* ******************** */

/* Der Hauptcontainer des Kalenders */
.ui-datepicker {
    background: var(--box-bg) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 10px !important;
    box-shadow: var(--dialog-box-shadow) !important;
    padding: 5px !important;
    display: none; /* Wird per JS eingeblendet */
    z-index: 10005 !important; /* Über Dialogen */
    width: 250px !important;
    font-family: inherit;
}

/* Header (Monat/Jahr Auswahl) */
.ui-datepicker .ui-datepicker-header {
    background: var(--box-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    font-weight: 600;
    font-variant: small-caps;
    padding: 5px 0;
    border-radius: 6px 6px 0 0;
}

/* Die Pfeile (Zurück/Vor) */
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
    top: 4px !important; /* Etwas weiter runter für bessere Zentrierung */
    width: 26px !important;  /* Etwas schmaler */
    height: 26px !important; /* Etwas kürzer */
    text-decoration: none !important; /* Unterstreichung entfernen */
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.ui-datepicker .ui-datepicker-prev:hover, 
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev a,
.ui-datepicker .ui-datepicker-next a {
    text-decoration: none !important;
    border: none !important;
    background: transparent !important; /* Verhindert graue Standard-Boxen */
}

.ui-datepicker .ui-datepicker-prev-hover, 
.ui-datepicker .ui-datepicker-next-hover {
    background: var(--button-hover-bg-color) !important; /* Nur dezenten Hintergrund */
    border-radius: 50% !important; /* Rund sieht bei Pfeilen oft moderner aus */
    top: 4px !important; /* Position halten */
}


}

/* Den Standard-Text "Prev"/"Next" unsichtbar machen */
.ui-datepicker .ui-icon {
    display: block;
    text-indent: 0 !important;
    overflow: visible !important;
    background-image: none !important; /* Entfernt das Standard-Bild-Sprite */
    border: none !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
        left: 0 !important;
    margin: 0 !important;
    top: 0 !important; /* Reset der vorherigen Verschiebung */
    transition: transform 0.2s ease;
	
}

/* Font Awesome Icons einfügen */
.ui-datepicker .ui-icon::before {
    font-family: "Font Awesome 7 Free"; /* Kompatibilität */
    font-weight: 900;
    color: var(--primary-color) !important;
    font-size: 0.9rem;
    display: block;
    text-align: center;
	line-height: 1 !important;
}

.ui-datepicker .ui-datepicker-prev .ui-icon::before {
    content: "\f053"; /* Chevron Left */
}

.ui-datepicker .ui-datepicker-next .ui-icon::before {
    content: "\f054"; /* Chevron Right */
}

.ui-datepicker .ui-datepicker-prev-hover .ui-icon,
.ui-datepicker .ui-datepicker-next-hover .ui-icon {
    transform: scale(1.1); /* Nur ganz leichte Vergrößerung */
    color: var(--primary-color) !important;
}


/* Text "Prev" und "Next" im HTML verstecken */
.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {
    font-size: 0 !important;
    color: transparent !important;
}
/* Die Kalender-Tabelle */
.ui-datepicker table {
    width: 100%;
    margin: 5px 0 0 0 !important;
    border-collapse: collapse;
}

/* Wochentage (Header der Tabelle) */
.ui-datepicker th {
    color: var(--text-main) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 5px 0;
}

/* Die einzelnen Tage */
.ui-datepicker td {
    padding: 1px;
}

.ui-datepicker td span, 
.ui-datepicker td a {
    display: block;
    padding: 5px;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    border: none !important;
}

/* Standard-Zustand (Inaktiv/Normal) */
.ui-datepicker td a {
    background: var(--autocomplete-bg) !important;
    color: var(--text-main) !important;
	text-decoration: none !important;
}

/* Hover-Effekt */
.ui-datepicker td a:hover {
    background: var(--autocomplete-bg-hover) !important;
    color: var(--text-main) !important;
	text-decoration: none !important;
}

/* Der aktuell ausgewählte Tag */
.ui-datepicker .ui-state-active {
    background: var(--stat-bar-high-col) !important;
    color: var(--text-main) !important; /* Weißer Text auf deinem Rot/Hauptfarbe */
    font-weight: bold;
}

/* Der heutige Tag (Hervorhebung) */
.ui-datepicker .ui-state-highlight {
    background: var(--select-blue) !important;
    color: var(--text-main) !important;
}

.ui-datepicker-title select {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    font-size: 0.8rem !important;
    outline: none !important;
    margin: 0 2px !important;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Fokus-Zustand analog zu .modern-input:focus */
.ui-datepicker-title select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.2) !important; /* Dein Primary-Glow */
}

/* Styling der Options (Browser-abhängig, aber für Dark-Mode optimiert) */
.ui-datepicker-title select option {
    background-color: var(--box-bg);
    color: var(--text-main);
}

/* Anpassung des Headers, damit die Selects nebeneinander Platz haben */
.ui-datepicker-header .ui-datepicker-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    line-height: 1.0;
}

/* Verhindert, dass die Standard-Pfeile der Selects das Layout sprengen */
.ui-datepicker-title select.ui-datepicker-month,
.ui-datepicker-title select.ui-datepicker-year {
    width: auto !important;
    display: inline-block;
}


/* ***************************************** */
/* Alles was schmaler ist als 700px : MOBILE */
/* ***************************************** */

@media screen and (max-width: 699px) {
    .ui-dialog {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important; /* Entfernt JS-berechnete Offsets */
    }
}