/* website/static/css/components/notes.css */

/* ------------------------------------------------------------
   CLEAN + LUXURY NOTES SYSTEM (Glass, aligned, Bootstrap-safe)
   website/static/css/components/notes.css
------------------------------------------------------------
   PURPOSE:
   A Bootstrap-safe, glass-aligned notes system with:
   ✓ Real card behavior
   ✓ Clean spacing
   ✓ Tag alignment
   ✓ Expanded/pinned states
   ✓ Theme-aware colors
------------------------------------------------------------ */


/* ============================================================
   1) REMOVE BOOTSTRAP POLLUTION
============================================================ */
#notes-list .list-group-item {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}



/* ============================================================
   2) NOTE CARD (REAL CARD BEHAVIOR)
============================================================ */
.note-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-base);

  padding: 1rem 1.2rem;
  margin-bottom: 1rem;

  box-shadow: var(--shadow-light);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));

  transition:
    background var(--transition-medium),
    border-color var(--transition-medium);
}



/* ============================================================
   3) TITLE + DATE ALIGNMENT
============================================================ */
.note-card .note-title {
  font-weight: 600;
  cursor: pointer;
  color: var(--glass-text);
}

.note-card small {
  color: var(--color-muted);
}



/* ============================================================
   4) EXPANDED CONTENT
============================================================ */
.note-card .note-full {
  margin-top: 0.6rem;
  padding: 0.8rem 0.6rem;

  border-left: 2px solid var(--glass-border);
  color: var(--glass-text);

  line-height: 1.55;
  white-space: pre-line;
}



/* ============================================================
   5) TAGS
============================================================ */
.note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.4rem;
}

.note-tags .badge {
  padding: 4px 8px;
  font-size: 0.75rem;

  background: var(--glass-transparent-bg);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);

  border-radius: var(--radius-small);
}



/* ============================================================
   6) EDIT CONTROLS
============================================================ */
.edit-controls {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
}



/* ============================================================
   7) EXPANDED STATE HIGHLIGHT
============================================================ */
.note-item.expanded .note-card {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb, 255,153,102), 0.12);
}



/* ============================================================
   8) PINNED STATE
============================================================ */
.note-item.pinned .note-card {
  border-color: var(--color-gold);
  background: rgba(255,215,0,0.12);
}



/* ============================================================
   9) NEW NOTE FORM CONTAINER
============================================================ */
#new-note-container.card {
  border-radius: var(--radius-base);

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);

  box-shadow: var(--shadow-light);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}



/* ============================================================
   10) RESPONSIVE
============================================================ */
@media (max-width: 480px) {
  .note-card {
    padding: 0.8rem;
  }
  .note-card .note-title {
    font-size: 1rem;
  }
}