/* Login page: same treatment as the PolpoHire app login (frontend-v4 LoginScreen.vue).
   Dark smoke shader (login.js), a glass card, floating-label underline fields, a blue
   submit with a sliding arrow. Scoped to Planka's login grid (_grid_45te1). */

[class*="_grid_45te1"] {
  position: relative; min-height: 100vh; min-height: 100dvh; margin: 0 !important;
  display: grid !important; place-items: center; padding: 24px; overflow: hidden;
  background: #05070f !important;
  font-family: "Inter", var(--polpo-font, ui-sans-serif), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.polpo-auth__shader { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.polpo-auth__haze {
  position: absolute; inset: 0; z-index: 1;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  background: rgba(5, 7, 15, 0.34);
}

/* Planka chrome that has no place on the glass */
[class*="_cover_45te1"], [class*="_formTitle_45te1"], [class*="_poweredBy_45te1"], [class*="_inputLabel_45te1"],
[class*="_grid_45te1"] [class*="_logoWrapper_45te1"], [class*="_grid_45te1"] .polpo-login-lockup { display: none !important; }

/* specificity beats Semantic's .ui.grid > .six.wide.column and polpo.css's :not() variant */
.ui.grid[class*="_grid_45te1"] > .column[class*="_gridItem_45te1"]:not([class*="_cover_45te1"]) {
  position: relative; z-index: 2; width: 100% !important; max-width: 384px !important;
  min-height: 0 !important; height: auto !important;
  flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important;
}
[class*="_grid_45te1"] [class*="_login_45te1"] { padding: 0 !important; min-height: 0 !important; height: auto !important; display: block !important; }
[class*="_grid_45te1"] h1.polpo-word, [class*="_grid_45te1"] h1[class*="_formTitle_45te1"] { display: none !important; }

/* glass card */
[class*="_grid_45te1"] [class*="_form_45te1"] {
  width: 100%; height: auto !important; flex: none !important; padding: 32px !important; margin: 0 !important;
  display: flex; flex-direction: column; gap: 24px;
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
}

/* head: mark + wordmark, title, subline */
.polpo-auth__head { text-align: center; }
.polpo-auth__brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.polpo-auth__glyph { width: 26px; height: 26px; object-fit: contain; display: block; flex: none; }
.polpo-auth__word { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #fff; }
.polpo-auth__word-2 { color: #8ea2ff; }
[class*="_grid_45te1"] [class*="_formSubtitle_45te1"] {
  margin: 0 !important; font-size: 30px !important; font-weight: 700 !important;
  letter-spacing: -0.02em; color: #fff !important; font-family: inherit !important;
}
.polpo-auth__sub { margin: 8px 0 0; font-size: 14px; color: rgba(209, 213, 219, 0.95); }

/* form */
[class*="_grid_45te1"] form.ui.form {
  display: flex; flex-direction: column; gap: 32px; margin: 0;
  padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
[class*="_grid_45te1"] [class*="_inputWrapper_45te1"] { position: relative; margin: 0 !important; }
[class*="_grid_45te1"] .ui.input { width: 100%; display: block; }
[class*="_grid_45te1"] .ui.input > input {
  display: block; width: 100% !important; padding: 10px 0 !important; margin: 0;
  font-family: inherit !important; font-size: 14px !important; color: #fff !important;
  background: transparent !important; border: 0 !important;
  border-bottom: 2px solid rgba(209, 213, 219, 0.75) !important; border-radius: 0 !important;
  outline: none; box-shadow: none !important; transition: border-color 200ms ease;
}
[class*="_grid_45te1"] .ui.icon.input > input { padding-right: 34px !important; }
[class*="_grid_45te1"] .ui.input > input:focus { border-bottom-color: #3b82f6 !important; }
.polpo-ffield__label {
  position: absolute; top: 12px; left: 0; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: rgba(209, 213, 219, 0.95); pointer-events: none;
  transform-origin: left top; transition: transform 300ms ease, color 300ms ease;
}
.polpo-ffield__label svg { flex: none; }
[class*="_inputWrapper_45te1"]:has(input:focus) .polpo-ffield__label,
[class*="_inputWrapper_45te1"]:has(input:not(:placeholder-shown)) .polpo-ffield__label,
[class*="_inputWrapper_45te1"]:has(input:-webkit-autofill) .polpo-ffield__label {
  transform: translateY(-24px) scale(0.75);
}
[class*="_inputWrapper_45te1"]:has(input:focus) .polpo-ffield__label { color: #60a5fa; }

/* Chrome autofill paints an opaque box; clip it to the glyphs (see LoginScreen.vue) */
[class*="_grid_45te1"] input:-webkit-autofill,
[class*="_grid_45te1"] input:-webkit-autofill:hover,
[class*="_grid_45te1"] input:-webkit-autofill:focus {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: #fff; caret-color: #fff;
  transition: background-color 9999999s step-end;
}

/* eye toggle (Semantic icon inside the icon-input) */
[class*="_grid_45te1"] .ui.icon.input > i.icon {
  right: 0 !important; top: 8px !important; width: 28px !important; height: 28px !important;
  margin: 0 !important; line-height: 28px !important; opacity: 1 !important;
  color: rgba(209, 213, 219, 0.85) !important; border-radius: 6px;
  transition: color 150ms ease, transform 150ms ease;
}
[class*="_grid_45te1"] .ui.icon.input > i.icon:hover { color: #fff !important; }
[class*="_grid_45te1"] .ui.icon.input > i.icon:active { transform: scale(0.92); }

/* forgot link row (link is appended by polpo.js; moved into the row by login.js) */
.polpo-auth__row { display: flex; align-items: center; justify-content: space-between; margin-top: -12px; }
[class*="_grid_45te1"] a#polpo-forgot {
  display: inline !important; margin: 0 !important; font-family: inherit !important; font-size: 12px !important;
  font-weight: 400 !important; line-height: 1.4 !important; color: rgba(209, 213, 219, 0.95) !important;
  opacity: 1 !important; text-decoration: none !important; transition: color 150ms ease;
}
[class*="_grid_45te1"] a#polpo-forgot:hover { color: #fff !important; }

/* submit */
[class*="_grid_45te1"] form.ui.form .field { margin: 0 !important; }
[class*="_grid_45te1"] button.ui.button {
  position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px !important; margin: 0 !important;
  font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important; text-transform: none;
  color: #fff !important; background: #2563eb !important; border: none !important; border-radius: 8px !important;
  box-shadow: none !important; cursor: pointer; transition: background 300ms ease, transform 150ms ease;
}
[class*="_grid_45te1"] button.ui.button:hover:not(:disabled) { background: #1d4ed8 !important; }
[class*="_grid_45te1"] button.ui.button:active:not(:disabled) { transform: scale(0.985); }
[class*="_grid_45te1"] button.ui.button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
[class*="_grid_45te1"] button.ui.button:disabled, [class*="_grid_45te1"] button.ui.button.loading { opacity: 0.6; }
[class*="_grid_45te1"] button.ui.button > i.icon { display: none !important; }
.polpo-auth__arrow { transition: transform 300ms ease; }
[class*="_grid_45te1"] button.ui.button:hover:not(:disabled) .polpo-auth__arrow { transform: translateX(4px); }

/* error */
[class*="_grid_45te1"] .ui.message {
  margin: -8px 0 0 !important; padding: 10px 12px !important;
  font-size: 13px; color: #fecaca !important;
  background: rgba(153, 27, 27, 0.35) !important; border: 1px solid rgba(248, 113, 113, 0.4) !important;
  border-radius: 8px !important; box-shadow: none !important;
}
[class*="_grid_45te1"] .ui.message .content p { color: #fecaca; margin: 0; }
[class*="_grid_45te1"] .ui.message > i.close.icon { color: #fecaca; opacity: .8; top: 9px; right: 8px; }

@media (prefers-reduced-motion: reduce) {
  [class*="_grid_45te1"] .ui.input > input, .polpo-ffield__label, .polpo-auth__arrow,
  [class*="_grid_45te1"] button.ui.button, [class*="_grid_45te1"] .ui.icon.input > i.icon { transition: none; }
}

/* Semantic's .ui.form label colour outranks the plain class; pin the ATS ink */
#app .polpo-ffield__label { color: rgba(209, 213, 219, 0.95) !important; font-size: 14px !important; font-weight: 400 !important; margin: 0 !important; }
#app [class*="_inputWrapper_45te1"]:has(input:focus) .polpo-ffield__label { color: #60a5fa !important; }
#app [class*="_grid_45te1"] form.ui.form { margin-top: 8px; }
@media (max-width: 480px) {
  .ui.grid[class*="_grid_45te1"] > .column[class*="_gridItem_45te1"]:not([class*="_cover_45te1"]) { max-width: calc(100vw - 32px) !important; }
  [class*="_grid_45te1"] [class*="_form_45te1"] { padding: 28px 24px !important; }
}