/** CUSTOM CSS FOR ALL PAGES **/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Layout
2.0 Tables
3.0 Forms
4.0 Accordions
5.0 Grids
--------------------------------------------------------------*/

:root {
    --bs-btn-disabled-bg:#d3d3d3;
    --bs-btn-disabled-border-color:#d3d3d3;
}

/*--------------------------------------------------------------
1.0 Layout
--------------------------------------------------------------*/

body { display:flex; flex-direction:column; min-height:100vh; }
main {flex: 1; display:flex; flex-direction:column; }
.page-header-title { margin-bottom:0; }

/*--------------------------------------------------------------
2.0 Tables
--------------------------------------------------------------*/

th.sortable { position:relative; vertical-align:middle; padding-right:20px; }
th.sortable:hover { cursor: pointer; }
th.sortable .fa-chevron-up,
th.sortable .fa-chevron-down { opacity: 0.2; position:absolute; right:3px; font-size:12px; }
th.sortable .fa-chevron-up { top: 20%; }
th.sortable  .fa-chevron-down { bottom: 20%; }
th.sortable.asc .fa-chevron-down { opacity: 1; }
th.sortable.desc  .fa-chevron-up { opacity: 1; }

.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(150, 150, 150, 0.04); }

.table .fa-circle-check, p .fa-circle-check { color:var(--bs-success); }
.table .fa-circle-exclamation, p .fa-circle-exclamation  { color:var(--bs-warning); }
.table .fa-circle-xmark, p .fa-circle-xmark  { color:var(--bs-danger); }

.pagination .page-link { color:var(--bs-primary); }
.pagination .active>.page-link { background-color:var(--bs-primary); border-color:var(--bs-primary); color:#fff; }
#paginationButtons .page-link { border-radius:0px;}
#nextPagination a { border-top-right-radius: var(--bs-pagination-border-radius); border-bottom-right-radius: var(--bs-pagination-border-radius); }
.page-item.disabled .page-link { background-color:#dedede; border-color:#dedede; }

/*--------------------------------------------------------------
3.0 Forms
--------------------------------------------------------------*/

.form-label { margin-bottom:0.2rem; color: rgb(52, 56, 61); font-weight:600; }
option:disabled { background-color:#d3d3d3; }

.btn.disabled { background-color:#d3d3d3 }
.extra-small { font-size:0.7rem; }

/*--------------------------------------------------------------
4.0 Accordions
--------------------------------------------------------------*/

/* default: collapsed state shows down */
.accordion-chevron .fa-chevron-up { display: none; }

/* when expanded (i.e. header NOT collapsed) show up, hide down */
.card-header:not(.collapsed) .accordion-chevron .fa-chevron-down { display: none; }
.card-header:not(.collapsed) .accordion-chevron .fa-chevron-up   { display: inline-block; }

/*--------------------------------------------------------------
5.0 Grids
--------------------------------------------------------------*/

.grid-cols-2-md-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .grid-cols-2-md-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}