/**
 * Zentrale CSS-Stile für Filter-Panels in der GTS-Anwendung
 * Verhindert Code-Verdoppelung und ermöglicht konsistente Styling
 */

/* ===== Standard Filter-Panel Styling ===== */
.gts-filter-panel,
.listen-filter-panel,
.import-filter-panel,
.settings-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* Grüner Oberer Rand */
.gts-filter-panel::before,
.listen-filter-panel::before,
.import-filter-panel::before,
.settings-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #72c02c;
    border-radius: 8px 8px 0 0;
}

/* Form Groups in Filter Panels */
.gts-filter-panel .form-group,
.listen-filter-panel .form-group,
.import-filter-panel .form-group {
    margin-bottom: 0;
}

/* Labels in Filter Panels */
.gts-filter-panel label,
.listen-filter-panel label,
.import-filter-panel label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

/* Control Labels */
.gts-filter-panel .control-label,
.listen-filter-panel .control-label,
.import-filter-panel .control-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

/* ===== Settings Header Spezifisch ===== */
.settings-header h2 {
    color: #495057;
    font-weight: 600;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.settings-header h2 i {
    margin-right: 10px;
    color: #72c02c;
}

/* ===== Tab Navigation Styling ===== */
.tab-v1 .nav-tabs {
    border-bottom: 2px solid #dee2e6;
    background: #fff;
    border-radius: 8px;
}

.tab-v1 .nav-tabs li a {
    color: #495057;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 12px 20px;
}

.tab-v1 .nav-tabs li a:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #72c02c !important;
}

.tab-v1 .nav-tabs li.active a {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #72c02c;
    border-bottom-color: #fff;
    color: #72c02c;
    font-weight: 600;
}

/* ===== Tab Content ===== */
.tab-content {
    background: #fff;
    padding: 20px;
    border-radius: 0 0 8px 8px;
    border: 2px solid #dee2e6;
    border-top: 1px solid #dee2e6;
}

.tab-pane {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== Form Controls ===== */
.sky-form .form-group {
    margin-bottom: 15px;
}

.sky-form .control-label {
    font-weight: 600;
    color: #495057;
    display: block;
    margin-bottom: 8px;
}

.sky-form .form-control {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 12px;
    transition: all 0.3s ease;
}

.sky-form .form-control:focus {
    border-color: #72c02c;
    box-shadow: 0 0 0 0.2rem rgba(68, 157, 68, 0.25);
}

/* ===== Button Styling ===== */
.btn-success {
    background-color: #72c02c;
    border-color: #72c02c;
}

.btn-success:hover {
    background-color: #3d8b3d;
    border-color: #3d8b3d;
}

/* ===== Import Info Box ===== */
.import-info-box {
    background: #fff;
    border-left: 4px solid #72c02c;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.import-info-box p {
    margin-bottom: 10px;
}

.import-info-box a {
    display: inline-block;
    margin-right: 15px;
}

.import-info-box b {
    color: #495057;
}

/* ===== Import Stats Box ===== */
.import-stats-box {
    background: #fff;
    border: 1px solid #dee2e6;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
}

/* ===== Modal Header Gradient ===== */
.modal-header-gradient {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #72c02c;
}

/* ===== Panel Header Gradient ===== */
.panel-header-gradient {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

/* ===== Settings Form Container ===== */
.settings-form-container {
    background: #f0f0f0;
    padding: 30px;
    border-radius: 0 0 8px 8px;
    margin-top: -2px;
}

/* ===== Settings Tabs Wrapper ===== */
.settings-tabs-wrapper {
    background: #f0f0f0;
    padding: 0;
}

.settings-tabs-wrapper .tab-v1 {
    background: #f0f0f0;
}

.settings-tabs-wrapper .nav-tabs {
    background: #f0f0f0;
    border-bottom: 2px solid #72c02c;
    padding: 0 30px;
    margin: 0;
}

.settings-tabs-wrapper .nav-tabs li {
    margin-bottom: -2px;
}

.settings-tabs-wrapper .nav-tabs li a {
    color: #495057;
    background: #e0e0e0;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 12px 20px;
    margin-right: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.settings-tabs-wrapper .nav-tabs li a:hover {
    background: #d0d0d0;
    color: #72c02c;
}

.settings-tabs-wrapper .nav-tabs li.active a {
    background: #f0f0f0;
    border-color: #72c02c #72c02c #f0f0f0 #72c02c;
    color: #72c02c;
    font-weight: 600;
}

.settings-tabs-wrapper .tab-content {
    background: #f0f0f0;
    padding: 30px;
    border: none;
    border-radius: 0 0 8px 8px;
}

/* ===== Dropdown Overflow Fix ===== */
.tab-content {
    overflow: visible !important;
    z-index: 1000;
}

.tab-pane {
    overflow: visible !important;
}

.row {
    overflow: visible !important;
}

.form-group {
    overflow: visible !important;
}

/* ===== Select Dropdown Styling ===== */
.form-control {
    position: relative;
    z-index: 1;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    min-height: 38px;
    padding: 8px 12px;
    max-width: 100%;
    width: 100%;
}

.form-control option {
    padding: 10px 12px;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.5;
}

.form-control:focus {
    position: relative;
    z-index: 10;
}

/* ===== Form Group Spacing ===== */
.form-group .form-control {
    margin-bottom: 0;
}

/* ===== Tab Content Form Control ===== */
.tab-content .form-control,
.tab-pane .form-control {
    width: 100%;
    overflow: visible;
}

/* SlimSelect Dropdown */
.ss-wrapper {
    position: relative;
    z-index: 1000;
}

.ss-wrapper .ss-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10001;
}

/* ===== Container Overflow Fixes ===== */
.container-fluid {
    overflow: visible !important;
}

.container {
    overflow: visible !important;
}

/* ===== Modal Dropdown Fix ===== */
.modal-body {
    overflow: visible !important;
}

.modal {
    z-index: 1040;
}

.modal .form-control {
    z-index: 1041;
}