/* Minimal tweaks on top of Bootstrap */
#notesGrid .card {
  transition: transform .12s ease, box-shadow .12s ease;
}
#notesGrid .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}
textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Force-share-button: make visible / clickable (permanent) */
.share-btn,
[data-testid="share-btn"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 9999 !important;
  min-width: 86px !important;
  color: #0d6efd !important; /* bootstrap primary color for contrast */
  background: #ffffff !important;
  border: 1px solid rgba(13,110,253,0.15) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Allow visible overflow so button isn't clipped */
.card, .card-footer { overflow: visible !important; }

/* Page background */
.auth-bg {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(13,110,253,.12), transparent 60%),
              radial-gradient(1000px 600px at 90% 20%, rgba(13,202,240,.12), transparent 60%),
              linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  position: relative;
  overflow: hidden;
}

/* Soft animated blobs */
.bg-blob {
  position: absolute;
  filter: blur(40px);
  opacity: .35;
  pointer-events: none;
  border-radius: 50%;
  animation: float 16s ease-in-out infinite alternate;
}
.bg-blob-1 { width: 420px; height: 420px; background: #0d6efd; top: -80px; left: -80px; }
.bg-blob-2 { width: 360px; height: 360px; background: #20c997; bottom: -120px; right: -60px; animation-duration: 18s; }
.bg-blob-3 { width: 260px; height: 260px; background: #6f42c1; top: 40%; left: 70%; animation-duration: 22s; }

@keyframes float {
  to { transform: translateY(-20px) translateX(10px) scale(1.03); }
}

/* Card with glassy feel */
.auth-card {
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(1.25) blur(8px);
  border-radius: 1.25rem;
}

/* Brand circle */
.brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0d6efd, #20c997);
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  box-shadow: 0 6px 18px rgba(13,110,253,.25);
}

/* Pills */
.nav-pills .nav-link.pill {
  border-radius: 999px;
  padding: .5rem 1rem;
  background: rgba(13,110,253,.06);
  border: 1px solid rgba(13,110,253,.15);
  transition: all .2s ease;
}
.nav-pills .nav-link.pill.active {
  color: #fff;
  background: linear-gradient(135deg, #0d6efd, #20c997);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(13,110,253,.25);
}

/* Floating labels polish */
.form-floating > label {
  color: rgba(33,37,41,.65);
}
.form-control:focus {
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
  border-color: rgba(13,110,253,.5);
}

/* Divider */
.divider-text {
  position: relative;
  display: inline-block;
  padding: 0 .75rem;
  color: #6c757d;
}
.divider-text::before,
.divider-text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 110px;
  height: 1px;
  background: rgba(0,0,0,.1);
}
.divider-text::before { right: 100%; margin-right: .75rem; }
.divider-text::after  { left: 100%;  margin-left:  .75rem; }

/* Password toggle button */
.password-toggle {
  text-decoration: none;
  border: 0;
}
.password-toggle:hover { color: #0d6efd !important; }

/* Buttons */
.btn-primary, .btn-success {
  border: 0;
  border-radius: .8rem;
  box-shadow: 0 10px 20px rgba(13,110,253,.18);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .75 !important; }

/* Small screens spacing */
@media (max-width: 420px) {
  .brand-mark { width: 56px; height: 56px; border-radius: 14px; }
  .divider-text::before, .divider-text::after { width: 70px; }
}

/* Note preview: 100ch wide, last 50ch fade out */
.note-preview {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  width: 50ch; /* matches the 100-char slice we render in JS */
  /* Fade from fully opaque to transparent over the final 50ch */
  -webkit-mask-image: linear-gradient(to right, #000 0 10ch, transparent 50ch);
          mask-image: linear-gradient(to right, #000 0 10ch, transparent 50ch);
}
.folder-badge {
  border-radius: 999px;
  font-size: .9em;
  padding: 0.3em 0.9em;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 4px #0001;
  margin-left: .3rem;
  display: inline-block;
}