/* v2.4 // backend-mod/css/_forms.css */
/* FORM STYLES START */
ul.nav-tabs {
  /* by default tabs get a margin at the bottom so that tab content won't stick at the top '*/
  margin-bottom: 15px;
}

.nav-tabs > li > a {
  border-radius: 4px 4px 0 0;
}

.nav-tabs li a img {
  vertical-align: middle;
}
.nav-tabs button.tab-close-button {
  background: none repeat scroll 0 0 transparent;
  border: 0 none;
  cursor: pointer;
  padding: 0;
  color: #000000;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  opacity: 0.2;
  text-shadow: 0 1px 0 #ffffff;
  margin-left: 20px;
  vertical-align: middle;
}
.nav-tabs button.tab-close-button:hover {
  color: #000000;
  cursor: pointer;
  opacity: 0.5;
  text-decoration: none;
}
.nav-tabs li.langtab-inactive a {
  margin-top: 8px;
  padding: 6px 15px;
  vertical-align: middle;
}
.nav-tabs li.langtab-inactive a::after {
  content: "+";
  color: #000000;
  font-size: 21px;
  line-height: 1;
  opacity: 0.2;
  text-shadow: 0 1px 0 #ffffff;
  margin-left: 5px;
  vertical-align: middle;
}
.nav-tabs li.langtab-inactive:hover a::after,
.nav-tabs li.langtab-inactive:focus a::after {
  opacity: 0.5;
}
.nav-tabs li.langtab-inactive button,
.nav-tabs li.langtab-inactive .langtab-text {
  display: none;
}

/* Dark Mode Anpassungen fuer Sprach-Tabs */
[data-theme="dark"] .nav-tabs {
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .nav-tabs > li > a {
  background-color: var(--panel-bg);
  color: var(--text-color-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .nav-tabs > li > a:hover,
[data-theme="dark"] .nav-tabs > li > a:focus {
  background-color: var(--submenu-bg);
  color: var(--text-color-primary);
}

[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a:focus {
  background-color: var(--panel-bg);
  color: var(--text-color-primary);
  border-color: var(--border-color) var(--border-color) var(--panel-bg);
}

[data-theme="dark"] .nav-tabs button.tab-close-button {
  color: var(--text-color-secondary);
  text-shadow: none;
}

[data-theme="dark"] .nav-tabs button.tab-close-button:hover {
  color: var(--text-color-primary);
}

[data-theme="dark"] .nav-tabs li.langtab-inactive a::after {
  color: var(--text-color-secondary);
  text-shadow: none;
  opacity: 0.7;
}

/* Dark Mode Anpassungen fuer TinyMCE */
[data-theme="dark"] .tox-tinymce {
  border-color: rgba(255, 255, 255, 0.02);
  background-color: var(--panel-bg);
  box-shadow: none;
}

[data-theme="dark"] .tox .tox-editor-header,
[data-theme="dark"] .tox .tox-toolbar__primary,
[data-theme="dark"] .tox .tox-menubar,
[data-theme="dark"] .tox .tox-statusbar,
[data-theme="dark"] .tox .tox-promotion {
  background-color: var(--panel-bg);
  border-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .tox .tox-editor-header {
  background-color: var(--panel-bg) !important;
  border-color: rgba(255, 255, 255, 0.02) !important;
  background-image: none;
  box-shadow: none !important;
}

[data-theme="dark"] .tox .tox-toolbar__primary,
[data-theme="dark"] .tox .tox-menubar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow: none;
}

[data-theme="dark"] .tox .tox-statusbar {
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  color: var(--text-color-secondary);
}

[data-theme="dark"] .tox .tox-toolbar__group:not(:last-of-type) {
  border-right: 1px solid rgba(255, 255, 255, 0.02);
  border-left: 1px solid rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .tox .tox-toolbar__divider {
  background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .tox .tox-edit-area__iframe {
  background-color: var(--panel-bg);
}

[data-theme="dark"] .tox .tox-tbtn,
[data-theme="dark"] .tox .tox-mbtn,
[data-theme="dark"] .tox .tox-tbtn__select-label,
[data-theme="dark"] .tox .tox-statusbar__path-item,
[data-theme="dark"] .tox .tox-statusbar__wordcount,
[data-theme="dark"] .tox .tox-promotion {
  color: var(--text-color-primary);
}

[data-theme="dark"] .tox .tox-icon svg,
[data-theme="dark"] .tox .tox-tbtn svg,
[data-theme="dark"] .tox .tox-mbtn svg {
  fill: var(--text-color-primary);
}

[data-theme="dark"] .tox .tox-tbtn,
[data-theme="dark"] .tox .tox-mbtn,
[data-theme="dark"] .tox .tox-tbtn--select {
  background-color: var(--panel-bg);
  border-color: var(--submenu-bg);
  color: var(--text-color-primary);
}

[data-theme="dark"] .tox .tox-tbtn:hover,
[data-theme="dark"] .tox .tox-tbtn:focus,
[data-theme="dark"] .tox .tox-mbtn:hover,
[data-theme="dark"] .tox .tox-mbtn:focus,
[data-theme="dark"] .tox .tox-tbtn--select:hover,
[data-theme="dark"] .tox .tox-tbtn--select:focus {
  background-color: var(--submenu-bg);
  border-color: var(--submenu-level2-bg);
}

[data-theme="dark"] .tox .tox-tbtn--enabled,
[data-theme="dark"] .tox .tox-tbtn--enabled:hover,
[data-theme="dark"] .tox .tox-tbtn--enabled:focus {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-on-primary-bg);
}

[data-theme="dark"] .tox .tox-tbtn--enabled svg {
  fill: var(--text-on-primary-bg);
}

[data-theme="dark"] .tox .tox-tbtn--disabled,
[data-theme="dark"] .tox .tox-mbtn--disabled,
[data-theme="dark"] .tox .tox-tbtn--disabled:hover,
[data-theme="dark"] .tox .tox-mbtn--disabled:hover {
  background-color: var(--panel-bg);
  border-color: var(--submenu-bg);
  color: var(--text-color-secondary);
  opacity: 0.7;
}

[data-theme="dark"] .tox .tox-split-button {
  border-color: var(--submenu-bg);
}

[data-theme="dark"] .tox .tox-split-button:focus,
[data-theme="dark"] .tox .tox-split-button:hover {
  border-color: var(--submenu-level2-bg);
}

[data-theme="dark"] .tox .tox-split-button__chevron {
  border-left: 1px solid rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .tox .tox-split-button:hover .tox-split-button__chevron,
[data-theme="dark"] .tox .tox-split-button:focus .tox-split-button__chevron {
  border-left: 1px solid rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .tox .tox-promotion-link {
  background-color: var(--submenu-bg);
  color: var(--link-color);
  border-color: var(--border-color);
}

[data-theme="dark"] .tox .tox-promotion-link:hover,
[data-theme="dark"] .tox .tox-promotion-link:focus {
  background-color: var(--submenu-level2-bg);
  color: var(--link-hover-color);
  border-color: var(--border-color);
}

/* Dark Mode Anpassungen fuer TinyMCE Menues */
[data-theme="dark"] .tox .tox-menu,
[data-theme="dark"] .tox .tox-collection {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color-primary);
}

[data-theme="dark"] .tox .tox-collection__item,
[data-theme="dark"] .tox .tox-collection__group {
  color: var(--text-color-primary);
}

[data-theme="dark"] .tox .tox-collection__item--active,
[data-theme="dark"] .tox .tox-collection__item--enabled {
  background-color: var(--primary-color);
  color: var(--text-on-primary-bg);
}

[data-theme="dark"] .tox .tox-collection__item--active svg,
[data-theme="dark"] .tox .tox-collection__item--enabled svg {
  fill: var(--text-on-primary-bg);
}

[data-theme="dark"] .tox .tox-collection__item:hover {
  background-color: var(--submenu-bg);
}

[data-theme="dark"] .tox .tox-collection__item:hover svg {
  fill: var(--text-color-primary);
}
.tab-content .inactive-pane-content {
  padding: 2em 0;
}
.tab-content .inactive-pane-content,
.tab-content .langtab-pane-inactive .active-pane-content {
  display: none;
}
.tab-content .langtab-pane-inactive .inactive-pane-content,
.tab-content .active-pane-content {
  display: block;
}
.xcms_formcontrol_wrapper {
  margin-top: 30px;
  margin-bottom: 30px;
}
.xcms_form_panel.toggle .panel-heading a:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  float: right;
  color: grey;
}
.xcms_form_panel.toggle .panel-heading a.collapsed:after {
  content: "\e080";
}
.form-group.dirty .form-control,
.form-group.dirty .mce-panel {
  border-color: #a9aef7;
}
.form-group.dirty label:not(.nodirty):after {
  content: "\e174";
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  position: relative;
  top: 1px;
  left: 5px;
  color: #B48704;
}
.xcms_button_status {
  margin-left: 10px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  position: relative;
  top: 1px;
}
.xcms_button_status.success:before {
  color: #3c763d;
  content: "";
}
.xcms_button_status:before {
  color: #a94442;
  content: "";
}
.xcms_help_block {
  position: relative;
}
/* vertically center glyphicon in formcontrol help block */
.xcms_help_block .glyphicon {
  font-size: 2em;
  margin-top: -0.5em;
  position: absolute;
  top: 50%;
}
/* leave space for the glyphiocn on the left hand side */
.xcms_help_block .helptext {
  display: inline-block;
  padding-left: 3em;
}
/**
 * Twitter bootstrap doesn't support horizontal forelements in a vertical form.
 * We do it by using col-md-* classes, but there are some adjustments needed:
 */
.form-control-horizontal label,
.form-control-inline label {
  margin-bottom: 0;
}
/* so that the static text behaves like a regular inline formelement */
.form-inline .xcms_formcontrol_static {
  display: inline-block;
  vertical-align: middle;
}

/* TAGS */
.tagify.form-control {
  height: auto;
}

.modalselect_datarow {
  cursor: pointer;
}

.btn {
      margin-bottom: 6px;
}

/* --- Button Theme Anpassungen --- */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-primary-bg);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-on-primary-bg);
}

[data-theme="dark"] .btn-default {
    background-color: var(--panel-header-bg);
    border-color: var(--border-color);
    color: var(--text-color-primary);
    background-image: none;
}

[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-default:focus,
[data-theme="dark"] .btn-default:active,
[data-theme="dark"] .btn-default.active,
[data-theme="dark"] .open > .dropdown-toggle.btn-default {
    background-color: var(--submenu-bg);
    border-color: var(--border-color);
    color: var(--text-color-primary);
}

/* --- NEU: Theme-Anpassungen für Formular-Steuerelemente --- */
.form-control {
    background-color: var(--form-control-bg);
    color: var(--form-control-text);
    border: 1px solid var(--form-control-border);
}

.form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 131, 0.25); /* Passender Schatten zur Primärfarbe */
}

/* Spezifische Anpassung für Platzhalter im Dark Mode */
[data-theme="dark"] .form-control::placeholder {
    color: var(--form-control-placeholder-color);
    opacity: 1; /* Wichtig, da Browser die Deckkraft oft reduzieren */
}

[data-theme="dark"] .form-control::-ms-input-placeholder { /* Edge */
    color: var(--form-control-placeholder-color);
}

[data-theme="dark"] .form-control::-moz-placeholder { /* Firefox */
    color: var(--form-control-placeholder-color);
    opacity: 1;
}

/* FORM STYLES END */

/* Dark Mode Anpassungen für Formular-Labels und Eingabefelder */
[data-theme="dark"] .form-group label {
    color: var(--text-color-primary);
}

[data-theme="dark"] .panel-body .form-group label {
    color: var(--text-color-primary);
}

[data-theme="dark"] .form-control {
    background-color: var(--form-control-bg);
    color: var(--form-control-text);
    border-color: var(--form-control-border);
}

[data-theme="dark"] .checkbox label {
    color: var(--text-color-primary);
}


legend {
  color: var(--text-color-primary);
}
/* v2.4 // backend-mod/css/_forms.css */