/* ============================================================
   My Pads dropdown — v10 (cleaned)
   Slides from TOP + “⚙️ Options …” with defensive visibility
   ============================================================ */

/* ---------- generic helpers ---------- */
.hidden{display:none!important;} /* retained for other components */

/* ---------- container & visibility ---------- */
.dropdown{
  position:fixed;
  top:calc(var(--bar-h) + .3rem);
  left:.7rem;
  width:min(280px,calc(100vw - 1.4rem));
  max-height:60vh;
  overflow:auto;
  background:#fff;
  border:1px solid var(--border-light);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  border-radius:.65rem;
  padding:.5rem 0;
  z-index:1001;
  overscroll-behavior:contain;

  /* slide from TOP (subtle) */
  opacity:0;
  transform:translateY(-8px);
  visibility:hidden;
  pointer-events:none;
  transition:
    transform .15s ease-out,
    opacity .15s ease-out,
    visibility 0s linear .15s; /* hide visibility after fade out */
  will-change: transform, opacity;
}
.dropdown.is-open{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:
    transform .15s ease-out,
    opacity .15s ease-out,
    visibility 0s linear 0s; /* show immediately */
}

/* ---------- icon/text column tokens ---------- */
:root{
  --icon-col: 1.15rem;   /* width of the icon column */
  --icon-gap: .55rem;    /* gap between icon and text */
}

/* ---------- generic row ---------- */
.row{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.42rem 1rem;
  font-size:.9rem;
  border-radius:.45rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  transition:background-color .15s ease;
  -webkit-tap-highlight-color: transparent; /* reduce mobile tap flash */
}
.row:hover{background:rgba(0,0,0,.05);}

/* Keyboard-only focus ring + highlight */
.row:focus-visible{
  background:rgba(0,0,0,.05);
  outline:2px solid var(--border-focus);
  outline-offset:-2px;
}
/* Programmatic focus: no visuals */
.row:focus:not(:focus-visible){
  outline:none;
  box-shadow:none;
  background:inherit;
}

/* All rows in the pad list share the same gap (icon/text alignment) */
#pad-list .row{ gap: var(--icon-gap); }

/* ---------- options row (unique selectors; forced visible) ---------- */
#mypads-options{
  display:flex !important;           /* defeat any global “.options-row{display:none}” */
  align-items:center;
  line-height:1.2;
  padding:.42rem 1rem;
  -webkit-tap-highlight-color: transparent; /* remove touch ring highlight */
}
#mypads-options .options-label{ font-weight:600; }
#mypads-options .gear-emoji{
  width: var(--icon-col);
  flex: 0 0 var(--icon-col);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
#mypads-options:focus,
#mypads-options:focus-visible{
  outline:none!important;
  box-shadow:none!important;
}
#mypads-options:hover{ background:var(--brand-tint); }

/* ---------- folder rows ---------- */
.folder-row{font-weight:600;}
.folder-row .arrow{
  flex:none;
  width:.9rem;
  transition:transform .15s ease;
}
.folder-row:not(.collapsed) .arrow{transform:rotate(90deg);}
.folder-row.drag-over{background:var(--brand-tint);}
.folder-row .folder-icon{
  width: var(--icon-col);
  flex: 0 0 var(--icon-col);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* ---------- pad list group ---------- */
.pad-group,
.pad-group ul,
.pad-group li{list-style:none;margin:0;padding:0;}
.folder-row.collapsed + .pad-group{display:none;}
.pad-group[data-rootpads]{margin-top:.45rem;}

/* ---------- pad rows ---------- */
.pad-row{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.35rem 1rem;
  font-size:.85rem;
  line-height:1.25;
  cursor:pointer;
  text-decoration:none!important;
  color:inherit;
  border:none;
  font-weight:400;
  transition:background-color .15s ease;
  min-height:auto!important;
}
.pad-row:active,
.pad-row.dragging{cursor:grabbing;}
.pad-row:hover{background:rgba(0,0,0,.04);}
.pad-row:focus-visible{
  background:rgba(0,0,0,.04);
  outline:2px solid var(--border-focus);
  outline-offset:-2px;
}
.pad-row:focus:not(:focus-visible){
  outline:none;
  box-shadow:none;
  background:inherit;
}

/* pad title text inside a row */
.dropdown .pad-row .pad-title{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin:0!important;
  padding:0!important;
  font:400 .85rem/1.25 var(--font)!important;
  border:none!important;
  background:transparent!important;
}

/* ---------- row label & flex filler ---------- */
.folder-name{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

/* ---------- three-dot button ---------- */
.more-btn{
  flex:none;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.6rem;
  height:1.6rem;
  padding:0;
  border:none;
  border-radius:.3rem;
  background:none;
  font-size:1rem;
  line-height:0;
  color:var(--text-light);
  cursor:pointer;
  transition:background-color .15s ease,opacity .15s ease;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.more-btn:hover{background:rgba(0,0,0,.08);}
.more-btn:focus-visible{
  background:rgba(0,0,0,.08);
  outline:2px solid var(--border-focus);
  outline-offset:2px;
}
.more-btn:focus:not(:focus-visible){
  outline:none;
  box-shadow:none;
  background:inherit;
}
.row:hover .more-btn,
.row:focus-within .more-btn,
.more-btn:focus-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* ---------- action links (“New Folder”, etc.) ---------- */
.action-row{
  font-weight:600;
  color:var(--brand);
  margin-top:.25rem;
  font-size:.9rem;
  line-height:1.2;
  padding:.42rem 1rem;
}
.action-row:hover{background:var(--brand-tint);}
.action-row:focus-visible{
  background:var(--brand-tint);
  outline:2px solid var(--border-focus);
  outline-offset:-2px;
}
.action-row:focus:not(:focus-visible){
  outline:none;
  box-shadow:none;
  background:inherit;
}
.action-row > svg:first-child{
  width: var(--icon-col);
  height: 1em;
  flex: 0 0 var(--icon-col);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ---------- “PADS” divider ---------- */
.section-header{
  color:var(--text-light);
  font-weight:600;
  font-size:.7rem;
  padding:.15rem 1rem .4rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  cursor:default;
  margin-top:.95rem;
}
.section-header:hover{background:none;}

/* ---------- search row (aligned with icon/text columns) ---------- */
#pad-list .search-row{
  display:flex;
  align-items:center;
  position:static !important;
}
#pad-list .search-row .search-icon{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;

  width: var(--icon-col) !important;
  flex: 0 0 var(--icon-col);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  margin:0;
  color:var(--text-light);
}
#pad-list .search-row .pad-search{
  font-size:.9rem !important;   /* match .row */
  line-height:1.2 !important;   /* match .row */
  padding:0 !important;         /* icon is a real cell now */
  margin:0 !important;
  height:1.2em;                 /* equals line-height */
  flex:1 1 auto;

  border:none!important;
  outline:none!important;
  background:transparent!important;
  box-shadow:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  transition:box-shadow .15s ease;
}
#pad-list .pad-search:focus-visible{
  box-shadow:0 0 0 2px rgba(0,102,204,.25)!important;
}
#pad-list .pad-search:focus:not(:focus-visible){
  box-shadow:none!important;
}

/* === spacing tweaks ======================== */
#pad-list .search-row{margin-bottom:.35rem;}
#pad-list #mypads-options{margin-bottom:.3rem;}
#pad-list .pad-group[data-rootpads]{margin-top:.7rem;}
#pad-list .pad-group:last-of-type{margin-bottom:.35rem;}

/* ---------- folder drop-target highlight ---------- */
.folder-row.drop-target{ background:var(--brand-tint,rgba(0,102,204,.12)); }
.folder-row.drop-target .folder-icon,
.folder-row.drop-target .folder-name{ color:var(--brand,#0066cc); }

/* ---------- Scroll-lock helper for MicroModal ---------- */
body.modal-open{
  overflow:hidden;
  position:relative;
  touch-action:none;
  overscroll-behavior:none;
}

/* ---------- Popover (⋯ / Options) ---------- */
.pad-popover{
  position:fixed;
  z-index:1002;
  background:#fff;
  border:1px solid var(--border-light,#ddd);
  box-shadow:0 4px 12px rgba(0,0,0,.13);
  border-radius:.55rem;
  padding:.35rem 0;
  font-size:.85rem;
  min-width:200px;
}
.pad-popover .item{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.38rem 1rem;
  cursor:pointer;
  white-space:nowrap;
}
.pad-popover .item:hover{background:rgba(0,0,0,.05);}

/* ---------- Folder rename input ---------- */
input.folder-input{
  flex:1 1 auto;
  min-width:0;
  font:inherit;
  padding:.25rem .5rem;
  border:1px solid var(--border-light,#ccc);
  border-radius:.35rem;
}

/* ---------- Modal fields ---------- */
#new-folder-name,
#move-folder-select{
  width:100%;
  padding:.45rem;
  border:1px solid var(--border-light,#ccc);
  border-radius:.35rem;
  font:inherit;
  background:#fff;
}

/* Optional: harmonize modal buttons if needed */
.modal__btn{ font:inherit; }
.modal__btn-danger{ /* theme tokens */ }

/* ---------- Selection control (no highlight on menu items) ---------- */
#pad-list,
#pad-list *{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
/* Exceptions: allow selection in editable fields */
#pad-list input,
#pad-list textarea,
#pad-list select,
#pad-list .pad-search,
#pad-list .folder-input,
#pad-list [contenteditable="true"]{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
/* Popover items shouldn't be selectable either */
.pad-popover,
.pad-popover *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* === Selection-safe rules for Editor.js ================================= */

/* Always allow selecting text inside editor content (incl. list/checklist items) */
.codex-editor [contenteditable="true"],
.codex-editor .cdx-list,
.codex-editor .cdx-list__item,
.codex-editor .cdx-checklist,
.codex-editor .cdx-checklist__item-text{
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* While dragging a selection, keep Editor.js overlays from stealing events */
.codex-editor.np-selecting .ce-toolbar__plus,
.codex-editor.np-selecting .ce-toolbar__settings-btn,
.codex-editor.np-selecting .ce-block__actions,
.codex-editor.np-selecting .ce-block__drag-handle,
.codex-editor.np-selecting .ce-toolbar,
.codex-editor.np-selecting .cdx-checklist__item-checkbox{
  pointer-events: none !important;
}