/* styles/diary.css — matches the app aesthetic */

.diary-wrap{
  display:grid; gap:12px;
}

.diary-card{
  padding:16px;
  position: relative;              /* stacking context */
  pointer-events: auto;
}

.diary-form{
  display:flex; flex-direction:column; gap:10px;
}

/* Text area */
#diary-text{
  width:100%;
  min-height:140px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  background:transparent;
  color:var(--ink);
  resize:vertical;

  position: relative;
  z-index: 1;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Status copy under the field */
#diary-status{ color: var(--muted); }

/* Actions row (Save) */
.diary-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
  position: relative;
  z-index: 3;            /* above the textarea */
}

#diary-save{
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

/* History list */
#diary-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}

.diary-item.card{ padding:14px; }
/* ADDED: ensure each item forms its own click-safe layer */
.diary-item.card{ position: relative; z-index: 0; }

.diary-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.d-date{ font-weight:700; letter-spacing:.02em; color:#cfe3ff; }
.d-preview{ color:var(--ink); opacity:.9; }

/* ADDED: make the View button always clickable and above any preview text */
.view-btn{
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

/* Viewer */
.diary-view{
  white-space:normal; color:var(--ink);
  padding:4px 0;
}

/* Mobile */
@media (max-width: 720px){
  #diary-text{ min-height:120px; }
}

/* Safety: never let the diary page itself block input */
#page-diary, #page-diary * { pointer-events: auto; }

/* ─────────────────────────────────────────────
   Editor modal polish (for View → edit/delete)
   ───────────────────────────────────────────── */

/* ADDED: keep the modal spacious and scrollable if content is long */
.diary-edit-modal .modal-body{
  max-height: 60vh;
  overflow: auto;
}

/* ADDED: editor textarea inherits app look */
.diary-edit-modal textarea{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  resize: vertical;
}

/* ADDED: ensure modal sits above any page-level effects if needed */
/* (Your global modal styles likely already handle stacking; this is a light nudge.) */
.modal-mask{
  z-index: 1200;
}