/* Site-wide overrides. Brand accent is injected by the layout as --brand-accent / --brand-accent-text. */
.navbar-brand .brand-logo {
    max-height: 2rem;
    width: auto;
}

.navbar-brand .brand-name {
    font-weight: 600;
}

.brand-accent .btn-primary {
    --bs-btn-bg: var(--brand-accent);
    --bs-btn-border-color: var(--brand-accent);
    --bs-btn-color: var(--brand-accent-text);
    --bs-btn-hover-bg: var(--brand-accent);
    --bs-btn-hover-border-color: var(--brand-accent);
    --bs-btn-hover-color: var(--brand-accent-text);
    --bs-btn-active-bg: var(--brand-accent);
    --bs-btn-active-border-color: var(--brand-accent);
    --bs-btn-active-color: var(--brand-accent-text);
}

/* Dashboard tiles: a coloured edge repeats the status colour; the text badge carries the meaning. */
.tile {
    border-left-width: 0.35rem;
}

.tile-success { border-left-color: var(--bs-success); }
.tile-warning { border-left-color: var(--bs-warning); }
.tile-danger { border-left-color: var(--bs-danger); }
.tile-secondary { border-left-color: var(--bs-secondary); }

.tile .progress {
    height: 0.9rem;
}

.tile .origin-progress {
    height: 0.4rem;
    margin: 0.2rem 0;
}

.tile summary {
    cursor: pointer;
}

.tile .tile-forecast {
    border-left: 2px solid var(--bs-border-color);
    padding-left: 0.5rem;
}

/* Category page */
.history-scroll {
    max-height: 16rem;
    overflow-y: auto;
}

.origin-figures dt {
    font-weight: normal;
    color: var(--bs-secondary-color);
}

/* Utilisation chart: drawn on the server as SVG, coloured by the quota's status. */
.chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.chart-grid {
    stroke: var(--bs-border-color);
    stroke-width: 1;
}

.chart-label {
    fill: var(--bs-secondary-color);
    font-size: 15px;
}

.chart-line,
.chart-projection {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.chart-projection {
    stroke-dasharray: 6 5;
}

.chart-area {
    fill: currentColor;
    fill-opacity: 0.12;
    stroke: none;
}

.chart-now {
    stroke: var(--bs-secondary-color);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.chart-key {
    display: inline-block;
    width: 1.5rem;
    vertical-align: middle;
    border-top: 3px solid currentColor;
}

.chart-key-dash {
    border-top-style: dashed;
}

.chart-key-now {
    width: 0;
    height: 0.9rem;
    border-top: 0;
    border-left: 1px dotted var(--bs-secondary-color);
}

/* Stops the chart (and its text) growing huge on wide screens. */
.utilisation-chart {
    max-width: 480px;
}