@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rubik:ital,wght@0,300..900;1,300..900&family=Teachers:ital,wght@0,400..800;1,400..800&display=swap');

/* Chart overrides go in report.css! */


/* GLOBALS!!! */
:root,
:root[data-theme=light] {
    
    --bg-background: hsl(0, 0%, 100%);
    --bg-primary: hsl(160, 73%, 47%);

    --bg-secondary: hsl(120, 100%, 37%);
    --bg-tertiary: hsl(182, 32%, 49%);

    --navbar-background: hsl(160, 73%, 47%);
    --navbar-color: hsl(0, 0%, 100%);

    --body-text-color:var(--bulma-strong-color); 
    --bg-hero-background: linear-gradient(180deg, var(--navbar-background), hsl(133, 43%, 55%));

    --header-font: 'Rubik', sans-serif;
    --callout-font: 'Teachers', sans-serif;
    --link-font: 'Roboto Mono', sans-serif;

    --message-body: hsl(0, 0%, 100%);
    --message-header: hsl(160, 73%, 47%);
    --message-header-color: hsl(0, 0%, 100%);

    --tag-bg: hsl(159.6, 100%, 90.8%);
    --tag-bg-startdate: hsla(160, 73%, 47%, 0.33);
    --tag-bg-enddate: hsla(120, 100%, 37%, 0.33);
    --tag-color: hsl(152, 100%, 30%);

    --hero-reports-bg: hsl(160, 100%, 89%);
    --hero-reports-number-color: hsl(152, 100%, 30%);

    /* Bulma Overrides */
    --bulma-arrow-color: hsl(0, 0%, 100%);
    --bulma-tabs-link-active-border-bottom-color: var(--bg-primary);
    --bulma-tabs-boxed-link-active-background-color: var(--bg-primary);
    --bulma-tabs-link-active-color: var(--bg-primary);
    --bulma-navbar-dropdown-arrow: hsl(0, 0%, 100%);

    /* Highcharts Overrides */
    --highcharts-background-color: var(--message-body) !important;
    --highcharts-neutral-color-80: rgb(48,48,48);


}

:root[data-theme=dark] {
    --bg-background: hsl(270, 8%, 16%);
    --hero-reports-bg: hsl(112.2, 75%, 14.1%);
    --hero-reports-number-color: hsl(152, 70%, 52%);
    --bg-primary: hsl(146.2, 100%, 24.7%);

    --message-header: hsl(146.2, 100%, 24.7%);
    --bulma-tabs-link-color: white;

    --bulma-primary-h:160;
    --bulma-primary-s:100%;
    --bulma-primary-l:30%;
    --navbar-background: hsl(103, 71%, 30%);
    --bg-hero-background: linear-gradient(180deg, var(--navbar-background), hsl(141.1, 40.7%, 35.7%) );

    --tag-color: hsl(152, 77%, 60%);
    --bulma-strong-color: white;

    --bulma-tabs-boxed-link-active-background-color: var(--bg-primary);

    --highcharts-background-color: rgb(48, 48, 48) !important;
}

[data-theme=light] {
    .highcharts-axis-labels,
    .highcharts-legend-item > text, .highcharts-legend-item span,
    .highcharts-axis-title
    {
        fill:rgb(48, 48, 48);
    }

    .highcharts-data-label text, text.highcharts-data-label {
        fill: rgb(100, 100, 100);
    }
    .daterangepicker td.active, 
    .daterangepicker td.active:hover, 
    .daterangepicker td.in-range td.active, 
    .daterangepicker .ranges li.active {
        background-color:var(--bg-primary) !important;
    }
    .daterangepicker td.in-range {
        background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), .2);
    }
}


[data-theme=dark]
{
    .tabs a {
        color: white;
    }
    .table {
        --bulma-table-background-color: hsl(0, 0%, 16%);
        --bulma-table-striped-row-even-background-color: hsl(0, 0%, 19%);
    }
    .table tr.is-info {
        --bulma-table-cell-background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), .2);
        --bulma-table-cell-border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), .2);
    }
    .table, .table td, .table th {
        --bulma-table-color: white;
    }

    .highcharts-axis-labels, text {
        fill: white;
    }

    .daterangepicker,
    .daterangepicker .drp-buttons {
        background-color: hsl(0, 0%, 16%);
        border: 1px solid hsl(0, 0%, 22%);
    }
    .daterangepicker .calendar-table {
        background-color: hsl(0, 0%, 16%);
        border: 1px solid hsl(0, 0%, 22%);
    }
    .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date
    {
        background-color:hsl(0, 0%, 18%);
        color:hsl(0, 0%, 34.9%);
    }

    .daterangepicker td.active:not(.off), 
    .daterangepicker td.active:hover:not(.off), 
    .daterangepicker td.in-range td.active, 
    .daterangepicker .ranges li.active {
        background-color:hsl(146.2, 100%, 24.7%) !important;
    }
    .daterangepicker td.in-range,
    .daterangepicker .ranges li:hover {
        background-color:hsl(144, 25%, 23.5%);
        color: white;
    }

    .daterangepicker .ranges li{
        color: #d0d0d0;
    }

    /* Teh chevrons arrow thingies */
    .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
        border: solid white;
        border-width: 0 2px 2px 0;
    }

    .daterangepicker.show-ranges.ltr .drp-calendar.left {
        border-left: 1px solid hsl(0, 0%, 22%);
    }
}



p, h1, h2, h3, h4, h5, h6, text {
    color:var(--body-text-color);
}

.navbar {
    --bulma-navbar-background-color: var(--navbar-background);
    --bulma-navbar-item-color: var(--navbar-color);
}

.message-header {
    background-color: var(--message-header);
    color: var(--message-header-color);
}

.tag {
    background-color: var(--tag-bg);
    color: var(--message-header);
}

tag {
    background-color: var(--tag-bg);
    color: var(--message-header);
}

.button {
    color:var(--message-header-color);
}

.button.is-secondary {
    background-color: rgb(74, 167, 7);
}


.text-white {
    color: white;
}

.navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
    --bulma-navbar-item-background-a: .25;
}

.table tr.is-info {
    --bulma-table-cell-background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), .2);
    --bulma-table-cell-border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), .2);
}
.navbar {
 --bulma-navbar-dropdown-arrow: white;
}