/* =========================================
   TuCuatro Songs – Boxes + Songbooks Shelf
   Refactor 2026 (dedupe + better mobile)
   ========================================= */

:root{
  --tc-accent: #ff9c00;
  --tc-border-dark: #3d3d3d;
  --tc-radius: 14px;
  --tc-shadow: 0 10px 26px rgba(0,0,0,.08);
  --tc-shadow-hover: 0 14px 30px rgba(0,0,0,.12);
}

/* Song boxes list */
div.songboxes.songs.list{
  margin: 0 auto;
  text-align: center;
}


/* =========================================
   TuCuatro – Songbooks Shelf UI
   ========================================= */

.tucuatro-songbooks{
  margin: 28px 0;
}

.tucuatro-songbooks-shelf{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Card */
.songbook-card{
  background:#fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--tc-shadow);
  overflow:hidden;
  position:relative;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Subtle “paper stack” feel */
.songbook-card:before,
.songbook-card:after{
  content:"";
  position:absolute;
  inset: 10px 10px auto auto;
  width: 88%;
  height: 88%;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.05);
  transform: rotate(1.2deg);
  z-index:0;
  pointer-events:none;
}
.songbook-card:after{
  inset: 14px 14px auto auto;
  transform: rotate(-1.2deg);
  opacity:.65;
}

/* Clickable cover area */
.songbook-cover{
  display:block;
  position:relative;
  z-index:1;
  padding: 26px 22px 18px;
  text-decoration:none !important;
  color: inherit;
  background: linear-gradient(180deg, rgba(255,156,0,.16), rgba(255,156,0,.02));
}

/* “Spine” accent */
.songbook-cover:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:10px;
  background: var(--tc-accent);
  opacity:.95;
}

.songbook-cover:after{
  content:"SONGBOOK";
  position:absolute;
  left:-34px;
  top:24px;
  transform: rotate(-90deg);
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
  color: rgba(0,0,0,.55);
}

/* Title */
.songbook-title{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-0.02em;
  color: var(--tc-accent);
}

/* Meta */
.songbook-meta{
  font-size:14px;
  font-weight:800;
  color: rgba(0,0,0,.62);
  margin: 0 0 10px;
}

/* CTA */
.songbook-open{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-weight:900;
  font-size:14px;
  color: rgba(0,0,0,.72);
  border-bottom: 1px dashed rgba(0,0,0,.25);
  padding-bottom:2px;
}

/* Description sits under cover */
.songbook-desc{
  position:relative;
  z-index:1;
  padding: 16px 22px 20px;
  color: rgba(0,0,0,.68);
  line-height:1.45;
  font-size:15px;
}

/* Hover feels like picking up a folder */
.songbook-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,156,0,.35);
  box-shadow: var(--tc-shadow-hover);
}
.songbook-card:hover .songbook-open{
  color: rgba(0,0,0,.92);
  border-bottom-color: rgba(0,0,0,.45);
}

/* Mobile tightening */
@media (max-width:520px){
  .songbook-title{ font-size:26px; }
  .songbook-cover{ padding: 22px 18px 14px; }
  .songbook-desc{ padding: 14px 18px 18px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .songbook-card{ transition:none !important; }
}

/* -----------------------------------------
   Songbook actions (archive sidebar)
----------------------------------------- */
.tucuatro-songbook-actions{
  margin-top:12px;
  padding-top:8px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.tucuatro-songbook-actions__count{
  font-size:14px;
  color:#666;
  margin-bottom:10px;
}

/* Start Playing = primary */
.tucuatro-songbook-actions__start{
  display:block;
  margin-bottom:8px;
  font-weight:700;
  font-size:16px;
  text-decoration:none !important;
  color: var(--tc-accent);
}
.tucuatro-songbook-actions__start:hover{
  text-decoration: underline !important;
}
.tucuatro-songbook-actions__start.is-disabled{
  opacity:.4;
  cursor: default;
  pointer-events:none;
}

/* Print = secondary */
.tucuatro-songbook-actions__print{
  display:block;
  font-size:14px;
  color:#555;
  text-decoration:none !important;
}
.tucuatro-songbook-actions__print:hover{
  text-decoration: underline !important;
}

/* =========================================
   TuCuatro – Songbooks Modal (tcsb)
   ========================================= */

.tcsb-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}

.tcsb-modal.is-open{
  display: block;
}

.tcsb-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.tcsb-card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px));
  max-height: min(78vh, 640px);
  overflow: auto;

  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.tcsb-close{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.tcsb-header{
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.tcsb-title{
  font-weight: 900;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tcsb-title i.green{ color: var(--tc-accent); }

.tcsb-removefav{
  border: 0;
  /* background: rgba(0, 0, 0, .06); */
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: red;
}

.tcsb-body{
  padding: 16px 18px 18px;
}

.tcsb-subtitle{
  font-weight: 800;
  color: rgba(0,0,0,.65);
  margin-bottom: 10px;
}

.tcsb-loading{
  padding: 10px 0;
  color: rgba(0,0,0,.55);
  font-weight: 700;
}

.tcsb-list{
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}

.tcsb-item{
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;

  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
}

.tcsb-name{
  font-weight: 800;
}

.tcsb-actions{
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.tcsb-open,
.tcsb-copy{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none !important;
}

.tcsb-create{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 10px;
}

.tcsb-newname{
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
}

.tcsb-createbtn{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  background: var(--tc-accent);
  color: #fff;
  cursor: pointer;
}

.tcsb-toast{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
}

.tcsb-toast.ok{ background: rgba(0,200,90,.12); }
.tcsb-toast.warn{ background: rgba(255,156,0,.14); }
.tcsb-toast.err{ background: rgba(255,60,60,.12); }

@media (max-width:520px){
  .tcsb-card{
    width: calc(100vw - 18px);
    max-height: 82vh;
  }
}