/* HTNS v246 — Sermon Schedule slim compact date tiles and plain display names. */
#mainApp #view-albums{
  --preach-date-col: 50px;
}
#mainApp #view-albums .resource-preach-roster-head,
#mainApp #view-albums .resource-preach-item{
  grid-template-columns:var(--preach-date-col) minmax(0,1.05fr) minmax(0,1.14fr) minmax(0,.78fr) !important;
  column-gap:8px !important;
}
#mainApp #view-albums .resource-preach-roster-head{
  padding-left:8px !important;
  padding-right:8px !important;
}
#mainApp #view-albums .resource-preach-item{
  min-height:52px !important;
  padding:4px 8px !important;
}
#mainApp #view-albums .resource-preach-date{
  justify-content:center !important;
}
#mainApp #view-albums .resource-preach-date-tile,
#modal .resource-preach-action-summary .resource-preach-date-tile{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:row !important;
  width:auto !important;
  min-width:42px !important;
  height:28px !important;
  min-height:28px !important;
  padding:0 6px !important;
  border:1px solid #aec7d9 !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#ffffff 0%,#edf5fb 100%) !important;
  color:#123b67 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#mainApp #view-albums .resource-preach-date-tile .compact-md-date,
#modal .resource-preach-action-summary .resource-preach-date-tile .compact-md-date{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  font-size:12px !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:-.03em !important;
  white-space:nowrap !important;
}
#mainApp #view-albums .resource-preach-value:not(.resource-preach-date) > span,
#mainApp #view-albums .resource-preach-value:not(.resource-preach-date) > b,
#mainApp #view-albums .resource-preach-value:not(.resource-preach-date) > button{
  font-size:clamp(9px,2.45vw,11px) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#mainApp #view-albums .resource-preach-editor select option{
  font-size:14px;
}
@media(max-width:430px){
  #mainApp #view-albums{ --preach-date-col: 46px; }
  #mainApp #view-albums .resource-preach-roster-head,
  #mainApp #view-albums .resource-preach-item{
    grid-template-columns:var(--preach-date-col) minmax(0,1.02fr) minmax(0,1.12fr) minmax(0,.78fr) !important;
    gap:5px !important;
  }
  #mainApp #view-albums .resource-preach-roster-head{
    min-height:27px !important;
    padding:0 6px !important;
  }
  #mainApp #view-albums .resource-preach-roster-head span{
    font-size:7px !important;
  }
  #mainApp #view-albums .resource-preach-item{
    min-height:46px !important;
    padding:3px 6px !important;
  }
  #mainApp #view-albums .resource-preach-date-tile{
    min-width:38px !important;
    height:26px !important;
    min-height:26px !important;
    padding:0 5px !important;
    border-radius:8px !important;
  }
  #mainApp #view-albums .resource-preach-date-tile .compact-md-date{
    font-size:11px !important;
  }
}
@media(max-width:350px){
  #mainApp #view-albums{ --preach-date-col: 43px; }
  #mainApp #view-albums .resource-preach-roster-head,
  #mainApp #view-albums .resource-preach-item{
    gap:4px !important;
  }
  #mainApp #view-albums .resource-preach-date-tile{
    min-width:35px !important;
    height:24px !important;
    min-height:24px !important;
    padding:0 4px !important;
  }
  #mainApp #view-albums .resource-preach-date-tile .compact-md-date{
    font-size:10px !important;
  }
  #mainApp #view-albums .resource-preach-value:not(.resource-preach-date) > span,
  #mainApp #view-albums .resource-preach-value:not(.resource-preach-date) > b,
  #mainApp #view-albums .resource-preach-value:not(.resource-preach-date) > button{
    font-size:8.3px !important;
  }
}
html[data-theme="dark"] #mainApp #view-albums .resource-preach-date-tile,
html[data-theme="dark"] #modal .resource-preach-action-summary .resource-preach-date-tile{
  background:linear-gradient(180deg,#183346 0%,#24495d 100%) !important;
  border-color:#52718a !important;
}