/* Sticky notes board & list */
.sticky-board { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem; }
.sticky-card { padding:.75rem .9rem; border-radius:.5rem; box-shadow:0 2px 6px rgba(0,0,0,.12); display:flex; flex-direction:column; min-height:160px; max-height:260px; transition:transform .1s, box-shadow .1s; cursor:pointer; position:relative; }
/* When a card's kebab menu is open, lift it above sibling cards that come
   later in the DOM so the menu is not painted underneath them. */
.sticky-card:has(.dropdown-menu.show) { z-index: 1080; }
.sticky-card .dropdown-menu { z-index: 1085; }
.sticky-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.sticky-card.archived { opacity:.65; }
.sticky-card-header { display:flex; align-items:center; gap:.25rem; margin-bottom:.4rem; }
.sticky-owner { background:rgba(0,0,0,.15); color:#fff; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; }
.sticky-title { margin:0 0 .35rem 0; font-weight:600; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sticky-content { white-space:pre-wrap; word-break:break-word; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; }
.sticky-readmore { align-self:flex-start; margin-top:.25rem; text-decoration:underline; color:#0d6efd; }
.sticky-card-footer { margin-top:.5rem; }
.sticky-color-dot { display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }
.sticky-list tr.archived { opacity:.65; }
.sticky-detail-content { white-space:pre-wrap; word-break:break-word; max-height:60vh; overflow-y:auto; font-size:1rem; line-height:1.5; }

.color-swatch { width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.color-swatch.selected { border-color:#212529; }
/* Theme-aware note colors. Light = klassiske post-it pasteller (bevaret),
   dark = dybere toner med lys tekst. Tokens bor i app.css så light/dark
   styres ét sted. */
.color-Yellow { background: var(--note-bg-yellow); color: var(--note-fg-yellow); }
.color-Pink   { background: var(--note-bg-pink);   color: var(--note-fg-pink); }
.color-Blue   { background: var(--note-bg-blue);   color: var(--note-fg-blue); }
.color-Green  { background: var(--note-bg-green);  color: var(--note-fg-green); }
.color-Orange { background: var(--note-bg-orange); color: var(--note-fg-orange); }
.color-Purple { background: var(--note-bg-purple); color: var(--note-fg-purple); }
.color-Gray   { background: var(--note-bg-gray);   color: var(--note-fg-gray); }

.sticky-card.pinned { box-shadow:0 0 0 2px #0d6efd, 0 2px 6px rgba(0,0,0,.12); }
.sticky-card.expiring-soon { box-shadow:0 0 0 2px #ffc107, 0 2px 6px rgba(0,0,0,.12); }
.sticky-card.expired { box-shadow:0 0 0 2px #dc3545, 0 2px 6px rgba(0,0,0,.12); }
.sticky-card.pinned.expiring-soon { box-shadow:0 0 0 2px #0d6efd, 0 0 0 4px #ffc107, 0 2px 6px rgba(0,0,0,.12); }
.sticky-card.pinned.expired { box-shadow:0 0 0 2px #0d6efd, 0 0 0 4px #dc3545, 0 2px 6px rgba(0,0,0,.12); }
.sticky-pin-icon { color:#0d6efd; font-size:.85rem; }

.sticky-checklist { list-style:none; padding-left:0; margin:0; }
.sticky-checklist li { display:flex; align-items:flex-start; gap:.4rem; padding:.1rem 0; }
.sticky-checklist li.done .item-text { text-decoration:line-through; opacity:.65; }
.sticky-checklist .item-text { flex:1; word-break:break-word; white-space:pre-wrap; }