/* Keep every WhatsApp checkbox beside its label, independent of text-field sizing. */
.saraya-whatsapp-settings .field:has(> label > input[type="checkbox"]) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block: 6px;
}

.saraya-whatsapp-settings .field > label:has(> input[type="checkbox"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  width: 100%;
  margin: 0;
  padding: 4px 0;
  direction: rtl;
  text-align: right;
  line-height: 1.6;
  cursor: pointer;
}

.saraya-whatsapp-settings input[type="checkbox"] {
  appearance: auto;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px;
  margin: 0;
  padding: 0 !important;
  box-shadow: none;
  accent-color: #17594c;
  cursor: pointer;
}

.saraya-whatsapp-settings input[type="checkbox"]:focus-visible {
  outline: 2px solid #17594c;
  outline-offset: 3px;
}

/* Keep the shared dialog header visible while every settings section can scroll. */
#modal .dialog:has(.saraya-whatsapp-settings) {
  display: flex;
  flex-direction: column;
  width: min(940px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow: hidden;
}
#modal .dialog:has(.saraya-whatsapp-settings) .dialog-head { flex: none; }
#modal .dialog:has(.saraya-whatsapp-settings) #modalBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-color: #9b7a3a #f5efe3;
  scroll-padding-block-start: 72px;
}
.whatsapp-section-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px;
  background: #fffdf8;
  border-bottom: 1px solid #e2cca4;
}
.whatsapp-section-nav .btn { padding: 6px 8px; min-height: 38px; font-size: .8rem; }
.saraya-whatsapp-settings > section { padding: 0 16px 18px; }
.saraya-whatsapp-settings > section + section { border-top: 1px solid #e2cca4; padding-top: 12px; }
.saraya-whatsapp-settings .form { padding: 10px 0 14px; gap: 8px 14px; }
.saraya-whatsapp-settings .field { margin-block: 6px; gap: 5px; }
.saraya-whatsapp-settings .field input:not([type="checkbox"]),
.saraya-whatsapp-settings .field select { min-height: 40px; padding: 8px 10px; }
.saraya-whatsapp-settings .tablewrap .actions { flex-wrap: nowrap; }
.saraya-whatsapp-settings .tablewrap .btn { min-height: 34px; padding: 5px 9px; white-space: nowrap; }
@media(max-width:600px) {
  .whatsapp-section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  #modal .dialog:has(.saraya-whatsapp-settings) #modalBody { scroll-padding-block-start: 108px; }
  .saraya-whatsapp-settings > section { padding-inline: 12px; }
}
/* Dense owner monitoring, with one settings section visible at a time. */
.saraya-whatsapp-settings > section[hidden] { display:none !important; }
.saraya-whatsapp-settings .whatsapp-section-nav .active { background:#125b49; color:white; border-color:#125b49; }
#modal .dialog:has(#waMonitor) { width:min(1180px,calc(100vw - 32px)); }
.wa-monitor-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:8px 0; }
.wa-monitor-heading h3 { margin:0; font-size:1.1rem; }
.wa-monitor-heading .btn { font-size:.875rem; min-height:36px; padding:6px 10px; }
.wa-monitor-health { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; padding:10px 14px; background:#edf7f2; border-inline-start:3px solid #ae883c; border-radius:8px; font-size:.875rem; }
.wa-monitor-health b { color:#104d3e; }
.wa-monitor-health small { font-size:.8rem; }
.wa-monitor-counts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:10px 0; }
.wa-monitor-counts > div { border:1px solid #d5e3de; border-radius:10px; padding:8px 10px; display:flex; gap:8px; align-items:center; }
.wa-monitor-counts b { color:#0e5743; font-size:1.4rem; }
.wa-monitor-counts span { font-size:.875rem; line-height:1.5; }
.wa-monitor-filters { display:grid; grid-template-columns:1fr 1fr 1.7fr; gap:10px; }
.wa-monitor-filters label { display:grid; gap:4px; font-size:.875rem; }
.wa-monitor-filters input,.wa-monitor-filters select { min-height:38px; padding:6px 9px; font-size:.875rem; width:100%; }
#waMonitorNotice,.wa-monitor-coverage { font-size:.8rem; color:#4a635b; margin:8px 0; }
.wa-monitor-table { max-height:42vh; overflow:auto; border:1px solid #dae5df; border-radius:10px; }
.wa-monitor-table table { width:100%; min-width:720px; }
.wa-monitor-table thead { position:sticky; top:0; z-index:1; }
.wa-monitor-table th,.wa-monitor-table td { padding:8px 10px; font-size:.875rem; vertical-align:top; }
.wa-monitor-table td > b,.wa-monitor-table td > span,.wa-monitor-table td > small,.wa-monitor-table td > bdi { display:block; }
.wa-monitor-table small { font-size:.8rem; color:#60736c; }
.wa-monitor-table details { max-width:290px; min-width:76px; }
.wa-monitor-table summary { cursor:pointer; color:#0e5845; }
.wa-monitor-table details p { margin:6px 0; line-height:1.5; }
.wa-monitor-table dl { margin:6px 0; font-size:.8rem; }
.wa-monitor-table dl div { display:flex; justify-content:space-between; gap:10px; margin:4px 0; }
.wa-monitor-table dd { margin:0; }
.wa-delivery-state { display:inline-block; font-size:.875rem; font-weight:600; padding:3px 7px; border-radius:5px; background:#eef2f5; color:#365367; }
.wa-delivery-state.state-delivered,.wa-delivery-state.state-read { background:#e1f3e8; color:#146144; }
.wa-delivery-state.state-failed,.wa-delivery-state.state-uncertain,.wa-attention { color:#a33a2b; }
.wa-attention { margin-top:4px; font-size:.8rem; }
.wa-monitor-pages { display:flex; gap:12px; justify-content:center; align-items:center; margin:8px 0; }
.wa-monitor-pages .btn { padding:4px 10px; min-height:32px; font-size:.875rem; }
.wa-monitor-due { border-top:1px solid #d5e3de; padding-top:10px; }
.wa-monitor-due summary { cursor:pointer; font-size:.95rem; font-weight:700; }
.wa-monitor-due ul { list-style:none; margin:8px 0; padding:0; }
.wa-monitor-due li { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; padding:7px 10px; border-bottom:1px solid #edf1ee; font-size:.875rem; }
.wa-monitor-due li span { flex:1; }
.wa-monitor-empty { text-align:center; padding:22px !important; }
@media(max-width:700px){.wa-monitor-counts{grid-template-columns:repeat(2,minmax(0,1fr));}.wa-monitor-filters{grid-template-columns:1fr 1fr;}.wa-monitor-filters label:last-child{grid-column:1/-1;}.wa-monitor-health{display:grid;}.wa-monitor-table{max-height:50vh;}}