/* Variables globales */
:root {
    --bs-primary: #006338; /* Verde ADIF */
    --bs-dark: #00292E;    /* Azul oscuro ADIF */
}

/* Botones primarios */
.btn-primary{
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #004d2a !important; /* tono más oscuro para hover */
    border-color: #004d2a !important;
}

.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}


/* Navbar oscura */
.navbar-dark {
    background-color: var(--bs-dark) !important;
}

/* Links en navbar */
.navbar-dark .navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--bs-primary) !important; /* hover en verde */
}

/* Ajustes para alertas */
.alert-primary {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.alert-dark {
    background-color: var(--bs-dark) !important;
    color: #fff !important;
}

/* Opcional: botones secundarios para contraste */
/* .btn-secondary {
    background-color: #004d2a !important;
    border-color: #004d2a !important;
    color: #fff !important;
} */

/* Author: Fran from dash-resources.com 
 * Originally posted in: https://dash-resources.com/improving-dash-datatables-simple-css-tweaks/
 */

/* ------------------------------------------------*/
/* Bootstrap style */

/* reset font styles on pagination buttons */
.dbc .dash-table-container .previous-next-container .page-number,
.dbc .dash-table-container .previous-next-container .page-number .current-page-container input.current-page {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    min-width: auto !important;
}

/* apply the same styles as .btn, .btn-sm, .btn-outline-primary */
.dbc .dash-table-container .previous-next-container {
    button {
        &.first-page,
        &.last-page,
        &.previous-page,
        &.next-page {
            display: inline-block;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            user-select: none;
            padding: 0.25rem 0.5rem;
            margin: 0 0.25rem;
            font-size: 0.875rem;
            line-height: 1.5;
            border-radius: 0.2rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            color: var(--bs-primary);
            border: 1px solid var(--bs-primary);
            background-color: transparent;

            &:hover {
                color: var(--bs-white) !important; /* override dbc.css */
                background-color: var(--bs-primary);
                border-color: var(--bs-primary);
            }

            &:focus {
                box-shadow: 0 0 0 0.25rem var(--bs-primary-rgb, rgba(13, 110, 253, 0.25));
            }

            &:active,
            &.active {
                color: var(--bs-white);
                background-color: var(--bs-primary);
                border-color: var(--bs-primary);
            }

            &:disabled,
            &.disabled {
                color: var(--bs-primary);
                background-color: transparent;
                border-color: var(--bs-primary);
                opacity: 0.65;
                pointer-events: none;
            }
        }
    }
}

/* ------------------------------------------------*/
/* Header style 
 * Notice we use !important to override the default style and those written in the dbc.css file
 */

/* make the heading bold and with a gray background */
.header-style .dash-table-container th {
    background-color: var(--bs-gray-200) !important;
}

.header-style .dash-table-container th .column-header-name {
    font-weight: bold;
}

.header-style .dash-table-container th input::placeholder {
    /* overrides back a style set in dbc.css */
    background-color: transparent !important;
}

/* better homogeneous styling of buttons */
.header-style .column-actions {
    /* let us breath! */
    gap: 0.4em; 
    margin-right: 0.5em;
}

.header-style .column-actions > span {
    /* align components vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-style .dash-table-container th input[type="radio"],
.header-style .dash-table-container th input[type="checkbox"] {
    /* fix inconsistent color and size */
    width: 1rem;
    height: 1rem;
    opacity: 0.6;
}

.header-style .dash-table-container th input[type="radio"]:checked,
.header-style .dash-table-container th input[type="checkbox"]:checked {
        /* when checked, reset opacity */
    opacity: 1;
}

.header-style .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input.dash-filter--case--insensitive {
    /* avoid column width size change when clicking */
    border-style: solid;
    border-width: 2px;
    border-color: transparent;
}

/* ------------------------------------------------*/
/* Alternating row background */
.striped-style .dash-table-container td:not(.cell--selected) {
    background-color: transparent !important;
}

.striped-style .dash-table-container tr:nth-child(odd) {
    background-color: var(--bs-gray-100) !important;
}

.striped-style .dash-table-container tr:nth-child(even) {
    background-color: var(--bs-body-bg) !important;
}

/* ------------------------------------------------*/
/* Hover row background */
.hover-style .dash-table-container tr:hover td:not(.cell--selected)  {
    background-color: var(--bs-gray-200) !important;
}

/* ------------------------------------------------*/
/* Selected row style */

/* apply style to selected cell */
.selection-style .dash-table-container tr:has(td.cell--selected) td.cell--selected {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    border: 1px solid var(--bs-primary) !important;
    outline: none !important;
}

/* apply styles to the other cells of selected rows */
.selection-style .dash-table-container tr:has(td.cell--selected) td {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    border: 1px solid #d0d0d0 !important;
}

/* remove border between selected cells (vertically) */
.selection-style .dash-table-container tr:has(td.cell--selected) + tr:has(td.cell--selected) td.cell--selected {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    border-top: none !important;
}

/* remove border between selected cells (horizontally) */
.selection-style .dash-table-container tr:has(td.cell--selected) td.cell--selected + td.cell--selected {
    border-left: none !important;
}

/* apply style to checked rows */
.selection-style .dash-table-container tr:has(input:checked) td {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    border: 1px solid #d0d0d0 !important;
}

/* add dbc styles to selection-style */
body .selection-style .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}
.selection-style .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    border-collapse: inherit;
    border-spacing: unset;
}