/*
 * Rider reads as a list of facts: the value is what somebody came to see, the
 * label only says what it is. Filament emphasises the label by default, so the
 * two are swapped here — for displayed values as well as for form fields, so a
 * form and a read-only view look the same.
 *
 * These rules carry one class more than Filament's own on purpose: this
 * stylesheet is loaded before the panel's, so equal specificity would lose.
 */

.fi-in-entry .fi-in-entry-label,
.fi-fo-field-label .fi-fo-field-label-content {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--gray-500);
}

.fi-in-entry .fi-in-entry-label:where(.dark, .dark *),
.fi-fo-field-label .fi-fo-field-label-content:where(.dark, .dark *) {
    color: var(--gray-400);
}

/* The asterisk keeps its colour, but not its extra weight. */
.fi-fo-field-label .fi-fo-field-label-content .fi-fo-field-label-required-mark {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
}

.fi-in-entry .fi-in-text-item {
    font-weight: var(--font-weight-medium);
}

/*
 * The icon that marks a value as a link sits a little low next to the text.
 */
.fi-in-entry a .fi-in-text-item .fi-icon {
    margin: -2px 0 2px 0;
}

/*
 * A partnership row carries the colour of its status, the way the rows of the
 * spreadsheet this application replaces were coloured by hand. The shades come
 * from the panel's own palette, so they follow the theme and dark mode.
 */

.fi-ta-row.rider-row-grey { background-color: var(--gray-100); }
.fi-ta-row.rider-row-green { background-color: var(--success-50); }
.fi-ta-row.rider-row-orange { background-color: var(--orange-50); }
.fi-ta-row.rider-row-yellow { background-color: var(--warning-50); }
.fi-ta-row.rider-row-blue { background-color: var(--info-50); }
.fi-ta-row.rider-row-red { background-color: var(--danger-50); }

.fi-ta-row.rider-row-grey:where(.dark, .dark *) { background-color: var(--gray-800); }
.fi-ta-row.rider-row-green:where(.dark, .dark *) { background-color: var(--success-950); }
.fi-ta-row.rider-row-orange:where(.dark, .dark *) { background-color: var(--orange-950); }
.fi-ta-row.rider-row-yellow:where(.dark, .dark *) { background-color: var(--warning-950); }
.fi-ta-row.rider-row-blue:where(.dark, .dark *) { background-color: var(--info-950); }
.fi-ta-row.rider-row-red:where(.dark, .dark *) { background-color: var(--danger-950); }

/* Buttons that belong at the far end of a row of form actions. */
.fi-ac .rider-align-end {
    margin-inline-start: auto;
}

/*
 * Helper text under a field explains something, so it is announced by an info
 * icon. The icon is a mask, which makes it follow the colour of the text.
 */
.fi-fo-field-content-col > .fi-sc.fi-inline .fi-sc-text::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-end: 0.3em;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask: var(--rider-info-icon) no-repeat center / contain;
    mask: var(--rider-info-icon) no-repeat center / contain;
}

:root {
    --rider-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z'/%3E%3C/svg%3E");
}

/*
 * The reporting tables, which read like the spreadsheets the festival has always
 * used: a navy bar per table, ruled cells, and totals in reverse.
 */

.rider-report + .rider-report {
    margin-top: 2rem;
}

.rider-report-title {
    background-color: var(--primary-600);
    color: var(--color-white);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.rider-report-title-note {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-normal);
}

.rider-report-scroll {
    overflow-x: auto;
}

.rider-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.rider-report-table th,
.rider-report-table td {
    border: 1px solid var(--primary-600);
    padding: 0.25rem 0.5rem;
    text-align: end;
}

.rider-report-table thead th {
    background-color: var(--primary-600);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.rider-report-table .rider-report-label {
    text-align: start;
    font-weight: var(--font-weight-semibold);
}

.rider-report-table tbody tr.rider-report-total > td {
    background-color: var(--primary-600);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}

.rider-report-negative {
    color: var(--danger-600);
}

.rider-report-total .rider-report-negative {
    color: var(--danger-400);
}

.rider-report-note {
    margin-top: 0.5rem;
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.rider-report-note:where(.dark, .dark *) {
    color: var(--gray-400);
}

/* A large badge reads large; the icon inside it does not have to grow along. */
.fi-badge.fi-size-lg > .fi-icon {
    width: 1rem;
    height: 1rem;
}

/*
 * A user is shown as the circle with their initials, the same one the panel puts
 * in its top right corner, followed by their name.
 */
.rider-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.rider-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: var(--primary-600);
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

/* A user who can no longer log in keeps their sponsors, clearly marked. */
.rider-user-inactive {
    color: var(--danger-600);
    text-decoration: line-through;
}

.rider-user-inactive:where(.dark, .dark *) {
    color: var(--danger-400);
}

/* The contact person of a sponsor, marked with an identification icon. */
.rider-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.rider-contact-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

/*
 * The card that names the edition everybody is working in. It stands next to the
 * account card, so it is held to the same height.
 */
.rider-current-edition-widget,
.rider-current-edition-widget > .fi-section {
    height: 100%;
}

.rider-current-edition {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rider-current-edition-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--primary-600);
}

.rider-current-edition-label {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.rider-current-edition-label:where(.dark, .dark *) {
    color: var(--gray-400);
}

.rider-current-edition-name {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-950);
}

.rider-current-edition-name:where(.dark, .dark *) {
    color: var(--color-white);
}

/* The sponsors that look like the one being added, each one a link. */
.rider-similar-sponsors a {
    color: var(--primary-600);
    text-decoration: underline;
}

.rider-similar-sponsors a:where(.dark, .dark *) {
    color: var(--primary-400);
}

/*
 * A section reads as a card with a title bar: the heading gets the lightest
 * tint of the brand colour, following the rounded corners of the card.
 */
.fi-section > .fi-section-header {
    background-color: var(--primary-50);
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
    border-bottom: 1px solid var(--gray-200);
}

.fi-section > .fi-section-header:where(.dark, .dark *) {
    background-color: var(--primary-950);
    border-bottom-color: var(--gray-700);
}