/* Application-specific overrides of Tabler, colours taken from lokalbakers.cz. */
:root {
    --lb-green: #003f1a;
    --lb-green-dark: #002a11;
    --lb-gold: #e0c68f;
    --lb-cream: #efede4;

    --tblr-primary: var(--lb-green);
    --tblr-primary-rgb: 0, 63, 26;
    --tblr-primary-darken: var(--lb-green-dark);
    --tblr-primary-lt: rgba(0, 63, 26, 0.1);
    --tblr-primary-lt-rgb: 229.5, 236, 232.1;
    --tblr-brand: var(--lb-green);
    --tblr-link-color: var(--lb-green);
    --tblr-link-color-rgb: 0, 63, 26;
    --tblr-link-hover-color: var(--lb-green-dark);
    --tblr-link-hover-color-rgb: 0, 42, 17;
}

.navbar-vertical {
    --tblr-navbar-bg: var(--lb-green);
    background-color: var(--lb-green);
}

.navbar-vertical .navbar-brand-image {
    height: 2.5rem;
    width: auto;
}

.navbar-vertical .nav-item.active .nav-link {
    color: var(--lb-gold);
}

.page-auth {
    background-color: var(--lb-cream);
}

.chart-container {
    position: relative;
}

/* Weekday by hour heatmap: one hue light to dark, text colour chosen for at least 5:1 contrast on every step. */
.heatmap th, .heatmap td {
    white-space: nowrap;
}

/* The weekday column stays in view while the hours scroll sideways on a narrow screen. */
.heatmap tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    --tblr-table-bg-state: var(--tblr-bg-surface, #fff);
}

.heatmap-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 2px solid var(--tblr-bg-surface, #fff);
}

/* Table cells take their colours from the Tabler table state variables (like .table-active); the legend
   swatches outside the table use the plain properties. */
.heatmap-l0 { --heatmap-bg: #f1f3f5; --heatmap-fg: var(--tblr-secondary, #6b7280); }
.heatmap-l1 { --heatmap-bg: #8cbf9a; --heatmap-fg: #182433; }
.heatmap-l2 { --heatmap-bg: #5f9f76; --heatmap-fg: #182433; }
.heatmap-l3 { --heatmap-bg: #337d51; --heatmap-fg: #fff; }
.heatmap-l4 { --heatmap-bg: #1a5f38; --heatmap-fg: #fff; }
.heatmap-l5 { --heatmap-bg: #003f1a; --heatmap-fg: #fff; }

.heatmap-l0, .heatmap-l1, .heatmap-l2, .heatmap-l3, .heatmap-l4, .heatmap-l5 {
    --tblr-table-bg-state: var(--heatmap-bg);
    --tblr-table-color-state: var(--heatmap-fg);
    background-color: var(--heatmap-bg);
    color: var(--heatmap-fg);
}

.heatmap-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.heatmap-swatch {
    display: inline-block;
    min-width: 1.5rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    border-radius: 2px;
}