/*********************************************************************
 *                                                                   *
 * Purpose: Defines the styles for some commonly used html elements  *
 *                                                                   *
 * What it Contains:                                                 *
 *      - positioning of the buttons and filter dropdowns for the    *
 *          graphs                                                   *
 *********************************************************************/


:root {
    /** colour theme **

    Note: 
      - The colours are based off Android's Material colour theme:
         https://m2.material.io/develop/android/theming/color
         https://m2.material.io/design/color/the-color-system.html

    *******************/
    --fontColour: #333333;
    --background: #ffffff;
    --surface: #ffffff;
    --secondarySurface: #fbfcf8;
    --error: #ff0000;
    --onBackground: #000000;
    --onSurface: #000000;
    --onSecondarySurface: #000000;
    --onError: #ffffff;
    --primary: #26374a;
    --primaryVariant: #3B4B5C;
    --onPrimary: #ffffff;
    --primaryBorderColour: #7D828B;
    --primaryHover: #444444;
    --onPrimaryHover: #ffffff;
    --secondary: #335075;
    --onSecondary: #ffffff;
    --secondaryHover: #26374a;
    --onSecondaryHover: #f2f2f2;
    --secondaryBorderColour: #bbbfc5;
    --secondaryBgColour: #cfd1d5;
    --tertiary: #d7faff;
    --tertiaryBorderColour: #269abc;
    --onTertiary: #333333;
    --link: #284162;
    --headerTitleColor: #000000;
    --tableBorderColor: #ddd;

    --smBorderRadius: 5px;
    --borderRadius: 10px;

    --fastTransition: all 0.25s ease-in-out;
    --medTransition: all 0.5s ease-in-out;
    --slowTransition: all 0.75s ease-in-out;
    --defaultTransition: var(--medTransition);
}

.searchTab {
    width: 20%;
    font-size: 20px;
    font-weight: bold;
}


/* =========== Buttons ================================ */

.btn-secondary {
    --bs-btn-color: var(--fontColour);
    --bs-btn-bg: var(--secondaryBgColour);
    --bs-btn-border-color: var(--secondaryBorderColour);
    --bs-btn-hover-color: var(--onSecondaryHover);
    --bs-btn-hover-bg: var(--secondaryHover);
    --bs-btn-hover-border-color: var(--secondaryBorderColour);
    --bs-btn-active-color: var(--onSecondaryHover);
    --bs-btn-active-bg: var(--secondaryHover);
    --bs-btn-active-border-color: var(--secondaryBorderColour);
    --bs-btn-disabled-color: var(--onSecondary);
    --bs-btn-disabled-bg: var(--secondary);
    --bs-btn-disabled-border-color: var(--secondaryBorderColour);
    transition: var(--defaultTransition);
}

.btn.btn-secondary:hover {
    color: var(--onSecondaryHover) !important;
}

.btn.btn-secondary:active {
    color: var(--onSecondaryHover) !important;
}

.btn.btn-secondary:focus {
    color: var(--onSecondaryHover) !important;
}

/* ==================================================== */
/* ======== Datatables =============================== */

.tableContainer {
    background-color: var(--surface);
    padding: 10px;
    border-radius: var(--smBorderRadius);
}

.tableContainer .dataTable, .tableContainer .dt-scroll-headInner {
    width: 100% !important;
}

/* ----- sort icons ----- */

/* Previously displayed two separate icons, hide first one */
.dt-column-order {
    top: 0.18em !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-size: 1.3em !important;
}
 
.dt-column-order:before, .dt-column-order:after {
    content: "" !important;
}


/* font-family and font-weight needed for Font Awesome icons to display by CSS */
.dt-column-order::before {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
 
/* Only display in after */
.dt-orderable-asc .dt-column-order::before
{
    /*right:    0 !important;*/
    content: "\f0dc" !important;
    color: var(--onPrimary) !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: 0.3em !important;
    line-height: unset !important;
    padding-left: 5px;
}

/* sort ascending */
.dt-ordering-asc span.dt-column-order::before {
    content: "\f161" !important;
    color: var(--onPrimary) !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: 0.3em !important;
    line-height: unset !important; /* DataTable 1.12 set to 9px */
    padding-left: inherit;
}

/* sort descending */
.dt-ordering-desc span.dt-column-order::before {
    content: "\f160" !important;
    color: var(--onPrimary) !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: 0.3em !important;
    line-height: unset !important; /* DataTable 1.12 set to 9px */
    padding-left: inherit;
}

/* ---------------------- */

.dataTable th {
    background-color: var(--primary) !important;
    color: var(--onPrimary);
    text-align: left !important;
    padding: 10px 5px 10px 5px;
}

.dataTable th:first-child {
    border-radius: var(--smBorderRadius) 0 0 0;
}

.dataTable th:last-child {
    border-radius: 0 var(--smBorderRadius) 0 0;
}

.dtrg-group th {
    background-color: var(--primaryVariant) !important;
}

.dtrg-group th:first-child {
    border-radius: 0;
}

.dtrg-group th:last-child {
    border-radius: 0;
}

.dataTable td {
    color: var(--fontColour);
    text-align: left !important;
    padding-left: 5px;
    border-top: 1px solid var(--tableBorderColor);
    border-left: 1px solid var(--tableBorderColor);
    vertical-align: top;
    line-height: 1.4375;
}

.dataTable td:last-child {
    border-right: 1px solid var(--tableBorderColor);
}

.dataTable tr:nth-child(even) td {
    background-color: #ffffff !important;
    opacity: 0.95;
    transition: var(--fastTransition);
}

.dataTable tr:nth-child(odd) td {
    background-color: #f5f5f5 !important;
    opacity: 0.95;
    box-shadow: none !important;
    transition: var(--fastTransition);
}

.dt-container .form-select {
    font-size: 16px;
}

.dataTable.clickableTable tr:hover td {
    filter: brightness(0.8);
    cursor: pointer;
}

/* Flip the scroll container upside down */
.dataTables_scroll {
    transform: rotateX(180deg);
}

/* Flip the inner elements back so the text reads normally */
.dataTables_scrollHead, 
.dataTables_scrollBody, 
.dataTables_scrollFoot {
    transform: rotateX(180deg);
}

#foodSearchTable.foodSelected td {
    background-color: var(--secondary) !important;
    color: white;
}

/* ----- row group ----- */
/* Make row group horizontal sticky */

tr.dtrg-group th {
    padding: 0 !important;
}

tr.dtrg-group th .dtrg-sticky-window {
    position: sticky !important;
    left: 0;
    width: max-content;
    max-width: calc(100vw - 40px);
    
    display: inline-flex !important;
    justify-content: left;
    align-items: center;
    padding: 8px 5px;
    box-sizing: border-box;
}

tr.dtrg-group th .dtrg-sticky-text {
    display: inline-block;
    width: max-content;
    text-align: left;
    white-space: nowrap;
}

/* ---------------------- */

/* =================================================== */
/* ======== Pagination =============================== */

.pagination {
    --bs-pagination-color: var(--primary);
    --bs-pagination-bg: var(--onPrimary);
    --bs-pagination-border-color: var(--primaryBorderColour);
    --bs-pagination-hover-color: var(--onPrimaryHover);
    --bs-pagination-hover-bg: var(--primary);
    --bs-pagination-hover-border-color: var(--onPrimaryHover);
    --bs-pagination-active-bg: var(--primaryHover);
    --bs-pagination-active-color: var(--onPrimaryHover);
    --bs-pagination-active-border-color: var(--onPrimaryHover);
    --bs-pagination-focus-color: var(--primaryHover);
    --bs-pagination-focus-bg: var(--onPrimaryHover);
    --bs-pagination-disabled-bg: var(--secondaryBg);
    --bs-pagination-disabled-border-color: var(--secondaryBorderColour);
    --bs-pagination-disabled-color: var(--secondary);
    display: flex;
}

.dt-paging-button.disabled {
    display: block !important;
}

.dt-paging-button .page-link {
    font-size: 16px !important;
}

/* =================================================== */
/* =============== Cards ============================= */

.card {
    border-left-width: 8px;
}

.border-primary {
    border-color: var(--primary) !important;
}

/* =================================================== */
/* =============== Checkbox ========================== */

.checkbox input[type="checkbox"] {
    position: initial !important;
    margin-left: 0 !important;
    transition: var(--fastTransition);
}

.checkbox input[type="checkbox"]:hover {
    cursor: pointer;
}

/* =================================================== */
/* =============== MultiSelect ======================= */

/* Force the inner list container to take up full horizontal space */
.bootstrap-select .dropdown-menu .inner[id^="bs-select-"] {
    width: 100% !important;
    min-width: 100% !important;
}

.singleOptSelect .bs-select-all {
    display: none;
}

.singleOptSelect .bs-deselect-all {
    width: 100% !important;
    border-radius: var(--smBorderRadius) !important;
}

.bootstrap-select > .dropdown-toggle.btn {
    color: var(--secondary);
    background-color: var(--surface);
    transition: var(--defaultTransition);
    border: 1px solid #ccc;
    padding: 0 10px;
    min-height: 37px;
}

.bootstrap-select > .dropdown-toggle.btn:hover {
    color: var(--secondaryHover);
}

.bs-deselect-all {
    --bs-btn-bg: var(--primary);
    --bs-btn-color: var(--onPrimary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-active-bg: var(--surface);
}

.dropdown-toggle {
    --bs-btn-color: var(--fontColour);
}

.bootstrap-select .form-control {
    margin-bottom: 15px;
}

.bootstrap-select .bs-actionsbox {
    overflow: visible !important;
}

.bootstrap-select .bs-actionsbox .btn-group {
    display: flex !important;
    align-items: center !important;
}

.bootstrap-select .bs-actionsbox .btn-group .btn {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    line-height: normal !important;
    height: auto !important;
}

/* =================================================== */
/* ============ MultiSelect Autocomplete ============= */

.choices__inner {
    padding: 0px 3px;
    min-height: 37px !important;
    background-color: var(--background) !important;
}

.choices__input {
    margin: 0 !important;
    padding-top: 0px !important;
    background-color: var(--background) !important;
}

.choices__button {
    margin: 0 0 0 4px !important;
}

.choices__list--multiple .choices__item {
    padding: 0 0 0 5px !important;
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: var(--onPrimary) !important;
    margin-bottom: 0px !important;
    line-height: 1.65em;
}

.choices__list--multiple .choices__button {
    border-left: 1px solid var(--onPrimary) !important;
}

/* =================================================== */


.leftSearchTab {
    border-radius: var(--borderRadius) 0 0 var(--borderRadius);
}

.middleSearchTab {
    border-radius: 0;
}

.rightSearchTab {
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
}

.dropdownInputContainer {
    display: flex;
    flex-direction: column;
}

#foodResultCard .servingSizeContainer label, #foodResultCard .columnOverrideContainer label {
    font-size: 20px;
}

#foodResultCard .card-body {
    padding-left: 20px;
}

.foodResultContainer {
    border-radius: var(--borderRadius);
}

#nutrientTable_wrapper .dataTables_scrollHeadInner,
#nutrientTable_wrapper .dataTables_scrollHeadInner table,
#nutrientTable {
    width: auto !important;
}

#nutrientTable th, 
#nutrientTable td,
#nutrientTable_wrapper th {
    min-width: 160px !important;
}

.dataTable td.nutrientPortionValCell {
    text-align: center !important;
}


/* For small phone screeens */
@media screen and (max-width: 600px) {
    body { 
        font-size: calc(0.8em + 1vw) !important; 
    }

    main {
        font-size: calc(0.8em + 1vw) !important;
    }
    
    h1 {
        font-size: calc(1.7em + 1vw) !important; 
    }
    
    h3 {
        font-size: calc(1em + 1vw) !important; 
    }

    .btn {
        font-size: calc(0.6em + 1vw) !important;
        margin: 3px 0;
    }

    .searchTab {
        width: 30%;
        font-size: calc(0.8em + 1vw) !important;
    }

    .dt-container .form-select {
        font-size: calc(0.6em + 1vw) !important;
    }

    #foodResultCard .servingSizeContainer label  {
        font-size: calc(0.6em + 1vw) !important;
    }

    .dt-paging-button .page-link {
        font-size: calc(0.6em + 1vw) !important;
    }

    .dropdown-menu {
        font-size: calc(0.7em + 1vw) !important;
    }
}


/* Extra larger break points for very wide screens */
@media screen and (min-width: 1600px) {
  .foodTableContainer {
    width: 1520px;
  }
}

@media screen and (min-width: 1800px) {
  .foodTableContainer {
    width: 1720px;
  }
}

@media screen and (min-width: 2000px) {
  .foodTableContainer {
    width: 1920px;
  }
}