/* Bootstrap overrides for TagFinder color scheme */
/*https://www.w3schools.com/colors/colors_picker.asp*/

:root {
    --color-bg: #F5F1EB; /* warm beige */
    --color-surface: #FFFFFF; /* white cards */
    --color-primary: #4A84B3; /* blue */
    --color-primary-hover: #5c91bc; /* lighter blue */
    --color-text: #3A3A3A; /* text (dark but not black) */
}

.alert-info {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    border-color: #eee7dd;
}

.btn {
    background: var(--color-primary);
    padding: 8px 12px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    margin: 2px;
}

    .btn:hover {
        color: white;
        background: var(--color-primary-hover) !important;
        transition: filter 0.2s ease;
    }

    .btn.active:focus {
        color: white;
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn:active {
        background-color: var(--color-primary) !important;
        color: white !important;
    }

.bg-warning {
    background-color: #D9822B !important;
    color: white;
}

.list-group-item-action.bg-warning:hover {
    background-color: #dd8f41 !important;
    color: white !important;
}

.bg-dark {
    background: var(--color-primary) !important;
}

    .bg-dark:hover {
        background: var(--color-primary) !important;
    }

    .bg-dark:active {
        background: var(--color-primary) !important;
    }

.btn-dark {
    background: var(--color-primary) !important;
    border-color: #3f5a75 !important;
}

.bg-light {
    background-color: var(--color-bg) !important;
}

.btn-light {
    background-color: #d6d6d6 !important;
}

.parent {
    font-weight: bold;
    font-size: larger;
    background-color: lightgrey;
}

.option.selected, .option.selected.active {
    background-color: var(--color-primary-hover) !important;
    color: #fff;
}

/*datatables overrides*/

.page-item.active .page-link {
    background: var(--color-primary);
    border-color: #3f5a75
}

@media screen and (max-width: 768px) {
    .btn {
        margin: 5px 15px 5px 0;
        padding: 10px 16px;
        font-size: 18px;
    }

    table tbody {
        font-size: 18px;
    }
}