/* HTNS v223 — compact month/day tiles and repaired Sermon Schedule roster. */
#view-albums{
  --preach-date-tile-size:46px;
}

/* Free horizontal room by replacing the long date string with one compact tile. */
#view-albums .resource-preach-roster-head,
#view-albums .resource-preach-item{
  grid-template-columns:60px minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,.72fr) 70px !important;
  column-gap:7px !important;
  align-items:center !important;
}
#view-albums .resource-preach-roster-head{
  padding-left:7px !important;
  padding-right:7px !important;
}
#view-albums .resource-preach-roster-head > span:first-child{
  text-align:center !important;
}
#view-albums .resource-preach-item{
  min-height:58px !important;
  padding:6px 7px !important;
}

#view-albums .resource-preach-date{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  overflow:visible !important;
}
#view-albums .resource-preach-date-tile{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  width:var(--preach-date-tile-size) !important;
  height:var(--preach-date-tile-size) !important;
  min-width:var(--preach-date-tile-size) !important;
  min-height:var(--preach-date-tile-size) !important;
  margin:0 !important;
  padding:3px 4px 2px !important;
  border:1.2px solid #d2ab35 !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,#fffdf5 0%,#f6e7b8 100%) !important;
  color:#173b63 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(35,57,80,.05) !important;
  font-style:normal !important;
  line-height:1 !important;
  text-decoration:none !important;
  overflow:hidden !important;
}
#view-albums .resource-preach-date-tile small{
  display:block !important;
  margin:0 0 2px !important;
  padding:0 !important;
  color:#8a6b20 !important;
  font-size:7.5px !important;
  line-height:8px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}
#view-albums .resource-preach-date-tile b{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:#173b63 !important;
  font-size:19px !important;
  line-height:20px !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}
#view-albums .resource-preach-date-tile.missing{
  border-style:dashed !important;
  opacity:.72 !important;
}

#view-albums .resource-preach-value:not(.resource-preach-date){
  min-width:0 !important;
  overflow:hidden !important;
}
#view-albums .resource-preach-value:not(.resource-preach-date) > span,
#view-albums .resource-preach-value:not(.resource-preach-date) > b{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#view-albums .resource-preach-actions{
  width:70px !important;
  gap:4px !important;
}
#view-albums .resource-preach-edit,
#view-albums .resource-preach-remove{
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  border-radius:10px !important;
}

/* Medium phone/tablet widths retain the compact one-row roster shown in the reference. */
@media (min-width:381px) and (max-width:620px){
  #view-albums .resource-preach-roster{
    overflow:hidden !important;
    border:1px solid #dbe3e8 !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.74) !important;
  }
  #view-albums .resource-preach-roster-head{
    display:grid !important;
    min-height:32px !important;
    padding:0 5px !important;
    grid-template-columns:54px minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,.70fr) 64px !important;
    gap:5px !important;
  }
  #view-albums .resource-preach-roster-head span{
    font-size:7.5px !important;
  }
  #view-albums .resource-preach-list{
    display:block !important;
    padding:0 !important;
    background:transparent !important;
  }
  #view-albums .resource-preach-item{
    display:grid !important;
    grid-template-columns:54px minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,.70fr) 64px !important;
    grid-template-rows:1fr !important;
    gap:5px !important;
    min-height:54px !important;
    padding:4px 5px !important;
    border:0 !important;
    border-bottom:1px solid #e5e9ec !important;
    border-radius:0 !important;
    background:transparent !important;
  }
  #view-albums .resource-preach-item:last-child{
    border-bottom:0 !important;
  }
  #view-albums .resource-preach-item .resource-preach-value:nth-child(1),
  #view-albums .resource-preach-item .resource-preach-value:nth-child(2),
  #view-albums .resource-preach-item .resource-preach-value:nth-child(3),
  #view-albums .resource-preach-item .resource-preach-value:nth-child(4),
  #view-albums .resource-preach-actions{
    grid-row:1 !important;
    grid-column:auto !important;
    align-self:center !important;
  }
  #view-albums .resource-preach-value small{
    display:none !important;
  }
  #view-albums .resource-preach-date-tile{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
  #view-albums .resource-preach-date-tile small{
    display:block !important;
    font-size:7px !important;
  }
  #view-albums .resource-preach-date-tile b{
    font-size:18px !important;
    line-height:19px !important;
  }
  #view-albums .resource-preach-value:not(.resource-preach-date) > span,
  #view-albums .resource-preach-value:not(.resource-preach-date) > b{
    font-size:9px !important;
    line-height:1.15 !important;
  }
  #view-albums .resource-preach-actions{
    display:flex !important;
    flex-direction:row !important;
    width:64px !important;
    gap:4px !important;
    justify-content:flex-end !important;
  }
  #view-albums .resource-preach-edit,
  #view-albums .resource-preach-remove{
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    border-radius:9px !important;
  }
}

/* Very narrow phones switch to a compact two-row card so names remain readable. */
@media (max-width:380px){
  #view-albums .resource-preach-roster-head{
    display:none !important;
  }
  #view-albums .resource-preach-list{
    display:grid !important;
    gap:6px !important;
  }
  #view-albums .resource-preach-item{
    display:grid !important;
    grid-template-columns:50px minmax(0,1fr) minmax(0,1fr) 30px !important;
    grid-template-rows:auto auto !important;
    gap:4px 6px !important;
    min-height:58px !important;
    padding:6px !important;
    border:1px solid #dfe5e8 !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.78) !important;
  }
  #view-albums .resource-preach-item .resource-preach-value:nth-child(1){
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
  }
  #view-albums .resource-preach-item .resource-preach-value:nth-child(2){
    grid-column:2 / span 2 !important;
    grid-row:1 !important;
  }
  #view-albums .resource-preach-item .resource-preach-value:nth-child(3){
    grid-column:2 !important;
    grid-row:2 !important;
  }
  #view-albums .resource-preach-item .resource-preach-value:nth-child(4){
    grid-column:3 !important;
    grid-row:2 !important;
  }
  #view-albums .resource-preach-value:not(.resource-preach-date) small{
    display:block !important;
    margin-bottom:1px !important;
    font-size:7px !important;
    line-height:8px !important;
  }
  #view-albums .resource-preach-value:not(.resource-preach-date) > span,
  #view-albums .resource-preach-value:not(.resource-preach-date) > b{
    font-size:9px !important;
    line-height:1.1 !important;
  }
  #view-albums .resource-preach-date-tile{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
  #view-albums .resource-preach-date-tile small{
    display:block !important;
    font-size:7px !important;
  }
  #view-albums .resource-preach-date-tile b{
    font-size:18px !important;
    line-height:19px !important;
  }
  #view-albums .resource-preach-actions{
    grid-column:4 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    flex-direction:column !important;
    width:30px !important;
    gap:3px !important;
  }
  #view-albums .resource-preach-edit,
  #view-albums .resource-preach-remove{
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    border-radius:8px !important;
  }
}

[data-theme="dark"] #view-albums .resource-preach-date-tile{
  background:linear-gradient(180deg,#fffdf7 0%,#efe0ad 100%) !important;
  color:#173b63 !important;
  border-color:#cda43a !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 1px 2px rgba(0,0,0,.14) !important;
}
[data-theme="dark"] #view-albums .resource-preach-date-tile small{
  color:#80611a !important;
}
[data-theme="dark"] #view-albums .resource-preach-date-tile b{
  color:#173b63 !important;
}