/* Import your typewriter font */
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap");

/* ───────── THEME PALETTE ───────── */
:root {
  --bg:           #101314;   /* page background */
  --paper:        #1b1e20;   /* card background */
  --ink:          #e7e7e7;   /* primary text */
  --dim:          #a0a0a0;   /* muted text */
  --border:       #33383b;
  --accent:       #4f9ab2;   /* button normal */
  --accent-dark:  #3b7585;   /* button hover */
  --font-main:    "Courier Prime", monospace;
}

/* ───────── GLOBAL RESETS ───────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
}

/* ───────── MAIN JOURNAL CARD ───────── */
main {
  width: 100%;
  max-width: 720px;
  margin: 2rem auto;
  background: var(--paper);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.6);
}

/* ───────── HEADINGS ───────── */
h1 { margin: 0 0 1rem; font-size: 1.8rem; }
h2 { margin: 2rem 0 1rem; font-size: 1.4rem; }

/* ───────── FORM CONTROLS ───────── */
input[type="date"],
textarea {
  width: 100%;
  font-family: var(--font-main);
  font-size: 1rem;
  background: #262a2d;
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 0.6rem;
  border-radius: 4px;
}

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

/* Character counter */
#counter {
  text-align: right;
  font-size: 0.85rem;
  color: var(--dim);
  margin-top: 0.25rem;
}

/* Mood picker */
fieldset { border: none; padding: 0; margin: 1rem 0; }
#mood-picker label {
  font-size: 1.3rem;
  margin-right: 0.75rem;
  cursor: pointer;
}
#mood-picker input { margin-right: 0.15rem; }

/* ───────── BUTTONS ───────── */
button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.55rem 1.1rem;
  font-size: 1rem;
  font-family: var(--font-main);
  border-radius: 5px;
  cursor: pointer;
  margin: 0.25rem 0.25rem 0.75rem 0;
  transition: background 0.15s;
}
button:hover { background: var(--accent-dark); }
button:disabled { opacity: .5; cursor: default; }

/* Load-more stretches full width */
#load-more { width: 100%; }

/* ───────── ENTRY LIST ───────── */
.entry {
  border-top: 1px dashed var(--border);
  padding: 1rem 0;
}
.entry:first-child { border-top: none; }
.entry strong { display: block; margin-bottom: 0.3rem; }

/* ───────── RESPONSIVE TWEAKS ───────── */
@media (max-width: 600px) {
  main { padding: 1rem; }
}



/* ─────────  SUBTLE PAST-ENTRY ACTIONS  ───────── */

/* Only affect the buttons inside .entry blocks */
.entry button {
  /* scale down */
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;

  /* muted colors */
  background: transparent;
  color: var(--dim);
  border: 1px solid transparent;
  border-radius: 3px;
}

/* faint hover so you still know it’s clickable */
.entry button:hover {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  border-color: var(--border);
}

/* optional: stack them inline to save space */
.entry button + button {
  margin-left: 0.4rem;
}

/* ─────────  COMPACT MOOD PICKER  ───────── */

/* Make the fieldset line-up horizontally and wrap if needed */
#mood-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;          /* space between each emoji choice */
  margin-bottom: 1rem;
}

/* Tighter labels & slightly smaller emoji */
#mood-picker label {
  margin: 0;            /* remove default margin */
  font-size: 1.1rem;    /* was 1.3 → feels snugger */
  cursor: pointer;
}

/* Shrink the radio circle and tuck it closer to the emoji */
#mood-picker input {
  margin: 0 0.15rem 0 0;
  transform: scale(0.85);   /* smaller dot */
}

input[type="search"]{
  width: 100%;
  padding: .55rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-family: var(--font-main);
  background: #262a2d;          /* match dark theme */
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 4px;
}


.entry-text {
  cursor: pointer;
}
.entry-text:hover {
  background: rgba(255,255,255,0.04);
}



.mood-btn {
  font-size: 1.5rem;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  transition: all 0.2s;
}

.mood-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.mood-btn.selected {
  border: 1px solid var(--accent);
  background: rgba(79, 154, 178, 0.2);
}


a.btn {
  background: var(--accent);
  color: #fff;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-main);
  transition: background .15s;
}



/* ----- Calendar controls below grid ----- */
.cal-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

/* Accent‑colored link‑style button (reuse palette) */
.btn-link {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-main);
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}
.btn-link:hover {
  background: var(--accent-dark);
}


/* ===== Modal Styles ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden { display: none; }

.modal-dialog {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  width: 90%;
  max-width: 320px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  text-align: center;
}

.modal-dialog h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.modal-action {
  width: 100%;
  margin: .4rem 0;
}

.close-btn {
  margin-top: 1rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  padding: .4rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

.icon-btn {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--ink);
}



.sub-note {
  margin-left: 1rem;
  border-left: 2px solid var(--border);
  padding-left: .6rem;
  margin-top: .4rem;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}

.note-time {
  font-size: .8rem;
  color: var(--dim);
  min-width: 42px;         /* align times */
}

.sub-note button {
  font-size: .7rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--dim);
}

.sub-note button:hover { color: var(--ink); }