/* [Global changes] Hide the Donate button */

.btn-primary.btn.donate.minimal {
display: none;
}

svg.svg-inline--fa.fa-chart-column.fa-icon {
display: none;
}

/*
  Stash — iOS 26 Liquid Glass Login Theme
  ─────────────────────────────────────────
  Drop-in via: Settings → Interface → Custom CSS

  Targets the login page only using the .login-page
  wrapper and Bootstrap classes Stash actually renders.
*/

/* ── Wallpaper & scene ──────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 55% 45% at 15% 20%, rgba(56,139,253,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 85% 75%, rgba(163,94,255,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 55% 95%, rgba(35,206,183,0.12) 0%, transparent 55%),
    linear-gradient(160deg, #0a0c12 0%, #0f1520 45%, #0c1019 100%);
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Animated ambient orbs via pseudo-elements on the form */
.login-page .LoginForm {
  position: relative;
  animation: glass-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-page .LoginForm::before,
.login-page .LoginForm::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  animation: orb-drift ease-in-out infinite alternate;
}

.login-page .LoginForm::before {
  width: 380px;
  height: 380px;
  top: -120px;
  left: -100px;
  background: rgba(56, 139, 253, 0.2);
  animation-duration: 9s;
}

.login-page .LoginForm::after {
  width: 300px;
  height: 300px;
  bottom: -80px;
  right: -80px;
  background: rgba(163, 94, 255, 0.16);
  animation-duration: 12s;
}

@keyframes orb-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(18px, 14px); }
}

@keyframes glass-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Glass card ─────────────────────────────────────── */

.login-page .card {
  position: relative;
  z-index: 1;
  width: 360px !important;
  border-radius: 26px !important;
  border: 0.5px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.085) !important;
  backdrop-filter: blur(52px) saturate(170%) brightness(1.06);
  -webkit-backdrop-filter: blur(52px) saturate(170%) brightness(1.06);
  overflow: hidden;
  box-shadow: none !important;
}

/* Inner specular ring */
.login-page .card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 25px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 2;
}

/* Top shine */
.login-page .card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, transparent 100%);
  border-radius: 26px 26px 0 0;
  pointer-events: none;
  z-index: 2;
}

.login-page .card-body {
  padding: 32px 28px 28px !important;
  position: relative;
  z-index: 3;
}

/* ── Logo ───────────────────────────────────────────── */

/* Hide any existing h4/title text Stash renders above the form */
.login-page .card-body > h4,
.login-page .card-body > .card-title {
  display: none;
}

/* Inject logo + wordmark via a pseudo before the first form-group */
.login-page .card-body::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background:
    url("https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/stash.svg")
    center / 38px 38px no-repeat,
    rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
}

/* "Stash" wordmark */
.login-page .card-body::after {
  content: "Stash";
  display: block;
  text-align: center;
  font-size: 26px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.5px;
  margin-bottom: 24px;
}

/* ── Alert / error state ────────────────────────────── */

.login-page .alert-danger,
.login-page .alert {
  background: rgba(220, 53, 69, 0.14) !important;
  border: 0.5px solid rgba(220, 53, 69, 0.32) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  color: rgba(255, 160, 160, 0.95) !important;
  line-height: 1.45;
  margin-bottom: 14px;
}

/* ── Form labels ────────────────────────────────────── */

.login-page .form-label,
.login-page label {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.32) !important;
  padding: 10px 14px 0 !important;
  margin-bottom: 0 !important;
  display: block;
}

/* ── Input group — iOS Settings grouped style ───────── */

.login-page .form-group,
.login-page .mb-3 {
  margin-bottom: 13px !important;
}

/* Wrap each field in a glass group container */
.login-page .form-group,
.login-page .mb-3 {
  border-radius: 14px;
  overflow: hidden;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  transition: border-color 0.18s, background 0.18s;
}

.login-page .form-group:focus-within,
.login-page .mb-3:focus-within {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.11);
}

/* ── Inputs ─────────────────────────────────────────── */

.login-page .form-control,
.login-page input[type="text"],
.login-page input[type="password"] {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 5px 14px 12px !important;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  caret-color: rgba(255, 255, 255, 0.7);
}

.login-page .form-control::placeholder,
.login-page input::placeholder {
  color: rgba(255, 255, 255, 0.22) !important;
  font-weight: 300;
}

.login-page .form-control:focus,
.login-page input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Autofill override */
.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px rgba(20, 24, 36, 0.95) inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Checkbox (remember me) ─────────────────────────── */

.login-page .form-check {
  margin-bottom: 16px !important;
  padding-left: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-page .form-check-input {
  width: 16px !important;
  height: 16px !important;
  accent-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  flex-shrink: 0;
  margin: 0 !important;
}

.login-page .form-check-label {
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  color: rgba(255, 255, 255, 0.38) !important;
  padding: 0 !important;
  cursor: pointer;
}

/* ── Submit button ──────────────────────────────────── */

.login-page .btn-primary,
.login-page button[type="submit"] {
  width: 100% !important;
  height: 50px !important;
  border: 0.5px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: -0.2px;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  transition: background 0.15s, transform 0.1s !important;
  margin-top: 4px;
}

/* Top shine on button */
.login-page .btn-primary::before,
.login-page button[type="submit"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}

.login-page .btn-primary:hover,
.login-page button[type="submit"]:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

.login-page .btn-primary:active,
.login-page button[type="submit"]:active {
  transform: scale(0.985) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.login-page .btn-primary:focus,
.login-page button[type="submit"]:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}