/* Sugarcoat HQ v57.11.47.6 Setlist planner: additive, responsive styling */

#setlistsView h3,#scsl-booking-content h3{margin:0 0 7px;font-size:17px}
.scsl-status{font-size:12px;color:var(--green);margin:8px 3px;min-height:18px}
.scsl-status.is-error{color:var(--red)}
.scsl-tabs,.scsl-row{display:flex;gap:8px;align-items:center}
.scsl-tabs{margin:12px 0;flex-wrap:wrap}
.scsl-between{justify-content:space-between}
.scsl-wrap{flex-wrap:wrap}
.scsl-sub{color:var(--muted);font-size:12px;line-height:1.5}
.scsl-item{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.scsl-item p{margin:0}
.scsl-field{display:grid;gap:6px;margin:12px 0;font-size:12px;font-weight:800;color:var(--muted)}
.scsl-field input,.scsl-field select,.scsl-fields input,.scsl-fields textarea,.scsl-fields select,
.scsl-row select,.scsl-row input{border:1px solid var(--line);border-radius:10px;padding:9px;background:#11111b;color:var(--text);min-width:0;max-width:100%}
.scsl-field input{width:100%}
.scsl-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.scsl-fields label{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.scsl-fields textarea{min-height:72px}
.scsl-check{display:flex;gap:8px;align-items:center;padding:8px 0;font-size:13px}
.scsl-set{margin:16px 0;padding:12px;border:1px solid var(--line);background:var(--panel2);border-radius:14px}
.scsl-set strong{font-size:15px}
.scsl-target{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.scsl-target input{width:64px}
.scsl-tracks{display:grid;gap:6px;margin:12px 0}
.scsl-track{display:flex;gap:8px;align-items:center;min-width:0;border:1px solid var(--line);background:#12121d;border-radius:11px;padding:10px}
.scsl-track-copy{flex:1;min-width:0}
.scsl-track-copy strong{display:block;overflow-wrap:anywhere;font-size:13px}
.scsl-track-copy small{display:block;color:var(--muted);margin-top:3px;font-size:11px;line-height:1.35}
.scsl-grab{color:var(--muted);cursor:grab;user-select:none}
.scsl-actions{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.scsl-actions button{background:#29293c;border:1px solid var(--line);border-radius:8px;color:#fff;padding:6px 8px;cursor:pointer;min-width:30px}
.scsl-actions button:focus-visible{outline:2px solid var(--pink)}
.scsl-set .scsl-row>select{flex:1;min-width:0}
.scsl-issues{padding:12px;margin:10px 0;border-radius:12px;border:1px solid #594329;background:#251e17;color:#ffd79c;font-size:12px}
.scsl-issues ul{padding-left:18px;margin-bottom:0}
.scsl-issues p{margin-bottom:0}
.scsl-list{max-height:60vh;overflow:auto}
.scsl-summary ol{padding-left:23px;font-size:13px;line-height:1.9}
.scsl-summary h4{margin:12px 0 4px}
@media(min-width:800px){#setlistsView .scsl-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}}
@media(max-width:550px){.scsl-fields{grid-template-columns:1fr}.scsl-track{flex-wrap:wrap}.scsl-actions{width:100%;justify-content:flex-end}.scsl-track-copy{min-width:calc(100% - 30px)}.scsl-set{padding:9px}.scsl-target input{width:56px}}


/* v57.11.47.6.2: HQ-aligned layout and typography.
   All overrides scoped to Setlists; navigation elsewhere stays unchanged. */
#nav #scsl-nav::before{content:'♫';display:inline-block;width:20px;margin-right:8px;font-size:16px;font-family:inherit;font-weight:600;opacity:.9;text-align:center;vertical-align:baseline}
#nav #scsl-nav.active::before{color:#fff}
#setlistsView{width:100%;max-width:none;margin:0;padding-bottom:48px;font-size:14px}
#setlistsView .scsl-page-head{margin:8px 0 12px}
#setlistsView .scsl-page-head h1{font-size:32px;letter-spacing:-.04em;margin:2px 0 0;font-weight:900}
#setlistsView .scsl-page-head p{font-size:13px;line-height:1.45;margin:4px 0 0;color:var(--muted)}
#setlistsView .scsl-page-head .eyebrow{color:#c493e9;font-size:11px;letter-spacing:.16em}
#setlistsView .card{border-radius:16px;padding:16px;margin:10px 0}
#setlistsView h3{font-size:16px;letter-spacing:-.02em;line-height:1.35}
#setlistsView .btn{font-size:12px;line-height:1.3;padding:10px 12px;border-radius:10px;min-height:38px}
#setlistsView .scsl-tabs{margin:12px 0;gap:7px}
#setlistsView .scsl-item{padding:14px 16px;gap:12px}
#setlistsView .scsl-item h3{font-size:15px}
#setlistsView .scsl-item:hover{border-color:rgba(141,92,255,.42)}
#setlistsView .scsl-sub{font-size:12px;line-height:1.5}
.scsl-songcount{color:#ddd5ff;font-weight:750}
.scsl-template-label{border:1px solid var(--line);border-radius:999px;padding:6px 9px;color:var(--muted);font-size:11px;font-weight:700}
#setlistsView .scsl-format{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:4px 0 12px;color:var(--text);font-size:13px;font-weight:750;background:rgba(141,92,255,.06)}
.scsl-format-icon{font-size:15px;color:#c493e9}
.scsl-format small{font-size:11px;font-weight:500;color:var(--muted)}
#setlistsView .scsl-set{background:rgba(23,24,37,.92);margin:12px 0;padding:12px;border-radius:13px}
#setlistsView .scsl-set strong{font-size:14px}
#setlistsView .scsl-track{background:rgba(13,15,25,.85);border-color:#343449;padding:8px 10px}
#setlistsView .scsl-track-copy strong{font-size:13px}
#setlistsView .scsl-actions button{min-width:34px;min-height:34px;font-size:15px}
#setlistsView .scsl-row>select,#scsl-booking-content .scsl-row>select{min-height:41px;appearance:auto;-webkit-appearance:menulist;padding:9px 11px;line-height:1.3;background-color:#171829;color:var(--text);color-scheme:dark;font-size:13px}
#setlistsView .scsl-row>select:focus-visible,#scsl-booking-content .scsl-row>select:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
#setlistsView .scsl-field input,#setlistsView .scsl-fields input,#setlistsView .scsl-fields textarea,#setlistsView .scsl-fields select{font-size:13px}
.scsl-issues{background:rgba(75,51,23,.27)}
#setlistsView .scsl-delete{background:rgba(255,92,114,.10);border:1px solid rgba(255,92,114,.24);color:#ffb4bc}
#setlistsView .scsl-delete:hover:not(:disabled){background:rgba(255,92,114,.18)}
#setlistsView .scsl-delete:disabled{opacity:.35;cursor:not-allowed}
.scsl-editor-footer{margin:12px 0 7px;padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:650px){
  #nav #scsl-nav::before{display:block;width:auto;margin:0 auto 4px;font-size:18px}
  #nav #scsl-nav::after{content:'Setlists';display:block;font-size:9px}
  #nav #scsl-nav{font-size:0;padding:8px 3px;min-width:0}
  #setlistsView .scsl-page-head h1{font-size:25px}
  #setlistsView .scsl-item{padding:12px}
  #setlistsView .scsl-set{padding:10px}
  .scsl-format small{flex-basis:100%;padding-left:26px}
  #setlistsView .scsl-tabs .btn{flex:1 0 auto}
  #setlistsView .scsl-row:has(>select){flex-wrap:wrap}
  #setlistsView .scsl-row>select{flex:1 1 100%;width:100%}
  #setlistsView .scsl-row>select + .btn{width:100%}
}

/* v57.11.47.6.2 -- seven-destination mobile bar fix.
   Invoices previously injected a six-column mobile grid at runtime. Setlists
   is the seventh destination. Keep one fixed row and preserve each button's
   original click handler/accessibility name; do not alter desktop navigation. */
@media (max-width:720px){
  #nav.nav{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:minmax(52px,auto)!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:0!important;
    position:fixed!important;
    left:50%!important;
    top:auto!important;
    transform:translateX(-50%)!important;
    bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;
    width:calc(100% - 12px)!important;
    max-width:680px!important;
    height:auto!important;
    min-height:0!important;
    padding:4px 2px!important;
    border-radius:15px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    z-index:80!important;
  }
  #nav.nav>button{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:52px!important;
    margin:0!important;
    padding:6px 0!important;
    box-sizing:border-box!important;
    font-size:0!important;
    line-height:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    border-radius:10px!important;
  }
  #nav.nav>button::before{
    display:block!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    font-size:19px!important;
    font-weight:600!important;
    line-height:1.05!important;
    text-align:center!important;
  }
  #nav.nav>button::after{
    display:block!important;
    width:100%!important;
    margin:0!important;
    font-size:9px!important;
    font-weight:750!important;
    line-height:1.2!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  #nav.nav>button:nth-of-type(1)::after{content:'Home'!important}
  #nav.nav>button:nth-of-type(2)::after{content:'Bookings'!important}
  #nav.nav>button:nth-of-type(3)::after{content:'Tasks'!important}
  #nav.nav>button:nth-of-type(4)::after{content:'Calendar'!important}
  #nav.nav>button:nth-of-type(5)::after{content:'Catch-ups'!important}
  #nav.nav>button:nth-of-type(6)::before{content:'£'!important}
  #nav.nav>button:nth-of-type(6)::after{content:'Invoices'!important}
  #nav.nav>button#scsl-nav::before{content:'♫'!important}
  #nav.nav>button#scsl-nav::after{content:'Setlists'!important}
}
@media (max-width:650px){
  /* Leave enough space to scroll controls above the fixed bar, without a
     redundant second-row-sized blank strip at the bottom of every HQ page. */
  .app{padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))!important}
  #setlistsView .scsl-page-head{margin:2px 0 8px}
  #setlistsView .scsl-tabs{margin:9px 0;gap:6px}
  #setlistsView .card{padding:12px;margin:8px 0}
  #setlistsView .scsl-set{margin:9px 0;padding:9px}
  #setlistsView .scsl-item{padding:11px}
  #setlistsView .scsl-track{padding:9px}
  #setlistsView .scsl-actions{gap:5px}
  #setlistsView .scsl-actions button{min-width:36px;min-height:36px}
}
@media (max-width:350px){
  #nav.nav>button::after{font-size:8px!important}
  #nav.nav>button::before{font-size:17px!important}
}
@media (min-width:651px) and (max-width:720px){
  .app{padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))!important}
}

/* v57.11.47.6.3 — view named setlists without editing; booking First Dance summary. */
.v0111146-tabs .booking-tab[data-tab="setlist"]::before{content:'♫'}
.booking-tabs .booking-tab[data-tab="setlist"]::before{content:'♫';font-size:11px;opacity:.86;font-weight:850}
.scsl-item-open{flex:1;min-width:0;display:block;text-align:left;border:0;background:transparent;color:var(--text);padding:4px 0;cursor:pointer}
.scsl-item-open h3{margin:0 0 5px!important}
.scsl-item-open .scsl-sub{display:block}
.scsl-item-open:hover h3,.scsl-item-open:focus-visible h3{color:#eacaff}
.scsl-item-open:focus-visible{outline:2px solid var(--purple);outline-offset:5px;border-radius:4px}
.scsl-view-head h3{font-size:21px!important;margin:4px 0 5px!important}
.scsl-view-head>.scsl-row{justify-content:flex-end}
.scsl-view-sets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,370px),1fr));gap:12px;margin-top:14px}
.scsl-view-set{min-width:0;border:1px solid var(--line);background:var(--panel2);border-radius:14px;padding:12px}
.scsl-view-set-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 2px 11px;border-bottom:1px solid var(--line)}
.scsl-view-set-head strong{font-size:15px}
.scsl-view-time{white-space:nowrap;color:#80e8aa;font-size:11px;font-weight:750}
.scsl-view-time.is-over{color:#ffc46a}
.scsl-view-songs{list-style:decimal;margin:6px 0 0;padding:0 0 0 25px}
.scsl-view-songs li{padding:9px 5px 8px 2px;border-bottom:1px solid rgba(127,119,157,.16);font-size:12px;display:list-item}
.scsl-view-songs li::marker{color:#b0a6d0;font-weight:700}
.scsl-view-songs li{position:relative;padding-right:45px}
.scsl-view-track strong{display:block;line-height:1.35;font-size:12px;overflow-wrap:anywhere}
.scsl-view-track small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.scsl-view-duration{position:absolute;right:4px;top:11px;color:#d1cadd;font-size:11px;font-variant-numeric:tabular-nums}
.scsl-view-empty{padding:12px 4px}
.scsl-view-footer{margin-top:14px}
#scsl-booking-content .scsl-dance-card{border:1px solid rgba(188,93,235,.48);background:linear-gradient(110deg,rgba(128,40,132,.16),rgba(20,21,35,.88));padding:14px 16px;margin:7px 0 15px}
.scsl-dance-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scsl-dance-heading strong{font-size:14px}
.scsl-dance-icon{background:rgba(188,93,235,.18);color:#f1c0ff;border-radius:9px;display:inline-grid;place-items:center;width:29px;height:29px;font-size:17px}
.scsl-dance-tag{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;border:1px solid rgba(177,169,203,.30)}
.scsl-dance-pa{color:#b4f1d1;background:rgba(44,154,110,.15);border-color:rgba(44,154,110,.4)}
.scsl-dance-live{color:#f7c4ff;background:rgba(174,62,196,.13);border-color:rgba(174,62,196,.36)}
.scsl-dance-pending{color:#ffd48c;background:rgba(150,104,29,.17);border-color:rgba(150,104,29,.33)}
.scsl-dance-neutral{color:#c0bdcf;background:rgba(121,117,135,.12)}
.scsl-dance-song{font-size:16px;font-weight:850;margin:9px 0 4px;overflow-wrap:anywhere}
#scsl-booking-content .scsl-dance-card>.scsl-sub{margin:2px 0 0}
@media(max-width:650px){.scsl-view-head{align-items:flex-start!important}.scsl-view-head>.scsl-row{justify-content:flex-start}.scsl-view-card{padding:12px!important}.scsl-view-set{padding:10px}.scsl-dance-tag{font-size:10px}}


/* v57.11.47.6.4 — mobile booking detail navigation: all eight tabs visible.
   Presentation-only; the existing buttons, order and tab handlers are untouched.
   Strictly scoped to booking detail so the seven-destination fixed HQ bar is unchanged. */
@media (max-width:650px) {
  #bookingDetailContent .booking-tabs {
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    overflow:visible!important;
    overscroll-behavior-x:auto!important;
    -webkit-overflow-scrolling:auto!important;
    padding:5px!important;
    box-sizing:border-box!important;
    width:100%!important;
  }
  #bookingDetailContent .booking-tabs > .booking-tab {
    box-sizing:border-box!important;
    display:inline-flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    flex:initial!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:5px 2px!important;
    margin:0!important;
    gap:3px!important;
    text-align:center!important;
    white-space:nowrap!important;
    font-size:10px!important;
    font-weight:850!important;
    line-height:1.1!important;
    border-radius:9px!important;
    overflow:hidden!important;
  }
  #bookingDetailContent .booking-tabs > .booking-tab::before {
    display:block!important;
    flex:0 0 auto!important;
    font-size:12px!important;
    line-height:1!important;
    margin:0!important;
  }
  #bookingDetailContent .booking-tabs > .booking-tab:focus-visible {
    outline:2px solid #cb97ff!important;
    outline-offset:-2px!important;
  }
}
@media (max-width:360px) {
  #bookingDetailContent .booking-tabs > .booking-tab {
    font-size:9px!important;
    letter-spacing:-.015em!important;
    padding-left:1px!important;
    padding-right:1px!important;
  }
}