/**
 * SearchBuilder UI Overrides
 * CSS-only styling improvements for DataTables SearchBuilder extension.
 * Loaded after datatables.css to override default styles.
 * No JS changes — safe to add/remove without affecting functionality.
 */

/* Container — add a subtle background and border when open */
div.dtsb-searchBuilder {
    background: #f8f9fb;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px 14px 8px;
    margin-bottom: 10px;
}

/* Title row — tighten up */
div.dtsb-searchBuilder div.dtsb-titleRow {
    margin-bottom: 6px;
}
div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {
    font-weight: 700;
    font-size: 13px;
    color: #3a4a7a;
    padding-top: 6px;
}

/* Clear All button */
div.dtsb-searchBuilder div.dtsb-titleRow button.dtsb-clearAll {
    font-size: 12px;
    padding: 4px 12px;
    border: 1px solid #c00;
    border-radius: 4px;
    background: #fff;
    color: #c00;
    font-weight: 600;
    cursor: pointer;
}
div.dtsb-searchBuilder div.dtsb-titleRow button.dtsb-clearAll:hover {
    background: #fde8e8;
}

/* Group container */
div.dtsb-searchBuilder div.dtsb-group {
    margin-bottom: 6px;
    padding: 6px 8px 4px 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Criteria rows — better spacing */
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {
    margin-bottom: 6px;
    align-items: center;
    gap: 6px;
}

/* All dropdowns and inputs — consistent styling */
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #aaa;
    border-radius: 3px;
    background: #fff;
    height: 30px;
    margin-right: 6px;
    min-width: 80px;
}

/* Column selector — slightly wider */
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data {
    min-width: 120px;
    font-weight: 600;
}

/* Condition selector */
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition {
    min-width: 100px;
}

/* Value inputs */
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value,
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {
    min-width: 120px;
}

/* Input containers — fix alignment */
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {
    display: flex;
    align-items: center;
    gap: 4px;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input,
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select {
    height: 30px;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #aaa;
    border-radius: 3px;
}

/* Joiner text ("and") */
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsb-joiner {
    font-size: 11px;
    color: #666;
    font-weight: 600;
    margin: 0 4px;
}

/* Action buttons (delete, left, right) */
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {
    display: flex;
    align-items: center;
    gap: 4px;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {
    font-size: 12px;
    padding: 3px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    height: 28px;
    line-height: 1;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button:hover {
    background: #f0f0f0;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-delete {
    color: #c00;
    border-color: #daa;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-delete:hover {
    background: #fde8e8;
}

/* Logic container (AND/OR toggle) — make it more prominent */
div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {
    margin-top: 0;
    margin-left: -24px;
    z-index: 5;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border: 1px solid #888;
    border-radius: 3px;
    background: #e8ecf0;
    color: #3a4a7a;
    cursor: pointer;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic:hover {
    background: #d0d8e8;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {
    font-size: 10px;
    padding: 1px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

/* Add condition / Add group buttons */
div.dtsb-searchBuilder div.dtsb-group button.dtsb-add,
div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {
    font-size: 12px;
    padding: 4px 12px;
    border: 1px solid #2d7d2d;
    border-radius: 4px;
    background: #fff;
    color: #2d7d2d;
    font-weight: 600;
    cursor: pointer;
    margin-right: 6px;
}
div.dtsb-searchBuilder div.dtsb-group button.dtsb-add:hover,
div.dtsb-searchBuilder div.dtsb-group button.dtsb-search:hover {
    background: #e8f5e9;
}

/* Greyscale override — subtle border */
.dtsb-greyscale {
    border: 1px solid #bbb !important;
    border-radius: 3px !important;
}

/* Fix Foundation conflict — Foundation resets select/input sizing */
div.dtsb-searchBuilder select,
div.dtsb-searchBuilder input {
    margin-bottom: 0 !important;
    height: auto !important;
}