/* FILE: style.css */
:root { --font-sans: 'Inter', sans-serif; --font-hand: 'Chelsea Market', cursive; --color-bg: #f5f5f4; --color-text: #292524; --color-amber: #f59e0b; --color-amber-dark: #d97706; }
body { font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-text); margin: 0; min-height: 100vh; }
.container { max-width: 1280px; margin: 0 auto; padding: 2rem; }
.text-sm { font-size: small; }
.auth-body { display: flex; align-items: center; justify-content: center; }
.auth-container { width: 100%; max-width: 400px; padding: 2rem; background-color: white; border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.auth-container h2 { text-align: center; font-size: 1.875rem; font-weight: bold; margin-bottom: 1.5rem; }
.auth-container form { display: flex; flex-direction: column; gap: 1rem; }
.auth-container input { padding: 0.75rem 1rem; border: 1px solid #e7e5e4; border-radius: 0.5rem; }
.auth-container button { padding: 0.75rem; font-weight: bold; color: #451a03; background-color: var(--color-amber); border: none; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.2s; }
.auth-container button:hover { background-color: #fbbf24; }
.auth-container p { text-align: center; font-size: 0.875rem; margin-top: 1rem; }
.auth-container a { color: var(--color-amber-dark); font-weight: 600; text-decoration: none; }
.auth-container a:hover { text-decoration: underline; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; }
header h1 { font-size: 2.5rem; font-weight: bold; margin: 0; }
header p { color: #78716c; margin: 0; }
.btn-logout { padding: 0.5rem 1rem; background-color: #ef4444; color: white; font-weight: 600; border-radius: 0.5rem; text-decoration: none; transition: background-color 0.2s; }
.btn-logout:hover { background-color: #dc2626; }
.note-form-container { max-width: 600px; margin: 0 auto 2rem auto; background-color: white; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
#note-form { display: flex; flex-direction: column; gap: 1rem; }
#note-form textarea { padding: 1rem; border: 0.5px dashed #a8a29e; border-radius: 0.5rem; font-family: var(--font-sans); resize: vertical; }
#note-form button { padding: 0.75rem; font-weight: bold; color: #451a03; background-color: var(--color-amber); border: none; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.2s; }
#note-form button:hover { background-color: #fbbf24; }
.note-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.note { padding: 1rem; border-radius: 0.5rem; border: #78716c 0.7px dashed; box-shadow: 5px 5px 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; min-height: 200px; transition: transform 0.2s, box-shadow 0.2s; cursor: grab; }
.note:hover { transform: scale(1.05); box-shadow: 10px 10px 20px rgba(0,0,0,0.2); }
.note.dragging { opacity: 0.5; cursor: grabbing; box-shadow: 10px 10px 20px rgba(0,0,0,0.2); transform: scale(1.05); }

.note-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; min-height: 24px; }
.note-owner { font-size: 0.75rem; color: #78716c; }
.note-owner::before { content: '📌'; margin-right: 4px; align-items: center;}
.collaborators-list { display: flex; }
.collaborator-avatar { width: 24px; height: 24px; border-radius: 50%; background-color: #a8a29e; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; margin-left: -8px; border: 2px solid white; cursor: pointer; }
.collaborator-avatar:first-child { margin-left: 0; }
.note-content { flex-grow: 1; }
.note-content p { font-family: var(--font-hand); font-size: 1.5rem; color: #44403c; word-wrap: break-word; margin: 0 0 1rem 0; min-height: 50px; }
.note-content .note-image { width: 100%; max-height: 150px; object-fit: cover; border-radius: 0.25rem; margin-bottom: 0.5rem; }
.note-edit-textarea { width: 100%; background: transparent; border: 1px dashed #a8a29e; border-radius: 0.25rem; font-family: var(--font-hand); font-size: 1.5rem; color: #44403c; resize: vertical; margin-bottom: 1rem; }
.note-input { background: transparent; border: 0.5px dashed #a8a29e; border-radius: 0.5rem; font-family: var(--font-hand); font-size: 1rem; color: #44403c; resize: vertical; margin-bottom: 1rem;}
.note-footer { border-top: 1px solid rgba(0,0,0,0.1); padding-top: 0.75rem; margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.note-actions, .note-meta { display: flex; gap: 0.5rem; align-items: center; }
.note-actions button, .note-actions label, .note-meta button { color: #57534e; cursor: pointer; background: none; border: none; padding: 0.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s, color 0.2s; }
.note-actions button:hover, .note-actions label:hover, .note-meta button:hover { background-color: #e7e5e4; color: black; }
.note-actions svg, .note-meta svg { width: 18px; height: 18px; }
.save-note-btn svg { stroke: #16a34a; }
.delete-note-btn:hover { background-color: #fee2e2; }
.delete-note-btn:hover svg { stroke: #ef4444; }
.note-timestamp { width: 100%; text-align: left; font-size: 0.75rem; color: #a8a29e; margin-top: 0.75rem; }
.checklist-preview { font-size: 0.8rem; color: #78716c; background-color: #f5f5f4; padding: 0.25rem 0.5rem; border-radius: 0.25rem; margin-top: 0.5rem; display: inline-block; }
#checklist-items-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; max-height: 300px; overflow-y: auto; }
#checklist-items-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-bottom: 1px solid #e7e5e4; }
#checklist-items-list li.no-items { color: #a8a29e; justify-content: center; }
#checklist-items-list li.completed .checklist-text { text-decoration: line-through; color: #a8a29e; }
#checklist-items-list .checklist-text { flex-grow: 1; }
#checklist-items-list input[type="checkbox"] { width: 1rem; height: 1rem; }
.checklist-item-actions { display: flex; gap: 0.5rem; }
.checklist-item-actions button { font-size: 0.75rem; background: none; border: 1px solid #d6d3d1; border-radius: 0.25rem; cursor: pointer; padding: 0.2rem 0.4rem; }
.checklist-item-actions button.delete-checklist-btn:hover { background-color: #fee2e2; border-color: #fca5a5; }
.bg-yellow-200 { background-color: #fef08a; } .bg-green-200 { background-color: #bbf7d0; } .bg-blue-200 { background-color: #bfdbfe; } .bg-pink-200 { background-color: #fbcfe8; } .bg-purple-200 { background-color: #e9d5ff; } .bg-orange-200 { background-color: #fed7aa; }
.rotate-0 { transform: rotate(0deg); } .rotate-1 { transform: rotate(1deg); } .rotate-2 { transform: rotate(2deg); } .rotate--1 { transform: rotate(-1deg); } .rotate--2 { transform: rotate(-2deg); }
.search-container { max-width: 600px; margin: 0 auto 1rem auto; display: flex; gap: 1rem; }
#hashtag-search { width: 100%; padding: 0.75rem; border: 2px solid #e7e5e4; border-radius: 0.5rem; font-size: 1rem; flex-grow: 1; }
.hashtags-container { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hashtag { background-color: #e7e5e4; color: #57534e; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.hashtag:hover { background-color: #d6d3d1; }
.graph-btn { padding: 0.75rem 1rem; background-color: #3b82f6; color: white; border: none; border-radius: 0.5rem; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }
.graph-btn:hover { background-color: #2563eb; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: white; padding: 2rem; border-radius: 0.5rem; width: 90%; max-width: 500px; position: relative; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.modal-content h3 { margin-top: 0; }
.modal-content form { display: flex; flex-direction: column; gap: 1rem; }
.modal-content input[type="email"], .modal-content input[type="text"] { width: 100%; padding: 0.75rem; border: 1px solid #d6d3d1; border-radius: 0.5rem; }
.modal-content button { padding: 0.75rem; font-weight: bold; color: #451a03; background-color: none; border: none; border-radius: 2rem; cursor: pointer; }
.modal-close { position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; background: none; border: none; cursor: pointer; color: #a8a29e; border-radius: 2.5rem; }
.graph-modal-content { max-width: 800px; height: 80vh; display: flex; flex-direction: column; }
.graph-instructions { text-align: center; margin-bottom: 1rem; color: #78716c; font-size: 0.9rem; }

/* --- Gaya Graph D3.js --- */
#hashtag-graph-container { width: 100%; height: 100%; flex-grow: 1; cursor: grab; }
#hashtag-graph-container:active { cursor: grabbing; }
.graph-links line { stroke: #999; stroke-opacity: 0.6; }
.graph-nodes circle { stroke: #fff; stroke-width: 1.5px; }
.graph-nodes text { font-family: var(--font-sans); font-size: 10px; text-anchor: middle; fill: #333; }
.graph-nodes g { cursor: pointer; }
.graph-empty-message { text-align: center; color: #78716c; margin-top: 2rem; }