/* ══════════════════════════════════════════════════════════════════
   ANOTAÇÕES — redesign v2 (Opus)
   Tela Inicial (somente leitura) + Arquivo (edição completa)
   ══════════════════════════════════════════════════════════════════ */

/* ── Grid de post-its na Tela Inicial ───────────────────────────── */
.notes-postit-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.notes-widget .notes-postit-grid{max-height:540px;overflow:auto;padding:2px 4px 4px 2px}
.notes-columns{display:block} /* legado: container antigo do editor */

/* ── Post-its (base, compartilhada) ─────────────────────────────── */
.notes-postit{
  --pad:12px;
  border-radius:14px;padding:0;position:relative;
  box-shadow:0 4px 14px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.18);
  transition:box-shadow .2s ease,transform .16s ease,outline-color .15s;
  cursor:default;resize:both;overflow:hidden;
  min-width:200px;min-height:128px;width:240px;box-sizing:border-box;
  display:flex;flex-direction:column;
}
.notes-postit::after{
  /* brilho superior sutil para profundidade */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 38%);
}
.notes-postit:hover{box-shadow:0 10px 30px rgba(0,0,0,.36),0 3px 8px rgba(0,0,0,.22);transform:translateY(-2px)}
.notes-postit.dragging{opacity:.35;cursor:grabbing;transform:scale(.96) rotate(-1deg)}
.notes-postit-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px 6px;flex-shrink:0;background:rgba(0,0,0,.18);position:relative;z-index:1}
.notes-postit-date{font-size:10px;font-family:var(--mono);opacity:.6;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notes-postit-del{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:1px 3px;border-radius:5px;opacity:.5;transition:opacity .15s,background .15s,transform .12s;color:inherit}
.notes-postit-del:hover{opacity:1;background:rgba(255,255,255,.14);transform:scale(1.12)}
.notes-postit-del.active{opacity:1;color:#ffd166}
.notes-postit-body{font-size:13px;line-height:1.6;word-break:break-word;overflow-wrap:anywhere;flex:1;min-height:0;overflow-y:auto;padding:6px 12px 8px;position:relative;z-index:1}
.notes-postit-body ul,.notes-postit-body ol{padding-left:18px;margin:4px 0}
.notes-postit-body li{margin:2px 0}
.notes-postit-body ul ul{list-style-type:circle;padding-left:16px}
.notes-postit-body ul ul ul{list-style-type:square}
.notes-postit-body h3{font-size:14px;font-weight:700;margin:4px 0 2px}
.notes-postit-body mark{background:#f5d76e;color:#1a1a1a;border-radius:3px;padding:0 2px}
.notes-postit-body a{color:#cfe0ff;text-decoration:underline}

/* Post-it na Tela Inicial — somente leitura, título destacado */
.notes-postit-home-title{font-family:var(--font);font-size:16px;font-weight:800;line-height:1.3;padding:8px 12px 4px;color:#fff;letter-spacing:.1px;text-shadow:0 1px 4px rgba(0,0,0,.35);word-break:break-word;overflow-wrap:anywhere;position:relative;z-index:1}
.notes-postit-body-ro{cursor:default;user-select:text}

/* ── Resize handle ──────────────────────────────────────────────── */
.notes-resize-handle{position:absolute;bottom:0;left:0;width:18px;height:18px;cursor:sw-resize;z-index:10;display:flex;align-items:flex-end;justify-content:flex-start;padding:3px;opacity:.25;transition:opacity var(--tr)}
.notes-resize-handle:hover{opacity:.8}
.notes-resize-handle svg{width:10px;height:10px;color:var(--text2)}

/* ── Toolbar principal (canto superior) ─────────────────────────── */
.notes-archive-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;padding:10px 12px;background:linear-gradient(180deg,var(--bg2),var(--bg2-90,var(--bg2)));border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.notes-archive-search{flex:1 1 220px;min-width:min(100%,200px)}
.notes-toolbar-group{display:flex;gap:6px;align-items:center;flex-shrink:0}
.notes-toolbar-sep{width:1px;height:24px;background:var(--border2);flex-shrink:0}
.notes-archive-toolbar .filter-select{flex-shrink:0}
.notes-clear-btn{flex-shrink:0;font-size:11px;opacity:.75}
.notes-clear-btn:hover{opacity:1}
.notes-save-status{margin-left:auto;font-family:var(--font);font-size:11px;font-weight:600;color:var(--text3);padding:5px 11px;border:1px solid var(--border);border-radius:999px;background:var(--bg);flex-shrink:0;transition:color .2s,border-color .2s}
.notes-save-status.saving{color:var(--amber);border-color:rgba(245,166,35,.35);animation:notesPulse 1.1s ease-in-out infinite}
.notes-save-status.saved{color:var(--green);border-color:rgba(62,207,142,.3)}
.notes-save-status.error{color:var(--red);border-color:rgba(242,95,92,.35)}
@keyframes notesPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* View toggle (grade / quadro) */
.notes-view-toggle{display:flex;gap:0;border:1px solid var(--border2);border-radius:var(--radius);overflow:hidden;flex-shrink:0}
.notes-view-btn{background:var(--bg);border:none;cursor:pointer;padding:6px 10px;color:var(--text3);transition:background var(--tr),color var(--tr);display:flex;align-items:center}
.notes-view-btn:hover{background:var(--bg3);color:var(--text)}
.notes-view-btn.active{background:var(--accent);color:#fff}

/* ── Layout shell ───────────────────────────────────────────────── */
.notes-archive-shell{display:grid;grid-template-columns:222px minmax(0,1fr);gap:16px;align-items:start}
.notes-archive-sidebar{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
.notes-archive-main{min-width:0}
.notes-archive-editor{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:14px;box-shadow:0 4px 16px rgba(0,0,0,.18);animation:notesEditorIn .2s ease both}
@keyframes notesEditorIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Sidebar — formatação e pastas ──────────────────────────────── */
.notes-archive-side-title{font-family:var(--font);font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin:4px 4px 8px}
.notes-archive-format-panel{margin-bottom:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg3);overflow:hidden}
.notes-archive-format-panel .notes-archive-side-title{margin:9px 10px 2px}
.notes-editor-toolbar{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.notes-archive-format-toolbar{padding:8px;gap:3px;background:transparent;border-bottom:none}
.notes-tool-btn{background:none;border:none;cursor:pointer;color:var(--text2);padding:5px 8px;border-radius:6px;font-size:12px;font-family:var(--font);line-height:1.2;min-width:28px;transition:background var(--tr),color var(--tr),transform .1s}
.notes-tool-btn:hover{background:var(--bg);color:var(--text);transform:translateY(-1px)}
.notes-tool-btn:active{transform:translateY(0)}
.notes-tool-btn.active{background:var(--accent);color:#fff}
.notes-tool-hl{background:linear-gradient(180deg,transparent 55%,#f5d76e 55%)}
.notes-tool-sep{width:1px;height:18px;background:var(--border2);margin:0 3px;flex-shrink:0}

.notes-folder-list{display:flex;flex-direction:column;gap:3px}
.notes-folder-row-wrap{display:grid;grid-template-columns:1fr 28px 28px;gap:2px;align-items:center}
.notes-folder-row{width:100%;border:0;background:transparent;color:var(--text2);border-radius:var(--radius);padding:8px 10px;font-family:var(--font);font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;transition:background var(--tr),color var(--tr),padding-left .15s}
.notes-folder-row:hover{background:var(--bg3);color:var(--text);padding-left:13px}
.notes-folder-row.active{background:var(--accent-bg,rgba(79,142,247,.15));color:var(--text);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.notes-folder-row.drop-over{background:rgba(79,142,247,.18);color:var(--text);outline:1px dashed var(--accent);outline-offset:-2px}
.notes-folder-row b{font-family:var(--mono);font-size:10px;color:var(--text3);font-weight:600;flex-shrink:0}
.notes-folder-row.active b{color:var(--accent)}
.notes-folder-mini{border:0;background:transparent;color:var(--text3);border-radius:6px;cursor:pointer;height:28px;transition:background var(--tr),color var(--tr)}
.notes-folder-mini:hover{background:var(--bg4);color:var(--text)}
.notes-folder-add{width:100%;margin-top:10px;font-size:12px}

/* ── Grade / quadro de notas ────────────────────────────────────── */
.notes-archive-summary{font-family:var(--font);font-size:12px;color:var(--text3);margin-bottom:12px}
.notes-archive-summary strong{color:var(--text)}
.notes-archive-grid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.notes-archive-grid.board{display:block;position:relative;min-height:74vh;overflow:auto;background:
   radial-gradient(circle,var(--border2) 1px,transparent 1px) 0 0/22px 22px;
   border:1px dashed var(--border);border-radius:var(--radius-lg);padding:12px}
.notes-archive-postit{width:248px;min-height:168px}
.notes-archive-postit.focus{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 5px rgba(79,142,247,.22)!important}
.notes-archive-postit.selected{outline:2px solid var(--accent);outline-offset:2px}
.notes-archive-postit.trash{filter:saturate(.55);opacity:.62}

/* Indicadores de inserção no arrastar (modo grade) */
.notes-postit.drop-before{box-shadow:-4px 0 0 -1px var(--accent),0 4px 14px rgba(0,0,0,.28)}
.notes-postit.drop-after{box-shadow:4px 0 0 -1px var(--accent),0 4px 14px rgba(0,0,0,.28)}

/* Título da nota — maior e destacado, com separador sutil */
.notes-archive-postit-title{
  font-family:var(--font);font-size:16px;font-weight:800;line-height:1.3;
  padding:9px 12px 6px;color:#fff;outline:none;min-height:20px;
  word-break:break-word;overflow-wrap:anywhere;letter-spacing:.1px;
  text-shadow:0 1px 4px rgba(0,0,0,.35);position:relative;z-index:1;
}
.notes-archive-postit-title:empty::before{content:attr(data-placeholder);color:rgba(255,255,255,.4);font-weight:600;font-size:13px;pointer-events:none}
.notes-archive-postit-body{cursor:text;border-radius:4px;transition:background .15s;font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.notes-archive-postit-body:empty::before{content:attr(data-placeholder);color:rgba(255,255,255,.42);pointer-events:none}
.notes-archive-postit-actions{display:flex;gap:2px;align-items:center;flex-shrink:0}
.notes-archive-postit-footer{display:flex;align-items:center;padding:6px 10px 8px;border-top:1px solid rgba(255,255,255,.12);flex-shrink:0;position:relative;z-index:1}
.notes-archive-color-row{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.notes-archive-color-row span{transition:transform .12s,border-color .15s}
.notes-archive-color-row span:hover{transform:scale(1.25)}

/* ── Seleção múltipla ───────────────────────────────────────────── */
.notes-select-box{display:flex;align-items:center;cursor:pointer;margin-right:2px}
.notes-select-box input{width:13px;height:13px;accent-color:var(--accent)}
.notes-selection-panel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;border:1px solid var(--accent);border-radius:var(--radius-lg);background:var(--accent-bg,rgba(79,142,247,.1));font-family:var(--font);font-size:12px;color:var(--text);animation:notesEditorIn .18s ease both}
.notes-selection-panel strong{color:var(--accent)}

/* ── Editor modal (editar nota completa) ────────────────────────── */
.notes-editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-family:var(--font);font-size:14px}
.notes-editor-area{outline:none;font-family:var(--font);font-size:13px;color:var(--text);line-height:1.7;caret-color:var(--accent)}
.notes-editor-area:empty::before{content:attr(data-placeholder);color:var(--text3);pointer-events:none}
.notes-editor-area ul,.notes-editor-area ol{padding-left:20px;margin:4px 0}
.notes-editor-area ul ul{list-style-type:circle}
.notes-editor-area ul ul ul{list-style-type:square}
.notes-editor-area mark{background:#f5d76e;color:#1a1a1a;border-radius:3px;padding:0 2px}
.notes-archive-edit-body{min-height:160px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);padding:11px 13px}
.notes-archive-edit-grid{display:grid;grid-template-columns:90px minmax(160px,1fr);gap:12px;align-items:end;margin-top:12px}
.notes-check{display:flex;align-items:center;gap:7px;font-family:var(--font);font-size:12px;color:var(--text2);padding:8px 0;cursor:pointer}

/* ── Busca highlight ────────────────────────────────────────────── */
.notes-search-hit{margin:0 12px 6px;padding:5px 8px;border-radius:7px;background:rgba(0,0,0,.18);font-family:var(--font);font-size:11px;line-height:1.4;color:rgba(255,255,255,.8);max-height:50px;overflow:hidden}
.notes-search-hit mark{background:rgba(245,215,110,.55);color:#fff;border-radius:3px;padding:0 2px}

/* ── Empty state ────────────────────────────────────────────────── */
.notes-archive-main .empty{background:var(--bg2);border:1px dashed var(--border);border-radius:var(--radius-lg);padding:32px;color:var(--text3);font-family:var(--font);font-size:13px;text-align:center;width:100%}

/* ── Responsivo ─────────────────────────────────────────────────── */
@media(max-width:900px){
  .notes-postit-grid{flex-direction:column}
  .notes-postit{width:100%!important}
  .notes-archive-shell{grid-template-columns:1fr}
  .notes-archive-sidebar{position:static;max-height:none}
  .notes-archive-edit-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .notes-archive-toolbar{gap:8px;padding:9px 10px}
  .notes-archive-search{flex-basis:100%}
  .notes-toolbar-group{flex:1}
  .notes-toolbar-group .filter-select{flex:1}
  .notes-toolbar-sep{display:none}
  .notes-save-status{margin-left:0}
  .notes-archive-postit{width:100%!important}
}