html{}
	
body{
	display: flex;
	flex-direction: column;
	font-size: 14px;}
	
:focus-visible {
	  outline: none;
		box-shadow: 1px 1px 5px rgba(1, 1, 0, .0);
	}
	  
	/* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
	:focus:not(:focus-visible) {
	  outline: none;
	  box-shadow: 1px 1px 5px rgba(1, 1, 0, .0);
	}

.col-logo{
	-ms-flex: 0 0 54px;
	flex: 0 0 54px;
	max-width: 54px;}
	
.container-lg{
	width: 1800px;
	max-width: 100%;}
	
.container-fluid{	
	flex: 1 0 auto;}
.container-fullwidth{
	padding-left: 0;
	padding-right: 0;
	width: 100%;}


.loadingDiv {
	position: fixed;
	width:100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 10000;
	color: #fff;}
.loadingDiv p{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-bottom: 0;
	}
.p-relative{
	position: relative;}
.lh-sm{
	line-height: 1.15!important;}

.lh-md{
	line-height: 2rem!important;}
		
.btn-link{
	padding: 0;
	border: 0;}

.border-reset {
	border-color: inherit !important;}
	
.jumbotron-start-line{
	background: #ccc; 
	margin-bottom: 0;
	color: #f1f1f1;
	border-radius: 0;
	text-align: center;
	padding: 1rem 0 0 0;}
.jumbotron-start-line h1{
	font-size: 3rem;}
.jumbotron-start-line .logo{
	max-width: 10rem;
	margin-top: 2rem;
	margin-bottom: 0rem;}
.jumbotron-overlay{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+1,666666+100 */
background: rgb(204,204,204); /* Old browsers */
background: -moz-linear-gradient(top, rgba(204,204,204,.5) 1%, rgba(102,102,102,.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(204,204,204,.5) 1%,rgba(102,102,102,.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(204,204,204,.5) 1%,rgba(102,102,102,.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
	box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	padding: 0.7rem 2rem 2rem 2rem;}

.jumbotron-data-protection{
	background: #ffc107;
	color: #000;
}

.footerpadding{
	height: 120px;}

.modal-dialog-bottom {
	  position: fixed !important;
	  bottom: 0 !important;
	  left: 0% !important;
	  right: 0% !important;}
	  
	.bg-cloud{
		background-color: #f1c537 !important;}
	  
form{
}
#primary{
	margin-top: -1rem;
	background: #e84b3c;
	overflow: hidden;
	position: relative;
	width: 100%;}
#primary a{
	color:#ffc107;
	text-decoration: underline;}

.section:before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 10rem;
	height: 40rem;
	background: #e14031;
	transform: skew(0, -12deg);}
	
.fs-tiny{
	font-size: .75em !important;}
.fs-counter{
	font-size: 10px !important;}

.table-responsive-lg {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;}
	
.terms{
	font-size: 0.8rem;
	max-height: 280px;
	overflow-y: scroll;}
.terms-agree{
	background: #888;
	color: #fff;
	padding: 1rem;
	border-radius: 0 0 3px 3px;
}

.select-mode .member-item { cursor: pointer; }

.table-membership td{
	vertical-align: middle;
}

.calc-card, .calc-card .card-footer{
	background: transparent;
}
.calc-card .card-header{
	color: #373a3c;
	background: white;
}

.calc-card .table td, .table th{
	border-top: 1px solid rgba(255,255,255,0.05);}

.btn-relative{
	position: relative;} 
	
.progress-btn-current, .progress-btn-current:hover, .progress-btn-current:active, .progress-btn-current:focus {
	background-color: rgb(108, 117, 125); !important;
	border-color: #0dcaf0 !important;
	color: #0dcaf0 !important;
	border-width: 2px;
	font-weight: bold;}
.progress-track-dashed {
	background-color: transparent !important;
	border-top: 2px dashed rgba(255, 255, 255, 0.4);
	height: 0 !important;}

.custom-file-control{
	text-align: left;}
.text-center{
	text-align: center;}
.text-shadow{
	text-shadow: 0px 0px 15px rgba(0,0,0,.3);
}
form .yesnoswitch{
	margin-top: 2px;}
.card-header legend{
	margin-bottom: 0;}

.mh-100{
	min-height: 100vh;}
	
/*	MODULES */
.fullwidth-hero{
	height: 300px;
	width: 100%;}
	
.img-fit {
	height: 100%;
	width: 100%;
	-o-object-fit: cover!important;
	object-fit: cover!important;
	object-position: center center;}
.chat-img{
	height: 100vh;
	object-position: center center;}

/* ═══════════════════════════════════════════════════════════════
   CHAT IMAGE FRAMES — reserved-space thumbnails + lazy-load fade-in
   Wraps inline chat images (file attachments, club file thumbnails,
   and scraped link-preview cards) in a Bootstrap .ratio box so their
   footprint is reserved by CSS before the image itself has loaded —
   there's nothing left for the browser (or chat.js's scroll-position
   compensation) to correct once it does. A neutral skeleton fill
   shows while the image is off-screen/loading; the onload handler in
   the markup (see Comment.php) adds .chat-img-loaded to fade it in.
   ═══════════════════════════════════════════════════════════════ */

/* The tap-for-fullscreen wrapper around photo attachments. Block-level
   deliberately: a default (shrink-to-fit) button has no width of its
   own to offer the .ratio frame inside it, which is what collapsed the
   images to 0×0. As a block it inherits its width from the bubble
   body, giving the frame a real, RESPONSIVE number to fill. */
.chat-img-btn {
	display: block;
	width: 100%;
}

.chat-img-frame {
	/* Fluid with the bubble — full width on phones, capped on desktop
	   so the 1:1 square doesn't balloon inside wide bubbles (a 600px
	   bubble would otherwise mean a 600px-tall image). Raise or drop
	   the 420px cap to taste. */
	width: 100%;
	max-width: 420px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.06);
	cursor: pointer;
}
.chat-img-frame img {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .2s ease;
}
.chat-img-frame img.chat-img-loaded {
	opacity: 1;
}

/* ── Skeleton pulse while an image is lazy-loading. A gentle breathe on
   the frame's grey fill signals "in flight" (a static box can read as
   broken). Once the image has faded in it fully covers the frame, and
   the :has() rule stops the animation outright — on older browsers
   without :has() support the pulse just continues invisibly behind the
   loaded image, which is harmless. Disabled entirely for users who've
   asked for reduced motion. */
@keyframes chat-img-skeleton-pulse {
	0%, 100% { background-color: rgba(0, 0, 0, 0.06); }
	50%      { background-color: rgba(0, 0, 0, 0.13); }
}
.chat-img-frame,
.chat-link-img-frame {
	animation: chat-img-skeleton-pulse 1.6s ease-in-out infinite;
}
.chat-img-frame:has(img.chat-img-loaded),
.chat-link-img-frame:has(img.chat-img-loaded) {
	animation: none;
}
@media (prefers-reduced-motion: reduce) {
	.chat-img-frame,
	.chat-link-img-frame {
		animation: none;
	}
}

/* Scraped link-preview images inside comment link cards — 16:9 rather
   than square. The parent .card already clips with overflow-hidden and
   sets its own border-radius, so this frame doesn't duplicate that. */
.chat-link-img-frame {
	background-color: rgba(0, 0, 0, 0.06);
}
.chat-link-img-frame img {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .2s ease;
}
.chat-link-img-frame img.chat-img-loaded {
	opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   END CHAT IMAGE FRAMES
   ═══════════════════════════════════════════════════════════════ */

/* NOTE: earlier iterations of the lazy-load fix disabled native CSS
   scroll anchoring here (overflow-anchor: none), on the theory that it
   was double-correcting against chat.js's own manual scrollTop math.
   Real-device testing showed the opposite problem: chat.js's manual
   correction was fighting the browser's native momentum/inertial scroll
   animation (which runs on the compositor thread, outside JS's control),
   producing a visible tug-of-war rather than a clean settle. Native
   scroll anchoring is specifically built to update scroll position from
   inside the browser's own scroll pipeline, so it doesn't have that
   conflict — chat.js no longer does manual scrollTop correction for
   lazy-loaded history (see reanchorScroll's removal in chat.js), so
   there's nothing left to double up with anymore. */

/* Scroll anchoring picks the first eligible element near the top of the
   viewport as its "anchor" and keeps *that* element visually still when
   content shifts around it. #top-sentinel sits permanently as the first
   child of #chat — new history is always inserted after it — so its own
   position in the document never changes no matter how much loads above
   it (there's nothing above it to move it). If the browser picks the
   sentinel as its anchor, "keeping it still" requires zero scroll
   correction, which means a freshly-loaded batch can land with no
   compensation at all: the user ends up looking at the top of the new
   batch instead of back where they were reading. overflow-anchor: none
   is meant for exactly this — excluding non-content "furniture" elements
   (spinners, dividers, placeholders) from anchor eligibility, so the
   browser is forced to pick real message content instead. Same reasoning
   applies to the batch divider inserted between old and new content on
   every lazy load (see chat.js) — it's fresh each time and not something
   the user is actually reading, so it shouldn't be a candidate either. */
.scroll-anchor-skip {
	overflow-anchor: none;
}

/* ═══════════════════════════════════════════════════════════════
   CHAT COLUMN-REVERSE SCROLLER
   The structural fix for the lazy-load viewport jump (the WhatsApp
   approach). The DOM order of messages is reversed by chat.js — the
   newest message is the FIRST child (rendered at the visual bottom
   because of flex-direction: column-reverse), the oldest is the LAST.
   Loading older history therefore APPENDS to the DOM end, and content
   appended beyond the current scroll position never displaces the
   viewport — in any browser, mid-touch or not. No JS scroll correction
   exists anymore because none is needed. Bonuses that fall out for
   free: scrollTop 0 is the visual bottom (so "open at latest" needs no
   scrolling at all), and a user sitting at the bottom stays pinned
   there when new messages arrive.

   NOTE: --chat-vertical-offset is the combined height of everything
   above and below the chat scroller (navbar, page heading, composer,
   etc.) and WILL need tuning against the real page — 260px is a
   starting guess. If the chat is cut off or leaves a gap, this is the
   dial.

   WIDTH / "container" NOTE: do NOT wrap the comment rows in a real
   .container div inside #chat — the bottom-anchored, jump-free scroll
   behaviour depends on the SCROLLING element itself being the
   column-reverse flex parent of the messages. A wrapper in between
   turns the scroller's content back into one normal block child, the
   scroll re-anchors to the top, and the lazy-load jump comes straight
   back. Instead, the padding below gives #chat the container's
   geometry directly: content is centred and capped at
   --chat-content-max wide, while the scroll area (and scrollbar) stays
   the full width of #chat. The max() floor guarantees at least a
   half-gutter of padding at narrow widths, which is exactly what
   Bootstrap .row's negative margins expect a container to provide —
   fixing the horizontal overflow unwrapped rows otherwise cause.
   Tune --chat-content-max to whatever container width the rest of the
   page uses. */
/* Content width cap — set on the SHELL so both #chat and the pin bar
   (siblings inside it) inherit the same value and stay aligned. */
#chat-shell {
	--chat-content-max: 960px;
}

/* Attachment editor/picker mount inside the composer (see initialise in
   chat.js). Capped so a tall poll editor on a phone scrolls internally
   rather than pushing the composer's input off-screen. The editor's own
   border (styled for the light page background) reads as a stray white
   outline against the dark composer — stripped here. */
#chat-tools-holder {
	max-height: 60vh;
	overflow-y: auto;
}
/* While an editor is open (body.chat-editor-open, toggled by the
   tools-holder observer in initialise — see there for why it's
   observer-driven), hide the composer's own rows so the editor takes
   over the bar entirely, and hide the floating chat widgets, which
   would otherwise hover over the editor once the chat shrinks.
   Validation feedback is surfaced as a toast (see the #chat-feedback
   observer) since the inline div is hidden while this is active. */
body.chat-editor-open #chat-edit > div:not(#chat-tools-holder) {
	display: none !important;
}
body.chat-editor-open #scroll-bottom-btn,
body.chat-editor-open #chat-search-toggle,
body.chat-editor-open #chat-search {
	display: none !important;
}

#chat {
	display: flex;
	flex-direction: column-reverse;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	/* Fallback only — sizeChatScroller() in chat.js measures the real
	   available space (top of #chat down to the composer) and sets an
	   inline height, re-measured on resize. A fixed offset guess can't
	   be right across devices whose chrome heights differ. */
	height: calc(100dvh - var(--chat-vertical-offset, 260px));
	padding-inline: max(var(--chat-gutter, 0.75rem), calc((100% - var(--chat-content-max, 1140px)) / 2));
}

/* Window mode (jumped to an old message via reply/search — see
   enterWindowMode in chat.js) flips the scroller to NORMAL column flow.
   Each direction of a flex scroller is jump-proof on its far side only:
   column-reverse makes backward/older loads displacement-free (live
   mode's priority), normal column makes forward/newer loads
   displacement-free — and forward is window mode's dominant motion.
   The JS mirrors everything direction-dependent (DOM order, sentinel
   placement, grouping adjacency) off the in_window_mode flag. */
#chat.chat-forward {
	flex-direction: column;
}

.nowrap{
	white-space: nowrap;}

[data-bs-toggle="collapse"] i {
	transition: transform 0.2s ease;
}

[data-bs-toggle="collapse"]:not(.collapsed) i {
	transform: rotate(180deg);
}


/* ═══════════════════════════════════════════════════════════════
   WEATHER & WATER MODALS
   Used by #weatherModal and #waterModal.
   All classes prefixed with .cm- (conditions modal) for isolation.
   Chart rendering and badge generation lives in event-safety-client.js
   ═══════════════════════════════════════════════════════════════ */

/* ── Modal shell ─────────────────────────────────────────── */

.cm-modal .modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cm-modal .modal-title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cm-modal .modal-title small {
  font-weight: 400;
  color: #6b7280;
}
.cm-modal .modal-body {
  padding: 1.25rem;
  background: #fafafa;
}
.cm-modal .modal-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.8125rem;
  color: #6b7280;
  background: #fff;
}

/* ── Section labels ──────────────────────────────────────── */
.cm-section { margin-bottom: 1.5rem; }
.cm-section:last-child { margin-bottom: 0; }
.cm-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 12px;
}

/* ── Headline strip (5 metric cards) ─────────────────────── */
.cm-cards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.cm-cards-grid > .cm-metric-card:nth-child(1),
.cm-cards-grid > .cm-metric-card:nth-child(2),
.cm-cards-grid > .cm-metric-card:nth-child(3) {
  grid-column: span 2;
}
.cm-cards-grid > .cm-metric-card:nth-child(4),
.cm-cards-grid > .cm-metric-card:nth-child(5) {
  grid-column: span 3;
}

@media (max-width: 1100px) {
  .cm-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-cards-grid > .cm-metric-card:nth-child(n) { grid-column: span 1; }
}
@media (max-width: 420px) {
  .cm-cards-grid { grid-template-columns: 1fr; }
}

/* ── Station map link ────────────────────────────────────── */
.cm-station-name-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.12s ease;
}
.cm-station-name-link:hover {
  color: #0e7c86;
  text-decoration: none;
}
.cm-station-card.is-active .cm-station-name-link:hover { color: #5a3415; }
.cm-station-card.is-recent .cm-station-name-link:hover { color: #92400e; }

.cm-station-link-icon {
  font-size: 9px;
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.cm-station-name-link:hover .cm-station-link-icon {
  opacity: 1;
}

.cm-metric-card {
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.cm-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.cm-metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  font-weight: 500;
}
.cm-metric-value {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #111827;
}
.cm-metric-value-sm { font-size: 24px; }
.cm-metric-unit {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  margin-left: 2px;
}
.cm-metric-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
  line-height: 1.4;
}
.cm-metric-context {
  margin-top: auto;
  padding-top: 10px;
}

/* ── Context badges ──────────────────────────────────────── */
.cm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.cm-badge-temp-cold     { background: #ecfeff; color: #155e75; }
.cm-badge-temp-cool     { background: #f0fdfa; color: #115e59; }
.cm-badge-temp-mild     { background: #fefce8; color: #854d0e; }
.cm-badge-temp-warm     { background: #fef3c7; color: #92400e; }
.cm-badge-wind-low      { background: #dcfce7; color: #166534; }
.cm-badge-wind-mod      { background: #fef3c7; color: #854d0e; }
.cm-badge-wind-strong   { background: #fee2e2; color: #991b1b; }
.cm-badge-uv-low        { background: #dcfce7; color: #166534; }
.cm-badge-uv-mod        { background: #fef3c7; color: #854d0e; }
.cm-badge-uv-high       { background: #fed7aa; color: #9a3412; }
.cm-badge-uv-vhigh      { background: #fee2e2; color: #991b1b; }
.cm-badge-uv-extreme    { background: #ede9fe; color: #5b21b6; }
.cm-badge-cloud         { background: #f1f5f9; color: #475569; }
.cm-badge-seastate      { background: #ccfbf1; color: #115e59; }
.cm-badge-current       { background: #f1f5f9; color: #475569; }
.cm-badge-quality-good  { background: #dcfce7; color: #166534; }
.cm-badge-quality-mod   { background: #fef3c7; color: #854d0e; }
.cm-badge-quality-poor  { background: #fee2e2; color: #991b1b; }
.cm-badge-alert         { background: #fee2e2; color: #991b1b; }

/* ── Visual support elements ─────────────────────────────── */

/* Bar trend (Sea State card) */
.cm-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  margin-top: 8px;
}
.cm-bar { flex: 1; background: #0e7c86; border-radius: 1px; }

/* Gradient track (UV, water temp) */
.cm-track {
  height: 4px;
  border-radius: 2px;
  margin-top: 12px;
  position: relative;
}
.cm-track-uv {
  background: linear-gradient(to right,
	#22c55e 0%, #facc15 27%, #fb923c 55%, #ef4444 73%, #a855f7 100%);
}
.cm-track-temp {
  background: linear-gradient(to right,
	#1e3a8a 0%, #06b6d4 30%, #14b8a6 60%, #f59e0b 85%, #dc2626 100%);
}
.cm-track-marker {
  position: absolute;
  top: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #111827;
  border: 2px solid #fff;
  transform: translateX(-50%);
}

/* ── Hourly strip ────────────────────────────────────────── */
.cm-hourly-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
@media (max-width: 700px) {
  .cm-hourly-strip {
	grid-template-columns: repeat(6, 80px);
	overflow-x: auto;
	padding-bottom: 6px;
  }
}

.cm-hour-card {
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  position: relative;
}
.cm-hour-card.is-event { border-color: #0e7c86; background: #f0fdfa; }
.cm-hour-card.is-now   { border-color: #f59e0b; background: #fffbeb; }
.cm-hour-time {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 6px;
}
.cm-hour-icon {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  color: #6b7280;
}
.cm-hour-card.is-event .cm-hour-icon { color: #0e7c86; }
.cm-hour-card.is-now .cm-hour-icon   { color: #f59e0b; }
.cm-hour-primary {
  font-size: 16px;
  font-weight: 500;
  color: #111827;
}
.cm-hour-secondary {
  font-size: 10px;
  color: #6b7280;
  margin-top: 4px;
}
.cm-hour-pill {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #0e7c86;
  color: white;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.cm-hour-pill.now { background: #f59e0b; }

/* ── Chart card ──────────────────────────────────────────── */
.cm-chart-card {
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
}
.cm-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.cm-chart-title { font-size: 13px; font-weight: 500; color: #111827; }
.cm-chart-legend { display: flex; gap: 14px; font-size: 11px; color: #6b7280; }
.cm-chart-legend-item { display: flex; align-items: center; gap: 5px; }
.cm-legend-swatch { width: 12px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.cm-chart-footnote {
  margin-top: 8px;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.5;
}

/* ── Detail rows ─────────────────────────────────────────── */
.cm-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 0;
}
@media (max-width: 600px) {
  .cm-details-grid { grid-template-columns: 1fr; }
}

.cm-detail-row-empty {
	/* Empty filler cell — invisible but holds the grid slot */
	border: none !important;
	background: transparent !important;
}
.cm-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
}
.cm-detail-row:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 600px) {
  .cm-detail-row:not(:last-child) { border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); }
}
.cm-detail-label { color: #6b7280; padding-right: 12px; }
.cm-detail-value { color: #111827; font-weight: 500; text-align: right; }

/* ── Empty state ─────────────────────────────────────────── */
.cm-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #6b7280;
  font-size: 13px;
}
.cm-empty-state strong { color: #111827; display: block; margin-bottom: 4px; }

/* ── Compass arrow helper ────────────────────────────────── */
.cm-compass-arrow {
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── Sewage station cards ────────────────────────────────── */
.cm-station-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 600px) {
  .cm-station-grid { grid-template-columns: 1fr; }
}

.cm-station-card {
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-station-card.is-active {
  border: 1px solid #b08968;
  background: #faf5ef;
}
.cm-station-card.is-recent {
  border: 1px solid #fcd34d;
  background: #fffbeb;
}

.cm-station-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cm-station-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #6b7280;
}
.cm-station-card.is-active .cm-station-icon {
  background: #e9dccd;
  color: #6b3e1f;
}
.cm-station-card.is-recent .cm-station-icon {
  background: #fef3c7;
  color: #b45309;
}

.cm-station-meta {
  flex: 1;
  min-width: 0;
}
.cm-station-name {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  line-height: 1.2;
}
.cm-station-card.is-active .cm-station-name { color: #5a3415; }
.cm-station-watercourse {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-station-distance {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

.cm-station-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
}
.cm-station-card.is-active .cm-station-status-row {
  border-top-color: rgba(107, 62, 31, 0.2);
}
.cm-station-card.is-recent .cm-station-status-row {
  border-top-color: rgba(180, 83, 9, 0.2);
}

.cm-station-status-text { color: #6b7280; }
.cm-station-card.is-active .cm-station-status-text {
  color: #5a3415; font-weight: 500;
}
.cm-station-card.is-recent .cm-station-status-text {
  color: #92400e; font-weight: 500;
}

.cm-station-duration {
  font-weight: 500;
  color: #111827;
  font-size: 12px;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 999px;
}
.cm-station-card.is-active .cm-station-duration {
  background: #6b3e1f; color: #fff;
}
.cm-station-card.is-recent .cm-station-duration {
  background: #f59e0b; color: #fff;
}

.cm-station-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b3e1f;
  flex-shrink: 0;
  animation: cm-pulse 1.5s ease-in-out infinite;
}
@keyframes cm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* ── Quality card discharge states ───────────────────────── */
.cm-metric-card-link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cm-metric-card-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
}

.cm-metric-card.is-active {
  background: #faf5ef;
  border: 1px solid #b08968;
}
.cm-metric-card.is-active:hover {
  box-shadow: 0 4px 12px rgba(107, 62, 31, 0.18);
}
.cm-metric-card.is-active .cm-metric-label { color: #6b3e1f; }
.cm-metric-card.is-active .cm-metric-value { color: #5a3415; }
.cm-metric-card.is-active .cm-metric-sub   { color: #6b3e1f; }

.cm-metric-card.is-recent {
  background: #fffbeb;
  border: 1px solid #fcd34d;
}
.cm-metric-card.is-recent:hover {
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.18);
}
.cm-metric-card.is-recent .cm-metric-label { color: #92400e; }
.cm-metric-card.is-recent .cm-metric-sub   { color: #92400e; }

/* Updated badges */
.cm-badge-quality-recent { background: #fef3c7; color: #92400e; }
.cm-badge-quality-active { background: #6b3e1f; color: #fff; }

/* Pulse dot for active state in badge */
.cm-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: cm-pulse 1.5s ease-in-out infinite;
}

/* Click affordance hint at the card bottom-right */
.cm-station-link-hint {
  font-size: 10px;
  color: #9ca3af;
}
.cm-metric-card.is-active .cm-station-link-hint { color: #8a5a35; }
.cm-metric-card.is-recent .cm-station-link-hint { color: #b45309; }

/* Adjust the existing context layout to space the badge and hint */
.cm-metric-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Smooth scroll inside the modal so the anchor click 
   glides rather than jumps */
.cm-modal .modal-body {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD STAT TILES — UNIFIED TYPOGRAPHY + STATUS-DRIVEN COLOUR
   Used by event-summary-v2.php dashboard stat cards.
   Coheres with the .cm- modal type system but with its own scale.
   ═══════════════════════════════════════════════════════════════ */

.stat-tile {
	position: relative;
	border-radius: 12px;
	padding: 16px;
	height: 100%;
	min-height: 220px;
	overflow: hidden;
	border: 0.5px solid rgba(0, 0, 0, 0.08);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.stat-card-link:hover .stat-tile {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	border-color: rgba(0, 0, 0, 0.12);
}

.stat-tile-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.stat-tile-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}
.stat-tile-label i {
	font-size: 14px;
	width: 16px;
	text-align: center;
}

.stat-tile-value {
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	color: #111827;
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.stat-tile-value.stat-tile-value-sm { font-size: 22px; }

.stat-tile-unit {
	font-size: 13px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.55);
	margin-left: 2px;
}

.stat-tile-sub {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 8px;
	line-height: 1.4;
}

.stat-tile-footer {
	margin-top: auto;
	padding-top: 10px;
	font-size: 10px;
	color: rgba(0, 0, 0, 0.4);
	text-align: right;
}

.stat-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	margin-top: 8px;
}

.water-tile {
	overflow: hidden;
}
 
.water-tile .beach-strip {
	position: absolute;
	background: #fbbf24;
	z-index: 2;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transform-origin: center center;
}
 
/* ── Horizontal-anchored strips (top + bottom) ───────────────── */
.water-tile .beach-strip.strip--top,
.water-tile .beach-strip.strip--bottom {
	left: 70%;
	width: 200%;
	height: 75px;
}
.water-tile .beach-strip.strip--top    { top: 0; }
.water-tile .beach-strip.strip--bottom { bottom: 0; }
 
/* ── Vertical-anchored strips (left + right) ─────────────────── */
.water-tile .beach-strip.strip--left,
.water-tile .beach-strip.strip--right {
	top: 70%;
	width: 75px;
	height: 200%;
}
.water-tile .beach-strip.strip--left  { left: 0; }
.water-tile .beach-strip.strip--right { right: 0; }
 
.water-tile .stat-tile-content {
	position: relative;
	z-index: 3;
}
 
/* "No data yet" state — toned-down value text for the muted card */
.water-tile.is-unfetched .stat-tile-value {
	color: rgba(255, 255, 255, 0.95);
}
.water-tile.is-unfetched .stat-tile-sub {
	color: rgba(255, 255, 255, 0.80);
}
.water-tile.is-unfetched .stat-tile-sub > div {
	margin-top: 3px;
}
 
/* Pulse animation for the active-discharge badge */
.stat-badge.is-pulsing {
	animation: cm-pulse-soft 1.8s ease-in-out infinite;
}
@keyframes cm-pulse-soft {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.7; }
}

.cm-surf-quality-panel {
	border-radius: 12px;
	padding: 18px 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}
.cm-surf-quality-pumping { background: linear-gradient(135deg, #d1fae5, #a7f3d0); border-color: #6ee7b7; }
.cm-surf-quality-good    { background: linear-gradient(135deg, #dbeafe, #bfdbfe); border-color: #93c5fd; }
.cm-surf-quality-fair    { background: linear-gradient(135deg, #fef9c3, #fef08a); border-color: #fde047; }
.cm-surf-quality-poor    { background: linear-gradient(135deg, #fed7aa, #fdba74); border-color: #fb923c; }
.cm-surf-quality-junk    { background: linear-gradient(135deg, #fecaca, #fca5a5); border-color: #f87171; }

.cm-surf-quality-header { margin-bottom: 14px; }
.cm-surf-quality-label-row { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.cm-surf-quality-eyebrow {
	font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.06em; color: #475569;
}
.cm-surf-quality-score {
	font-size: 0.85rem; font-weight: 600;
	padding: 1px 8px; border-radius: 999px;
	background: rgba(255,255,255,0.7); color: #1e293b;
}
.cm-surf-quality-title { font-size: 1.6rem; font-weight: 700; color: #0f172a; line-height: 1.1; }
.cm-surf-quality-detail { font-size: 0.875rem; color: #334155; margin-top: 4px; }
 
.cm-surf-quality-component-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #475569;
	font-weight: 600;
}
 
.cm-surf-quality-component-badge {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	text-wrap: nowrap;
	background: rgba(255,255,255,0.8);
}
 
.cm-surf-quality-component-sentence {
	font-size: 0.85rem;
	color: #334155;
	line-height: 1.35;
}
 
/* Quality colour tokens — keep existing or add if missing */
.cm-quality-good { color: #166534; }
.cm-quality-fair { color: #854d0e; }
.cm-quality-poor { color: #991b1b; }

.stat-tile-surf-quality {
	margin-bottom: 6px;
}
 
.stat-tile-surf-quality-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
 
.stat-tile-surf-quality-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
}
 
.stat-tile-surf-quality-score {
	font-size: 0.8rem;
	font-weight: 600;
	color: #1e293b;
	background: rgba(255,255,255,0.85);
	padding: 1px 8px;
	border-radius: 999px;
}
 
.stat-tile-surf-quality-detail {
	font-size: 0.85rem;
	color: rgba(255,255,255,0.85);
	margin-top: 2px;
}

.cm-quality-stars {
	display: inline-flex;
	align-items: center;
	gap: 6px;          /* space between stars block and score */
	font-size: 0.9rem;
	color: #707070;
	line-height: 1;
}
 
.cm-quality-stars-icons {
	display: inline-flex;
	gap: 2px;          /* space between individual stars */
}
 
.cm-quality-stars-value {
	font-size: 0.8rem;
	font-weight: 600;
	color: #475569;
}
 
/* Empty-star colour on light backgrounds */
.cm-quality-stars .fa-regular.fa-star {
	color: #707070;
}
 
/* Dark-gradient context (water card on dashboard) */
.cm-quality-stars.cm-quality-stars-on-dark {
	color: #fffbed;
}
.cm-quality-stars.cm-quality-stars-on-dark .fa-regular.fa-star {
	color: rgba(255,255,255,0.4);
}
.cm-quality-stars.cm-quality-stars-on-dark .cm-quality-stars-value {
	color: rgba(255,255,255,0.85);
}

/* ───── REGISTRATION ───── */
.reg-tile {
	background: linear-gradient(135deg, #f5acce 0%, #6cb1f8 100%);
}
.reg-tile .stat-tile-value { color: #1a1a2e; }

/* ───── ARA — outcome drives colour ───── */
.ara-tile { background: #e9ecef; }
.ara-tile.ara-proceed {
	background: conic-gradient(from 45deg, #198754 0deg, #198754 60deg, #1a9e62 calc(60deg + 0.1deg), #1a9e62 120deg, #1db573 calc(120deg + 0.1deg), #1db573 180deg, #20c980 calc(180deg + 0.1deg), #20c980 240deg, #4dd68f calc(240deg + 0.1deg), #4dd68f 300deg, #7de3a8 calc(300deg + 0.1deg) 360deg);
	color: #fff;
}
.ara-tile.ara-proceed .stat-tile-label,
.ara-tile.ara-proceed .stat-tile-sub,
.ara-tile.ara-proceed .stat-tile-footer { color: rgba(255,255,255,0.85); }
.ara-tile.ara-proceed .stat-tile-value { color: #fff; }

.ara-tile.ara-caution {
	background: conic-gradient(from 45deg, #ffa000 0deg, #ffa000 60deg, #ffad02 calc(60deg + 0.1deg), #ffad02 120deg, #ffbc20 calc(120deg + 0.1deg), #ffbc20 180deg, #ffcb50 calc(180deg + 0.1deg), #ffcb50 240deg, #ffda7f calc(240deg + 0.1deg), #ffda7f 300deg, #ffe99d calc(300deg + 0.1deg) 360deg);
}
.ara-tile.ara-caution .stat-tile-value { color: #4a2900; }

.ara-tile.ara-stop {
	background: conic-gradient(from 45deg, #8b0000 0deg, #8b0000 60deg, #a00010 calc(60deg + 0.1deg), #a00010 120deg, #b8001a calc(120deg + 0.1deg), #b8001a 180deg, #cc0033 calc(180deg + 0.1deg), #cc0033 240deg, #d4254a calc(240deg + 0.1deg), #d4254a 300deg, #dc4060 calc(300deg + 0.1deg) 360deg);
	color: #fff;
}
.ara-tile.ara-stop .stat-tile-label,
.ara-tile.ara-stop .stat-tile-sub,
.ara-tile.ara-stop .stat-tile-footer { color: rgba(255,255,255,0.85); }
.ara-tile.ara-stop .stat-tile-value { color: #fff; }

/* ───── WEATHER — temperature drives gradient ─────
   Five temperature classes (.wx-cold → .wx-hot) set
   the base "sky" colour. The .wx-tile::after pseudo-
   element handles the cloud layer separately, with
   opacity driven by the --cloud-cover CSS variable. */

/* ───── WEATHER — temperature drives gradient ─────
	  Five temperature classes (.wx-cold → .wx-hot) set
	  the base "sky" colour. The .wx-tile::after pseudo-
	  element handles the cloud layer separately, with
	  opacity driven by the --cloud-cover CSS variable. */
   
   .wx-tile {
	   background: #94a3b8;
	   position: relative;
	   --cloud-cover: 0;
   }
   
   /* Temperature gradients — unchanged */
   .wx-tile.wx-cold { background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 50%, #bfdbfe 100%); }
   .wx-tile.wx-cool { background: linear-gradient(135deg, #5eead4 0%, #a7f3d0 50%, #d1fae5 100%); }
   .wx-tile.wx-mild { background: linear-gradient(135deg, #84cc16 0%, #fde68a 70%, #f59e0b 100%); }
   .wx-tile.wx-warm { background: linear-gradient(135deg, #f59e0b 0%, #fcd34d 50%, #fde68a 100%); }
   .wx-tile.wx-hot  { background: linear-gradient(135deg, #ea580c 0%, #f59e0b 50%, #fde68a 100%); }
   
   .wx-tile::after {
	   content: '';
	   position: absolute;
	   top: calc(-28% - var(--cloud-cover, 0) * 0.5%);
	   left: calc(0% - var(--cloud-cover, 0) * 0.5%);
	   /* Container grows with cloud cover to prevent clipping the bigger background image */
	   width: calc(130% + var(--cloud-cover, 0) * 1%);
	   height: calc(157% + var(--cloud-cover, 0) * 1%);
	   background: url('/template/images/clouds.png') no-repeat;
	   background-size: 100% auto;
	   background-position: center center;
	   pointer-events: none;
	   z-index: 1;
	   opacity: 1;
	   /* Adjusted position formula: stronger pull leftward at low cloud cover 
		  so the cloud arrives sooner */
	   transform: translateX(calc(75% - (var(--cloud-cover, 0) * 0.9%)));
   }
   
   /* Secondary cloud — flipped horizontally, smaller, offset vertically.
	  Fills the gaps the primary cloud leaves at high cloud cover. */
   .wx-tile::before {
	   content: '';
	   position: absolute;
	   top: 10%;
	   left: 0;
	   width: 110%;
	   height: 120%;
	   background: url('/template/images/clouds.png') no-repeat;
	   background-size: 100% auto;
	   background-position: center center;
	   pointer-events: none;
	   z-index: 1;
	   transform: translateX(calc(95% - (var(--cloud-cover, 0) * 1.50%))) scaleX(-1);
   }
   
   .wx-tile.is-unfetched::after,
   .wx-tile.is-unfetched::before {
	   display: none;
   }
   
   .wx-tile .stat-tile-content {
	   position: relative;
	   z-index: 2;
   }

/* ───── TIDE — preserves existing fill animation ───── */
.tide-tile {
	background: #ecfeff;
}
.tide-tile.is-high .stat-tile-value,
.tide-tile.is-high .stat-tile-sub,
.tide-tile.is-high .stat-tile-label,
.tide-tile.is-high .stat-tile-footer { color: #fff; }
.tide-tile.is-high .stat-tile-unit   { color: rgba(255,255,255,0.75); }

/* ───── WATER — striped gradient set inline by PHP ─────
   The actual gradient is set via inline `style="background: ..."`
   from EventWaterCardStyle::getGradient(). This block handles only
   the overlay scrim and text contrast. */
.water-tile {
	background: #94a3b8;  /* fallback if PHP doesn't set inline */
}
.water-tile .stat-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.0) 0%,
		rgba(0, 0, 0, 0.06) 60%,
		rgba(0, 0, 0, 0.10) 100%
	);
	pointer-events: none;
}

/* All text on water tile is white with subtle shadow */
.water-tile .stat-tile-label,
.water-tile .stat-tile-sub,
.water-tile .stat-tile-footer {
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.water-tile .stat-tile-sub strong { color: #fff; }
.water-tile .stat-tile-value { color: #fff; }

.water-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
}
.water-pill {
	background: rgba(255, 255, 255, 0.92);
	color: #111827;
	padding: 6px 11px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* ───── RSVP OPTIONS — neutral white, pills carry status ───── */
.rsvp-tile {
	background: #fff;
}
.rsvp-tile #rsvp-view-panel {
	flex: 1;
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   END WEATHER & WATER MODALS
   ═══════════════════════════════════════════════════════════════ */


/* Calendar Nav */



/* event bar base */
.event-bar {
	border-radius: .25rem 1rem 1rem .25rem;
	font-size: .85rem;
	pointer-events: auto;
	margin: .5rem 0;
	height: 25px;
	overflow: hidden;
	white-space: nowrap; }
	
	.event-bar {
		transition: transform 0.15s ease, box-shadow 0.15s ease;
		cursor: pointer;}
	
	.event-bar:hover {
		transform: translateY(-1px);
		box-shadow: 0 3px 6px rgba(0,0,0,0.15);}
	
	.event-bar:active {
		transform: translateY(1px);
		box-shadow: 0 1px 2px rgba(0,0,0,0.1);}
.event-logo {
	width: 34px!important;
	height: 34px!important;}
.group-avatar{
	width:20px; height:20px; font-size:0.65rem; line-height:1; font-weight:900;}	


.message-bubble:before{
	content: '';
	position: absolute;
	left: 8px;
	bottom: 6px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #cccdce;
	border-left: 0;
	margin-top: 13px;
	margin-left: -20px;}

.message-bubble-me{
	background-color: #2394fc !important;
	color: #fff !important;}


.message-bubble-me:before{
	content: '';
	position: absolute;
	right: 8px;
	bottom: 4px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left-color: #3b78c9;
	border-right: 0;
	margin-top: 13px;
	margin-right: -20px;}
.message-bubble-me a{
	color: #fff;}
	
.message-bubble .reaction-count{
	bottom:-22px!important;
	right:4%!important;}

.message-bubble-me .reaction-count{
	bottom:-22px!important;
	left:4%!important;}
.message-bubble-me .btn-outline-secondary:not(:hover):not(:focus){
	border-color: #fff!important;
	color: #fff!important;}

.message-seen {}

.message-not-seen {
	border-color: #c93b70!important;}
	.message-not-seen:before{
	border-right-color: #c93b70;}

/* ── WhatsApp-style message grouping (see applyMessageGrouping in
   chat.js). .message-grouped = any message in a block that is NOT the
   block's most recent; .message-block-below = the newer partner sharing
   an edge with a grouped message above it. Only the most recent message
   of a block keeps its speech-bubble tail and avatar; grouped edges are
   tightened. The margin overrides need !important because Bootstrap's
   .my-3 (on the bubble) is itself !important. The avatar uses
   visibility (not display) so the bubble's left alignment within a
   block stays identical whether the avatar is shown or not. */
.message-grouped .message-bubble:before,
.message-grouped .message-bubble-me:before {
	display: none;
}
.message-grouped .chat-avatar {
	visibility: hidden;
}
.message-grouped .message-bubble,
.message-grouped .message-bubble-me {
	margin-bottom: 0.3rem !important;
}
.message-block-below .message-bubble,
.message-block-below .message-bubble-me {
	margin-top: 0.3rem !important;
}

/* ── Asymmetric bubble corners within a message block (classes set by
   applyMessageGrouping in chat.js). The two classes compose to give
   each position its shape:
	 block START  (.message-grouped only)      → big rounded-4 tops,
												  both bottoms 0.375rem
	 MIDDLES      (both classes)               → all four 0.375rem
	 block END    (.message-block-below only)  → both tops 0.375rem;
												  bottom: tail-side
												  0.375rem, away side
												  keeps rounded-4
	 SINGLE       (neither class)              → rounded-4 with just the
												  tail corner 0.375rem
   The tail side is bottom-right on own messages (.message-bubble-me),
   bottom-left on everyone else's. !important needed to outrank
   Bootstrap's .rounded-4 (itself !important). */
.comment-holder:not(.message-grouped) .message-bubble {
	border-bottom-left-radius: 0.375rem !important;
}
.comment-holder:not(.message-grouped) .message-bubble-me {
	border-bottom-right-radius: 0.375rem !important;
}
.message-grouped .message-bubble,
.message-grouped .message-bubble-me {
	border-bottom-left-radius: 0.375rem !important;
	border-bottom-right-radius: 0.375rem !important;
}
.message-block-below .message-bubble,
.message-block-below .message-bubble-me {
	border-top-left-radius: 0.375rem !important;
	border-top-right-radius: 0.375rem !important;
}

/* ── Floating scroll-to-bottom button (see ensureScrollBottomBtn in
   chat.js). #chat is wrapped in a position:relative shell by the JS,
   and the button is absolutely pinned to the shell's bottom-right
   corner — entirely OUTSIDE the scrolling content, so it cannot
   interact with scrolling at all. (An earlier sticky-inside-the-
   scroller version failed in Safari, which doesn't reliably honour
   position:sticky inside a column-reverse flex container.) */
#chat-shell {
	position: relative;
}
#scroll-bottom-btn {
	position: absolute;
	right: 1.5rem;
	bottom: 1rem;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: #ffffff;
	color: #54656f;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 10;
}
#scroll-bottom-btn.visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}
.scroll-bottom-badge {
	position: absolute;
	top: -6px;
	right: -4px;
	background: #c93b70;
	color: #fff;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 4px;
}

/* ── WhatsApp-style day dividers + bubble timestamps (see
   applyDayMarkers / formatTimeHHMM in chat.js). The marker div is a
   flex item of the column-reverse #chat scroller like the message rows
   themselves. */
.day-marker-label {
	display: inline-block;
	background: rgba(0, 0, 0, 0.08);
	color: #54656f;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.25rem 0.75rem;
	border-radius: 0.5rem;
}

.chat-time {
	font-size: 0.7rem;
	white-space: nowrap;
}

/* ── Jump-to-message highlight (see flashComment in chat.js): a brief
   pulse on the target bubble after jumping to it, so the eye lands on
   the right message — especially when arriving via a reply preview
   into a freshly-loaded window of old history. */
@keyframes comment-flash-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(201, 59, 112, 0.55); }
	60%  { box-shadow: 0 0 0 10px rgba(201, 59, 112, 0); }
	100% { box-shadow: 0 0 0 0 rgba(201, 59, 112, 0); }
}
.comment-flash {
	animation: comment-flash-pulse 0.8s ease-out 2;
}

/* ── Message search (see ensureChatSearch in chat.js). A circular
   magnifier button floats top-right of the chat shell (mirroring the
   scroll-to-bottom button); tapping it slides the input panel out to
   its left. Both are nudged down via the sibling rules below when the
   pin bar occupies the top of the shell. Results float over the chat
   rather than pushing it down, so opening/closing never reflows the
   scroller. */
#chat-search-toggle {
	position: absolute;
	top: 0.85rem;
	right: 1.5rem;
	width: 45px;
	height: 45px;
	border: none;
	border-radius: 50%;
	background: #ffffff;
	color: #54656f;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	z-index: 31;
}
#chat-search {
	position: absolute;
	/* Toggle is 42px tall; a full-size input-group is ~38px — the +2px
	   centres the two vertically. */
	top: calc(0.75rem + 2px);
	right: calc(1.5rem + 52px);
	width: min(320px, 60vw);
	z-index: 30;
	opacity: 0;
	pointer-events: none;
	transform: translateX(10px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
#chat-search.open {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}
/* Pin bar present (it's an earlier sibling in the shell) — drop the
   search below it. Tune --chat-pin-offset if the bar wraps taller. */
#chat-pin-bar ~ #chat-search-toggle {
	top: calc(0.75rem + var(--chat-pin-offset, 2.9rem));
}
#chat-pin-bar ~ #chat-search {
	top: calc(0.75rem + 2px + var(--chat-pin-offset, 2.9rem));
}

/* On phones there isn't room beside the toggle — a side-by-side panel
   squeezes to ~200px and everything wraps. Drop the panel BELOW the
   toggle instead, spanning the full chat width (the WhatsApp mobile
   pattern), sliding down rather than sideways. */
@media (max-width: 576px) {
	#chat-search {
		left: 0.75rem;
		right: 0.75rem;
		width: auto;
		top: calc(0.75rem + 42px + 0.5rem);
		transform: translateY(-8px);
	}
	#chat-search.open {
		transform: none;
	}
	#chat-pin-bar ~ #chat-search {
		top: calc(0.75rem + 42px + 0.5rem + var(--chat-pin-offset, 2.9rem));
	}
}
#chat-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 320px;
	overflow-y: auto;
	margin-top: 0.25rem;
}
#chat-search-results mark {
	padding: 0 0.1em;
	background: rgba(201, 59, 112, 0.25);
	border-radius: 0.15em;
}

/* ── Pinned-message bar (see renderPinBar in chat.js): a slim strip
   above the chat showing the current pin. Tapping jumps to it and
   cycles to the next when several are pinned. */
#chat-pin-bar {
	display: flex;
	align-items: center;
	/* Inset pill: margins match the chat gutter, width reduced so they
	   don't overflow; breathing room top and bottom. */
	margin-inline: var(--chat-gutter, 0.75rem);
	width: calc(100% - (var(--chat-gutter, 0.75rem) * 2));
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	text-align: left;
	border: none;
	border-left: 4px solid #c93b70;
	border-radius: 0.375rem;
	background: rgba(0, 0, 0, 0.05);
	color: inherit;
	padding-block: 0.5rem;
	/* Content hugs the bar's own edges at every width — the name/snippet
	   at the left, the × at the right. */
	padding-inline: 0.75rem;
	font-size: 0.85rem;
	cursor: pointer;
}
#chat-pin-bar:hover {
	background: rgba(0, 0, 0, 0.09);
}
#chat-pin-bar .fa-thumbtack {
	color: #c93b70;
}
#chat-pin-bar .chat-pin-unpin {
	color: #6c757d;
	padding: 0 0.25rem;
	line-height: 1;
}
#chat-pin-bar .chat-pin-unpin:hover {
	color: #c93b70;
}
#chat-pin-bar .chat-pin-segments {
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
}
#chat-pin-bar .chat-pin-seg {
	width: 3px;
	height: 9px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.18);
}
#chat-pin-bar .chat-pin-seg.active {
	background: #c93b70;
}


.offcanvas-notice{
	padding-left: 0%;
	padding-right: 0%;
}	

.auto-saved{
	background-color: rgba(25, 135, 84, 0.75) !important;
	border-color: #198754 !important;
	opacity: 75%;
	color: #fff !important;}
		
/* On/Off Switch		 */
	.onoffswitch {
		position: relative; width: 90px;
		-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
	.onoffswitch-checkbox {
		display: none;}
	.onoffswitch-label {
		display: block; overflow: hidden; cursor: pointer;
		border: 1px solid #ccc; border-radius: 5px;}
	.onoffswitch-inner {
		width: 200%; margin-left: -100%;
		-moz-transition: margin 0.15s ease-in 0s; -webkit-transition: margin 0.15s ease-in 0s;
		-o-transition: margin 0.15s ease-in 0s; transition: margin 0.15s ease-in 0s;}
	.onoffswitch-inner:before, .onoffswitch-inner:after {
		float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
		font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.onoffswitch-inner:before {
		content: "ON";
		padding-left: 15px;
		padding-top: 1px;
		background-color: #5CB85C; color: #FFFFFF;}
	.onoffswitch-inner:after {
		content: "OFF";
		padding-right: 10px;
		padding-top: 1px;
		background-color: #F8F8F8; color: #666666;
		text-align: right;}
	.onoffswitch-switch {
		width: 35px; margin: 0px;
		background: #FFFFFF;
		border: 1px solid #ccc; border-radius: 5px;
		position: absolute; top: 0; bottom: 0; right: 55px;
		-moz-transition: all 0.15s ease-in 0s; -webkit-transition: all 0.15s ease-in 0s;
		-o-transition: all 0.15s ease-in 0s; transition: all 0.15s ease-in 0s; 
		background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);}
	.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
		margin-left: 0;}
	.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
		right: 0px;}

/* Live/Draft Switch		 */
	.livedraftswitch {
		position: relative; width: 110px;
		-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
	.livedraftswitch-checkbox {
		display: none;}
	.livedraftswitch-label {
		display: block; overflow: hidden; cursor: pointer;
		border: 1px solid #ccc; border-radius: 5px;}
	.livedraftswitch-inner {
		width: 200%; margin-left: -100%;
		-moz-transition: margin 0.15s ease-in 0s; -webkit-transition: margin 0.15s ease-in 0s;
		-o-transition: margin 0.15s ease-in 0s; transition: margin 0.15s ease-in 0s;}
	.livedraftswitch-inner:before, .livedraftswitch-inner:after {
		float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
		font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.livedraftswitch-inner:before {
		content: "LIVE";
		padding-left: 20px;
		padding-top: 1px;
		background-color: #5CB85C; color: #FFFFFF;}
	.livedraftswitch-inner:after {
		content: "DRAFT";
		padding-right: 10px;
		padding-top: 1px;
		background-color: #F8F8F8; color: #666666;
		text-align: right;}
	.livedraftswitch-switch {
		width: 35px; margin: 0px;
		background: #FFFFFF;
		border: 1px solid #ccc; border-radius: 5px;
		position: absolute; top: 0; bottom: 0; right: 75px;
		-moz-transition: all 0.15s ease-in 0s; -webkit-transition: all 0.15s ease-in 0s;
		-o-transition: all 0.15s ease-in 0s; transition: all 0.15s ease-in 0s; 
		background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);}
	.livedraftswitch-checkbox:checked + .livedraftswitch-label .livedraftswitch-inner {
		margin-left: 0;}
	.livedraftswitch-checkbox:checked + .livedraftswitch-label .livedraftswitch-switch {
		right: 0px;}
		
		
/* Yes/No Switch		 */
	.yesnoswitch {
		position: relative; width: 90px;
		-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
	.yesnoswitch-checkbox {
		display: none;}
	.yesnoswitch-label {
		display: block; overflow: hidden; cursor: pointer;
		border: 1px solid #ccc; border-radius: 5px;}
	.yesnoswitch-inner {
		width: 200%; margin-left: -100%;
		-moz-transition: margin 0.15s ease-in 0s; -webkit-transition: margin 0.15s ease-in 0s;
		-o-transition: margin 0.15s ease-in 0s; transition: margin 0.15s ease-in 0s;}
	.yesnoswitch-inner:before, .yesnoswitch-inner:after {
		float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
		font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.yesnoswitch-inner:before {
		content: "YES";
		padding-left: 10px;
		padding-top: 1px;
		background-color: #5CB85C; color: #FFFFFF;}
	.yesnoswitch-inner:after {
		content: "NO";
		padding-right: 15px;
		padding-top: 1px;
		background-color: #F8F8F8; color: #666666;
		text-align: right;}
	.yesnoswitch-switch {
		width: 35px; margin: 0px;
		background: #FFFFFF;
		border: 1px solid #ccc; border-radius: 5px;
		position: absolute; top: 0; bottom: 0; right: 55px;
		-moz-transition: all 0.15s ease-in 0s; -webkit-transition: all 0.15s ease-in 0s;
		-o-transition: all 0.15s ease-in 0s; transition: all 0.15s ease-in 0s; 
		background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);}
	.yesnoswitch-checkbox:checked + .yesnoswitch-label .yesnoswitch-inner {
		margin-left: 0;}
	.yesnoswitch-checkbox:checked + .yesnoswitch-label .yesnoswitch-switch {
		right: 0px;}
	.embed-responsive-scroll{
		position: relative;
		display: block;
		height: 0;
		padding: 0;
		overflow-y: scroll;}
		
	/* Yes/No Circular Switch		 */
	.yesnoswitch-circle {
		position: relative; width: 40px;
		-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
		margin: 0.5rem;}
	.yesnoswitch-circle-checkbox {
		display: none;}
	.yesnoswitch-circle-label {
		display: block; overflow: hidden; cursor: pointer;
		border: 1px solid rgb(0,56,67); border-radius: 20px; height:20px;}
	.yesnoswitch-circle-inner {
		width: 200%; margin-left: -100%;
		-moz-transition: margin 0.15s ease-in 0s; -webkit-transition: margin 0.15s ease-in 0s;
		-o-transition: margin 0.15s ease-in 0s; transition: margin 0.15s ease-in 0s;}
	.yesnoswitch-circle-inner:before, .yesnoswitch-circle-inner:after {
		float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
		font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.yesnoswitch-circle-inner:before {
		content: "";
		padding-left: 10px;
		padding-top: 1px;
		background-color: rgb(0,56,67); color: #FFFFFF;}
	.yesnoswitch-circle-inner:after {
		content: "";
		padding-right: 15px;
		padding-top: 1px;
		background-color: transparent; color: #fff;
		text-align: right;}
	.yesnoswitch-circle-switch {
		width: 20px; margin: 0px;
		background: #FFFFFF;
		border: 1px solid rgb(0,56,67); border-radius: 20px;
		position: absolute; top: 0; bottom: 0; right: 20px;
		-moz-transition: all 0.15s ease-in 0s; -webkit-transition: all 0.15s ease-in 0s;
		-o-transition: all 0.15s ease-in 0s; transition: all 0.15s ease-in 0s; 
		background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);}
	.yesnoswitch-circle-checkbox:checked + .yesnoswitch-circle-label .yesnoswitch-circle-inner {
		margin-left: 0;}
	.yesnoswitch-circle-checkbox:checked + .yesnoswitch-circle-label .yesnoswitch-circle-switch {
		right: 0px;}
	
	
	/* Risk Assessment Dashboard */
	
	/* ── Met Office mandatory warning colours — §2.1.2 NSWWS Style Guide ── */
	  .metoffice-yellow { background-color: #FFE923; color: #000; }
	  .metoffice-amber  { background-color: #FF9900; color: #000; }
	  .metoffice-red    { background-color: #CC0033; color: #fff; }
	  .metoffice-yellow-border { border-left: 4px solid #FFE923 !important; background-color: #fffbe6; }
	  .metoffice-amber-border  { border-left: 4px solid #FF9900 !important; background-color: #fff4e0; }
	  .metoffice-red-border    { border-left: 4px solid #CC0033 !important; background-color: #fce8ec; }
	  .metoffice-yellow-text { color: #7a6800; }
	  .metoffice-amber-text  { color: #7a4200; }
	  .metoffice-red-text    { color: #8b0020; }
	
	  /* ── Tide / daylight animated fill ── */
	  .stat-fill {
		position: absolute; bottom: 0; left: 0; right: 0;
		border-radius: 0 0 .375rem .375rem;
		transition: height 1.2s cubic-bezier(.4,0,.2,1);
		z-index: 0;
	  }
	  .stat-fill ~ * { position: relative; z-index: 1; }
	  .stat-fill-tide     { background: #058af0;background: linear-gradient(-44deg, rgba(5, 138, 240, 1) 35%, rgba(153, 238, 255, 1) 100%);}
	  .stat-fill-daylight { background: linear-gradient(to top, rgba(255,193,7,.2),   rgba(255,193,7,.04)); }
	
	  /* ── Stat card clickable state ── */
	  .stat-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
	  .stat-card-link:hover .card { border-color: #0d6efd; box-shadow: 0 0 0 .15rem rgba(13,110,253,.15); }
	
	  /* ── Tide graph canvases ── */
	  /* Inline card version — compact */
	  #tideCanvas      { width: 100%; height: 120px; display: block; border-radius: .375rem; }
	  /* Modal version — taller now that it has the full modal width to breathe */
	  #tideCanvasModal { width: 100%; height: 240px; display: block; border-radius: .375rem; }
	  
	  /* Hazard row layout */
	  .hazard-row {
		  background: transparent;
		  border-radius: 0.5rem;
		  padding: 0;
	  }
	  
	  .hazard-number {
		  position: absolute;
		  top: -10px;
		  left: -10px;
		  width: 26px;
		  height: 26px;
		  border-radius: 50%;
		  background: #e2e8f0;
		  color: #475569;
		  font-size: 0.8rem;
		  font-weight: 600;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  z-index: 2;
	  }
	  
	  .hazard-delete-btn {
		  position: absolute;
		  top: -10px;
		  right: -10px;
		  width: 26px;
		  height: 26px;
		  border-radius: 50%;
		  background: #fcebeb;
		  color: #791f1f;
		  border: 0.5px solid #f09595;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  font-size: 0.75rem;
		  padding: 0;
		  z-index: 2;
		  transition: background 0.15s;
	  }
	  .hazard-delete-btn:hover { background: #f7c1c1; }
	  
	  /* Field — wraps textarea + grading footer */
	  .hz-field {
		  border: 1px solid #dee2e6;
		  border-left: 3px solid #cbd5e1;
		  border-radius: 0.375rem;
		  overflow: hidden;
		  background: #fff;
		  transition: border-left-color 0.2s;
	  }
	  .hz-field:focus-within {
		  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
		  border-color: #86b7fe;
	  }
	  
	  .hz-text {
		  width: 100%;
		  border: 0;
		  outline: 0;
		  resize: vertical;
		  background: transparent;
		  display: block;
		  /* padding handled by .form-control inside .form-floating */
	  }
	  .hz-text:focus { outline: 0; box-shadow: none; }
	  
	  /* Strip Bootstrap's border + focus ring from the inner control so
		 the .hz-field's border + accent strip is the only chrome shown. */
	  .hz-field .form-floating > .form-control {
		  border: 0;
		  border-radius: 0;
		  background: transparent;
	  }
	  .hz-field .form-floating > .form-control:focus {
		  box-shadow: none;
	  }
	  
	  /* Footer strip — dots + label */
	  .hz-footer {
		  display: flex;
		  align-items: center;
		  gap: 0.6rem;
		  flex-wrap: wrap;
		  padding: 0.4rem 0.75rem;
		  background: #f8f9fa;
		  border-top: 1px solid #e9ecef;
		  font-size: 0.75rem;
	  }
	  
	  .hz-footer-label {
		  color: #6c757d;
		  text-transform: uppercase;
		  letter-spacing: 0.05em;
		  font-size: 0.7rem;
	  }
	  
	  .hz-dots {
		  display: inline-flex;
		  gap: 0.4rem;
	  }
	  
	  .hz-footer-value {
		  margin-left: auto;
		  font-size: 0.8rem;
	  }
	  .hz-footer-empty {
		  color: #adb5bd;
		  font-style: italic;
		  font-weight: 400;
	  }
	  
	  /* Accent per grade */
	  .hz-field.hz-accent-none { border-left-color: #cbd5e1; }
	  .hz-field.hz-accent-1    { border-left-color: #198754; }  /* Low      */
	  .hz-field.hz-accent-2    { border-left-color: #28a745; }  /* Low-Med  */
	  .hz-field.hz-accent-3    { border-left-color: #ffc107; }  /* Medium   */
	  .hz-field.hz-accent-4    { border-left-color: #fd7e14; }  /* High     */
	  .hz-field.hz-accent-5    { border-left-color: #dc3545; }  /* Critical */
	
	  /* ── Activity dot ── */
	  .activity-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: #dee2e6; }
	  .activity-dot.done    { background: #198754; }
	  .activity-dot.current { background: #ffc107; }
	
	  /* ── Leaflet admin map ── */
	  #adminMap { height: 200px; border-radius: .375rem; overflow: hidden; }
	
	  /* ── Kiosk person tap card ── */
	  .kiosk-person {
		cursor: pointer; border: 2px solid transparent;
		transition: border-color .15s, background-color .15s; user-select: none;
	  }
	  .kiosk-person:hover { border-color: #dee2e6; }
	  .kiosk-person.signed-in { border-color: #198754; background-color: #d1e7dd !important; }
	  .kiosk-status { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: #dee2e6; }
	  .kiosk-status.st-in { background: #198754; }
	
	  /* ── ARA risk dots ── */
	  .risk-dot {
		display: inline-block; width: 24px; height: 24px; border-radius: 50%;
		border: 2px solid #dee2e6; cursor: pointer; vertical-align: middle;
		margin-right: 3px; transition: background .1s, border-color .1s;
	  }
	  .risk-dot.rd-active-1 { background: #d1e7dd; border-color: #198754; }
	  .risk-dot.rd-active-2 { background: #fff3cd; border-color: #ffc107; }
	  .risk-dot.rd-active-3 { background: #fff3cd; border-color: #fd7e14; }
	  .risk-dot.rd-active-4 { background: #f8d7da; border-color: #dc3545; }
	  .risk-dot.rd-active-5 { background: #f8d7da; border-color: #842029; }
	
	  /* ── ARA outcome buttons ── */
	  .outcome-btn {
		flex: 1; padding: 14px 8px; border-radius: .375rem;
		border: 2px solid #dee2e6; background: transparent;
		font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
	  }
	  .outcome-btn.proceed        { border-color: #198754; color: #0a3622; }
	  .outcome-btn.proceed.active { background: #d1e7dd; }
	  .outcome-btn.caution        { border-color: #fd7e14; color: #6a2d06; }
	  .outcome-btn.caution.active { background: #fff3cd; }
	  .outcome-btn.stop           { border-color: #dc3545; color: #58151c; }
	  .outcome-btn.stop.active    { background: #f8d7da; }
	
	  /* ── Register tab strip ── */
	  .reg-tabs { display: flex; gap: 3px; }
	  .reg-tab {
		flex: 1; padding: 8px 4px; border: 1px solid #dee2e6; border-radius: .375rem;
		background: #fff; text-align: center; font-size: .8125rem; color: #6c757d;
		cursor: pointer; transition: background .15s;
	  }
	  .reg-tab.active { background: #0d6efd; color: #fff; border-color: #0d6efd; font-weight: 600; }
	
	  /* ── Safety ratio ── */
	  .ratio-connector { font-size: .9rem; color: #6c757d; padding: 0 8px; }
	
	  /* ── Activity template selector ── */
	  .activity-template-card {
		border: 2px solid #dee2e6; border-radius: .5rem; padding: 12px 14px;
		cursor: pointer; transition: border-color .15s, background .15s;
		background: #fff;
	  }
	  .activity-template-card:hover { border-color: #0d6efd; background: #f0f6ff; }
	  .activity-template-card.selected { border-color: #0d6efd; background: #e8f0fe; }
	  .activity-template-card .card-name { font-weight: 600; font-size: .9rem; margin-bottom: 2px; }
	  .activity-template-card .card-desc { font-size: .8rem; color: #6c757d; margin-bottom: 6px; }	
	
	
	
	.video-wrapper video {
	  max-width: 100%;
	  max-height: 80vh;
	}
	
	#donut-chart .chart-legend {
		display: none !important;
	}
	
	.refine{
		color:rgb(0,56,67);
		font-size: .8rem;
		text-align: left;
		background: transparent;
		padding: 0.2rem 0 0.2rem 1rem;
		margin-bottom: 0;}
	.refine label{
		margin-top: 0.1rem;}
	
		
	.scrolling{
		font-size: 80%;
		border: 1px #ccc solid;
		padding: 1rem;
		overflow-y: scroll;
		max-height: 200px;
	}
	
	.member-awards{
		line-height: 10px;}
		
/* 	Footer */

	.footer {
		flex-shrink: 0;
		padding: 20px;
		background: #f9f9f9;}
  
	.embed-responsive-16by9-sm-4{
		padding-bottom: 70%;
		border:1px solid #f1f1f1;}
	p.event-title{
		margin-bottom: 0.4rem;}
	.racecartdata{
		font-size: .8rem;
	}	
	.card-stripe{
		background: #f1f1f1;
		color: #5cb85c;
		border-color: #5cb85c;
	}
	.bg-stripe{
		background: #533AFD;
		border-color: #533AFD;
	}
	.basket-divider{
		border-right: 1px solid #b3b3b3;
		display: flex;
		margin-top: 8px;
		margin-bottom: 8px;
	}
		
	.StripeElement {
	  background-color: white;
	  padding: 8px 12px;
	  border-radius: 4px;
	  border: 1px solid #5cb85c;
	  box-shadow: 0 1px 3px 0 #e6ebf1;
	  -webkit-transition: box-shadow 150ms ease;
	  transition: box-shadow 150ms ease;
	  font-size: 3rem;
	  width: 100%;
	}
	
	.StripeElement--focus {
	  box-shadow: 0 1px 3px 0 #cfd7df;
	}
	
	.StripeElement--invalid {
	  border-color: #cb2706;
	  color: #cb2706;
	}
	
	.StripeElement--webkit-autofill {
	  background-color: #e1f5e1 !important;
	}
	.paymentprocessing{
		display: none;
		height: 100%;
		background: rgba(92, 184, 92, 0.9);
		color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 20;
		align-items: center;
		justify-content: center;}
	.paymentprocessing.visible{
		display: flex;}
	
	.btn-sq{
		border-radius: 0;
		border: none;
	} 
	.badge-danger{
		color: #fff;
		background: #d9534f;}
	.bg-cloud-primary{
		background: #E24A3B !important;}
	.bg-events{
	background: #1FA971 !important;}
	.bg-shop{
	background: #2B80FF !important;}
		
	.alert a{
		color: inherit;
		text-decoration: underline;
		font-weight: bold;}
	#cal{
		position: relative;
		display: block;
		text-align: center;}
	
.inline{
	display: inline;
}

input.btn-warning::-webkit-input-placeholder, input.btn-warning::-moz-placeholder, input.btn-warning:-ms-input-placeholder, input.btn-warning:-moz-placeholder{
	color: #fff;
}
.input-group-addon-dark{
	color: #e9ecef;
	background-color: #495057;}

.code{
	font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
	font-size: 1.2rem;
	line-height: 0.9em;
	margin-top: 0.18rem;
}
.img-circle{
	border-radius: 50%;
	border: 2px solid #fff;}
	
#googlemap{
	padding-bottom: 60%;}
	
.dtpicker-content {
	touch-action: manipulation;}
	
.logo-small{
	width: 40px;}

.table-number-input{width:30%;}

.trim-xs{
	font-size: 0.7rem;}

.input-group-nowrap {
	-ms-flex-wrap: inherit;
	flex-wrap: inherit;}
	
.flex-shrink-1.input-group-text{
	white-space: normal;
}




/* Timeline  */


#cd-timeline {
  position: relative;
  padding: 2em 0;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #f9f9f9;
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block a{
	display: block;
	color: #333;
}
.cd-timeline-block a:hover{
	text-decoration: none;
}

.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}

.cd-timeline-img {
  position: absolute;
  top: 16px;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
}
.cd-timeline-img.cd-picture {
  background: #ffc107;
}

.cd-timeline-content {
  position: relative;
  margin-left: 60px;
  background: #ffc107;
  border-radius: 0.25em;
  padding: 1em;
  box-shadow: 0 3px 0 #ffc107;
}
.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-content h3 {
	margin-top: 0px;
	color: #333;}
.cd-timeline-content h4 {
	color: #D58B71}
	
.cd-timeline-content .cd-date {
  float: left;
  padding: .8em 0;
  opacity: .7;
}
.cd-timeline-content::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 100%;
  height: 0;
  width: 0;
  border: 20px solid transparent;
  border-right: 20px solid #ffc107;
}


.role-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
	height: 100%;
}
.role-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
}
.avatar-circle {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 600;
	flex-shrink: 0;
	overflow: hidden;
	border: 3px solid #dee2e6;
}
.avatar-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.modal-avatar-circle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	font-weight: 600;
	flex-shrink: 0;
	border: 2px solid #dee2e6;
	overflow: hidden;
}
.history-timeline {
	position: relative;
	padding-left: 1.25rem;
}
.history-timeline::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: #dee2e6;
	border-radius: 1px;
}
.timeline-item {
	position: relative;
	padding: 0.4rem 0 0.4rem 1rem;
}
.timeline-item::before {
	content: '';
	position: absolute;
	left: -0.85rem;
	top: 0.85rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6c757d;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px #6c757d;
}
.role-col {
	animation: fadeUp 0.35s ease both;
}

.binbag-icon, .person-icon{
	width: 100%;}

.binbag-icon, .ig-binbag-icon{
	fill: #9DD3A7;}
.person-icon, .ig-person-icon{
	fill: #009d91;}
	
.ig-binbag-icon{
	width: 17px;
	height: 25px;}
.ig-binbag-text{
	color: #9DD3A7;
	font-size: 30px;}

.ig-person-icon{
	width: 8px;
	height: 25px;}
.ig-person-text{
	font-family: "FatFrank Heavy",Helvetica,Arial,sans-serif;
	color: #009d91;
	font-size: 30px;}

.ig-binbags-total{
	position: relative;
	width: 100%;}
	
.ig-totalcount{
	font-family: "FatFrank Heavy",Helvetica,Arial,sans-serif;
	position: absolute;
	color: #fff;
	font-size: 50px;
	text-align: center;
	width: 100%;
	line-height: 1em;
	padding-top: 80%;}
	.ig-totalcount small{
		font-size: 13px;
		line-height: 18px;
		display: block;
		padding: 10% 20% 0 20%;}

ig-volunteers{
	position: relative;
}		


.nav-link .spinner, .nav-item .spinner, .btn .spinner {
	display: none;
}

/* When loading, hide text and show spinner */
.nav-link.loading .btn-text, .nav-item.loading .btn-text, .btn.loading .btn-text {
	display: none;
	opacity: 0;
}
.nav-link.loading .spinner, .nav-item.loading .spinner, .btn.loading .spinner {
	display: inline-block;
}

.group-spacer {
}

#pills-tab.nav-pills .nav-link {
	--bs-nav-pills-link-bg: #e0e0e0;          /* background */
	color: #333!important;
	padding: .5rem;}

/* Change the active pill colour */
#pills-tab.nav-pills .nav-link.active,
#pills-tab.nav-pills .show > .nav-link {
	--bs-nav-pills-link-active-bg: #6c757d;   /* background */
	color: #fff!important;  /* text colour */
}

a.member-item{
	color: #000;
}
a.member-item:hover{
	border-color: #666;
	text-decoration: none;}
a.member-item:active{
	color: #fff;
	background: #666;}

/* BootStrap Extenders */
.start-safari{
	left: 70%!important;}
.start-chrome{
	left: 36%!important;}
.start-android{
	right: 4%!important;}
.end-5{
	right: 4%!important;}

#preview-holder .preview-image{
	max-width: 50%;}

/* DAY VIEW (inside modal) */
	.dayview{
	  display:grid;
	  grid-template-columns: 34px 1fr; /* time labels | track */
	  gap: .75rem;
	}
	
	/* left column: time labels */
	.dayview-times{
	  display:grid;
	  grid-template-rows: repeat(24, var(--hour-h, 56px));
	}
	.dayview-times .time{
	  display:flex;
	  align-items:center;      /* vertical middle */
	  justify-content:flex-end;/* keep it right-aligned */
	  font-size:.75rem;
	  color:rgba(0,0,0,.55);
	  padding-right:.25rem;
	  line-height:1;
	}
	
	/* right side: a single continuous track */
	.dayview-track{
	  position: relative;
	  height: calc((24 * var(--hour-h, 56px)) + (var(--hour-h, 56px) / 2)); /* +30 mins */
	  border-left: 1px solid rgba(0,0,0,.08);
	}
	
	/* hour lines layer */
	.dayview-hours{
	  position:absolute;
	  inset:0;
	  display:grid;
	  grid-template-rows: repeat(24, var(--hour-h, 56px));
	  pointer-events:none;
	  padding-bottom: calc(var(--hour-h, 56px) / 2); /* matches the extra 30 mins */
	  box-sizing: border-box;
	}
	.dayview-hours .hour{
	  position:relative;
	  border-top:0;
	}
	
	.dayview-hours .hour::before{
	  content:"";
	  position:absolute;
	  left:0;
	  right:0;
	  top:50%;
	  border-top:1px solid rgba(0,0,0,.08);
	}
	
	/* events layer */
	.dayview-events{
	  position:absolute;
	  inset:0;
	}
	
	/* event block: minute-accurate positioning */
	.day-event{
	  position:absolute;
	  left: 0;
	  right: 0;
	  top: calc(((var(--start) + 30) * 1px) * var(--px-per-min, 0.9333));
	  height: calc((var(--dur) * 1px) * var(--px-per-min, 0.9333));
	  border-radius: .5rem;
	  padding: .4rem .5rem;
	  overflow:hidden;
	  text-decoration:none;
	  pointer-events:auto;
	  box-shadow: 0 1px 3px rgba(0,0,0,.08);
	}
	
	/* horizontal stacking (lanes) */
	.day-event{
	  width: calc((100% - .5rem) / var(--lanes));
	  left: calc((100% / var(--lanes)) * var(--lane));
	  margin-left: .25rem;
	  margin-right: .25rem;
	}
	
	/* event text */
	.day-event .title{
	  font-weight: 600;
	  font-size: .85rem;
	  white-space: nowrap;
	  overflow:hidden;
	  text-overflow: ellipsis;
	}
	.day-event .meta{
	  font-size: .75rem;
	  opacity: .8;
	}
	
	
	/* set pixels-per-minute based on hour height:
	   if hour height is 56px: 56/60 = 0.9333px per min */
	.dayview{
	  --hour-h: 56px;
	  --px-per-min: 0.9333;
	}
	
	.day-event.continues-out{
	  border-bottom-left-radius: 0;
	  border-bottom-right-radius: 0;
	}
	.day-event.continues-in{
	  border-top-left-radius: 0;
	  border-top-right-radius: 0;
	}
	
	/* optional subtle indicators */
	.day-event.continues-out::after{
	  content:"";
	  position:absolute;
	  left:.5rem; right:.5rem; bottom:.2rem;
	  border-top:1px dashed rgba(255,255,255,.5);
	  opacity:.7;
	}
	.day-event.continues-in::before{
	  content:"";
	  position:absolute;
	  left:.5rem; right:.5rem; top:.2rem;
	  border-top:1px dashed rgba(255,255,255,.5);
	  opacity:.7;
	}
	.dayview-wrap{
	  display:flex;
	  flex-direction:column;
	  gap:.5rem;
	}
	
	/* all-day bar */
	.allday{
	  display:grid;
	  grid-template-columns: 34px 1fr; /* same as dayview */
	  gap:.75rem;
	  align-items:start;
	}
	
	.allday-label{
	  font-size:.75rem;
	  color: rgba(0,0,0,.55);
	  text-align:right;
	  padding-right:.25rem;
	  padding-top:.25rem;
	}
	
	.allday-lane{
	  display:flex;
	  flex-wrap:wrap;     /* if many all-day events, wrap to next line */
	  gap:.5rem;
	  padding:.25rem;
	  border-left: 1px solid rgba(0,0,0,.08);
	}
	
	.allday-event{
	  display:inline-block;
	  padding:.25rem .5rem;
	  border-radius:.5rem;
	  text-decoration:none;
	  font-size:.85rem;
	  white-space:nowrap;
	  max-width:100%;
	  overflow:hidden;
	  text-overflow:ellipsis;
	}

	:root{
		--hour-h: 60px;              /* height per hour row */
		--time-w: 50px;              /* left time column width */
		--day-min: 190px;            /* min width per day (for horizontal scroll) */
		--header-h: 48px;            /* sticky header height */
		--allday-h: 120px;           /* all-day strip height */
		--minute: calc(var(--hour-h) / 60);
	  }
	
	  .weekview-wrapper{
		overflow: hidden;
		border: 1px solid rgba(0,0,0,.06);
	  }
	  
	  /* Make the *entire* week view have one consistent minimum width */
	  .weekview-head,
	  .weekview-allday,
	  .weekview-body{
		min-width: calc(var(--time-w) + (var(--day-min) * 7));
	  }
	
	  /* ==================== HEADERS (sticky) ==================== */
	  .weekview-head{
		display:grid;
		grid-template-columns: var(--time-w) repeat(7, minmax(var(--day-min), 1fr));
		height: var(--header-h);
		position: sticky;
		top: 0;
		z-index: 30;
	  }
	
	  .weekview-corner{
		position: sticky;
		left: 0;
		z-index: 40;
	  }
	
	  .weekview-dayhead{
		display:flex;
		align-items:center;
		justify-content:center;
		text-align:center;
		background:#f8f9fa;
		line-height: 1.05;
		margin: 5px 2.5px 5px 2.5px;
	  }
	
	  /* ==================== ALL-DAY STRIP (sticky under headers) ==================== */
	  .weekview-allday{
		display:grid;
		grid-template-columns: var(--time-w) 1fr;
		height: var(--allday-h);
		position: sticky;
		top: var(--header-h);
		z-index: 25;
	  }
	
	  .weekview-corner--allday{
		display:flex;
		align-items:center;
		justify-content:center;
	  }
	
	  .weekview-corner--allday .label{
		font-size: .7rem;
		color:#6c757d;
		opacity:.9;
	  }
	
	  .weekview-allday-gridwrap{
		position: relative;
		min-width: calc(var(--day-min) * 7);
	  }
	
	  .weekview-allday-grid{
		height: 100%;
		background:
		  repeating-linear-gradient(
			to right,
			rgba(0,0,0,.06) 0,
			rgba(0,0,0,.06) 1px,
			transparent 1px,
			transparent calc(100% / 7)
		  );
	  }
	
	  .weekview-allday-overlay{
		position:absolute;
		inset: 8px 8px 10px 8px;
		display:grid;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(3, 1fr); /* allow stacking */
		gap: 6px;
		pointer-events:none;
	  }
	
	  .allday-bar{
		pointer-events:auto;
		display:flex;
		align-items:center;
		padding: .35rem .5rem;
		border-radius: 10px;
		text-decoration:none;
		box-shadow: 0 1px 0 rgba(0,0,0,.08);
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		font-size: .78rem;
	  }
	  .allday-bar{ grid-column: var(--col) / span var(--span); grid-row: var(--row); }
	
	  /* ==================== BODY SCROLL AREA ==================== */
	  .weekview-body{
		display:grid;
		grid-template-columns: var(--time-w) 1fr;
		background-color: #fff;
	  }
	
	  /* sticky times col */
	  .weekview-times{
		display:grid;
		grid-template-rows: repeat(24, var(--hour-h));
		background:#fff;
		border-right: 1px solid rgba(0,0,0,.08);
		position: sticky;
		left: 0;
		z-index: 20;
	  }
	
	  /* label aligned to vertical middle of hour */
	  .weekview-times .time{
		font-size: .75rem;
		padding-left: .5rem;
		color:#6c757d;
		opacity:.85;
	  }
	
	  .weekview-gridwrap{
		position: relative;
		min-width: calc(var(--day-min) * 7);
	  }
	
	  /* base grid lines */
	  .weekview-grid{
		height: calc(var(--hour-h) * 24);
		background:
		  /* vertical day dividers */
		  repeating-linear-gradient(
			to right,
			rgba(0,0,0,.06) 0,
			rgba(0,0,0,.06) 1px,
			transparent 1px,
			transparent calc(100% / 7)
		  ),
		  /* hour lines */
		  repeating-linear-gradient(
			to bottom,
			rgba(0,0,0,.08) 0,
			rgba(0,0,0,.08) 1px,
			transparent 1px,
			transparent var(--hour-h)
		  );
	  }
	
	  /* overlay grid (minutes) */
	  .weekview-overlay{
		position:absolute;
		inset: 0;
		display:grid;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(1440, var(--minute));
		pointer-events:none; /* allow scroll */
	  }
	
	  .week-event{
		pointer-events:auto;
		border-radius: 10px;
		padding: .4rem .5rem;
		overflow:hidden;
		text-decoration:none;
		box-shadow: 0 1px 0 rgba(0,0,0,.08);
		font-size: .75rem;
		line-height: 1.15;
		display:block;
		margin: 3px;
		position: relative;
		box-sizing: border-box;
		--lanes: 1;
		--lane: 0;
		--lane-gap: 0px;
		width: calc((100% - (var(--lane-gap) * (var(--lanes) - 1))) / var(--lanes));
		left: calc((100% / var(--lanes)) * var(--lane));
		margin-left: calc(var(--lane-gap) * var(--lane));
		grid-column: var(--day);
		grid-row: calc(var(--start) + 1) / span var(--dur);
	  }
	
	  .week-event .title{
		font-weight:700;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	  }
	
	  .week-event .meta{
		opacity:.75;
		margin-top:.15rem;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	  }

	  @keyframes ping {
		  0% { transform: scale(1); opacity: 0.5; }
		  100% { transform: scale(1.8); opacity: 0; }
	  }
	  
	  @keyframes fadeUp {
		  from { opacity: 0; transform: translateY(12px); }
		  to   { opacity: 1; transform: translateY(0); }
	  }


@media (max-width: 450px) {
	.table-sm{
		font-size: 0.7rem;
	}
}

@media (max-width: 575px) {

	#month-event-overlay-mobile {
		position: relative;
		padding-left: 4px !important;
	}

	.mobile-day-header {
		display: grid;
		grid-template-columns: 62px 1fr;
		gap: 0 10px;
		margin-bottom: 20px;
		align-items: start;
		position: relative;
	}

	/* Vertical line */
	.mobile-day-header::before {
		content: '';
		position: absolute;
		left: 57px;
		top: 0;
		bottom: -20px;
		width: 1px;
		background-color: #dee2e6;
		z-index: 0;
	}

	/* Dot */
	.mobile-day-header::after {
		content: '';
		position: absolute;
		left: 52px;
		top: 17px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #dee2e6;
		border: 2px solid white;
	}
	
	#today {
		scroll-margin-top: 140px;
	}

	.mobile-day-header.today::after {
		background-color: #0d6efd;
	}

	.mobile-day-header:last-child::before {
		bottom: 0;
	}

	.mobile-day-header > p {
		grid-column: 1;
		margin: 0;
		padding-top: 10px;
		padding-right: 14px;
		text-align: center;
		border: none !important;
		opacity: 1;
	}

	.mobile-day-header > p .badge {
		position: static !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: transparent !important;
		color: #888 !important;
		font-weight: 300;
		font-size: 0.6rem;
		line-height: 1.2;
		padding: 0;
		white-space: nowrap;
		width: 100%;
	}

	.mobile-day-header > .event-bar {
		grid-column: 2;
		margin-bottom: 3px;
		height: 28px;
	}
}

@media (min-width: 576px) {
	html{font-size: 13px;}
	.yesnoswitch-inner:before, .yesnoswitch-inner:after, .livedraftswitch-inner:before, .livedraftswitch-inner:after, .onoffswitch-inner:before, .onoffswitch-inner:after {
	height: 29px; line-height: 29px;}
	#preview-holder .preview-image{
	max-width: 25%;}
	
	/* Events Calendar */
	
	.calendar-wrapper {
		background: #e6e9eb;
		position: relative;
	}
	
	/* day grid – base (mobile = 1 column) */
	.month-grid {
		display: grid;
		grid-template-columns: 1fr;          /* one long column on mobile */
		grid-auto-rows: 150px;               /* each “slot” 150px high */
		gap: 2px;
		font-weight: 600;
	}
	
	.day-header {
		background: #f8f9fa;
		text-align: center;
		font-weight: 600;
		padding: .5rem;
		border: 1px solid #e6e9eb;
	}
	
	.month-grid,
	.month-grid .day-cell {
		border: 1px solid #e6e9eb;
		min-height: 150px;
		padding: .5rem;
	}
	
	.day-cell {
		background: #fff;
	}
	
	.day-number {
		font-weight: 700;
	}
	
	.day-blank {
		background: #f1f1f1 !important;
	}
	
	/* overlay base */
	.event-overlay {
		position: absolute;
		inset: 0;
		display: grid;
		gap: 2px;
		pointer-events: none;
		padding: 0.5rem;
	}
	
	/* spans (desktop) */
	.col-span-2 { grid-column-end: span 2 !important; }
	.col-span-3 { grid-column-end: span 3 !important; }
	.col-span-4 { grid-column-end: span 4 !important; }
	.col-span-5 { grid-column-end: span 5 !important; }
	.col-span-6 { grid-column-end: span 6 !important; }
	.col-span-7 { grid-column-end: span 7 !important; }
	
	.month-grid {
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: 38px repeat(5, 150px); /* header + 5 weeks */
	}
	
	.event-overlay {
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: 42px repeat(5, 150px);
	}
	
	/* Week 1 (grid-row: 2 because row 1 is the weekday header) */
	.w1-d1-start { grid-column: 1; grid-row: 2; }
	.w1-d2-start { grid-column: 2; grid-row: 2; }
	.w1-d3-start { grid-column: 3; grid-row: 2; }
	.w1-d4-start { grid-column: 4; grid-row: 2; }
	.w1-d5-start { grid-column: 5; grid-row: 2; }
	.w1-d6-start { grid-column: 6; grid-row: 2; }
	.w1-d7-start { grid-column: 7; grid-row: 2; }
	
	/* Week 2 (row 3), etc. */
	.w2-d1-start { grid-column: 1; grid-row: 3; }
	.w2-d2-start { grid-column: 2; grid-row: 3; }
	.w2-d3-start { grid-column: 3; grid-row: 3; }
	.w2-d4-start { grid-column: 4; grid-row: 3; }
	.w2-d5-start { grid-column: 5; grid-row: 3; }
	.w2-d6-start { grid-column: 6; grid-row: 3; }
	.w2-d7-start { grid-column: 7; grid-row: 3; }
	
	/* Week 3 (row 3), etc. */
	.w3-d1-start { grid-column: 1; grid-row: 4; }
	.w3-d2-start { grid-column: 2; grid-row: 4; }
	.w3-d3-start { grid-column: 3; grid-row: 4; }
	.w3-d4-start { grid-column: 4; grid-row: 4; }
	.w3-d5-start { grid-column: 5; grid-row: 4; }
	.w3-d6-start { grid-column: 6; grid-row: 4; }
	.w3-d7-start { grid-column: 7; grid-row: 4; }
	
	/* Week 4 (row 3), etc. */
	.w4-d1-start { grid-column: 1; grid-row: 5; }
	.w4-d2-start { grid-column: 2; grid-row: 5; }
	.w4-d3-start { grid-column: 3; grid-row: 5; }
	.w4-d4-start { grid-column: 4; grid-row: 5; }
	.w4-d5-start { grid-column: 5; grid-row: 5; }
	.w4-d6-start { grid-column: 6; grid-row: 5; }
	.w4-d7-start { grid-column: 7; grid-row: 5; }

	/* ... */
	.w5-d1-start { grid-column: 1; grid-row: 6; }
	.w5-d2-start { grid-column: 2; grid-row: 6; }
	.w5-d3-start { grid-column: 3; grid-row: 6; }
	.w5-d4-start { grid-column: 4; grid-row: 6; }
	.w5-d5-start { grid-column: 5; grid-row: 6; }
	.w5-d6-start { grid-column: 6; grid-row: 6; }
	.w5-d7-start { grid-column: 7; grid-row: 6; }

	/* ... */
	.w6-d1-start { grid-column: 1; grid-row: 7; }
	.w6-d2-start { grid-column: 2; grid-row: 7; }
	.w6-d3-start { grid-column: 3; grid-row: 7; }
	.w6-d4-start { grid-column: 4; grid-row: 7; }
	.w6-d5-start { grid-column: 5; grid-row: 7; }
	.w6-d6-start { grid-column: 6; grid-row: 7; }
	.w6-d7-start { grid-column: 7; grid-row: 7; }
	
	
	.event-bar {
		margin: .1rem .5rem;
		margin-top: calc(var(--ev-i, 0) * 1.65rem);
		height: 21px;
		z-index: 1;}
	.event-details{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.event-logo {
	width: 14px!important;
	height: 14px!important;}
	
	.group-avatar{
	width:15px; height:15px; font-size:0.55rem;}
}

@media (max-width:500px) {
	.role-card .ratio-16x9 {
		--bs-aspect-ratio: 90%; 
	}
}

@media (max-width:767px) {
	.weekview-xscroll{
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	  }
}

@media (min-width: 768px) {
	html{font-size: 14px;}
	.container-lg{
		padding-left: 30px;
		padding-right: 30px;}
	.table-number-input{width:inherit;}
  #cd-timeline::before {
	left: 50%;
	margin-left: -2px;}
	.fullwidth-hero{height: 400px;}

  .cd-timeline-img {
	top:30px;
	width: 30px;
	height: 30px;
	left: 50%;
	margin-left: -15px;
	/* Force Hardware Acceleration in WebKit */
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	#pills-tab.nav-pills .nav-link {
	padding: .8rem;}
  }


  .cd-timeline-content {
	margin-left: 0;
	padding: 1.6em;
	width: 45%;
  }
  .cd-timeline-content::before {
	top: 24px;
	left: 100%;
	border-color: transparent;
	border-left-color: #ffc107;
  }
  .cd-timeline-content .cd-read-more {
	float: left;
  }
  .cd-timeline-content .cd-date {
	position: absolute;
	width: 100%;
	left: 122%;
	top: 22px;
	font-size: 16px;
	font-weight: bold;
	color: #aaa;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
	float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
	top: 24px;
	left: auto;
	right: 100%;
	border-color: transparent;
	border-right-color: #ffc107;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
	float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
	left: auto;
	right: 122%;
	text-align: right;
  }
  .yesnoswitch-inner:before, .yesnoswitch-inner:after, .livedraftswitch-inner:before, .livedraftswitch-inner:after, .onoffswitch-inner:before, .onoffswitch-inner:after {
	height: 32px; line-height: 32px;}
	
	.offcanvas-notice{
		padding-left: 12%;
		padding-right: 12%;
	}
	
	:root{ --day-min: 1px; }
	.weekview-allday-gridwrap,
	.weekview-gridwrap{ min-width: 0; }
	
}


@media (min-width: 992px) {
	html{font-size: 15px;}
	.btn-sq{
		padding-top: 2rem;
		padding-bottom: 2rem;}
	.jumbotron-start-line .logo{
		max-width: 6rem;}
	.fullwidth-hero{height: 500px;}
	.yesnoswitch-inner:before, .yesnoswitch-inner:after, .livedraftswitch-inner:before, .livedraftswitch-inner:after, .onoffswitch-inner:before, .onoffswitch-inner:after {
	height: 34px; line-height: 34px;}
	
	#nav-wrap{
		flex-wrap: wrap;}
	.offcanvas-notice{
		padding-left: 25%;
		padding-right: 25%;
	}
}

@media (max-width: 1400px) {
	#primary-nav, #secondary-nav {
		transition: opacity 0.2s ease-in-out;
	}
	#primary-nav.sticky-top, #secondary-nav.sticky-top {
		opacity: 1;
	}
	#primary-nav.nav-hidden, #secondary-nav.nav-hidden {
		opacity: 0;
	}
}

@media (min-width: 1400px) {
	html{font-size: 15px;}
	.fullwidth-hero{height: 550px;}
	#main-content, .main-footer{
		margin-right:19%;}
	#main-content #chat-edit{
			margin-right:19%;}
	#navigationFullMenu{
		position: fixed;
		right:0!important;
		top:0!important;
		height: 100vh;
		width:19vw;
		border-left:0;}
}

@media (min-width: 1705px) {
	#main-content, .main-footer{
		margin-right:15%;}
	#main-content #chat-edit{
			margin-right:15%;}
	#navigationFullMenu{
		position: fixed;
		right:0!important;
		top:0!important;
		height: 100vh;
		width:15vw;
		border-left:0;}
}

/* ── Chat-page document lock. The page's natural flow (chrome + a chat
   sized to exactly fill down to the composer + trailing elements like
   .footerpadding) sums slightly taller than the viewport, creating a
   document scrollbar. The chat scrolls internally so it's invisible —
   until a scroll gesture lands OUTSIDE the chat scroller (header, the
   floating search/down buttons) and scrolls the document instead,
   dragging the header off-screen. On pages with a chat, the document
   must not scroll at all: #chat is the only scroller. CSS-only via
   :has() so no JS is involved. */
html:has(#chat-shell),
body:has(#chat-shell) {
	overflow: hidden;
	height: 100%;
	overscroll-behavior: none;
}

/* Search toggle/panel must clear the UNREAD BANNER as well as the pin
   bar — the banner pushes the pin bar down by its own height, which
   was landing the search button exactly on top of the pins. Rules for
   banner-only and banner+pin (the banner renders before the pin bar in
   the shell, so the combined ~ chain matches); when the banner
   disappears — cleared, or the live counter reaches zero — these stop
   matching and everything rises back automatically. Tune
   --chat-banner-offset if the banner styling changes its height. */
#unread-banner ~ #chat-search-toggle {
	top: calc(0.75rem + var(--chat-banner-offset, 3.2rem));
}
#unread-banner ~ #chat-search {
	top: calc(0.75rem + 2px + var(--chat-banner-offset, 3.2rem));
}
#unread-banner ~ #chat-pin-bar ~ #chat-search-toggle {
	top: calc(0.75rem + var(--chat-banner-offset, 3.2rem) + var(--chat-pin-offset, 2.9rem));
}
#unread-banner ~ #chat-pin-bar ~ #chat-search {
	top: calc(0.75rem + 2px + var(--chat-banner-offset, 3.2rem) + var(--chat-pin-offset, 2.9rem));
}
@media (max-width: 576px) {
	#unread-banner ~ #chat-search {
		top: calc(0.75rem + 42px + 0.5rem + var(--chat-banner-offset, 3.2rem));
	}
	#unread-banner ~ #chat-pin-bar ~ #chat-search {
		top: calc(0.75rem + 42px + 0.5rem + var(--chat-banner-offset, 3.2rem) + var(--chat-pin-offset, 2.9rem));
	}
}

/* Reaction picker (see renderReactionMenu in reaction.js): a fixed
   7-per-row grid so the 14-emoji set forms two tidy rows instead of
   one long strip or a ragged wrap. Adding reactions later just grows
   more rows. */
.reaction-picker-grid {
	display: grid;
	grid-template-columns: repeat(7, auto);
	justify-items: center;
}

/* System markers in the chat ("X joined the group") — centred pill,
   visually akin to the day markers but distinguishable. */
.system-marker-label {
	display: inline-block;
	background: rgba(0, 0, 0, 0.07);
	color: #5f6b76;
	font-size: 0.78rem;
	padding: 0.2rem 0.7rem;
	border-radius: 1rem;
}