/* ======================================================================
   Complete visual redesign for the Notes app
   - modern typographic scale
   - distinct color palette
   - stylish form and animated cards
   - responsive rules
   ====================================================================== */

/* Base tokens */
:root{
  --bg-100: #0f1724; /* deep navy */
  --bg-90: #0b1220;
  --surface: #0f1728;
  --card: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --muted: #9aa4b2;
  --accent: #7c5cff; /* violet accent */
  --accent-600: #5b3df0;
  --success: #2ecc71;
  --danger: #ff6b6b;
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.02);
}

/* Page base */
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 400px at 10% 10%, rgba(124,92,255,0.12), transparent 10%),
              linear-gradient(180deg, var(--bg-100) 0%, var(--bg-90) 100%);
  color: #e6eef8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Container tweaks (slightly narrower for a modern look) */
.container{ max-width:1100px; }

/* Headings */
h1{ color: #fff; font-weight:700; font-size:2.2rem; margin-bottom:1rem; }

/* Form column card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius:14px;
  box-shadow: 0 8px 30px rgba(3,6,23,0.6);
}

.card .card-body{ padding:20px; }

/* Form styling */
#note-form{ display:flex; flex-direction:column; gap:12px; }
#note-title, textarea#note-desc{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  color: #e9f0ff;
  padding:10px 12px;
  border-radius:10px;
}


h1{
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.5rem;
}

h2{
  color: #fff;
  margin-bottom: 15px;
}


.col-md-8{
  border-left: 3px solid rgba(255,255,255,0.15);
}

#notes-list{
  margin-left : 5px;
}

textarea#note-desc{ min-height:140px; resize:vertical; }

#form-title{ color:#fff; margin-bottom:6px; font-weight:700; }
#form-error{ color: var(--danger); }

#submit-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px;
  background: linear-gradient(90deg,var(--accent),var(--accent-600)); border:none; color:#fff; font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

#submit-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(91,61,240,0.16); filter:brightness(1.03); }

#cancel-btn{ background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.03); }

.form-editing #submit-btn{ background: linear-gradient(90deg,#2ecc71,#21b25a) !important; box-shadow: 0 8px 18px rgba(46,204,113,0.12) !important; }

/* Notes list grid */
#notes-list{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.note-col{ width: calc(50% - 9px); }

/* Card visuals */
.note{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px; padding:14px; position:relative; overflow:hidden;
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease, opacity .18s ease, height .18s ease;
}

.note:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(3,6,23,0.6); }

.note h5{ margin:0 0 8px 0; font-size:1.05rem; color:#fff; }
.note p{ margin:0; color:var(--muted); font-size:0.95rem; line-height:1.4; white-space:pre-wrap }

/* delete button - pill style */
.note .delete-btn{ position:absolute; top:12px; right:12px; background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--danger); padding:6px 8px; border-radius:999px; font-weight:700; cursor:pointer; transition:transform .12s ease, background .12s ease; }
.note .delete-btn:hover{ transform:translateY(-2px); background: rgba(255,255,255,0.02); }

/* edit indicator */
.note.editing{ box-shadow: 0 14px 32px rgba(124,92,255,0.12); border-left:6px solid var(--accent); transform:translateY(-2px); }

/* removal animation */
.note.removing{
  /* play a short keyframe to shrink, fade and slide up, then collapse */
  animation: note-remove 420ms cubic-bezier(.2,.9,.3,1) forwards;
}

/* new note pop-in animation */
.note.note-new{
  animation: note-pop 520ms cubic-bezier(.2,.9,.3,1) both;
}

@keyframes note-pop{
  0%{ transform: translateY(6px) scale(.96); opacity:0; filter: blur(1px); }
  40%{ transform: translateY(-2px) scale(1.02); opacity:1; filter: blur(0); }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}

/* helper to reserve space during animation to avoid layout jumps */
.note-col.note-col-new{ /* keep the same width, add a little extra spacing while animating */
  z-index:2; /* appear above others briefly */
}

@keyframes note-remove{
  0%{
    opacity:1;
    transform: translateY(0) scale(1);
    max-height: 400px;
    padding:14px;
    margin-bottom:18px;
    border-width:1px;
  }
  40%{
    opacity:0.6;
    transform: translateY(-6px) scale(.985);
  }
  100%{
    opacity:0;
    transform: translateY(-18px) scale(.96);
    max-height: 0px;
    padding:0px;
    margin-bottom:0px;
    border-width:0px;
  }
}

/* responsive tweaks */
@media (max-width:900px){ .note-col{ width: calc(50% - 9px); } }
@media (max-width:640px){ .note-col{ width:100%; } .container{ padding:12px; } }

/* utilities */
.muted{ color:var(--muted); }

/* small helpers to keep compatibility with existing markup */
.col-md-6{ padding:0; }
.note-card{ display:block; }