/* ---- button colours ---------------------------------------------------------
 *
 * Every button belongs to a role, and a role is one colour an administrator
 * chose. A colour per button was the alternative; the admin and settings
 * pages hold about a hundred and ninety between them.
 *
 * A role is applied by selector rather than by a class written onto each
 * button, for the same reason the settings page renders its fields from a
 * spec: a button added next year gets its colour by being named the way the
 * others are, rather than by somebody remembering this file. Every
 * convention used here is one the codebase already had -- `btnSave*` saves,
 * `.danger` cannot be undone, `.secondary` is the quiet one, an id names a
 * header control, an href names where a navigation button goes.
 *
 * Three custom properties per role -- fill, text and hover -- all derived in
 * settings.button_variables from the single colour that was chosen. The text
 * is computed and never chosen: the failure mode of letting somebody pick it
 * is a button nobody can read, and they are not there when it happens.
 *
 * Written out rather than looped, because CSS has no loop. Generated from
 * settings.BUTTON_ROLES, and tests/test_buttons.py asserts the two agree --
 * a role in the spec with no rule here is a colour picker that does nothing.
 */

/* A plain button is the accent action. */
button {
    --btn-bg: var(--btn-run-bg);
    --btn-fg: var(--btn-run-fg);
    --btn-hover: var(--btn-run-hover);
}

/* My page */
a.button-link[href="/index.html"],
a.button-link.is-home {
    --btn-bg: var(--btn-home-bg);
    --btn-fg: var(--btn-home-fg);
    --btn-hover: var(--btn-home-hover);
}

/* Dashboard */
a.button-link[href="/dashboard.html"] {
    --btn-bg: var(--btn-dashboard-bg);
    --btn-fg: var(--btn-dashboard-fg);
    --btn-hover: var(--btn-dashboard-hover);
}

/* Lobby display */
a.button-link[href="/lobby.html"] {
    --btn-bg: var(--btn-lobby-bg);
    --btn-fg: var(--btn-lobby-fg);
    --btn-hover: var(--btn-lobby-hover);
}

/* Help */
/* Not #btnCloseHelp: that is the × in the corner, styled by `.close-button`
 * as a bare glyph. An id selector outranks a class, so naming it here turns
 * a close cross into a solid cyan block. */
#btnHelp {
    --btn-bg: var(--btn-help-bg);
    --btn-fg: var(--btn-help-fg);
    --btn-hover: var(--btn-help-hover);
}

/* Admin */
a.button-link[href="/admin.html"] {
    --btn-bg: var(--btn-admin-bg);
    --btn-fg: var(--btn-admin-fg);
    --btn-hover: var(--btn-admin-hover);
}

/* Settings */
a.button-link[href="/admin-settings.html"] {
    --btn-bg: var(--btn-settings-bg);
    --btn-fg: var(--btn-settings-fg);
    --btn-hover: var(--btn-settings-hover);
}

/* Public screen */
a.button-link[href="/public.html"] {
    --btn-bg: var(--btn-public-bg);
    --btn-fg: var(--btn-public-fg);
    --btn-hover: var(--btn-public-hover);
}

/* Light and dark mode */
#btnDarkMode {
    --btn-bg: var(--btn-theme-bg);
    --btn-fg: var(--btn-theme-fg);
    --btn-hover: var(--btn-theme-hover);
}

/* Simple and full view */
#btnLayoutToggle,
#btnCompactHeader {
    --btn-bg: var(--btn-view-bg);
    --btn-fg: var(--btn-view-fg);
    --btn-hover: var(--btn-view-hover);
}

/* Arrange the cards */
#btnCardControls,
#btnFitSections,
#btnResetSectionOrder {
    --btn-bg: var(--btn-arrange-bg);
    --btn-fg: var(--btn-arrange-fg);
    --btn-hover: var(--btn-arrange-hover);
}

/* Display controls */
#btnDisplayPanel {
    --btn-bg: var(--btn-display-bg);
    --btn-fg: var(--btn-display-fg);
    --btn-hover: var(--btn-display-hover);
}

/* PIN, user and sign out */
/* Not #btnForgetUser: `.link-button` makes it a text link on the sign-in
 * page, and an id selector would fill it in. */
#btnChangePin,
#btnChangeUser,
#btnLogout,
#btnAdminSignOut,
a.button-link[href="/login.html"] {
    --btn-bg: var(--btn-account-bg);
    --btn-fg: var(--btn-account-fg);
    --btn-hover: var(--btn-account-hover);
}

/* Play, replay and page through */
#btnPlay,
#btnReplayNow,
#btnToggleReplay,
#btnSlidePrev,
#btnSlideNext,
#btnLobbyPrev,
#btnLobbyNext,
#btnQuotePrev,
#btnQuoteNext {
    --btn-bg: var(--btn-replay-bg);
    --btn-fg: var(--btn-replay-fg);
    --btn-hover: var(--btn-replay-hover);
}

/* Save */
button[id^="btnSave"],
button[type="submit"] {
    --btn-bg: var(--btn-save-bg);
    --btn-fg: var(--btn-save-fg);
    --btn-hover: var(--btn-save-hover);
}

/* Download and export */
button[id^="btnDownload"],
button[id^="btnExport"],
button[id^="btnPrint"] {
    --btn-bg: var(--btn-export-bg);
    --btn-fg: var(--btn-export-fg);
    --btn-hover: var(--btn-export-hover);
}

/* Everything else */
button.secondary {
    --btn-bg: var(--btn-secondary-bg);
    --btn-fg: var(--btn-secondary-fg);
    --btn-hover: var(--btn-secondary-hover);
}

/* Cannot be undone */
button.danger,
.danger-button {
    --btn-bg: var(--btn-danger-bg);
    --btn-fg: var(--btn-danger-fg);
    --btn-hover: var(--btn-danger-hover);
}

/* One place reads the three properties, so choosing a role is only ever
 * choosing which colour to point at. */
button,
.button-link {
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    border-color: transparent;
}

button:hover:not(:disabled),
.button-link:hover {
    background-color: var(--btn-hover);
    color: var(--btn-fg);
}

/* The quiet button keeps its edge, because the edge is what makes it quiet.
 * A coloured fill with no border is a button that asks to be pressed. */
button.secondary {
    border-color: var(--control-border-strong);
}

button.secondary:hover:not(:disabled) {
    border-color: #97a3b2;
}

/* Disabled outranks the role: a button that cannot be pressed must not look
 * like the brightest thing on the page. This one sets the properties rather
 * than the variables, deliberately: a role only ever sets variables, so the
 * rule it competes with is the plain `button` one, and (0,1,1) beats it. */
button:disabled,
button:disabled:hover {
    background-color: #d9dee5;
    color: #98a2b3;
    border-color: transparent;
}

/* Dark mode leaves the roles alone. An administrator picked these to be
 * picked out of a row, and re-deriving them per theme would mean the colour
 * they approved is not the colour half the ward sees. Only the quiet
 * button, which is a surface rather than a colour, follows the theme. */
/* The variables and not the properties. Setting `background-color` here
 * would beat `button, .button-link { background-color: var(--btn-bg) }` on
 * every button at once -- including the ones an id gave a role to, so the
 * whole coloured header would go grey the moment somebody switched to dark
 * mode. Setting the variables instead keeps it a question of specificity,
 * and an id (1,0,0) outranks this (0,2,2), which is the answer wanted. */
html.dark button.secondary {
    --btn-bg: #1f2937;
    --btn-fg: #e5e7eb;
    --btn-hover: #273244;
    border-color: #374151;
}

html.dark button.secondary:hover:not(:disabled) {
    border-color: #4b5563;
}