/* WorshipChords Lite — Setlist Manager */

body.wclSetlistManagerOpen{ overflow:hidden; }
body.wclSetlistManagerOpen .mobileBottomNav,
body.wclSetlistManagerOpen .mobileFloatControls{
  display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important;
}

.wclSetlistManager{
  --sl-bg:#0b111b; --sl-panel:#0f1724; --sl-panel-2:#131d2c;
  --sl-card:#151f2d; --sl-card-hover:#192638;
  --sl-border:#263247; --sl-border-soft:#1c2738;
  --sl-text:#f7f9fc; --sl-muted:#9aa9bd; --sl-faint:#718096;
  --sl-primary:#2f6df6; --sl-primary-hover:#255dda; --sl-primary-soft:#10254c;
  --sl-success-soft:#0d3828; --sl-danger-soft:#3b2027;
  position:fixed; inset:0; z-index:2147483646;
  display:grid; place-items:center; padding:20px;
  color:var(--sl-text); font-family:inherit;
}
.wclSetlistManager.isHidden{ display:none; }
.wclSetlistBackdrop{
  position:absolute; inset:0; background:rgba(2,6,13,.76); backdrop-filter:blur(8px);
}
.wclSetlistShell{
  position:relative; width:min(1440px,calc(100vw - 40px));
  height:min(860px,calc(100vh - 40px)); min-height:560px;
  display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden;
  border:1px solid var(--sl-border); border-radius:22px; background:var(--sl-bg);
  box-shadow:0 28px 80px rgba(0,0,0,.48);
}
.wclSetlistTop{
  min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 22px 17px; border-bottom:1px solid var(--sl-border);
  background:linear-gradient(135deg,var(--sl-panel) 0%,#101827 100%);
}
.wclSetlistTopCopy{ min-width:0; }
.wclSetlistTop small,.wclSetlistEyebrow{
  display:block; margin-bottom:3px; color:var(--sl-muted); font-size:11px;
  font-weight:750; letter-spacing:.08em; text-transform:uppercase;
}
.wclSetlistTop h2,.wclSetlistActiveTitle h3{
  margin:0; color:var(--sl-text); font-weight:800; letter-spacing:-.025em;
}
.wclSetlistTop h2{ font-size:25px; line-height:1.08; }
.wclSetlistTop p{ margin:5px 0 0; color:var(--sl-muted); font-size:13px; line-height:1.4; }
.wclSetlistClose{
  width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--sl-border); border-radius:12px; background:var(--sl-panel-2);
  color:var(--sl-text); font:700 24px/1 inherit; cursor:pointer;
}
.wclSetlistClose:hover{ border-color:#42516a; background:var(--sl-card-hover); }
.wclSetlistMobileTabs{ display:none; }

.wclSetlistLayout{ min-height:0; display:grid; grid-template-columns:270px minmax(520px,1fr) 350px; }
.wclSetlistFolders,.wclSetlistEditor,.wclSetlistLibraryPane{ min-width:0; min-height:0; }
.wclSetlistFolders,.wclSetlistLibraryPane{
  display:flex; flex-direction:column; background:var(--sl-panel);
}
.wclSetlistFolders{ border-right:1px solid var(--sl-border); }
.wclSetlistLibraryPane{ border-left:1px solid var(--sl-border); }
.wclSetlistPaneHead{
  min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--sl-border-soft);
}
.wclSetlistPaneHead > div{ min-width:0; }
.wclSetlistPaneHead strong{ display:block; color:var(--sl-text); font-size:13px; font-weight:800; }
.wclSetlistPaneHead small{ display:block; margin-top:2px; color:var(--sl-muted); font-size:11px; }

.wclSetlistNewButton,.wclSetlistCreatePanel button,.wclSetlistActiveActions button,
.wclSetlistMore summary,.wclSetlistMoreMenu button,.wclSetSongButtons button,
.wclSetSongPreview,.wclSetlistFilterTabs button,.wclSetlistLibrarySong button,.wclSetlistEmptyWelcome button{
  border:1px solid var(--sl-border); border-radius:10px; background:var(--sl-panel-2);
  color:var(--sl-text); font:700 12px/1 inherit; cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.wclSetlistNewButton{
  padding:9px 11px; border-color:#315bc4; background:var(--sl-primary-soft);
  color:#cbdcff; white-space:nowrap;
}
.wclSetlistNewButton:hover,.wclSetlistCreatePanel .primary:hover,
.wclSetlistUseLive:hover:not(:disabled){
  background:var(--sl-primary-hover); border-color:var(--sl-primary-hover); color:#fff;
}

.wclSetlistCreatePanel{
  margin:12px 12px 4px; padding:13px; border:1px solid #315bc4; border-radius:14px;
  background:#101c31; box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.wclSetlistCreatePanel[hidden]{ display:none; }
.wclSetlistCreatePanel label{ display:block; margin-bottom:10px; }
.wclSetlistCreatePanel label > span,.wclSetSongKey > span,.wclSetSongCapo > span{
  display:block; margin:0 0 5px; color:var(--sl-muted); font-size:10px;
  font-weight:750; letter-spacing:.04em; text-transform:uppercase;
}
.wclSetlistCreatePanel input,.wclSetlistLibrarySearch,.wclSetlistNotes,
.wclSetSongKey select,.wclSetSongCapo select{
  width:100%; border:1px solid var(--sl-border); border-radius:10px; outline:none;
  background:#09111c; color:var(--sl-text); font:600 12px/1.25 inherit;
}
.wclSetlistCreatePanel input{ min-height:39px; padding:9px 10px; }
.wclSetlistCreatePanel input:focus,.wclSetlistLibrarySearch:focus,
.wclSetlistNotes:focus,.wclSetSongKey select:focus,.wclSetSongCapo select:focus{
  border-color:#4c7cf1; box-shadow:0 0 0 3px rgba(47,109,246,.17);
}
.wclSetlistCreateActions{ display:grid; grid-template-columns:1fr auto; gap:7px; margin-top:3px; }
.wclSetlistCreateActions button{ min-height:38px; padding:9px 10px; }
.wclSetlistCreatePanel .primary,.wclSetlistUseLive{
  border-color:var(--sl-primary); background:var(--sl-primary); color:#fff;
}
.wclSetlistImportLink{
  width:100%; margin-top:8px; padding:4px!important; border:0!important;
  background:transparent!important; color:#a9bce2!important; text-align:left;
}
.wclSetlistImportLink:hover{ color:#fff!important; text-decoration:underline; }

.wclSetlistFolderList,.wclSetlistLibrary,.wclSetlistActiveSongs{
  min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#4c63a4 transparent;
}
.wclSetlistFolderList{ flex:1; padding:10px; }
.wclSetlistFolder{
  width:100%; min-height:62px; display:block; margin:0 0 8px; padding:13px 14px;
  border:1px solid transparent; border-radius:12px; background:transparent;
  color:var(--sl-text); text-align:left; cursor:pointer;
}
.wclSetlistFolder:hover{ background:var(--sl-card); }
.wclSetlistFolder.active{
  border-width:2px; border-color:#3b78ff; background:#122544; box-shadow:inset 4px 0 0 #3b78ff;
}
.wclSetlistFolder.dragOver,.wclSetlistDropZone.dragOver,.wclSetSong.dragOver{
  outline:2px solid var(--sl-primary); outline-offset:-2px; background:var(--sl-primary-soft);
}
.wclSetlistFolder strong{
  display:block; overflow:hidden; color:var(--sl-text); font-size:13px; font-weight:800;
  text-overflow:ellipsis; white-space:nowrap;
}
.wclSetlistFolder small{
  display:block; margin-top:5px; overflow:hidden; color:var(--sl-muted); font-size:10px;
  text-overflow:ellipsis; white-space:nowrap;
}

.wclSetlistEditor{ display:grid; grid-template-rows:auto minmax(0,1fr); background:var(--sl-bg); }
.wclSetlistActiveHeader{
  padding:16px 18px; border-bottom:1px solid var(--sl-border-soft); background:rgba(15,23,36,.72);
}
.wclSetlistActiveSummary{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.wclSetlistActiveTitle{ min-width:0; }
.wclSetlistActiveTitle h3{
  overflow:hidden; font-size:21px; line-height:1.18; text-overflow:ellipsis; white-space:nowrap;
}
.wclSetlistActiveTitle p{ margin:5px 0 0; color:var(--sl-muted); font-size:12px; }
.wclSetlistActiveActions{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.wclSetlistActiveActions > button,.wclSetlistMore summary{
  min-height:36px; display:flex; align-items:center; justify-content:center;
  padding:8px 12px; white-space:nowrap;
}
.wclSetlistActiveActions button:disabled,.wclSetlistLibrarySong button:disabled,
.wclSetSongButtons button:disabled{ opacity:.48; cursor:not-allowed; }
.wclSetlistMore{ position:relative; }
.wclSetlistMore summary{ list-style:none; user-select:none; }
.wclSetlistMore summary::-webkit-details-marker{ display:none; }
.wclSetlistMore summary{
  width:38px; padding:0; font-size:17px;
}
.wclSetlistMore[open] summary{ border-color:#4a5a73; background:var(--sl-card-hover); }
.wclSetlistMoreMenu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:5; width:190px; padding:6px;
  border:1px solid var(--sl-border); border-radius:12px; background:var(--sl-panel-2);
  box-shadow:0 18px 45px rgba(0,0,0,.38);
}
.wclSetlistMoreMenu button{
  width:100%; display:block; padding:10px; border-color:transparent; background:transparent; text-align:left;
}
.wclSetlistMoreMenu button:hover{ background:var(--sl-card-hover); }
.wclSetlistMoreMenu button.danger{ color:#ff9a9e; }
.wclSetlistNotesPanel{ margin-top:13px; }
.wclSetlistNotesPanel summary{
  width:max-content; color:#a9bce2; font-size:11px; font-weight:750; cursor:pointer;
}
.wclSetlistNotes{ min-height:72px; margin-top:9px; padding:10px 11px; resize:vertical; }

.wclSetlistDropZone{ min-height:0; padding:12px; overflow:hidden; }
.wclSetlistActiveSongs{ height:100%; padding:0 3px 20px; }
.wclSetSong{
  position:relative;
  display:grid; grid-template-columns:30px 22px minmax(150px,1fr) 198px auto;
  align-items:center; gap:8px; margin-bottom:7px; padding:9px 50px 9px 9px;
  border:1px solid var(--sl-border-soft); border-radius:12px; background:var(--sl-card);
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.wclSetSong:hover{ border-color:#34435b; background:var(--sl-card-hover); }
.wclSetSongOrder{
  width:26px; height:26px; display:grid; place-items:center; border-radius:8px;
  background:#202d40; color:#b8c7dc; font-size:11px; font-weight:800;
}
.wclSetSongHandle{
  color:var(--sl-faint); font-size:16px; letter-spacing:-5px; cursor:grab; user-select:none;
}
.wclSetSongInfo{ min-width:0; }
.wclSetSongInfo strong,.wclSetlistLibrarySong strong{
  display:block; overflow:hidden; color:var(--sl-text); font-size:12px; font-weight:800;
  line-height:1.3; text-overflow:ellipsis; white-space:nowrap;
}
.wclSetSongInfo small,.wclSetlistLibrarySong small{
  display:block; margin-top:4px; overflow:hidden; color:var(--sl-muted); font-size:10px;
  line-height:1.25; text-overflow:ellipsis; white-space:nowrap;
}
.wclSetSongSettings{ min-width:0; display:grid; grid-template-columns:72px minmax(112px,1fr); gap:7px; }
.wclSetSongKey,.wclSetSongCapo{ min-width:0; }
.wclSetSongKey select,.wclSetSongCapo select{ min-height:32px; padding:3px 7px; cursor:pointer; }
.wclSetSongButtons{ display:flex; align-items:center; gap:4px; }
.wclSetSongButtons button{ width:30px; min-height:30px; padding:4px; }
.wclSetSongButtons button:hover:not(:disabled){ border-color:#4a5a73; background:#223047; }
.wclSetSongButtons .wclSetSongMove{ width:30px; padding:4px; font-size:13px; }
.wclSetSongButtons .wclSetSongRemove{
  width:30px; border-color:#7b303b; background:var(--sl-danger-soft); color:#ff8f96;
  font-size:18px; line-height:1;
}
.wclSetSongButtons .wclSetSongRemove:hover:not(:disabled){ border-color:#9a4852; background:#52252e; }
.wclSetSongPreview{
  position:absolute; top:8px; right:8px; width:30px; height:30px; display:grid; place-items:center;
  padding:6px; color:#b9c8dc;
}
.wclSetSongPreview:hover{ border-color:#4a5a73; background:#223047; color:#fff; }
.wclSetSongPreview svg{
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

.wclSetlistDropEmpty,.wclSetlistEmpty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:150px; padding:24px; border:1px dashed var(--sl-border); border-radius:14px;
  color:var(--sl-muted); text-align:center;
}
.wclSetlistDropEmpty{ height:100%; min-height:240px; }
.wclSetlistDropEmpty > span,.wclSetlistEmptyWelcome > span{
  width:42px; height:42px; display:grid; place-items:center; margin-bottom:10px;
  border-radius:14px; background:var(--sl-primary-soft); color:#8eb0ff; font-size:22px;
}
.wclSetlistDropEmpty strong,.wclSetlistEmptyWelcome strong{
  color:var(--sl-text); font-size:13px;
}
.wclSetlistDropEmpty p,.wclSetlistEmptyWelcome p{
  max-width:290px; margin:5px 0 0; color:var(--sl-muted); font-size:11px; line-height:1.45;
}
.wclSetlistEmptyWelcome{ min-height:230px; }
.wclSetlistEmptyWelcome button{
  margin-top:14px; padding:10px 12px; border-color:var(--sl-primary); background:var(--sl-primary);
}

.wclSetlistLibraryTools{ padding:11px 12px 10px; border-bottom:1px solid var(--sl-border-soft); }
.wclSetlistLibrarySearch{ min-height:39px; padding:9px 11px; }
.wclSetlistFilterTabs{ display:flex; gap:5px; margin-top:8px; }
.wclSetlistFilterTabs button{
  padding:7px 10px; border-color:transparent; background:transparent; color:var(--sl-muted);
}
.wclSetlistFilterTabs button.active{
  border-color:var(--sl-border); background:var(--sl-card); color:var(--sl-text);
}
.wclSetlistLibrary{ flex:1; padding:10px; }
.wclSetlistLibrarySong{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:7px; padding:10px; border:1px solid var(--sl-border-soft);
  border-radius:12px; background:var(--sl-card);
}
.wclSetlistLibrarySong:hover{ border-color:#35445d; background:var(--sl-card-hover); }
.wclSetlistLibrarySong.inFolder{ border-color:#23633f; background:#0e2b21; }
.wclSetlistLibrarySong > div{ min-width:0; }
.wclSetlistLibrarySong button{
  min-width:64px; flex:0 0 auto; padding:8px 9px; border-color:#315bc4;
  background:var(--sl-primary-soft); color:#cbdcff;
}
.wclSetlistLibrarySong button:hover:not(:disabled){ background:var(--sl-primary); color:#fff; }
.wclSetlistLibrarySong.inFolder button{
  border-color:#21633e; background:var(--sl-success-soft); color:#8ce2b5; opacity:1;
}

.wclSetlistToastRegion{ position:absolute; right:18px; bottom:18px; z-index:10; pointer-events:none; }
.wclSetlistToast{
  max-width:340px; padding:11px 14px; border:1px solid #2d8e58; border-radius:11px;
  background:#0d3828; color:#d8f9e7; box-shadow:0 14px 35px rgba(0,0,0,.36);
  font-size:12px; font-weight:700;
}
.wclSetlistToast.isError{ border-color:#87404a; background:var(--sl-danger-soft); color:#ffd4d6; }
.wclSetlistManager .srOnly{
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
  white-space:nowrap!important; border:0!important;
}

html[data-theme="light"] .wclSetlistManager{
  --sl-bg:#f6f8fc; --sl-panel:#fff; --sl-panel-2:#f1f5fb;
  --sl-card:#fff; --sl-card-hover:#f3f6fb; --sl-border:#d4dce9;
  --sl-border-soft:#e4e9f1; --sl-text:#152033; --sl-muted:#607089;
  --sl-faint:#8793a5; --sl-primary-soft:#e7efff;
  --sl-success-soft:#e5f7ed; --sl-danger-soft:#ffebed;
}
html[data-theme="light"] .wclSetlistBackdrop{ background:rgba(32,42,59,.42); }
html[data-theme="light"] .wclSetlistTop{ background:linear-gradient(135deg,#fff 0%,#f4f7fc 100%); }
html[data-theme="light"] .wclSetlistActiveHeader{ background:rgba(255,255,255,.82); }
html[data-theme="light"] .wclSetlistCreatePanel{ background:#f2f6ff; }
html[data-theme="light"] .wclSetlistCreatePanel input,
html[data-theme="light"] .wclSetlistLibrarySearch,
html[data-theme="light"] .wclSetlistNotes,
html[data-theme="light"] .wclSetSongKey select,
html[data-theme="light"] .wclSetSongCapo select{ background:#fff; }
html[data-theme="light"] .wclSetlistFolder.active{ background:#e8f0ff; }
html[data-theme="light"] .wclSetSongOrder{ background:#e9eef6; }
html[data-theme="light"] .wclSetlistLibrarySong.inFolder{ background:#edf9f2; }
html[data-theme="light"] .wclSetSongButtons button:hover:not(:disabled){ background:#e9eef6; }

@media(max-width:1180px){
  .wclSetlistManager{ padding:0; }
  .wclSetlistShell{
    width:100vw; height:100dvh; min-height:0; border:0; border-radius:0;
  }
  .wclSetlistLayout{ grid-template-columns:220px minmax(430px,1fr) 300px; }
  .wclSetSong{ grid-template-columns:26px minmax(140px,1fr) 198px; }
  .wclSetSongHandle{ display:none; }
  .wclSetSongButtons{ grid-column:2 / -1; justify-content:flex-end; }
}

@media(max-width:900px){
  .wclSetlistShell{
    height:100dvh; overflow:hidden; grid-template-rows:auto 58px minmax(0,1fr);
  }
  .wclSetlistTop{
    min-height:70px; padding:13px 15px;
  }
  .wclSetlistTop h2{ font-size:21px; }
  .wclSetlistTop p{ display:none; }
  .wclSetlistMobileTabs{
    display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:7px 9px;
    border-bottom:1px solid var(--sl-border); background:var(--sl-panel);
  }
  .wclSetlistMobileTabs button{
    min-width:0; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:9px 8px; border:1px solid transparent; border-radius:10px;
    background:transparent; color:var(--sl-muted); font:750 12px/1 inherit; cursor:pointer;
  }
  .wclSetlistMobileTabs button small{
    min-width:20px; padding:3px 5px; border-radius:999px; background:var(--sl-card);
    color:var(--sl-muted); font-size:9px; text-align:center;
  }
  .wclSetlistMobileTabs button.active{
    border-color:#315bc4; background:var(--sl-primary-soft); color:var(--sl-text);
  }
  .wclSetlistMobileTabs button.active small{ background:var(--sl-primary); color:#fff; }
  .wclSetlistLayout{
    display:block; min-height:0; height:100%; overflow:hidden;
  }
  .wclSetlistLayout > .wclSetlistFolders,
  .wclSetlistLayout > .wclSetlistEditor,
  .wclSetlistLayout > .wclSetlistLibraryPane{
    display:none; width:100%; height:100%; min-height:0; border:0;
  }
  .wclSetlistManager[data-mobile-pane="setlists"] .wclSetlistFolders{ display:flex; }
  .wclSetlistManager[data-mobile-pane="order"] .wclSetlistEditor{ display:grid; }
  .wclSetlistManager[data-mobile-pane="library"] .wclSetlistLibraryPane{ display:flex; }
  .wclSetlistFolderList{ display:block; padding:10px 12px 24px; overflow-y:auto; }
  .wclSetlistFolder{ width:100%; margin:0 0 9px; }
  .wclSetlistCreatePanel{ max-width:none; }
  .wclSetlistEditor{ grid-template-rows:auto minmax(0,1fr); }
  .wclSetlistActiveHeader{ padding:14px; }
  .wclSetlistDropZone{ height:100%; min-height:0; padding:10px; }
  .wclSetlistActiveSongs{ padding-bottom:22px; }
  .wclSetlistLibrary{ max-height:none; }
  .wclSetSong{
    grid-template-columns:28px minmax(0,1fr); gap:7px 9px; margin-bottom:7px;
    padding:10px 48px 10px 10px;
  }
  .wclSetSongInfo{ padding-right:4px; }
  .wclSetSongInfo strong{ white-space:normal; }
  .wclSetSongSettings{
    grid-column:1 / -1; grid-template-columns:78px minmax(110px,160px);
    justify-content:start; gap:6px; padding-right:108px;
  }
  .wclSetSongKey > span,.wclSetSongCapo > span{ margin-bottom:3px; font-size:9px; }
  .wclSetSongKey select,.wclSetSongCapo select{ min-height:32px; }
  .wclSetSongButtons{
    position:absolute; grid-column:auto; grid-row:auto; right:9px; bottom:10px;
    width:auto; display:flex; justify-content:flex-start; gap:4px;
  }
  .wclSetSongButtons button,.wclSetSongButtons .wclSetSongMove,.wclSetSongButtons .wclSetSongRemove{
    width:30px; min-height:32px; padding:4px;
  }
  .wclSetSongPreview{ top:9px; right:9px; width:30px; height:30px; }
}

@media(max-width:620px){
  .wclSetlistTop small{ display:none; }
  .wclSetlistClose{ width:38px; height:38px; }
  .wclSetlistPaneHead{ min-height:59px; padding:11px 12px; }
  .wclSetlistActiveSummary{ align-items:flex-start; flex-direction:column; }
  .wclSetlistActiveActions{ width:100%; }
  .wclSetlistUseLive{ flex:1; }
  .wclSetlistMoreMenu{ right:0; }
  .wclSetSong{ grid-template-columns:26px minmax(0,1fr); gap:7px; }
  .wclSetSongSettings{ grid-template-columns:76px minmax(108px,150px); padding-right:104px; }
  .wclSetlistDropZone{ padding:9px; }
}

@media(max-width:390px){
  .wclSetlistActiveActions{ align-items:stretch; flex-direction:row; }
  .wclSetlistMore summary{ width:38px; }
  .wclSetlistMoreMenu{ left:auto; right:0; width:190px; }
  .wclSetSong{ grid-template-columns:26px minmax(0,1fr); }
  .wclSetSongSettings{ grid-template-columns:66px minmax(94px,122px); padding-right:100px; }
}

@media(prefers-reduced-motion:reduce){
  .wclSetlistManager *{ scroll-behavior:auto!important; transition:none!important; }
}