/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/

:root {
    --positiveColor: #00885A;
    --negativeColor: #C42522;
    --neutralColor: #555555;
    --warningColor: #FFFEDB;
    --rtGroupedButton: rgba(37, 118, 200, 1);
    --rtGroupedButtonActive: rgba(37, 118, 200, 0.08);
    --panel-grid-columns: 3;
    --overview-panel-grid-columns: 6;
    --graph-button-label-size: var(--mud-typography-h6-size);
}

/* Center the nav link icons and text. Mudblazor doesn't do this automatically */
.mud-nav-link {
    display: flex;
    align-items: center;
}

.mud-picker-datepicker-toolbar .mud-button-date {
    font-size: 1rem;
}

.mud-picker-datepicker-toolbar .mud-button.mud-button-year {
    display: none;
}

.mud-picker-datepicker-toolbar.mud-picker-toolbar {
    height: calc(1rem + 28px);
    align-items: center;
}

.rt-metric-panel {
    padding: 12px 40px 12px 40px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.rt-metric-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rt-metric-dialog {
    padding: 40px 20px;
    min-width: 80vw;
    max-height: 80vh;
}

.rt-metric-tooltip {
    padding: 16px;
    max-width: 325px !important;
}

.rt-loading-spinner {
    height: 5.5em !important;
    width: 5.5em !important;
    margin: 40px auto;
}

.rt-percent-card-group {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-bottom: 4px;
}

.rt-date-range-start {
    color: var(--mud-palette-text-primary);
}

.rt-date-range-end {
    color: #999999;
}

/* 
  Font weight to match UX wireframes.
  MudBlazor doesn't have a convenient way to set this
*/
.rt-font-weight-500 {
    font-weight: 500;
}

.rt-background-surface {
    background-color: var(--mud-palette-surface);
}

/*
  Make metrics and percentages in top cards
  larger. MudBlazor h1s are not sufficiently
  large for these.
*/
.rt-metric-large,
.rt-percent-sign-large {
    line-height: 1.7;
}

.rt-metric-large {
    font-size: 5.5em;
}

.rt-percent-sign-large {
    font-size: 2.75em;
}

.rt-focused-column-header-color {
    background-color: rgba(0, 0, 0, 0.38);
}

.rt-focused-column-color {
    background-color: rgba(0, 0, 0, 0.08);
}

.rt-apex-chart-container {
    flex: 1 1 100%;
    align-self: stretch;
    min-height: 330px;
}

.rt-apex-pie-chart-container {
    align-self: stretch;
    aspect-ratio: 1;
}

.rt-button-data-change {
    color: var(--mud-palette-dark);
    font-size: .8em;
}

.rt-button-data-change:hover {
    background-color: var(--mud-pallete-background);
}

.rt-button-data-change:focus-visible,
.rt-button-data-change:active {
    background: none !important;
}

.rt-button-data-change.negative {
    border-color: var(--negativeColor);
}

.rt-button-data-change.positive {
    border-color: var(--positiveColor);
}

.rt-button-data-change.neutral {
    border-color: var(--neutralColor);
}

.rt-text-data-positive {
    color: var(--positiveColor)
}

.rt-text-data-negative {
    color: var(--negativeColor)
}

.rt-text-data-neutral {
    color: var(--neutralColor)
}

/*
  "rt-grouped-button" is the custom button group
  that acts as a selector for certain pods.
*/
.rt-grouped-button-container {
    display: flex;
    gap: 0;
}

.rt-grouped-button {
    color: var(--rtGroupedButton);
    border-color: var(--rtGroupedButton);
    width: 100%;
}

.rt-grouped-button-active {
    background-color: var(--rtGroupedButtonActive)
}

.rt-grouped-button-left {
    border-radius: 25px 0 0 25px;
}

.rt-grouped-button-right {
    border-radius: 0 25px 25px 0;
}

.rt-grouped-button-center {
    border-radius: 0 0 0 0;
}

.rt-selected-funnel-card {
    outline: 2px solid var(--rtGroupedButton);
    border-radius: 5px;
}

.rt-column-header-center {
    white-space: nowrap;
    text-align: center
}

.rt-warning-banner {
    background-color: #5747FB;
    color: white;
    padding: 2px 32px;
    display: flex;
}

.rt-warning-banner-container {
    flex-direction: row !important;
    align-items: center;
}

.rt-warning-banner-text-container {
    flex-direction: row !important;
    align-items: center;
}

.rt-warning-banner-text {
    flex-direction: row !important;
}

.rt-warning-banner-link-button {
    cursor: pointer;
    color: var(--mud-palette-white) !important;
}

.rt-warning-banner-dismiss-icon svg {
    color: var(--mud-palette-white) !important;
}

.custom-settings-icon svg {
    color: var(--mud-palette-white) !important;
    font-size: 2em;
}

.rt-filter-dialog {
    height: 90vh;
    width: 30vw;
}

.rt-filter-expanders .mud-expand-panel-header {
    border-bottom: 1px solid var(--mud-palette-divider);
    padding: 20px 12px;
}

.rt-data-warning {
    flex: 1 1 100%;
    align-self: stretch;
    background-color: var(--warningColor);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-1);
    margin: 0 24px;
    padding: 24px;
}

.rt-data-warning .mud-icon-root {
    color: var(--mud-palette-warning-darken);
}

.rt-mobile-footer {
    margin-bottom: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4);
}

.rt-panel-grid {
    width: 100%;
    display: grid;
    gap: 16px;
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--panel-grid-columns), 1fr);
}

.rt-statements-grid {
    --panel-grid-columns: 2
}

.rt-panel-grid>* {
    grid-column: span 1;
    grid-row: span 2;
    min-width: 0;
}

.rt-graph-button-label {
    font-size: var(--graph-button-label-size);
}

.rt-core-data-points,
.rt-historical-statements,
.rt-current-month-statement {
    grid-column: span var(--panel-grid-columns);
}

.rt-lead-status-dialog-trigger {
    color: var(--mud-palette-primary);
}

.rt-lead-status-dialog-trigger:hover {
    text-decoration: underline;
    cursor: pointer;
}

.rt-overview-grid {
    grid-template-columns: repeat(var(--overview-panel-grid-columns), 1fr);
}

.rt-overview-grid>* {
    grid-column: span calc(var(--overview-panel-grid-columns) / 3);
}

.rt-core-data-points {
    grid-column: span var(--overview-panel-grid-columns);
}

.rt-overview-grid>.rt-key-funnel-perf,
.rt-overview-grid>.rt-user-leaderboards {
    grid-column: span calc(var(--overview-panel-grid-columns) / 2);
}

/* Mobile Devices */
@media (max-width: 767px) {

    :root,
    .rt-statements-grid {
        --panel-grid-columns: 1;
        --overview-panel-grid-columns: var(--panel-grid-columns);
    }

    .rt-panel-grid {
        align-items: start;
    }

    /* Reduce Padding. Less screen real estate */
    .mud-main-content {
        padding: 16px !important;
    }

    .at-page-container {
        width: 100% !important;
    }

    .rt-org-selection-tabs .mud-tab {
        min-width: fit-content !important;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Reduce padding */
    .rt-metric-panel {
        padding: 12px 20px;
    }

    /* 
      Rows don't grow or shrink.
      Allows cards to grow/shrink independently 
    */
    .rt-metric-row {
        flex: 0 0 auto;
    }

    /*
      Reduce card padding
    */
    .rt-metric-card {
        padding: 20px;
    }

    /* No dialogs on mobile. Hide the button that launches them */
    .rt-dialog-trigger-icon {
        display: none;
    }

    .rt-apex-chart-container {
        min-height: 45vh;
    }

    .rt-apex-pie-chart-container {
        min-height: 45vh;
    }

    .rt-metric-tooltip {
        max-width: 70vw !important;
    }

    .rt-filter-dialog {
        width: 90vw;
    }

    .rt-user-filter-table th,
    .rt-user-filter-table td {
        font-size: .8em;
    }

    .rt-warning-banner {
        padding: 12px 16px;
    }

    .rt-warning-banner-text-container {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 8px !important;
    }

    .rt-warning-banner-text-container * {
        font-size: var(--mud-typography-caption-size) !important;
    }

    .rt-warning-banner-text {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .rt-core-data-points,
    .rt-historical-statements {
        display: none
    }
}

/* Smaller Screens & Tablets */
@media (min-width: 768px) and (max-width: 1400px) {
    :root {
        --panel-grid-columns: 2;
        --overview-panel-grid-columns: var(--panel-grid-columns);
    }

    .rt-panel-grid {
        align-items: start;
    }

    .rt-panel-grid>* {
        grid-row: span 10;
    }

    .rt-filter-dialog {
        width: 50vw;
    }

    .rt-metric-panel {
        padding: 12px 20px;
    }

    .rt-warning-banner {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .rt-warning-banner-text {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .rt-dealerships-grid>.rt-total-stores {
        grid-column: 1;
        grid-row: 1 / 11;
        align-self: stretch;
    }

    .rt-dealerships-grid>.rt-conversion-pct {
        grid-column: 1;
        grid-row: 11 / 15;
    }

    .rt-dealerships-grid>.rt-users-by-engagement {
        grid-column: 1;
        grid-row: 15 / 27;
    }

    .rt-dealerships-grid>.rt-total-vs-engaged-users {
        grid-column: 2;
        grid-row: 21 / 33;
        align-self: stretch;
    }

    .rt-users-grid>.rt-total-policies-sold {
        grid-column: 1;
        grid-row: 11 / 15;
    }

    .rt-overview-grid>.rt-engaged-user-pct {
        grid-column: 1;
        grid-row: 11 / 15;
    }

    .rt-overview-grid>.rt-user-leaderboards {
        grid-column: 1;
        grid-row: 15 / 27;
    }

    .rt-overview-grid>.rt-key-funnel-perf {
        align-self: stretch;
        grid-row: 11 / 27;
    }
}

@media (max-width: 936px) {
    :root {
        --graph-button-label-size: 0.66rem;
    }
}