/*
 * Dead Code branding overlay for scrumlr.io (no native theming API).
 *
 * scrumlr drives most UI from --accent-color* custom properties, but its :root
 * sets that family to "planning-pink" (#ff0069) and many components hardcode
 * the pink and a secondary blue (#0057ff) as literals rather than reading the
 * variable. This overlay:
 *   1. re-points the --accent-color* family to the Marigold orange (#f28705),
 *   2. redefines the .accent-color__planning-pink scope (brand default) to orange,
 *   3. overrides the hardcoded pink/blue literals on buttons, the logo, focus
 *      rings, dialogs, inputs, toggles and selection states.
 * !important is used throughout because this overrides a third-party build we
 * do not compile; specificity parity is not otherwise guaranteed. Catalogued
 * against scrumlr 5.2.0 — revisit selectors on a frontend bump.
 *
 * Brand palette: 500 #f28705 · 600 #c46c04 · 400 #f59a33 · 300 #f7ad5c
 *                200 #f9c184 · 100 #fbd6ad
 */

/* --- Marigold accent palette (variable-driven components) --------------
 * The accent-color__* classes are scrumlr's per-column hues (blue/pink/purple/
 * violet/green/yellow/orange). Flattened to one Marigold orange so the whole
 * board reads as a single Dead Code brand rather than a rainbow. To keep
 * columns visually distinct instead, drop the class list and theme only :root. */
:root,
html[data-theme="light"],
html[data-theme="dark"],
.accent-color__backlog-blue,
.accent-color__planning-pink,
.accent-color__poker-purple,
.accent-color__value-violet,
.accent-color__goal-green,
.accent-color__yielding-yellow,
.accent-color__online-orange {
  --accent-color: #f28705;
  --accent-color--500: #f28705;
  --accent-color--500-rgb: 242, 135, 5;
  --accent-color--600: #c46c04;
  --accent-color--600-rgb: 196, 108, 4;
  --accent-color--400: #f59a33;
  --accent-color--400-rgb: 245, 154, 51;
  --accent-color--300: #f7ad5c;
  --accent-color--300-rgb: 247, 173, 92;
  --accent-color--200: #f9c184;
  --accent-color--200-rgb: 249, 193, 132;
  --accent-color--100: #fbd6ad;
  --accent-color--100-rgb: 251, 214, 173;
  --accent-color--light: #f9c184;
  --accent-color--light-rgb: 249, 193, 132;
  --accent-color--dark: #c46c04;
  --accent-color--dark-rgb: 196, 108, 4;
  --accent-color--desaturated-light: #e3b483;
  --accent-color--desaturated-dark: #9c7038;
  --primary: #f28705;
}

/* --- Logo -------------------------------------------------------------- */
.scrumlr-logo__paths {
  fill: #f28705 !important;
}

/* --- Primary buttons (hardcoded #ff0069) ------------------------------- */
.legacy-button--primary {
  background: #f28705 !important;
}
.legacy-button.legacy-button--primary.legacy-button--outlined,
.legacy-button.legacy-button--outlined,
.legacy-button.legacy-button--text-link {
  color: #f28705 !important;
  border-color: #f28705 !important;
  background: transparent !important;
}
.legacy-button:not(:disabled):not(.legacy-button--text-link).legacy-button--primary:hover {
  box-shadow: 0 6px 9px rgba(242, 135, 5, 0.24) !important;
}

/* --- Form / dialog action buttons (blue or pink backgrounds) ----------- */
.form__submit-button,
.confirmation-dialog__button--accept,
.cookie-notice__button-accept,
.cookie-policy__button-accept,
.board-header__link:hover,
.board-header_name-and-settings:hover {
  background-color: #f28705 !important;
}

/* --- Selection state (selected access option, active select option) ---- */
.board-settings__access-option--selected,
.board-settings__access-option--selected .board-settings__access-option-indicator,
.select-option--active {
  border-color: #f28705 !important;
}
.select-option--active,
.create-template-card__icon,
.create-template-card__title,
.import-board-button__icon,
.import-board-button__label,
.simple-modal__close-icon {
  color: #f28705 !important;
}

/* --- Dialog title underline ------------------------------------------- */
.simple-modal__title,
[data-theme="dark"] .simple-modal__title {
  border-color: #f28705 !important;
  border-bottom-color: #f28705 !important;
}

/* --- Focus rings (pink/blue outlines across the app) ------------------- */
:focus-visible {
  outline-color: #f28705 !important;
}

/* --- Native form controls (radio dot, checkbox tick) ------------------- */
input[type="radio"],
input[type="checkbox"] {
  accent-color: #f28705 !important;
}

/* --- Focus-within borders on inputs / toggles / pills ------------------ */
.input:not(.input--disabled):focus-within,
.text-area:not(.text-area--embedded):focus-within,
.text-input:hover,
.switch:enabled:focus-within,
.user-pill:enabled:not(.user-pill--no-name):focus-within,
.import-board-button:enabled:focus-within,
.create-template-card,
.create-template-card:hover {
  border-color: #f28705 !important;
}

/* --- Toggles / self-reaction accent ----------------------------------- */
.board-option-toggle__switch--right:after,
.board-reaction__name-container--self {
  background-color: #f28705 !important;
}

/* --- Misc pink accents (dialog/header/return links, badge) ------------- */
.dialog__header-text,
.board-guard__denied-link,
.rejection-page__return-button,
.not-found__return-button {
  color: #f28705 !important;
}
.boards__coming-soon-badge {
  background-color: #f28705 !important;
}

/* --- Dead Code dark surfaces (navy -> dcio, scrumlr 5.2.0; generated) --- */
html[data-theme="dark"], [data-theme="dark"] body, [data-theme="dark"] #root { background-color: #0d0e12 !important; }
[data-theme=dark] body,[data-theme=dark] #root,html[data-theme=dark],
[data-theme=dark] .button--secondary:focus,
[data-theme=dark] .create-template-card:focus,
[data-theme=dark] .create-template-card:disabled,
.mini-menu__item--active:hover,
[data-theme=dark] .mini-menu__item:focus-visible,
[data-theme=dark] .mini-menu__item--active,
[data-theme=dark] .mini-menu__item--active:hover,
[data-theme=dark] .favourite-button:hover,
[data-theme=dark] .file-preview,
.switch__item--active,
.boards__mobile-search-icon-container--active,
[data-theme=dark] .boards,
[data-theme=dark] .loading-screen,
[data-theme=dark] .short-action__button,
[data-theme=dark] .confirmation-dialog,
[data-theme=dark] .confirmation-dialog__checkbox+.confirmation-dialog__checkbox-label:before,
[data-theme=dark] .board__spacer-left:nth-child(odd),[data-theme=dark] .board__spacer-right:nth-child(odd),
[data-theme=dark] .note-author-skeleton__avatar,
[data-theme=dark] .note-author-skeleton__name,
[data-theme=dark] .note-reaction-chip__root,
[data-theme=dark] .note-reaction-picker__root,
[data-theme=dark] .note-reaction-picker__more,
[data-theme=dark] .note-reaction-picker__picker-portal,
[data-theme=dark] .note-reaction-chip-condensed__root,
[data-theme=dark] .note-reaction-popup__tab-all,
[data-theme=dark] .note-reaction-popup__row-divider,
[data-theme=dark] .note-reaction-list__reaction-bar-container--active,[data-theme=dark] .note-reaction-list__add-reaction-sticker-container,
[data-theme=dark] .column:nth-child(2n),
[data-theme=dark] .color-picker,
[data-theme=dark] .board-guard,
[data-theme=dark] .passphrase-dialog__form,
[data-theme=dark] .error-page,
[data-theme=dark] .board-settings__password-section .settings-input__container,
[data-theme=dark] .participants-reset-state-banner__button,[data-theme=dark] .participants-reset-state-banner__button:hover,
[data-theme=dark] .dialog,
[data-theme=dark] .settings-dialog__content,
[data-theme=dark] .homepage,[data-theme=dark] .homepage__hero,
[data-theme=dark] .password-modal__container,
[data-theme=dark] .new-board__actions,
[data-theme=dark] .columns-configurator-column--even {
  background-color: #1a1c22 !important;
}
.toast__icon,
.toast__button-single,
.toast__button-multi-primary,
:is([data-theme=dark] .Toastify__toast.Toastify__toast:has(div.toast-single),[data-theme=dark] .Toastify__toast.Toastify__toast:has(div.toast-multi)),
[data-theme=dark] .toast__button-multi-secondary,
[data-theme=dark] input[type=checkbox],
[data-theme=dark] input[type=checkbox]:before,
.toast__icon-multi-info,
[data-theme=dark] .toast-single:hover .toast__button-single.toast__button-info,
[data-theme=dark] .toast-single:hover .toast__button-single.toast__button-error,
[data-theme=dark] .toast-single:hover .toast__button-single.toast__button-success,
[data-theme=dark] .toast__button-single.toast__button-info,
[data-theme=dark] .toast__button-single.toast__button-error,
[data-theme=dark] .toast__button-single.toast__button-success,
[data-theme=dark] .button--ghost:active,
[data-theme=dark] .select-option,
[data-theme=dark] .board-reactions-menu,
.tooltip-button--active .tooltip-button__icon-container,
.menu-bars-mobile__fab-option .tooltip-button__icon--active,
[data-theme=dark] .menu-bars-mobile__fab,
.menu-bars-mobile__fab-main--isExpanded,
[data-theme=dark] .menu,
[data-theme=dark] .menu-bars__navigation,
.timer>svg,
[data-theme=dark] .timer,
[data-theme=dark] .timer__increment-button,
[data-theme=dark] .timer__short-actions,
.vote-display>svg,
[data-theme=dark] .vote-display,
[data-theme=dark] .vote-display__short-actions,
[data-theme=dark] .info-bar__return-to-shared-note-button,
.rest-users,
.board-option,
[data-theme=dark] .board-option-button,
[data-theme=dark] .board-option-button--expandable,
[data-theme=dark] .board-option-link,
[data-theme=dark] .confirmation-dialog__close-button,
[data-theme=dark] .board__spacer-left:nth-child(2n),[data-theme=dark] .board__spacer-right:nth-child(2n),
.note-author-rest,
[data-theme=dark] .note-reaction-popup__root,
[data-theme=dark] .column:nth-child(odd),
[data-theme=dark] .emoji-suggestions__container,
[data-theme=dark] .request__button,
[data-theme=dark] .settings-dialog__close-button,
[data-theme=dark] .settings-option-button,
[data-theme=dark] .settings-option-button--disabled:focus-within,[data-theme=dark] .settings-option-button--disabled:hover,[data-theme=dark] .settings-option-button--expandable,
[data-theme=dark] .settings-input__container,
[data-theme=dark] .settings-dropdown__button,
[data-theme=dark] .settings-dropdown__list,
[data-theme=dark] .appearance-settings__theme-container,
.participants-reset-state-banner__button,
[data-theme=dark] .participants__search-input,
[data-theme=dark] .participants__permisson-filter-button,[data-theme=dark] .participant__status-filter-button,
[data-theme=dark] .participants__list-item,
[data-theme=dark] .participant__role:is(button),
[data-theme=dark] .participants-reset-state-banner__container,
[data-theme=dark] .participant__join-icon,[data-theme=dark] .participant__kick-icon,
[data-theme=dark] .settings-dialog__feedback-option>label,
[data-theme=dark] .dialog__button,
[data-theme=dark] .avatar-settings__avatar-shuffle,
[data-theme=dark] .avatar-settings__settings,
[data-theme=dark] .settings-dialog__sidebar,
[data-theme=dark] .settings-dialog__group,
[data-theme=dark] .homepage__language,
.tooltip-button--active .tooltip-button__icon,
[data-theme=dark] .tooltip-button__icon-container,
[data-theme=dark] .note-dialog__note,
[data-theme=dark] .stack-view__navigation-button,
[data-theme=dark] .access-policy__details,
[data-theme=dark] .new-board__mode-label {
  background-color: #20232b !important;
}
[data-theme=dark] .button--ghost,
[data-theme=dark] .user-pill,
[data-theme=dark] .input,
[data-theme=dark] .input__input,
.mini-menu__item--active,
[data-theme=dark] .mini-menu,
[data-theme=dark] .template-card,
[data-theme=dark] .simple-modal,
[data-theme=dark] .simple-modal__close-button,
[data-theme=dark] .import-board-button,
[data-theme=dark] .file-preview__file-remove-button:hover,
[data-theme=dark] .switch,
[data-theme=dark] .switch__item,
[data-theme=dark] .boards__mobile-search-icon-container,
.board-option:focus-visible,.board-option:hover,
[data-theme=dark] .board-option-button:focus-visible,
[data-theme=dark] .board-option-button--expandable:focus-visible,[data-theme=dark] .board-option-button--expandable:hover,
[data-theme=dark] .board-option-link:focus-visible,
[data-theme=dark] .drag-indicator-pill__avatar,
[data-theme=dark] .note-input,
[data-theme=dark] .text-area:not([data-theme=dark] .text-area--embedded),
[data-theme=dark] .request__button:hover,
[data-theme=dark] .settings-option-button:focus-within,[data-theme=dark] .settings-option-button:hover,
[data-theme=dark] .settings-dropdown__button:hover,
[data-theme=dark] .dialog__button:hover,
[data-theme=dark] .avatar-settings__avatar-shuffle:hover,
[data-theme=dark] .avatar-settings__settings-group-header:hover,
[data-theme=dark] .avatar-settings__settings-group-item:hover:not(.disabled),
.navigation__item--logout .navigation-item__icon,
[data-theme=dark] .note,[data-theme=dark] .note__in-stack,
[data-theme=dark] .note__show-more,
[data-theme=dark] .note__show-more:before,
[data-theme=dark] .columns-configurator-column--odd {
  background-color: #272b34 !important;
}
[data-theme=dark] .button--ghost:disabled,
[data-theme=dark] .boards {
  background-color: #0d0e12 !important;
}
[data-theme=dark] .user-pill__avatar-container,
[data-theme=dark] .input--disabled,
[data-theme=dark] .input__input:disabled,
[data-theme=dark] .login-board__divider:after,
[data-theme=dark] .login-board__card,
[data-theme=dark] .switch:disabled,
[data-theme=dark] .switch:disabled .switch__item,
[data-theme=dark] .boards,
[data-theme=dark] .templates__container,
[data-theme=dark] .sessions__card,
[data-theme=dark] .request__container {
  background-color: #16181f !important;
}
[data-theme=dark] .file-preview__file,
[data-theme=dark] .vote-button-add:disabled,
[data-theme=dark] .note-reaction-chip__root:hover,
[data-theme=dark] .note-reaction-picker__reaction:hover,
[data-theme=dark] .note-reaction-picker__more:hover,
[data-theme=dark] .note-reaction-chip-condensed__root:hover,
[data-theme=dark] .note-reaction-list__add-reaction-sticker-container:hover,
.participants-reset-state-banner__button:hover,
[data-theme=dark] .tooltip-button__tooltip-text {
  background-color: #2f3340 !important;
}
[data-theme=dark] .column__header-text-wrapper .column__tooltip,
[data-theme=dark] .board-reaction__name-container,
.navigation__item--logout:hover {
  background-color: #3a4050 !important;
}
.toast__button-multi-primary,
.toast__button-multi-secondary,
[data-theme=dark] .timer,
[data-theme=dark] .vote-display,
.share-button,
[data-theme=dark] .vote-button-remove__folded-corner,
.note-author-rest--self {
  border-color: #20232b !important;
}
.user-pill:enabled:not(.user-pill--no-name):active,
.input:not(.input--disabled):active,
.import-board-button:enabled:active,
.switch:enabled:active,
[data-theme=dark] .drag-indicator-pill__avatar,
.text-area:not(.text-area--embedded):active,
.text-area:not(.text-area--embedded):not(.text-area--fitted):active {
  border-color: #272b34 !important;
}
[data-theme=dark] .create-template-card:disabled,
[data-theme=dark] .tooltip-button:focus-visible .tooltip-button__icon,[data-theme=dark] .tooltip-button:hover .tooltip-button__icon {
  border-color: #2f3340 !important;
}
[data-theme=dark] .file-preview {
  border-color: #3a4050 !important;
}
[data-theme=dark] .board-option+.board-option,
[data-theme=dark] .note-author-rest,
[data-theme=dark] .color-picker__color-option,
[data-theme=dark] .participants__list-item:not(:last-child),
[data-theme=dark] #portal .voting-dialog:after,
[data-theme=dark] #portal .timer-dialog:after,
[data-theme=dark] .avatar-settings__settings-group-item-seperator,[data-theme=dark] .avatar-settings__settings-group-seperator,
[data-theme=dark] .settings-dialog__separator {
  border-color: #1a1c22 !important;
}
[data-theme=dark] .drag-indicator-pill {
  border-color: #08090c !important;
}

/* --- Login screen re-skin (dark) — matches the Dead Code website
 * (feat-website-restructure: Fira Code, #0d0e12 base, marigold ramp + dot-grid +
 * glow). Cheap CSS motion only (bg drift, card/button reveal, hover lift);
 * reduced-motion safe. scrumlr's Stan sloths stay; its top-left wordmark and the
 * internal-useless "benefits" blurb are removed. */
html[data-theme="dark"] {
  --dc-bg: #0d0e12;
  --dc-card: #16181d;
  --dc-border: #3a3b41;
  --dc-primary: #f28705;
  --dc-primary-light: #f2b705;
  --dc-primary-dark: #f25c05;
  --dc-glow: rgba(242, 135, 5, 0.35);
}
/* App shell base → the website's near-black (the .scrumlr-background div wraps the
 * page content, so only recolour it — never display:none). */
html[data-theme="dark"] .scrumlr-background {
  background-image: none !important;
  background-color: var(--dc-bg) !important;
}
/* Login page only (its shell wraps a .login-board): marigold dot-grid + radial
 * glow, slowly drifting — the website's atmosphere, scoped off the board. */
html[data-theme="dark"] .scrumlr-background:has(.login-board) {
  background-image:
    radial-gradient(ellipse 75% 55% at 50% 38%, rgba(242, 135, 5, 0.10), transparent 70%),
    radial-gradient(rgba(242, 135, 5, 0.15) 1px, transparent 1px) !important;
  background-size: 100% 100%, 30px 30px !important;
  background-repeat: no-repeat, repeat !important;
  animation: dc-drift 70s linear infinite;
}
@keyframes dc-drift {
  from { background-position: 50% 38%, 0 0; }
  to   { background-position: 50% 38%, 0 600px; }
}
html[data-theme="dark"] .header-bar__scrumlr-logo-container,
html[data-theme="dark"] .login-board__providers-section h1,
html[data-theme="dark"] .login-board__features {
  display: none !important;
}
/* Elevated card: website surface, marigold top-accent, depth + glow, reveal. */
html[data-theme="dark"] .login-board__card {
  background-color: var(--dc-card) !important;
  border: 1px solid var(--dc-border) !important;
  border-top: 2px solid var(--dc-primary) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.7), 0 0 90px -50px var(--dc-glow) !important;
  animation: dc-card-in 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes dc-card-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* Dead Code wordmark (logo mark + monospace title) above the card content. */
html[data-theme="dark"] .login-board__card::before {
  content: "Dead Code IO";
  display: block;
  text-align: center;
  background: url("/dcio/logo.png") no-repeat top center;
  background-size: 52px;
  padding-top: 64px;
  margin-bottom: 1.3rem;
  font: 600 1.5rem/1.1 "Fira Code", "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: -0.01em;
  color: #e6e8ee;
  text-shadow: 0 0 24px var(--dc-glow);
}
/* Keycloak button: marigold gradient + glow, lift on hover. */
html[data-theme="dark"] .login-board__providers-section .legacy-button--primary {
  background: linear-gradient(135deg, var(--dc-primary-dark), var(--dc-primary) 55%, var(--dc-primary-light)) !important;
  box-shadow: 0 10px 28px -10px var(--dc-glow) !important;
  transition: box-shadow 0.25s ease, transform 0.15s ease !important;
}
html[data-theme="dark"] .login-board__providers-section .legacy-button--primary:hover {
  box-shadow: 0 14px 36px -8px var(--dc-glow), 0 0 0 1px var(--dc-primary-light) !important;
  transform: translateY(-1px) !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] .scrumlr-background:has(.login-board),
  html[data-theme="dark"] .login-board__card { animation: none !important; }
}

/* --- Homepage (dark only): drop scrumlr's colourful hero-tile art, centre the
 * headline, and rebrand the 'team'/'retrospective' accents to Marigold orange.
 * The illustration is a multi-colour SVG set that can't be recoloured cleanly. */
html[data-theme="dark"] .homepage__illustration {
  display: none !important;
}
html[data-theme="dark"] .homepage__hero-content {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 760px !important;
}
html[data-theme="dark"] .homepage__hero-content > * {
  flex: 0 0 auto !important;
}
html[data-theme="dark"] .homepage__hero-text {
  max-width: 560px;
  margin-left: auto !important;
  margin-right: auto !important;
}
html[data-theme="dark"] .homepage__hero-title-team,
html[data-theme="dark"] .homepage__hero-title-retrospective {
  background: none !important;
  -webkit-text-fill-color: #f28705 !important;
  color: #f28705 !important;
}