/* ═══════════════════════════════════════════════
   NOTED PAD PRO v4 — components.css
   Buttons, badges, chips, note items, status dots
═══════════════════════════════════════════════ */

/* ── Button Base ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  user-select: none;
}
.btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.btn:active { transform: scale(.97); }

/* Variants */
.btn-primary {
  background: var(--accent); color: #0d0f14;
  border-color: var(--accent); font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 0 16px var(--accent-glow); }

.btn-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(224,85,85,.3); }
.btn-success { background: var(--success-soft); color: var(--success); border-color: rgba(72,187,120,.3); }
.btn-info    { background: var(--info-soft);    color: var(--info);    border-color: rgba(74,158,255,.3); }
.btn-active  { background: var(--info-soft);    color: var(--info);    border-color: rgba(74,158,255,.3); }

/* Icon button */
.ibtn {
  width: 31px; height: 31px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.ibtn:hover { background: var(--bg-hover); color: var(--accent); }

/* Separator */
.sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }
.spc { flex: 1; }

/* ── Tag Chips ── */
.tp {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 13px;
  font-weight: 600;
  line-height: 1.6;
}
.tp-work     { background: var(--info-soft);    color: var(--info);    }
.tp-personal { background: var(--purple-soft);  color: var(--purple);  }
.tp-ideas    { background: var(--teal-soft);    color: var(--teal);    }
.tp-urgent   { background: var(--danger-soft);  color: var(--danger);  }
.tp-done     { background: var(--success-soft); color: var(--success); }

/* Due date pills */
.nd { font-size: 9.5px; padding: 1px 5px; border-radius: var(--radius-sm); font-weight: 600; }
.nd-ok  { background: var(--success-soft); color: var(--success); }
.nd-sn  { background: var(--warning-soft); color: var(--warning); }
.nd-ov  { background: var(--danger-soft);  color: var(--danger);  }

/* Filter chips */
.fc {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 18px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
  border: 1px solid transparent;
  white-space: nowrap;
  opacity: .5;
  user-select: none;
}
.fc:hover   { opacity: .8; }
.fc.on      { opacity: 1; border-color: var(--border-accent); }
.fc-all     { background: var(--accent-soft);  color: var(--accent);  }
.fc-pin     { background: var(--info-soft);    color: var(--info);    }
.fc-due     { background: var(--teal-soft);    color: var(--teal);    }
.fc-folder  { background: var(--purple-soft);  color: var(--purple);  }
.fc-add     { background: rgba(255,255,255,.03); color: var(--text-muted); border: 1px dashed rgba(255,255,255,.1); }
.fc-add:hover { color: var(--accent); border-color: var(--border-accent); opacity: 1; }

/* ── Note List Item ── */
.ni {
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  border: 1px solid transparent;
  margin-bottom: 2px;
  position: relative;
}
.ni:hover              { background: var(--bg-hover); }
.ni.active             { background: var(--bg-active); border-color: var(--border-accent); }
.ni.is-pinned          { border-color: rgba(74,158,255,.2); }
.ni.is-locked          { border-color: rgba(224,85,85,.2); }
.ni-top                { display: flex; align-items: center; gap: 4px; }
.ni-icon               { font-size: 10px; flex-shrink: 0; }
.ni-title              { font-size: 12.5px; font-weight: 600; color: var(--text-primary); flex: 1; }
.ni.active .ni-title   { color: var(--accent); }
.ni-preview            { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ni-meta               { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.ni-date               { font-size: 10px; color: var(--text-muted); }
.ni-folder             { font-size: 10px; color: var(--purple); background: var(--purple-soft); padding: 1px 5px; border-radius: 8px; }
.ni-count              { font-size: 9.5px; color: var(--text-muted); }
.ni-reminder-dot       { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); flex-shrink: 0; box-shadow: 0 0 4px rgba(45,212,191,.6); }

/* Note actions (hover) */
.ni-actions { position: absolute; top: 6px; right: 6px; display: none; gap: 2px; background: var(--bg-sidebar); border-radius: 5px; padding: 2px; border: 1px solid var(--border); }
.ni:hover .ni-actions,
.ni.active .ni-actions { display: flex; }
.ni-action-btn {
  width: 19px; height: 19px; border-radius: 3px;
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 11px;
  transition: all var(--t-fast);
}
.ni-action-btn:hover     { background: var(--bg-hover); color: var(--accent); }
.ni-action-btn.is-active { color: var(--info); }

/* Section headers */
.section-label {
  padding: 7px 12px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-label button {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  width: 19px; height: 19px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast); font-size: 14px;
}
.section-label button:hover { background: var(--bg-hover); color: var(--accent); }

/* ── Info Panel rows ── */
.rp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.rp-row .label { color: var(--text-secondary); }
.rp-row .value { color: var(--text-primary); font-weight: 600; max-width: 120px; text-align: right; font-size: 11px; }

/* Quick action links */
.rp-link {
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rp-link:hover { border-color: var(--border-accent); color: var(--accent); background: var(--accent-soft); }

/* ── Toast ── */
#toast-container {
  position: fixed;
  bottom: 36px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.toast {
  padding: 8px 15px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 7px;
  animation: toastIn var(--t-normal);
  max-width: 300px;
  pointer-events: auto;
}
.toast.success { border-color: rgba(72,187,120,.35); }
.toast.error   { border-color: rgba(224,85,85,.35); }
.toast.info    { border-color: var(--border-accent); }

/* ── Meta badge ── */
.meta-badge {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* ── Reminder notification banner ── */
#reminder-notify {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-notify);
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 13px 18px;
  box-shadow: var(--shadow-lg);
  display: none;
  align-items: center;
  gap: 11px;
  min-width: 300px;
  animation: remindIn var(--t-slow);
}
#reminder-notify.show { display: flex; }
.rn-icon { font-size: 24px; }
.rn-body { flex: 1; }
.rn-title { font-size: 13px; font-weight: 700; color: var(--accent); }
.rn-msg   { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.rn-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 17px; transition: color var(--t-fast); }
.rn-close:hover { color: var(--text-primary); }

/* ── Pomodoro badge (topbar) ── */
#pomo-badge {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px solid rgba(224,85,85,.3);
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-fast);
}
#pomo-badge.show { display: flex; }
#pomo-badge.rest { background: var(--success-soft); color: var(--success); border-color: rgba(72,187,120,.3); }

/* ── Backlink chips ── */
.bl-chip {
  display: inline;
  background: var(--purple-soft);
  color: var(--purple);
  border: 1px solid rgba(167,139,250,.25);
  padding: 1px 6px;
  border-radius: 8px;
  text-decoration: none;
  font-size: .88em;
  cursor: pointer;
  transition: background var(--t-fast);
}
.bl-chip:hover { background: rgba(167,139,250,.22); }