/* ═══════════════════════════════════════════════════════════════════════
   BNT — Yapışkan notlar
   Modül: core/modules/sticky-notes.js · Buton: widgets/stickynotes/

   Notlar `#dashboard` GRID'İNİN DIŞINDA yaşar — `#stickyNotesLayer` tüm
   ekranı kaplayan sabit bir katman. Katmanın kendisi tıklama almaz
   (`pointer-events:none`); yalnızca içindeki gerçek not dikdörtgenleri
   alır, böylece notlar arasındaki boşluklardan tıklama alttaki widget'lara
   sorunsuz geçer. Sürükleme/boyutlandırma DÜZENLEME MODU GEREKTİRMEZ —
   her ikisi de sticky-notes.js'te kendi pointer olaylarıyla yönetiliyor,
   edit-engine.js'e hiç bağlı değil.
   ═══════════════════════════════════════════════════════════════════════ */

#stickyNotesLayer {
    position: fixed; inset: 0;
    z-index: 25;               /* sıradan widget'ların (auto/0) önünde, ama
                                   köşedeki ayarlar/düzenleme düğmelerinin (49/50)
                                   ve widget-ekle çubuğunun (70) HER ZAMAN altında */
    pointer-events: none;
}

body.placing-sticky { cursor: crosshair; }

/* ── "Yeni Yapışkan Not Ekle" düğmesi (spawner widget) ─────────────────────
   Widget'ın TAMAMI bu düğme — kesikli çerçeveli "buraya bir şey ekle" boş
   durumu izlenimi vermesin diye normal, dolu bir eylem düğmesi gibi
   tasarlandı (bkz. settings.css'teki `.action-btn`). */
.sn-spawn-btn {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; gap: clamp(4px, 4cqmin, 10px);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: clamp(8px, 4cqmin, 18px);
    color: inherit; font: inherit; cursor: pointer;
    font-size: clamp(.62rem, 6cqi, 1rem); font-weight: 600;
    transition: background .15s, border-color .15s;
}
.sn-spawn-btn:hover { background: rgba(255,255,255,0.16); border-color: var(--accent); }
.sn-spawn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(20px, 10cqmin, 30px); height: clamp(20px, 10cqmin, 30px);
    border-radius: 50%; flex-shrink: 0;
    background: var(--accent); color: #fff;
}
.sn-spawn-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-spawn-text-short { display: none; }

/* Widget küçülünce metin basitleşir, sonra tamamen kalkıp yalnızca ikon
   kalır. Kolon/satır sayısına değil widget'ın GERÇEK piksel boyutuna göre
   karar verir (`.widget`de zaten `container-type:size` var) — bu yüzden
   ekran/ızgara yapılandırması ne olursa olsun tutarlı davranır. */
@container (max-width: 260px) {
    .sn-spawn-text-full  { display: none; }
    .sn-spawn-text-short { display: inline; }
}
@container (max-width: 150px), (max-height: 34px) {
    .sn-spawn-text-full, .sn-spawn-text-short { display: none; }
    .sn-spawn-btn { gap: 0; }
}

/* ── Not gövdesi ─────────────────────────────────────────────────────── */
.sticky-note {
    position: absolute;      /* #stickyNotesLayer'a göre — vw/vh ile konumlanır */
    min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    border-radius: clamp(6px, 6cqmin, 14px);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0,0,0,.4);
    container-type: size;
    pointer-events: auto;    /* katmanın none'ını burada geri aç */
    touch-action: none;      /* sürükleme sırasında sayfa kaydırmayı engelle */
    z-index: 1;
}
.sticky-note.sn-dragging { box-shadow: 0 24px 50px rgba(0,0,0,.55); }
.sticky-note.sn-ghost {
    opacity: .55; pointer-events: none;
    border: 2px dashed rgba(255,255,255,.85);
    box-shadow: none;
}

.sn-head {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: clamp(3px, 5cqmin, 10px) clamp(4px, 5cqmin, 10px);
    background: var(--sn-head);
    cursor: grab;
}
.sticky-note.sn-dragging .sn-head { cursor: grabbing; }
.sn-title {
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    color: #fff; font-weight: 700;
    font-size: clamp(.62rem, 9cqi, 1.05rem);
    font-family: var(--font-family, inherit);
    padding: 2px 5px; border-radius: 6px;
    transition: background .15s;
    cursor: text;
}
.sn-title:hover   { background: rgba(0,0,0,.08); }
.sn-title:focus   { background: rgba(0,0,0,.16); }
.sn-title::placeholder { color: rgba(255,255,255,.65); }

.sn-color, .sn-del {
    flex-shrink: 0; cursor: pointer;
    width: clamp(13px, 11cqmin, 26px); height: clamp(13px, 11cqmin, 26px);
    border-radius: 50%; border: 2px solid rgba(255,255,255,.75);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s, filter .15s;
}
.sn-color:hover, .sn-del:hover { transform: scale(1.1); }
.sn-color { background: var(--sn-body); }
.sn-del   { background: rgba(0,0,0,.28); color: #fff; }
.sn-del:hover { background: #ef4444; }
.sn-del svg { width: 65%; height: 65%; }

.sn-body {
    flex: 1; min-height: 0; resize: none;
    background: var(--sn-body);
    border: none; outline: none;
    color: #fff;
    padding: clamp(4px, 6cqmin, 14px) clamp(6px, 6cqmin, 16px);
    font-size: clamp(.6rem, 7cqi, .95rem);
    line-height: 1.5;
    font-family: var(--font-family, inherit);
    cursor: text;
}
.sn-body::placeholder { color: rgba(255,255,255,.55); }

/* ── Boyutlandırma tutamacı — her zaman aktif, düzenleme moduna bağlı değil ── */
.sn-resize {
    position: absolute; right: 0; bottom: 0;
    width: clamp(14px, 16cqmin, 22px); height: clamp(14px, 16cqmin, 22px);
    cursor: nwse-resize;
    opacity: .3;
    background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.95) 50%);
    transition: opacity .15s;
}
.sticky-note:hover .sn-resize,
.sticky-note:focus-within .sn-resize { opacity: .8; }

/* ── Renk paleti ─────────────────────────────────────────────────────── */
.sn-amber  { --sn-head: #d39e3c; --sn-body: #f5ba45; }
.sn-pink   { --sn-head: #c2467e; --sn-body: #ef629d; }
.sn-green  { --sn-head: #3f9d5c; --sn-body: #4fbf72; }
.sn-blue   { --sn-head: #2f7bc4; --sn-body: #3f97e6; }
.sn-purple { --sn-head: #7250c4; --sn-body: #8d68e6; }
.sn-slate  { --sn-head: #57626f; --sn-body: #6b7a89; }

@media (max-width: 560px) {
    .sn-spawn-btn { font-size: .82rem; gap: 8px; }
}