/* Nextera Vikunja overlay v2 — tokens from hr-app */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&display=swap");

html, body, :root, .app, .no-auth-wrapper {
  /* Force grey/black palette over Vikunja blue primary */
  --primary-h: 220deg !important;
  --primary-s: 13% !important;
  --primary-l: 18% !important;
  --primary-a: 1 !important;
  --primary-hsl: 220, 13%, 18% !important;
  --primary: hsla(220, 13%, 18%, 1) !important;
  --primary-dark: hsla(220, 13%, 10%, 1) !important;
  --primary-light: hsla(220, 13%, 95%, 1) !important;
  --link-h: 220deg !important;
  --link-s: 13% !important;
  --link-l: 18% !important;
  --link: hsla(220, 13%, 18%, 1) !important;
  --link-hover: hsla(220, 13%, 10%, 1) !important;
  --info: hsla(220, 13%, 30%, 1) !important;
  --button-radius: 23px !important;
  /* hr-app tokens */
  --bg-canvas: #DAD1CC;
  --surface: #FFFFFF;
  --text-primary: #010203;
  --text-muted: #98908B;
  --accent-mint: #34E8BC;
  --accent-green: #4CE41E;
  --accent-green-hover: #3CB815;
  --accent-green-text: #010203;
  --bg-header: #010203;
  --bg-row-alt: #F7F2EE;
  --radius-md: 23px;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --site-background: var(--bg-canvas) !important;
}

html, body, .app, button, input, textarea, select, .button, .has-text-dark, .input {
  font-family: var(--font-sans) !important;
}

body, .app, #app, .main {
  background: var(--bg-canvas) !important;
}

/* Pill buttons override (was 4px) */
.button, .button.is-primary {
  border-radius: var(--radius-md) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.5rem !important;
  min-block-size: 40px !important;
  letter-spacing: -0.005em;
}

/* Login page rebrand */
.no-auth-wrapper .image,
.no-auth-wrapper .image-title,
.no-auth-wrapper > .logo,
.no-auth-wrapper img.logo,
img.logo {
  display: none !important;
}

.no-auth-wrapper {
  background: var(--bg-canvas) !important;
  padding-top: 100px !important;
  min-block-size: 100vh !important;
}

.noauth-container {
  background: var(--surface) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 32px !important;
}

/* Headings */
.noauth-container h1,
.noauth-container .title,
.no-auth-wrapper h1,
h1, h2, .title {
  font-family: var(--font-sans) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* Inputs */
.field .input,
input.input,
.input {
  border-radius: 12px !important;
  border: 1px solid var(--bg-row-alt) !important;
  font-family: var(--font-sans) !important;
  padding: 0.65rem 0.85rem !important;
}
.field .input:focus,
.input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(31,41,55,0.08) !important;
}

/* OIDC SSO button — keep lime accent */
[class*="openid"] .button,
.openid-providers .button,
.openid-providers a.button,
button[class*="provider"] {
  background: var(--accent-green) !important;
  background-color: var(--accent-green) !important;
  color: var(--accent-green-text) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
[class*="openid"] .button:hover {
  background: var(--accent-green-hover) !important;
}

/* Nextera fixed header */
#nextera-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--bg-row-alt);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 9999;
  gap: 12px;
}
#nextera-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
#nextera-header .badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--text-muted);
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* Push main below fixed header */
.app-container,
#app > .main,
.no-auth-wrapper {
  padding-top: 84px !important;
}

/* Subtle link styling */
a, .link {
  color: var(--text-primary) !important;
  text-decoration: none;
}
a:hover {
  color: var(--accent-green-hover) !important;
}

/* Tag green for OIDC label */
.tag.is-primary {
  background-color: var(--text-muted) !important;
}

/* ===== v3 patch: projects list page ===== */

/* Project cards: salatovy lime accent, black text */
.project-card {
  background: var(--accent-green) !important;
  background-color: var(--accent-green) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border-inline-start: none !important;
}
.project-card .project-background {
  display: none !important;
}
.project-card .project-title,
.project-card.has-light-text .project-title,
.project-card.has-background .project-title {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}
.project-card .saved-filter-icon,
.project-card .favorite {
  color: var(--text-primary) !important;
}

/* Action buttons (top-right: Создать фильтр / Создать проект) */
.action-buttons .button,
.action-buttons .button.is-primary,
.project-header .action-buttons a.button {
  background: #98908B !important;
  background-color: #98908B !important;
  color: var(--accent-green) !important;
  --button-text-color: var(--accent-green) !important;
  border: none !important;
}
.action-buttons .button:hover,
.action-buttons .button.is-primary:hover {
  background: #7E7672 !important;
  background-color: #7E7672 !important;
  color: var(--accent-green) !important;
}
.action-buttons .button .icon,
.action-buttons .button svg {
  color: var(--accent-green) !important;
  fill: var(--accent-green) !important;
}

/* Catch-all: any remaining white-on-dark text on this page → dark */
.content .has-text-white,
.project-card .has-text-white {
  color: var(--text-primary) !important;
}

/* ===== v4 patch: bronze gradient + font everywhere ===== */

/* Token: bronze (nextera.ru hero cards) */
:root, html, body, .app, .no-auth-wrapper {
  --bronze-1: #C8A695;
  --bronze-2: #8E6E5E;
  --bronze-grad: linear-gradient(135deg, #C8A695 0%, #8E6E5E 100%);
  --bronze-grad-soft: linear-gradient(135deg, #BFA08F 0%, #9B7D6D 100%);
}

/* Force IBM Plex on every single element */
*, *::before, *::after,
.button, .input, .field, .tag, .title, .subtitle,
h1, h2, h3, h4, h5, h6,
.menu-list a, .menu-label, .project-title, .task-title,
[class*="kanban"], [class*="bucket"], [class*="task"], [class*="filter"] {
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif !important;
}

/* Project cards → bronze gradient (replacing the lime from v3) */
.project-card {
  background: var(--bronze-grad) !important;
  background-color: var(--bronze-2) !important;
  background-image: var(--bronze-grad) !important;
  color: #FFFFFF !important;
  border-inline-start: none !important;
}
.project-card .project-title,
.project-card.has-light-text .project-title,
.project-card.has-background .project-title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
.project-card .saved-filter-icon,
.project-card .favorite,
.project-card .icon {
  color: #FFFFFF !important;
}

/* "Показать архив" checkbox label → readable dark */
.fancycheckbox,
.fancycheckbox span,
.fancycheckbox .check,
.fancycheckbox label,
.project-header .fancycheckbox {
  color: var(--text-primary) !important;
}
.fancycheckbox * {
  color: var(--text-primary) !important;
}

/* Kanban view (inside project): bronze for buckets + toolbar */
.kanban .bucket,
.bucket,
[class*="kanban"] .bucket {
  background: var(--bronze-grad-soft) !important;
  color: #FFFFFF !important;
}
.bucket .bucket-header,
.bucket .title,
.bucket-header input {
  color: #FFFFFF !important;
  background: transparent !important;
}
.bucket .new-task-button,
.bucket .add-task,
.bucket button[class*="add"],
.bucket .new-task {
  background: rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
  border: 1px dashed rgba(255,255,255,0.4) !important;
  border-radius: var(--radius-md) !important;
}

/* View switcher tabs (Список / Гант / Таблица / Канбан) → bronze */
.project-view-switcher,
.switch-view,
.switch-view-container,
[class*="view-switcher"],
.tabs ul,
.tabs {
  background: var(--bronze-grad-soft) !important;
  border-radius: var(--radius-md) !important;
  color: #FFFFFF !important;
}
.tabs li a,
.tabs li,
[class*="view-switcher"] a,
[class*="view-switcher"] button {
  color: rgba(255,255,255,0.7) !important;
  border-color: transparent !important;
}
.tabs li.is-active a,
[class*="view-switcher"] .is-active,
[class*="view-switcher"] .router-link-active {
  background: rgba(255,255,255,0.15) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* "+ Создать колонку" button (kanban toolbar) — match action-buttons style */
.kanban .new-bucket button,
.kanban-create-bucket,
button[class*="new-bucket"],
button[class*="create-bucket"] {
  background: #98908B !important;
  color: var(--accent-green) !important;
  --button-text-color: var(--accent-green) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
}

/* ===== v4 patch: login page contrast fix (2026-05-21) =====
   Pavel: «вообще ничего не видно». Vikunja labels/inputs inherited
   broken color from primary-hsl token override → near-invisible on
   bg-canvas. Force canonical Nextera tokens: text-primary on labels,
   white surface inputs with text-primary text + visible placeholder. */

.no-auth-wrapper label,
.no-auth-wrapper .label,
.no-auth-wrapper .field-label,
.no-auth-wrapper .field .label,
.no-auth-wrapper .checkbox,
.no-auth-wrapper p,
.no-auth-wrapper .help,
.no-auth-wrapper .a11y-text,
.noauth-container label,
.noauth-container .label,
.noauth-container .field-label,
.noauth-container p:not(.help.is-danger),
.noauth-container .legal,
.noauth-container .legal a,
.noauth-container .has-text-grey,
.noauth-container .has-text-light {
  color: var(--text-primary) !important;
  opacity: 1 !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}

/* Section copy ("Используется Vikunja…") slightly muted but readable */
.no-auth-wrapper small,
.noauth-container small,
.noauth-container .is-size-7,
.noauth-container .has-text-grey-light {
  color: #5C5550 !important;
  opacity: 1 !important;
}

/* Inputs: white surface, dark text, visible border */
.no-auth-wrapper input,
.no-auth-wrapper .input,
.no-auth-wrapper .field .input,
.noauth-container input,
.noauth-container .input {
  background: var(--surface) !important;
  background-color: var(--surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid #C8BFBA !important;
  border-radius: 12px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  padding: 0.7rem 0.95rem !important;
  box-shadow: none !important;
}
.no-auth-wrapper input:focus,
.noauth-container input:focus {
  border-color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px rgba(1,2,3,0.08) !important;
}
.no-auth-wrapper input::placeholder,
.noauth-container input::placeholder {
  color: #98908B !important;
  opacity: 1 !important;
}

/* Checkbox label («Оставаться в системе») */
.no-auth-wrapper .checkbox,
.noauth-container .checkbox,
.no-auth-wrapper label.checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* Primary "Войти" button — black pill, white text (matches Nextera design code) */
.no-auth-wrapper .button.is-primary,
.noauth-container .button.is-primary,
.no-auth-wrapper button[type="submit"].button {
  background: var(--text-primary) !important;
  background-color: var(--text-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  padding: 0.7rem 1.6rem !important;
  letter-spacing: 0.01em;
}
.no-auth-wrapper .button.is-primary:hover {
  background: #1a1d22 !important;
}

/* Secondary actions ("Забыли пароль?", "Создать аккаунт", «изменить») —
   readable link style */
.no-auth-wrapper a:not(.button),
.noauth-container a:not(.button) {
  color: var(--text-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500 !important;
}
.no-auth-wrapper a:not(.button):hover,
.noauth-container a:not(.button):hover {
  color: var(--accent-green-hover) !important;
}

/* Error text stays red (отбой of «Введите имя пользователя») but legible */
.no-auth-wrapper .help.is-danger,
.noauth-container .help.is-danger,
.help.is-danger {
  color: #C84A2E !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* OIDC "Войти через Nextera SSO" — keep prominent, full width on mobile */
.openid-providers,
.openid-providers .button,
[class*="openid"] .button {
  width: 100% !important;
  justify-content: center !important;
  margin-block-start: 12px !important;
}

/* ===== v5 patch: login hero + header + full-width buttons (2026-05-21) ===== */

/* Animated header injected via nginx sub_filter before <div id="app"> */
.nextera-app-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--surface);
  padding: 14px 32px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex; align-items: center;
  font-family: var(--font-sans);
}
.nextera-brand {
  display: flex; align-items: center; gap: 10px;
}
.nextera-brand svg {
  height: 32px;
}
.nextera-module-badge {
  display: inline-block;
  background: var(--accent-green) !important;
  color: var(--accent-green-text) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 5px;
  line-height: 1;
}

/* Push Vikunja app below the sticky header */
#app, .no-auth-wrapper {
  padding-top: 0 !important;
}
.no-auth-wrapper {
  min-block-size: calc(100vh - 64px) !important;
  padding-top: 32px !important;
  padding-bottom: 64px !important;
  background: var(--bg-canvas) !important;
}

/* Login card — bigger, with hero h1 ready */
.noauth-container {
  max-width: 520px !important;
  padding: 40px 36px 32px !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04) !important;
}

/* H1 "Войти в Projects" — after sub_filter rewrite */
.noauth-container h1,
.noauth-container .title.is-2,
.no-auth-wrapper h1,
.no-auth-wrapper .title.is-2 {
  font-size: 44px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 4px !important;
}
.nextera-hero-accent {
  color: var(--accent-green) !important;
  font-weight: 700 !important;
}
.nextera-hero-sub {
  display: block;
  color: var(--text-muted) !important;
  font-size: 14px !important;
  margin-bottom: 28px !important;
  font-weight: 500;
}

/* Hide Vikunja "Используется Vikunja на projects.nextera.ru / изменить" footer
   on login — it overlapped labels. */
.no-auth-wrapper .info,
.noauth-container .info,
.no-auth-wrapper p.is-size-7,
.noauth-container .api-config,
.noauth-container > p:first-of-type {
  position: static !important;
  text-align: center;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  opacity: 0.6 !important;
  margin: 16px 0 0 0 !important;
  order: 100;
}

/* Pill inputs (override v4 to be more solid) */
.no-auth-wrapper .input,
.noauth-container .input,
.no-auth-wrapper input.input,
.noauth-container input {
  width: 100% !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid #C8BFBA !important;
  padding: 0.85rem 1.1rem !important;
  font-size: 15px !important;
  background: var(--surface) !important;
}

/* Field label + "Забыли пароль?" — row layout */
.no-auth-wrapper .field,
.noauth-container .field {
  margin-bottom: 18px !important;
}
.no-auth-wrapper .field .field-label,
.noauth-container .field .field-label,
.no-auth-wrapper .field > label.label,
.noauth-container .field > label.label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* "Забыли пароль?" link beside password label */
.no-auth-wrapper a.is-small,
.noauth-container a.is-small,
.no-auth-wrapper .field a,
.noauth-container .field a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  margin-left: auto;
}
.no-auth-wrapper a.is-small:hover,
.noauth-container a.is-small:hover {
  color: var(--text-primary) !important;
}

/* Primary "Войти" — full-width chunky чёрный pill */
.no-auth-wrapper button[type="submit"].button,
.noauth-container button[type="submit"].button,
.no-auth-wrapper .button.is-primary,
.noauth-container .button.is-primary {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: var(--text-primary) !important;
  background-color: var(--text-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  margin-top: 8px;
  letter-spacing: 0.01em;
}
.no-auth-wrapper button[type="submit"].button:hover,
.noauth-container button[type="submit"].button:hover {
  background: #1a1d22 !important;
}

/* SSO button — full-width, not truncated */
[class*="openid"] .button,
.openid-providers .button,
.openid-providers a.button,
button[class*="provider"],
.no-auth-wrapper .openid-providers,
.noauth-container .openid-providers {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}
.openid-providers .button,
[class*="openid"] .button {
  background: var(--accent-green) !important;
  color: var(--accent-green-text) !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
  margin-top: 12px !important;
  white-space: nowrap;
  overflow: visible !important;
  letter-spacing: 0.01em;
}
.openid-providers .button:hover {
  background: var(--accent-green-hover) !important;
}

/* Bottom row "Ещё нет аккаунта? · Создать аккаунт" centered footer */
.no-auth-wrapper .has-text-centered,
.noauth-container .has-text-centered,
.no-auth-wrapper p:has(a[href*="register"]),
.noauth-container p:has(a[href*="register"]) {
  text-align: center !important;
  color: var(--text-muted) !important;
  font-size: 14px !important;
  margin-top: 20px !important;
}
.no-auth-wrapper a[href*="register"],
.noauth-container a[href*="register"] {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  text-decoration: underline;
}

/* Keep-logged-in row */
.no-auth-wrapper .checkbox,
.noauth-container .checkbox {
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 18px 0 12px 0 !important;
}

/* Hide native Vikunja logo on login (we have nextera header now) */
.no-auth-wrapper img.logo,
.no-auth-wrapper .image.logo,
.no-auth-wrapper > .image,
.no-auth-wrapper picture.logo {
  display: none !important;
}

/* ===== v6 patch: target h2 + fix sibling layout + hide Vikunja info ===== */

/* Hero — Vikunja uses <h2 class="title is-2"> not h1 */
.no-auth-wrapper h2,
.noauth-container h2,
.no-auth-wrapper .title,
.noauth-container .title {
  font-size: 44px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 4px !important;
  text-align: left !important;
}

/* Vikunja info block ("Используется Vikunja на projects.nextera.ru / изменить")
   — wraps as a sibling div after h2. Hide on login since header already brands. */
.no-auth-wrapper > div > div:nth-of-type(1),
.noauth-container > div > div:nth-of-type(1),
.no-auth-wrapper > div > .api-config,
.noauth-container > div > .api-config,
.no-auth-wrapper [class*="api-config"],
.noauth-container [class*="api-config"] {
  display: none !important;
}
/* Fallback — by content match impossible in CSS, target any <div> directly under
   the form-card that contains a <button> labeled "изменить" + text "Vikunja" */
.no-auth-wrapper button:where(:not(.is-primary)):where([class*="ghost"], [class*="link"]),
.noauth-container button:where(:not(.is-primary)):where([class*="ghost"], [class*="link"]) {
  /* leave styling, do not hide globally */
}

/* Password row: label + "Забыли пароль?" link as flex row */
.no-auth-wrapper .field:has(input[type="password"]),
.noauth-container .field:has(input[type="password"]) {
  position: relative;
}
.no-auth-wrapper .field label.label + a,
.noauth-container .field label.label + a,
.no-auth-wrapper .field > a[href*="forgot"],
.noauth-container .field > a[href*="forgot"],
.no-auth-wrapper .field > a:not(.button):not([href*="register"]),
.noauth-container .field > a:not(.button):not([href*="register"]) {
  display: inline-block;
  float: right !important;
  margin-left: 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Force form to flex column with proper spacing */
.no-auth-wrapper form,
.noauth-container form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px;
}
.no-auth-wrapper form > .field,
.noauth-container form > .field {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 0 !important;
}
.no-auth-wrapper form > .field label.label,
.noauth-container form > .field label.label {
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
}

/* Password field: make show/hide eye icon visible inside input */
.no-auth-wrapper .field .control:has(input[type="password"]),
.noauth-container .field .control:has(input[type="password"]) {
  position: relative;
}

/* Header content wraps if too narrow — keep row */
.nextera-app-header {
  flex-wrap: nowrap !important;
}
.nextera-brand {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Bigger badge */
.nextera-module-badge {
  font-size: 13px !important;
  padding: 4px 9px !important;
}

/* Make sure Vikunja's own "Войти" button stays after our restyling */
.no-auth-wrapper form button[type="submit"],
.noauth-container form button[type="submit"] {
  align-self: stretch;
}

/* ===== v7 patch: hero size + checkbox layout (2026-05-21) ===== */

/* Hero — smaller font + no-wrap so "Projects" doesn't break */
.no-auth-wrapper h2,
.noauth-container h2,
.no-auth-wrapper .title,
.noauth-container .title {
  font-size: 36px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

/* Wider login card to accommodate hero */
.noauth-container {
  max-width: 460px !important;
  padding: 36px 36px 32px !important;
}

/* Checkbox row — flex row align center (Vikunja renders checkbox as separate <input> + LabelText sibling) */
.no-auth-wrapper form > div:has(> input[type="checkbox"]),
.noauth-container form > div:has(> input[type="checkbox"]),
.no-auth-wrapper [type="checkbox"],
.noauth-container [type="checkbox"] {
  /* let the input flow inline-block */
}
.no-auth-wrapper .field:has([type="checkbox"]),
.noauth-container .field:has([type="checkbox"]) {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
.no-auth-wrapper .field:has([type="checkbox"]) label,
.noauth-container .field:has([type="checkbox"]) label {
  margin: 0 !important;
  font-weight: 500 !important;
}

/* Fix all top-level form checkboxes (Vikunja's "Оставаться в системе" is just bare <input>+text) */
.no-auth-wrapper form label:has(> input[type="checkbox"]),
.noauth-container form label:has(> input[type="checkbox"]),
.no-auth-wrapper form input[type="checkbox"],
.noauth-container form input[type="checkbox"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  vertical-align: middle;
  accent-color: var(--accent-green);
}
.no-auth-wrapper form input[type="checkbox"] + *,
.noauth-container form input[type="checkbox"] + * {
  vertical-align: middle;
}

/* Visible eye-toggle button inside password field */
.no-auth-wrapper .field button.button:not([type="submit"]):not(.is-primary),
.noauth-container .field button.button:not([type="submit"]):not(.is-primary) {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  padding: 0 8px !important;
  min-block-size: 0 !important;
  width: auto !important;
}

/* Subtitle — looks faded; bump contrast slightly */
.nextera-hero-sub {
  color: #5C5550 !important;
  margin-top: 4px !important;
}

/* Card center-align on viewport */
.no-auth-wrapper {
  display: flex !important;
  justify-content: center !important;
}

/* ===== v8 patch: checkbox-label as inline + full-width Войти ===== */

/* Checkbox row: the <label> WRAPS <input type=checkbox> + text */
.no-auth-wrapper form label.label:has(> input[type="checkbox"]),
.noauth-container form label.label:has(> input[type="checkbox"]),
.no-auth-wrapper form label:has(> input[type="checkbox"]),
.noauth-container form label:has(> input[type="checkbox"]) {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 4px 0 12px 0 !important;
  font-weight: 500 !important;
  cursor: pointer;
}
.no-auth-wrapper form label.label > input[type="checkbox"],
.noauth-container form label.label > input[type="checkbox"] {
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--accent-green) !important;
}
.no-auth-wrapper form .field:has(> label > input[type="checkbox"]),
.noauth-container form .field:has(> label > input[type="checkbox"]) {
  flex-direction: row !important;
  margin-top: 4px !important;
}

/* Login submit button — full width chunky black pill */
.no-auth-wrapper form > button.button.is-primary,
.noauth-container form > button.button.is-primary,
.no-auth-wrapper button.base-button.is-primary,
.noauth-container button.base-button.is-primary,
.no-auth-wrapper form button[type="button"].is-primary,
.noauth-container form button[type="button"].is-primary {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  justify-content: center !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: var(--text-primary) !important;
  background-color: var(--text-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  margin: 16px 0 8px 0 !important;
}

/* Password label-with-link wrapper — make sure it's flex row with link on right */
.label-with-link {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 6px !important;
}
.reset-password-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.reset-password-link:hover {
  color: var(--text-primary) !important;
}

/* Eye toggle inside password */
.password-field {
  position: relative;
}
.password-field-type-toggle {
  position: absolute !important;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  padding: 4px !important;
  min-block-size: 0 !important;
  width: auto !important;
}
.password-field input.input {
  padding-right: 44px !important;
}

/* ===== v9 patch: full-width buttons + SSO styling ===== */

/* Force form children stretch */
.no-auth-wrapper form,
.noauth-container form,
.no-auth-wrapper > div,
.noauth-container > div {
  align-items: stretch !important;
}
.no-auth-wrapper form > *,
.noauth-container form > * {
  align-self: stretch !important;
}

/* Primary "Войти" — full width by re-targeting Vikunja's base-button is-primary */
button.base-button.is-primary,
button.base-button.button.is-primary {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-self: stretch !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: var(--text-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  margin: 16px 0 8px 0 !important;
}

/* SSO "Войти через Nextera SSO" — outlined → green filled chunky pill */
button.base-button.is-outlined,
button.base-button.button.is-outlined,
.mbs-4 > button.base-button {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-self: stretch !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: var(--accent-green) !important;
  background-color: var(--accent-green) !important;
  color: var(--accent-green-text) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  margin-top: 14px !important;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
button.base-button.is-outlined:hover,
button.base-button.button.is-outlined:hover,
.mbs-4 > button.base-button:hover {
  background: var(--accent-green-hover) !important;
}

/* Parent wrappers stretch */
.mbs-4, .mbs-2, .no-auth-wrapper > div, .noauth-container > div {
  width: 100%;
}

/* ===== v10 patch: brute force full-width on buttons ===== */
.no-auth-wrapper button.base-button,
.noauth-container button.base-button,
.no-auth-wrapper .mbs-4,
.noauth-container .mbs-4,
.no-auth-wrapper .mbs-2,
.noauth-container .mbs-2 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100% !important;
  flex-basis: 100% !important;
  box-sizing: border-box !important;
}

/* Input full-width too */
.no-auth-wrapper input.input,
.noauth-container input.input,
.no-auth-wrapper .password-field input,
.noauth-container .password-field input {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  box-sizing: border-box !important;
}
.no-auth-wrapper .control,
.noauth-container .control,
.no-auth-wrapper .password-field,
.noauth-container .password-field {
  width: 100% !important;
}

/* Inputs need width:100% per field — make field stretch its children */
.no-auth-wrapper .field,
.noauth-container .field {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Eye icon position - keep absolute */
.password-field-type-toggle {
  position: absolute !important;
}

/* Body wrappers full width */
.no-auth-wrapper > div,
.noauth-container > div {
  width: 100% !important;
}