/* HTNS v261 — visual-system cleanup for Home Quick Actions + Upcoming Events.
   One outer surface, subtle dividers, no nested card outlines. */

/* ---------- HOME / QUICK ACTIONS ---------- */
#mainApp #view-home .home-quick-combined-wrap{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  overflow:hidden !important;
  width:100% !important;
  min-height:76px !important;
  border:1px solid var(--sys-border-strong,#a9bfd1) !important;
  border-radius:16px !important;
  background:linear-gradient(100deg,#ffffff 0%,#f8fbfe 72%,#edf5fa 100%) !important;
  box-shadow:none !important;
}

#mainApp #view-home .home-quick-combined-wrap > .home-quick-duo-card{
  display:contents !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  min-height:0 !important;
}

#mainApp #view-home .home-quick-combined-action,
#mainApp #view-home .home-quick-power-ref{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:76px !important;
  height:auto !important;
  margin:0 !important;
  padding:9px 5px 8px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  color:var(--sys-text,#16385c) !important;
}

#mainApp #view-home .home-quick-combined-action + .home-quick-combined-action,
#mainApp #view-home .home-quick-power-ref{
  border-left:1px solid var(--sys-border,#d3e0eb) !important;
}

#mainApp #view-home .home-quick-combined-action .qi,
#mainApp #view-home .home-quick-power-ref .qi{
  display:grid !important;
  place-items:center !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  flex:0 0 24px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  color:var(--sys-accent,#2f6f98) !important;
  box-shadow:none !important;
}

#mainApp #view-home .home-quick-combined-action .qi svg,
#mainApp #view-home .home-quick-power-ref .qi svg{
  width:21px !important;
  height:21px !important;
  stroke:currentColor !important;
  color:inherit !important;
  filter:none !important;
}

#mainApp #view-home .home-quick-combined-action > span:not(.qi),
#mainApp #view-home .home-quick-power-ref > span:not(.qi){
  display:block !important;
  max-width:100% !important;
  margin:0 !important;
  color:var(--sys-text,#16385c) !important;
  font-size:9px !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  letter-spacing:.005em !important;
  text-align:center !important;
  text-transform:none !important;
  white-space:normal !important;
}

#mainApp #view-home .home-quick-combined-action:active,
#mainApp #view-home .home-quick-power-ref:active{
  background:var(--sys-accent-pale,#f2f7fb) !important;
  transform:none !important;
}

#mainApp #view-home .home-quick-combined-action:focus-visible,
#mainApp #view-home .home-quick-power-ref:focus-visible{
  outline:2px solid var(--sys-accent,#2f6f98) !important;
  outline-offset:-3px !important;
}

/* ---------- UPCOMING EVENTS ---------- */
#mainApp #view-events .events-list{
  display:block !important;
  gap:0 !important;
}

#mainApp #view-events .events-combined-shell{
  display:block !important;
  overflow:hidden !important;
  width:100% !important;
  border:1px solid var(--sys-border-strong,#a9bfd1) !important;
  border-radius:18px !important;
  background:linear-gradient(100deg,#ffffff 0%,#f8fbfe 72%,#edf5fa 100%) !important;
  box-shadow:none !important;
}

#mainApp #view-events .events-combined-shell > .event-page-card,
#mainApp #view-events .events-combined-shell > .event-page-card:first-child,
#mainApp #view-events .events-combined-shell > .event-page-card:last-child{
  position:relative !important;
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) 14px !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  height:auto !important;
  min-height:66px !important;
  max-height:none !important;
  margin:0 !important;
  padding:9px 11px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  color:var(--sys-text,#16385c) !important;
  box-shadow:none !important;
  filter:none !important;
  text-align:left !important;
}

#mainApp #view-events .events-combined-shell > .event-page-card + .event-page-card{
  border-top:1px solid var(--sys-border,#d3e0eb) !important;
}

#mainApp #view-events .events-combined-shell > .event-page-card:active{
  background:var(--sys-accent-pale,#f2f7fb) !important;
  transform:none !important;
  filter:none !important;
}

#mainApp #view-events .events-combined-shell .event-page-chip{
  display:grid !important;
  place-items:center !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--sys-border,#d3e0eb) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#f8fbfe 0%,#e8f2f8 100%) !important;
  color:var(--sys-text,#16385c) !important;
  box-shadow:none !important;
}

#mainApp #view-events .events-combined-shell .event-page-chip .compact-md-date{
  width:auto !important;
  height:auto !important;
  color:#123b67 !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

#mainApp #view-events .events-combined-shell .event-page-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
  width:100% !important;
  height:auto !important;
  row-gap:3px !important;
}

#mainApp #view-events .events-combined-shell .event-page-title{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  color:#123b67 !important;
  font-size:12.5px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#mainApp #view-events .events-combined-shell .event-page-meta{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  width:100% !important;
  gap:7px !important;
  flex-wrap:nowrap !important;
  overflow:visible !important;
}

#mainApp #view-events .events-combined-shell .event-page-time{
  min-width:0 !important;
  margin:0 !important;
  color:var(--sys-muted,#72889a) !important;
  font-size:9.5px !important;
  line-height:1.1 !important;
  font-weight:750 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#mainApp #view-events .events-combined-shell .event-church-only-badge{
  display:grid !important;
  place-items:center !important;
  flex:0 0 28px !important;
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  margin:0 0 0 auto !important;
  padding:0 !important;
  border:1px solid var(--sys-border,#d3e0eb) !important;
  border-radius:9px !important;
  background:#f7fbfe !important;
  color:var(--sys-accent,#2f6f98) !important;
  box-shadow:none !important;
}

#mainApp #view-events .events-combined-shell .event-page-arrow{
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
  color:var(--sys-accent,#2f6f98) !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:700 !important;
  opacity:1 !important;
}

/* Coordinated dark mode */
html[data-theme="dark"] #mainApp #view-home .home-quick-combined-wrap,
html.htns-theme-v234[data-theme="dark"] #mainApp #view-home .home-quick-combined-wrap,
html[data-theme="dark"] #mainApp #view-events .events-combined-shell,
html.htns-theme-v234[data-theme="dark"] #mainApp #view-events .events-combined-shell{
  background:linear-gradient(100deg,#173448 0%,#19384c 72%,#1e4156 100%) !important;
  border-color:#4f7588 !important;
}

html[data-theme="dark"] #mainApp #view-home .home-quick-combined-action + .home-quick-combined-action,
html[data-theme="dark"] #mainApp #view-home .home-quick-power-ref,
html[data-theme="dark"] #mainApp #view-events .events-combined-shell > .event-page-card + .event-page-card{
  border-color:#315365 !important;
}

html[data-theme="dark"] #mainApp #view-home .home-quick-combined-action > span:not(.qi),
html[data-theme="dark"] #mainApp #view-home .home-quick-power-ref > span:not(.qi),
html[data-theme="dark"] #mainApp #view-events .events-combined-shell .event-page-title{
  color:#eef6fd !important;
}

html[data-theme="dark"] #mainApp #view-home .home-quick-combined-action .qi,
html[data-theme="dark"] #mainApp #view-home .home-quick-power-ref .qi,
html[data-theme="dark"] #mainApp #view-events .events-combined-shell .event-page-arrow{
  color:#8bc5e8 !important;
}

html[data-theme="dark"] #mainApp #view-events .events-combined-shell .event-page-chip,
html[data-theme="dark"] #mainApp #view-events .events-combined-shell .event-church-only-badge{
  background:#18384f !important;
  border-color:#4f7588 !important;
  color:#9dccdf !important;
}

html[data-theme="dark"] #mainApp #view-events .events-combined-shell .event-page-chip .compact-md-date{
  color:#eef6fd !important;
}

html[data-theme="dark"] #mainApp #view-events .events-combined-shell .event-page-time{
  color:#aac3d7 !important;
}

@media(max-width:430px){
  #mainApp #view-home .home-quick-combined-wrap{
    min-height:70px !important;
    border-radius:15px !important;
  }
  #mainApp #view-home .home-quick-combined-action,
  #mainApp #view-home .home-quick-power-ref{
    min-height:70px !important;
    padding:8px 3px 7px !important;
  }
  #mainApp #view-home .home-quick-combined-action .qi,
  #mainApp #view-home .home-quick-power-ref .qi{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    flex-basis:22px !important;
  }
  #mainApp #view-home .home-quick-combined-action .qi svg,
  #mainApp #view-home .home-quick-power-ref .qi svg{
    width:19px !important;
    height:19px !important;
  }
  #mainApp #view-home .home-quick-combined-action > span:not(.qi),
  #mainApp #view-home .home-quick-power-ref > span:not(.qi){
    font-size:8.2px !important;
  }

  #mainApp #view-events .events-combined-shell{
    border-radius:16px !important;
  }
  #mainApp #view-events .events-combined-shell > .event-page-card,
  #mainApp #view-events .events-combined-shell > .event-page-card:first-child,
  #mainApp #view-events .events-combined-shell > .event-page-card:last-child{
    grid-template-columns:45px minmax(0,1fr) 12px !important;
    gap:8px !important;
    min-height:62px !important;
    padding:8px 9px !important;
  }
  #mainApp #view-events .events-combined-shell .event-page-chip{
    width:41px !important;
    min-width:41px !important;
    height:41px !important;
    min-height:41px !important;
    border-radius:11px !important;
  }
  #mainApp #view-events .events-combined-shell .event-page-chip .compact-md-date{
    font-size:11px !important;
  }
  #mainApp #view-events .events-combined-shell .event-page-title{
    font-size:11.5px !important;
  }
  #mainApp #view-events .events-combined-shell .event-page-time{
    font-size:8.8px !important;
  }
  #mainApp #view-events .events-combined-shell .event-church-only-badge{
    width:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
  }
}