/**
 * In dieser CSS Datei soll alles landen, was die PrimeFaces betrifft...
 * Dabei ist zwingend darauf zu achten, dass unsere Überschreibung immer mit einer ID
 * arbeitet... da die originale CSS Datei HINTER unserer CSS Datei im Source landet.
 * Ohne eine #ID können wir das originale CSS nicht überladen!  
 */

#body .ui-tabs .ui-tabs-panels {
    background: var(--color-background-box);
    border: 1px solid var(--color-border-active);
    border-radius: 0 0 var(--border-radius-tabs) var(--border-radius-tabs);
    border-top: 2px solid var(--color-border-active);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    display: inline-block;
    min-width: 100%;
}
#body .notMaximized .ui-tabs .ui-tabs-panels {
    min-width: auto;
}

#body .ui-tabs .ui-tabs-panel {
    padding: 10px;
}

#body .ui-tabs .ui-tabs-nav li {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--border-radius-tabs) var(--border-radius-tabs) 0 0;
    border-bottom: none;

    margin: 0 3px 1px 0;

    background: var(--color-shade-soft-one);
    background:         linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:      -o-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:     -ms-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:    -moz-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background: -webkit-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
}

#body .ui-tabs .ui-tabs-nav li:hover {
    border-color: var(--color-border-hard);
    background: var(--color-shade-hard-one);
    background:         linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two));
    background:      -o-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two));
    background:     -ms-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two));
    background:    -moz-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two));
    background: -webkit-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two));
}

#body .ui-tabs .ui-tabs-nav li.ui-tabs-selected,
#body .ui-tabs .ui-tabs-nav li.ui-tabs-selected:hover {
    border-color: var(--color-border-active);
    font-weight: bold;

    background: var(--color-shade-active-one);
    background:         linear-gradient(top, var(--color-shade-active-one), var(--color-shade-active-two));
    background:      -o-linear-gradient(top, var(--color-shade-active-one), var(--color-shade-active-two));
    background:     -ms-linear-gradient(top, var(--color-shade-active-one), var(--color-shade-active-two));
    background:    -moz-linear-gradient(top, var(--color-shade-active-one), var(--color-shade-active-two));
    background: -webkit-linear-gradient(top, var(--color-shade-active-one), var(--color-shade-active-two));
}

#body .ui-tabs .ui-tabs-nav li a {
    color: var(--color-default);
    padding: 4px 8px 3px 8px;
}
#body .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
    color: var(--color-active-inverse);
}

#body .ui-tabs form > div.footer {
    margin: 10px -10px -10px -10px;
}

/**
 * Die folgenden Eigenschaften gelten dem <pf:dataTable>...
 *
 * NOTE: Das ist nur WIP... ich habe das nicht bis zu Ende durch gezogen.
 *       Statt dessen bin ich auf TabellenDelegate.css umgestiegen!
 */
#body .ui-datatable {
    width: 100%;
    border: none;
}
#body .ui-datatable table {
    table-layout: auto;
}
#body .ui-datatable tbody td {
    border: none; /* reset */
    overflow: visible;
    width: auto;
}
#body .ui-datatable > div > table > thead th,
#body .ui-datatable > div > table > tbody td,
#body .ui-datatable > div > table > tfoot td {
    border: 1px solid #ccc;
    padding: 4px;
}
#body .ui-datatable-header {
    border: 1px solid #ccc;
    background: #ccc;
    background:         linear-gradient(top, #eee, #ccc);
    background:      -o-linear-gradient(top, #eee, #ccc);
    background:     -ms-linear-gradient(top, #eee, #ccc);
    background:    -moz-linear-gradient(top, #eee, #ccc);
    background: -webkit-linear-gradient(top, #eee, #ccc);
    font-size: 13px;
    font-weight: bold;
    text-align: left;
}
#body .ui-datatable > div > table > thead {
    background: #ddd;
    background:         linear-gradient(top, #eee, #ddd);
    background:      -o-linear-gradient(top, #eee, #ddd);
    background:     -ms-linear-gradient(top, #eee, #ddd);
    background:    -moz-linear-gradient(top, #eee, #ddd);
    background: -webkit-linear-gradient(top, #eee, #ddd);
}
#body .ui-datatable > div > table > tfoot {
    background: #cdc;
    background:         linear-gradient(top, #bcb, #efe);
    background:      -o-linear-gradient(top, #bcb, #efe);
    background:     -ms-linear-gradient(top, #bcb, #efe);
    background:    -moz-linear-gradient(top, #bcb, #efe);
    background: -webkit-linear-gradient(top, #bcb, #efe);
    text-align: inherit;
}
#body .ui-datatable-even {
    background: #fff;
}
#body .ui-datatable-odd {
    background: #eee;
}
#body tr.selected {
    background: #def;
}

/* disabled tabs  */
* li.ui-state-disabled, li.ui-state-disabled:hover  {
    background: var(--color-shade-soft-one);
    background:         linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:      -o-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:     -ms-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:    -moz-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background: -webkit-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
}
#body .ui-tabs .ui-tabs-nav li.ui-state-disabled a {
	color: #aaa;
}

/**
 * Hier einige Angaben für <pf:calendar />. Die Breite des Eingabefeldes lässt sich auch über das size-Attribut steuern. 
 * Für Datumsfelder passt size="10" gut, für Timestamp size="16".  
 */
#body .ui-calendar {
    width: 120px;
    display: inline-block;
}
#body .ui-calendar .ui-inputfield {
    margin: 2px;
}
#body .ui-calendar.stretch {
    width: 100%;
}

/**
 * Bei von-bis-Angaben ist die Style-Class wAuto häufig günstig, weil das Eingabefeld in einen größeren span gekapselt wird, 
 * was dazu führt, dass das "bis" nicht mittig zwischen den Eingabefeldern steht. 
 * (Um "form.formular div.element div.input input[type=text]" zu überschreiben, müssen wir hier auch die input[type=text]-Varante definieren.) 
 */
#body .ui-calendar.wAuto, 
#body .ui-calendar.wAuto input[type=text] {
    width: auto;
}

#body .ui-datepicker {
    background: #fff;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
    border-radius: var(--border-radius-buttons);
    padding: 2px;
}
#body .ui-datepicker .ui-datepicker-header {
    background: var(--color-shade-hard-one);
    background:         linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two));
    background:      -o-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two));
    background:     -ms-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two));
    background:    -moz-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two));
    background: -webkit-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two));
}
#body .ui-datepicker .ui-datepicker-header .ui-datepicker-prev::after,
#body .ui-datepicker .ui-datepicker-header .ui-datepicker-next::after {
    font-family: var(--font-awesome);
    font-weight: 900;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    color: var(--color-icon-default);
    margin: 5px;
}
#body .ui-datepicker .ui-datepicker-header .ui-datepicker-prev::after {
    content: "\f100";
        
}
#body .ui-datepicker .ui-datepicker-header .ui-datepicker-prev span {
    display: none;
}
#body .ui-datepicker .ui-datepicker-header .ui-datepicker-next::after {
    content: "\f101";    
}
#body .ui-datepicker .ui-datepicker-header .ui-datepicker-next span {
    display: none;
}
#body .ui-datepicker .ui-datepicker-calendar {
    margin: 0;
}
#body .ui-datepicker .ui-datepicker-calendar thead {
    background: var(--color-shade-soft-one);
    background:         linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:      -o-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:     -ms-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:    -moz-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background: -webkit-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
}
#body .ui-datepicker .ui-datepicker-calendar tbody td {
    background: #fff;
    border: 1px solid #aaa;
}
#body .ui-datepicker .ui-datepicker-calendar tbody td:hover {
    background: #def;
}
#body .ui-datepicker .ui-datepicker-calendar tbody td a {
    color: #000;
    text-align: center;
}
#body .ui-datepicker .ui-datepicker-calendar tbody .ui-datepicker-week-end  {
    background: #eee;
}
#body .ui-datepicker .ui-datepicker-calendar tbody .ui-datepicker-unselectable  {
    background: #ddd;
}
#body .ui-datepicker .ui-datepicker-calendar tbody .ui-datepicker-today  {
    background: #dfd;
}
#body .ui-datepicker .ui-datepicker-calendar tbody .ui-datepicker-current-day  {
    background: #cde;
}
#body .ui-datepicker .ui-datepicker-title select {
    margin: 0 2px;
}
#body .ui-datepicker .ui-datepicker-buttonpane {
    margin: 3px 0;
    background: var(--color-shade-soft-one);
    background:         linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:      -o-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:     -ms-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:    -moz-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background: -webkit-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
}
#body .ui-datepicker .ui-datepicker-buttonpane button {
    background: #fff;
    margin: 3px;
    padding: 1px 4px;
    font-size: 11px;
    border-radius: var(--border-radius-buttons);
}
#body .ui-datepicker .ui-datepicker-buttonpane button:hover {
    background: #eee;
}
#body .ui-datepicker .ui-timepicker-div {
    font-size: 0.8em;
}
#body .ui-datepicker .ui-slider {
    background: #ccc;
    border: 1px solid #555;
    border-radius: var(--border-radius-buttons);
}
#body .ui-datepicker .ui-slider .ui-slider-handle {
    border: 1px solid #000;
    border-radius: var(--border-radius-buttons);
    box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
    background: var(--color-shade-soft-one);
    background:         linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:      -o-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:     -ms-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background:    -moz-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
    background: -webkit-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two));
}

/**
 * Mit dem Upgrade von PrimeFaces 6.2 auf 8.0 gab es unerwartete Probleme mit der Positionierung des Overlay bei unseren modalen Dialogen.
 * Mit A1E-3899 konnte es auf das folgende CSS eingegrenzt werden. Wir werden sehen, ob sich daraus unerwartet weitere Probleme ergeben.
 */
#body .ui-tabs  {
    position: inherit;
    -webkit-transform: none;
       -moz-transform: none;
         -o-transform: none;
            transform: none;
}

#body .ui-c {
    padding: 0;
}

/**
 * Mit PrimeFaces v10 kommt der <p:textEditor> dazu, den wir etwas besser stylen können, damit er auch im DarkMode funktioniert.
 */
#body .ql-snow .ql-fill {
    fill: var(--color-default);
}
#body .ql-snow .ql-stroke {
    stroke: var(--color-default);
}
#body .ql-snow .ql-picker {
    color: var(--color-default);
}
#body .ql-snow .ql-picker-options {
    background-color: var(--color-background);    
}
#body .ql-editor p {
    margin: revert;
}
#body .ql-editor {
    background-color: var(--color-input);
    border-radius: 0 0 var(--border-radius-buttons) var(--border-radius-buttons);
}
#body .ql-container.ql-disabled .ql-editor {
    background-color: var(--color-input-disabled);
    border-radius: var(--border-radius-buttons);
}
#body .ql-toolbar.ql-snow {
    border-radius: var(--border-radius-buttons) var(--border-radius-buttons) 0 0;
}
#body .ql-container.ql-snow {
    background-color: var(--color-input);
    border-radius: 0 0 var(--border-radius-buttons) var(--border-radius-buttons);
}
#body .ql-container.ql-snow.ql-disabled {
    background-color: var(--color-input-disabled);
    border-radius: var(--border-radius-buttons);
}
#body .ql-snow.ql-toolbar:after {
    display: initial; /* Sonst ist der Toolbar im klassischen Formular viel zu groß. */
}