/*
 * Termometro Social admin theme.
 *
 * Registered through FilamentAsset rather than a Vite theme, on purpose. A
 * custom Filament theme needs an npm build inside the PHP image, which is a
 * whole asset pipeline to hand a client in exchange for some colour. This is a
 * plain stylesheet loaded after Filament's own, so it needs no build step and
 * survives a Filament upgrade as long as the class names hold.
 *
 * The values come from the design, design/admin/*.dc.html.
 */

:root {
    --ts-orange: #ff6a00;
    --ts-orange-from: #ff7a00;
    --ts-orange-to: #ff3d2e;

    --ts-green-from: #10b981;
    --ts-green-to: #059669;

    --ts-pink-from: #ff2d55;
    --ts-pink-to: #c2187a;

    --ts-amber-from: #ffb300;
    --ts-amber-to: #ff6a00;

    --ts-page: #f4f2fb;
    --ts-tint: #fff3ea;

    --ts-dark-page: #131029;
    --ts-dark-surface: #1b1739;
    --ts-dark-raised: #221d49;
    --ts-dark-border: #2e2a55;
    --ts-dark-tint: #241f4d;
}

/* ---------------------------------------------------------------- surfaces */

.fi-body {
    background-color: var(--ts-page);
}

.dark .fi-body {
    background-color: var(--ts-dark-page);
}

/*
 * The sidebar is transparent by default, so on this page colour it simply
 * disappeared into the background and stopped reading as a panel at all. The
 * design has it white against the lilac page, separated by a hairline.
 */
.fi-sidebar {
    background-color: #fff;
    border-right: 1px solid #e2e8f0;
}

.dark .fi-topbar,
.dark .fi-sidebar {
    background-color: var(--ts-dark-surface);
    border-right-color: var(--ts-dark-border);
}

.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn,
.dark .fi-dropdown-panel {
    background-color: var(--ts-dark-raised);
    border-color: var(--ts-dark-border);
}

/* ----------------------------------------------------------------- buttons */

/*
 * Filament paints a coloured button as its 400 shade behind 800 text. The
 * design uses white text on a gradient, so the shade classes are overridden
 * rather than the palette: the palette still drives badges, links and rings,
 * where the tinted treatment is right.
 */
.fi-btn.fi-color {
    border-radius: 0.75rem;
    font-weight: 700;
    color: #fff;
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: filter 150ms ease;
}

.fi-btn.fi-color:hover {
    filter: brightness(1.1);
    color: #fff;
}

.fi-btn.fi-color-primary {
    background-image: linear-gradient(to bottom right, var(--ts-orange-from), var(--ts-orange-to));
}

.fi-btn.fi-color-success {
    background-image: linear-gradient(to bottom right, var(--ts-green-from), var(--ts-green-to));
}

.fi-btn.fi-color-danger {
    background-image: linear-gradient(to bottom right, var(--ts-pink-from), var(--ts-pink-to));
}

.fi-btn.fi-color-warning {
    background-image: linear-gradient(to bottom right, var(--ts-amber-from), var(--ts-amber-to));
}

/* Cancelar and the like: outlined, not gradient. */
.fi-btn:not(.fi-color) {
    border-radius: 0.75rem;
    font-weight: 700;
}

.dark .fi-btn:not(.fi-color) {
    background-color: var(--ts-dark-raised);
    color: #e2e8f0;
}

/*
 * Row actions.
 *
 * Filament renders these as a bare text link. In the design they are small
 * pills, which matters more than it looks: this is the control that opens the
 * review screen, and it is the one thing on the row a person is meant to click.
 * A link sitting in a wall of text does not read as a target.
 */
.fi-ta-actions .fi-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.375rem 0.875rem;
    font-size: 12.5px;
    font-weight: 700;
    background-color: #fff0e3;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition:
        box-shadow 150ms ease,
        filter 150ms ease;
}

.fi-ta-actions .fi-link:hover {
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
    filter: brightness(1.05);
}

.dark .fi-ta-actions .fi-link {
    background-color: #3a2b1a;
}

/*
 * The tint follows the action's colour, so the row still says which control is
 * the point of it. Revisar and Editar are the way in and stay warm; pausing a
 * feed is a maintenance job and stays quiet.
 *
 * A grey action carries no colour class at all, since grey is Filament's
 * default, so it is matched by the absence of one rather than by a name.
 */
.fi-ta-actions .fi-link:not(.fi-color) {
    background-color: #f1f5f9;
}

.dark .fi-ta-actions .fi-link:not(.fi-color) {
    background-color: var(--ts-dark-tint);
}

.fi-ta-actions .fi-link.fi-color-success {
    background-color: #e7f8f0;
}

.dark .fi-ta-actions .fi-link.fi-color-success {
    background-color: #16341f;
}

.fi-ta-actions .fi-link.fi-color-danger {
    background-color: #ffe9ee;
}

.dark .fi-ta-actions .fi-link.fi-color-danger {
    background-color: #3a1a24;
}

/* ----------------------------------------------------------------- sidebar */

.fi-sidebar-item-btn {
    border-radius: 0.5rem;
    font-size: 13.5px;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background-color: var(--ts-tint);
    color: var(--ts-orange);
}

.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background-color: var(--ts-dark-tint);
}

/* The active item is a filled pill in the design, not a tint. */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-image: linear-gradient(to bottom right, var(--ts-orange-from), var(--ts-orange-to));
    color: #fff;
    font-weight: 700;
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #fff;
}

/* ------------------------------------------------------------------- cards */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border-radius: 0.75rem;
}

/* --------------------------------------------------------------- headlines */

/*
 * The links out to the original articles. They are the reviewer's way of
 * checking that the question is fair to what was actually published, so they
 * have to look like links rather than like the rest of the row.
 */
.fi-in-repeatable-item a {
    color: #0f172a;
    text-decoration: none;
}

.fi-in-repeatable-item a:hover {
    color: var(--ts-orange);
    text-decoration: underline;
}

.dark .fi-in-repeatable-item a {
    color: #e2e8f0;
}

/* ------------------------------------------------------------------- focus */

/*
 * Kept deliberately loud. This panel is used to approve what a whole country
 * is asked, and knowing which control has focus matters more here than a
 * quieter ring would look.
 */
:focus-visible {
    outline: 2px solid var(--ts-orange);
    outline-offset: 2px;
}