/**
 * Query Builder Custom Styles
 * Wszystkie style dla jQuery QueryBuilder w jednym miejscu
 * Nadpisuje domyślne style biblioteki i integruje z Tabler UI
 */

/* ==================================================================
   RESET I IZOLACJA OD TABLER
   ================================================================== */

/* Selektywne nadpisanie stylów Tabler dla kontenera QueryBuilder */
#query-builder-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #212529;
    display: block;
}

/* Import podstawowych stylów Bootstrap tylko dla QueryBuilder */
#query-builder-wrapper * {
    box-sizing: border-box;
}

/* ==================================================================
   PRZYCISKI
   ================================================================== */

#query-builder-wrapper .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    cursor: pointer;
}

#query-builder-wrapper .btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

#query-builder-wrapper .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

#query-builder-wrapper .btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

#query-builder-wrapper .btn-success:hover {
    background-color: #157347;
    border-color: #146c43;
}

#query-builder-wrapper .btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

#query-builder-wrapper .btn-danger:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

#query-builder-wrapper .btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* ==================================================================
   FORMULARZE
   ================================================================== */

#query-builder-wrapper .form-control,
#query-builder-wrapper .form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#query-builder-wrapper .form-control:focus,
#query-builder-wrapper .form-select:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#query-builder-wrapper select.form-control {
    min-width: 150px;
    width: auto;
    display: inline-block;
}

#query-builder-wrapper input.form-control {
    min-width: 200px;
    width: auto;
    display: inline-block;
}

/* ==================================================================
   GŁÓWNY KONTENER QUERY BUILDER
   ================================================================== */

#query-builder {
    margin: 0; /* Usuń margines - karta już ma odpowiedni spacing */
    padding: 1rem; /* Użyj rem units jak Tabler */
    background: #f8f9fa;
    border-radius: var(--tblr-border-radius, 0.375rem); /* Użyj zmiennych Tabler */
    border: 1px solid var(--tblr-border-color, #dee2e6);
}

/* ==================================================================
   GRUPY I REGUŁY
   ================================================================== */

#query-builder .rules-group-container {
    border: 1px solid var(--tblr-border-color, #dee2e6);
    padding: 1rem; /* Użyj rem units jak Tabler */
    margin: 0.75rem 0; /* Użyj rem units */
    background: #fff8e2; /* Kremowo-żółte tło dla głównych grup */
    border-radius: var(--tblr-border-radius, 0.375rem);
    box-shadow: var(--tblr-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)); /* Użyj zmiennych Tabler */
}

#query-builder .rules-group-container:hover {
    box-shadow: var(--tblr-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)); /* Większy cień przy hover */
}

#query-builder .rule-container {
    border-left: 3px solid #0d6efd;
    padding: 10px;
    margin: 10px 0;
    background: #f8f9fa;
    border-radius: 0 4px 4px 0;
    transition: all 0.2s ease;
}

#query-builder .rule-container:hover {
    background: #e9ecef;
    border-left-color: #0b5ed7;
}

#query-builder .rules-group-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

#query-builder .group-conditions {
    display: inline-block;
    margin-right: 10px;
}

/* ==================================================================
   ELEMENTY REGUŁY
   ================================================================== */

#query-builder .rule-filter-container,
#query-builder .rule-operator-container,
#query-builder .rule-value-container {
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle;
}

#query-builder .rule-filter-container label,
#query-builder .rule-operator-container label,
#query-builder .rule-value-container label {
    display: none; /* Ukryj etykiety dla czystszego wyglądu */
}

/* ==================================================================
   GRUPY PRZYCISKÓW
   ================================================================== */

#query-builder .btn-group {
    display: inline-flex;
    vertical-align: middle;
    gap: 2px;
}

#query-builder .btn-group .btn {
    margin: 0;
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}

/* Przyciski AND/OR */
#query-builder .group-conditions .btn-group label {
    margin: 0;
}

#query-builder .group-conditions .btn-group input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

#query-builder .group-conditions .btn-group input[type="radio"]:checked + label {
    background-color: #198754 !important; /* Zielony dla aktywnego AND/OR jak na zrzucie */
    color: white !important;
    border-color: #198754 !important;
}

/* ==================================================================
   PRZYCISKI AKCJI
   ================================================================== */

/* Przyciski Add rule - zielony jak na zrzucie ekranu */
#query-builder button[data-add="rule"] {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
}

#query-builder button[data-add="rule"]:hover {
    background-color: #157347 !important;
    border-color: #146c43 !important;
}

/* Przyciski Add group - niebieski jak na zrzucie ekranu */
#query-builder button[data-add="group"] {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: white !important;
}

#query-builder button[data-add="group"]:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

#query-builder button[data-delete="rule"],
#query-builder button[data-delete="group"] {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

#query-builder button[data-delete="rule"]:hover,
#query-builder button[data-delete="group"]:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

/* ==================================================================
   OPERATORY NOT
   ================================================================== */

#query-builder .group-conditions label.btn-xs:last-child {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
    margin-left: 10px;
}

#query-builder .group-conditions input[type="checkbox"]:checked + label.btn-xs:last-child {
    background-color: #f76707 !important; /* Pomarańczowy dla NOT jak na zrzucie */
    border-color: #f76707 !important;
    color: white !important;
}

/* ==================================================================
   RESPONSYWNOŚĆ
   ================================================================== */

@media (max-width: 768px) {
    #query-builder-wrapper select.form-control,
    #query-builder-wrapper input.form-control {
        min-width: 100px;
        max-width: 150px;
    }
    
    #query-builder .rule-filter-container,
    #query-builder .rule-operator-container,
    #query-builder .rule-value-container {
        display: block;
        margin: 5px 0;
    }
    
    #query-builder .btn-group {
        flex-wrap: wrap;
    }
}

/* ==================================================================
   ANIMACJE
   ================================================================== */

#query-builder .rule-container {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==================================================================
   TOOLTIPS I POMOCE
   ================================================================== */

#query-builder [title] {
    position: relative;
    cursor: help;
}

#query-builder [title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* ==================================================================
   SPECJALNE PRZYPADKI
   ================================================================== */

/* Dla reguł z funkcjami (np. LENGTH) */
#query-builder .rule-container.has-function {
    border-left-color: #ffc107;
    background: #fff3cd;
}

#query-builder .rule-container.has-function::before {
    content: "f(x)";
    position: absolute;
    left: -25px;
    top: 10px;
    background: #ffc107;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 10px;
    font-weight: bold;
}

/* Dla złożonych reguł SQL */
#query-builder .complex-sql-notice {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

#query-builder .complex-sql-notice::before {
    content: "⚠️";
    margin-right: 8px;
}

/* ==================================================================
   CIEMNY MOTYW (opcjonalnie)
   ================================================================== */

.dark-mode #query-builder {
    background: #1a1a1a;
    border-color: #333;
}

.dark-mode #query-builder .rules-group-container {
    background: #2a2a2a;
    border-color: #444;
}

.dark-mode #query-builder .rule-container {
    background: #333;
    color: #fff;
}

.dark-mode #query-builder .form-control,
.dark-mode #query-builder .form-select {
    background: #2a2a2a;
    color: #fff;
    border-color: #444;
}

#query-builder .pull-right {
    float: right;
}
#query-builder .btn-group .btn {
    padding: 2px 10px;
}
label.btn.btn-xs.btn-primary.active {
    background-color: green !important;
    opacity: 1;
}
#query-builder .group-conditions label.btn-xs:last-child {
    margin-left: 0;
    background-color: #ccc;
    border-color: transparent;
}
button.btn.btn-xs.btn-default {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    padding-left: 10px !important;
}
#query-builder .btn-group .btn i.glyphicon{
    width: 13px;
    margin: -2px;
    height: 13px;
    border: 1px solid #ddd;
    margin-right: 5px;
    display: inline-block;
}
#query-builder .btn-group .btn.active i.glyphicon {
    border-radius: 50px;
    border-color: #f76707;
    background-color: #f76707;
}
#query-builder .rules-group-container {
    margin: 0;
    background-color: #fff8e2;
}
#query-builder .rules-group-header {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
#query-builder .rule-container {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}
.query-builder .rules-list>::after, .query-builder .rules-list>::before{
    height: calc(60% + 4px);
}
#query-builder .rules-list .rules-group-container {
    background-color: #d5e4ff;
}
#query-builder .group-conditions label.btn.btn-xs.btn-primary{

    border-color: transparent;background-color: #ccc;
    border-color: transparent;
}
#query-builder .group-conditions label.btn.btn-xs.btn-primary.active {
    color: #fff;
}