/* Development steering page. Filament's colour variables, because the panel's
   Tailwind build has no primary, success or danger palette of its own. Every
   rule is scoped to .st so nothing leaks into other pages. */

.st {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    --st-surface: #fff;
    --st-line: var(--gray-200);
    --st-track: var(--gray-100);
    --st-ink: var(--gray-950);
    --st-dim: var(--gray-500);
}

.dark .st {
    --st-surface: var(--gray-900);
    --st-line: rgb(255 255 255 / 0.1);
    --st-track: rgb(255 255 255 / 0.06);
    --st-ink: #fff;
    --st-dim: var(--gray-400);
}

/* Toolbar: the tabs on the left, the period picker on the right. */
.st-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.st-toolbar .fi-tabs {
    margin-inline: 0;
}

/* The period in the page subheading. */
.st-period .st-dim {
    color: var(--st-dim);
}

/* The period picker: a preset, and two dates for a custom range. */
.st-period-form {
    width: 36rem;
    max-width: 100%;
    margin-inline-start: auto;
}

/* The small "today" label of a figure that does not follow the period. */
.st-today {
    vertical-align: middle;
    cursor: help;
}

.st-kpi-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

/* Headline figures. */
.st-card {
    background: var(--st-surface);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 0 0 1px rgb(3 7 18 / 0.05);
}

.dark .st-card {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

.st-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    overflow: hidden;
}

.st-kpi {
    position: relative;
    padding: 1.25rem 1.5rem 1.5rem;
    box-shadow: -1px 0 0 0 var(--st-line), 0 -1px 0 0 var(--st-line);
    min-height: 8.5rem;
}

.st-kpi-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--st-dim);
}

.st-kpi-value {
    margin-top: 0.375rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--st-ink);
    font-variant-numeric: tabular-nums;
}

.st-kpi-value-empty {
    font-size: 1rem;
    line-height: 2.25rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--st-dim);
}

.st-kpi-foot {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    font-size: 0.75rem;
    color: var(--st-dim);
    position: relative;
    z-index: 1;
}

/* The sparkline sits under the figure, in the flow, so a long label never
   runs into it. */
.st-spark {
    display: block;
    margin-top: 0.75rem;
    width: 100%;
    height: 2rem;
    overflow: visible;
}

.st-spark-line {
    fill: none;
    stroke: var(--primary-500);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.st-spark-area {
    fill: var(--primary-500);
    opacity: 0.08;
}

/* Change pills. */
.st-delta {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.st-delta-up {
    color: var(--success-700);
    background: var(--success-50);
}

.st-delta-down {
    color: var(--danger-700);
    background: var(--danger-50);
}

.st-delta-flat {
    color: var(--gray-600);
    background: var(--gray-100);
}

.dark .st-delta-up {
    color: var(--success-400);
    background: color-mix(in oklab, var(--success-400) 12%, transparent);
}

.dark .st-delta-down {
    color: var(--danger-400);
    background: color-mix(in oklab, var(--danger-400) 12%, transparent);
}

.dark .st-delta-flat {
    color: var(--gray-400);
    background: rgb(255 255 255 / 0.06);
}

.st-progress {
    margin-top: 0.625rem;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--st-track);
    overflow: hidden;
}

.st-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary-500);
}

/* Rows of sections on a twelve-column grid; one column below 1100px. */
.st-row {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
}

.st-row > * {
    min-width: 0;
}

.st-span-4 { grid-column: span 4; }
.st-span-5 { grid-column: span 5; }
.st-span-6 { grid-column: span 6; }
.st-span-7 { grid-column: span 7; }
.st-span-12 { grid-column: span 12; }

@media (max-width: 1100px) {
    .st-row > * {
        grid-column: span 12;
    }
}

.st-big {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.st-big strong {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--st-ink);
    font-variant-numeric: tabular-nums;
}

.st-dim {
    color: var(--st-dim);
    font-weight: 400;
}

/* A chart widget sits inside a section of the page: drop its own card. */
.st-chart .fi-wi-chart .fi-section {
    box-shadow: none;
    background: transparent;
    border: 0;
}

.st-chart .fi-wi-chart .fi-section-content {
    padding: 0;
}

/* Filament fills bars with the palest shade, which reads as outlines only:
   fill them with the solid primary, in both modes. */
.st-chart-bar .fi-wi-chart .fi-color .fi-wi-chart-bg-color {
    color: var(--color-500);
}

.dark .st-chart-bar .fi-wi-chart .fi-color .fi-wi-chart-bg-color {
    color: var(--color-400);
}

/* Bar lists. */
.st-bars {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.st-bars-head,
.st-status-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
}

.st-bars-label {
    color: var(--st-ink);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-bars-value {
    color: var(--st-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.st-bars-track {
    margin-top: 0.375rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--st-track);
    overflow: hidden;
}

.st-bars-track span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 999px;
    background: var(--primary-500);
}

.st-bars-sub {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--st-dim);
}

.st-muted .st-bars-label {
    color: var(--st-dim);
    font-style: italic;
}

.st-muted .st-bars-track span {
    background: var(--gray-400);
}

/* Stacked status bars. */
.st-status + .st-status {
    margin-top: 1.25rem;
}

.st-stack {
    margin-top: 0.5rem;
    display: flex;
    gap: 2px;
    height: 0.75rem;
    border-radius: 0.25rem;
    overflow: hidden;
}

.st-stack-empty {
    background: var(--st-track);
}

.st-status-counts {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.75rem;
    color: var(--st-dim);
    font-variant-numeric: tabular-nums;
}

.st-legend {
    margin: 0;
    align-items: center;
}

.st-swatch {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    margin-right: 0.375rem;
    vertical-align: middle;
}

.st-seg-settled { background: var(--primary-600); }
.st-seg-reserved { background: var(--primary-400); }
.st-seg-available { background: var(--primary-200); }
.st-seg-unavailable { background: var(--gray-300); }

.dark .st-seg-settled { background: var(--primary-400); }
.dark .st-seg-reserved { background: var(--primary-600); }
.dark .st-seg-available { background: var(--primary-800); }
.dark .st-seg-unavailable { background: var(--gray-600); }

.st-note {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--st-dim);
}

.st-note + .st-note {
    margin-top: 0.25rem;
}

/* The funnel: step tiles side by side, the step rate between them; stacked
   on a phone, with the arrow pointing down. */
.st-funnel-steps {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.st-funnel-step {
    flex: 1 1 0;
    min-width: 0;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--st-track);
}

.st-funnel-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--st-dim);
    overflow-wrap: anywhere;
}

.st-funnel-value {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--st-ink);
    font-variant-numeric: tabular-nums;
}

.st-funnel-rate {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--st-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}

.st-funnel-arrow {
    width: 1rem;
    height: 1rem;
    color: var(--gray-400);
}

.dark .st-funnel-arrow {
    color: var(--gray-500);
}

@media (max-width: 640px) {
    .st-funnel-steps {
        flex-direction: column;
        gap: 0.25rem;
    }

    .st-funnel-rate {
        flex-direction: row;
        gap: 0.25rem;
    }

    .st-funnel-arrow {
        transform: rotate(90deg);
    }
}

/* Small figure tiles. */
.st-minis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.75rem;
}

.st-minis-gap {
    margin-bottom: 1.25rem;
}

.st-mini {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--st-track);
}

.st-mini-label {
    font-size: 0.75rem;
    color: var(--st-dim);
}

.st-mini-label .st-today {
    margin-inline-start: 0.25rem;
}

.st-mini-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--st-ink);
    font-variant-numeric: tabular-nums;
}

.st-mini-value.st-kpi-value-empty {
    font-size: 0.875rem;
    line-height: 1.75rem;
}

/* Tables scroll sideways on a phone rather than squeezing. */
.st-table-wrap {
    overflow-x: auto;
}

.st-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.st-table th {
    text-align: right;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0 0 0.5rem 0.75rem;
    color: var(--st-dim);
    border-bottom: 1px solid var(--st-line);
    white-space: nowrap;
}

.st-table td {
    text-align: right;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-bottom: 1px solid var(--st-line);
    color: var(--st-ink);
    white-space: nowrap;
}

.st-table th:first-child,
.st-table td:first-child {
    text-align: left;
    padding-left: 0;
}

.st-table td:first-child {
    color: var(--st-dim);
}

.st-table td.st-ink {
    color: var(--st-ink);
}

.st-table tr:last-child td {
    border-bottom: 0;
}

.st-scroll {
    max-height: 22rem;
    overflow: auto;
}

/* Empty states. */
.st-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 9rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--st-dim);
}

.st-empty-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--gray-400);
}

/* Definitions. */
.st-defs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.75rem 2rem;
    font-size: 0.8125rem;
    color: var(--st-dim);
    margin: 0;
}

.st-defs dt {
    font-weight: 600;
    color: var(--st-ink);
}

.st-defs dd {
    margin: 0.125rem 0 0;
}

@media (max-width: 640px) {
    .st-period-form {
        min-width: 0;
        width: 100%;
    }

    .st-kpi {
        min-height: 0;
    }
}