/* GymBuddy custom styles, layered on top of Pico.css. */

:root {
  --gb-warn-bg: #fff3cd;
  --gb-warn-border: #ffe69c;
  --gb-warn-text: #664d03;
}

.brand { text-decoration: none; }

.footer { margin-top: 3rem; padding-block: 1.5rem; opacity: 0.8; }

/* Flash messages */
.flash {
  padding: 0.6rem 0.9rem;
  border-radius: var(--pico-border-radius, 0.4rem);
  margin-block: 0.4rem;
  font-size: 0.95rem;
}
.flash-info  { background: #cfe2ff; color: #084298; }
.flash-warn  { background: var(--gb-warn-bg); color: var(--gb-warn-text); }
.flash-error { background: #f8d7da; color: #842029; }
.flash-success { background: #d1e7dd; color: #0f5132; }

/* Prominent safety warning box */
.safety-box {
  background: var(--gb-warn-bg);
  border: 2px solid var(--gb-warn-border);
  color: var(--gb-warn-text);
  border-radius: 0.6rem;
  padding: 1.2rem 1.4rem;
  margin-block: 1rem;
}
.safety-box h2 { margin-top: 0; }

/* Availability grid */
.avail-grid { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.avail-grid th, .avail-grid td { border: 1px solid var(--pico-muted-border-color, #ccc); text-align: center; padding: 0.25rem; }
.avail-grid input { margin: 0; }
.avail-grid caption { text-align: left; font-weight: bold; margin-bottom: 0.4rem; }

/* Profile photo cropper */
.gb-crop-view { position: relative; width: 260px; max-width: 100%; aspect-ratio: 1 / 1;
  overflow: hidden; border-radius: 50%; background: #eee; touch-action: none;
  cursor: grab; margin: 0.5rem 0; }
.gb-crop-view.grabbing { cursor: grabbing; }
#gb-crop-img { position: absolute; top: 0; left: 0; max-width: none;
  user-select: none; -webkit-user-drag: none; }

/* Bio (about me) — preserve line breaks; clamp long bios with a no-JS toggle */
.bio { white-space: pre-line; margin: 0.4rem 0; }
.bio-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.bio-toggle:checked + .bio-clamp { -webkit-line-clamp: unset; line-clamp: unset; }
.bio-more { display: inline-block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--pico-primary, #3a7bd5); cursor: pointer; }
.bio-more::after { content: 'Show more'; }
.bio-toggle:checked ~ .bio-more::after { content: 'Show less'; }

/* Match cards */
.match-card { border: 1px solid var(--pico-muted-border-color, #ccc); border-radius: 0.6rem; padding: 1rem; margin-bottom: 1rem; }
.match-card h3 { margin: 0 0 0.3rem; }
.match-meta { font-size: 0.85rem; opacity: 0.85; }
.badge { display: inline-block; background: var(--pico-primary, #3a7bd5); color: #fff; border-radius: 1rem; padding: 0.1rem 0.6rem; font-size: 0.75rem; margin-right: 0.3rem; }

/* Maps */
.gb-map { height: 300px; border-radius: 0.6rem; margin-top: 0.6rem; z-index: 0; }
#view-map.gb-map { height: 220px; }
/* Keep Pico's link/button styles from breaking Leaflet's zoom controls. */
.leaflet-bar a, .leaflet-bar a:hover {
  box-sizing: border-box; width: 30px; height: 30px; line-height: 30px;
  padding: 0; display: block; text-align: center; font: 700 1.25rem/30px sans-serif;
  text-decoration: none; color: #333; background: #fff;
}
.leaflet-control a { box-shadow: none; }

/* Chat */
.messages-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 700px) { .messages-layout { grid-template-columns: 1fr; } }
.convo-list { list-style: none; padding: 0; }
.convo-list li { border-bottom: 1px solid var(--pico-muted-border-color, #eee); }
.convo-list a { display: block; padding: 0.7rem 0.4rem; text-decoration: none; }
.chat-window { display: flex; flex-direction: column; height: 65vh; min-height: 420px; border: 1px solid var(--pico-muted-border-color, #ccc); border-radius: 0.6rem; }
.chat-messages { flex: 1; overflow-y: auto; padding: 0.8rem; }
.chat-msg { max-width: 75%; margin-bottom: 0.5rem; padding: 0.4rem 0.7rem; border-radius: 0.8rem; white-space: pre-line; overflow-wrap: anywhere; }
.chat-msg.mine { background: var(--pico-primary, #3a7bd5); color: #fff; margin-left: auto; }
.chat-msg.theirs { background: #e9ecef; color: #212529; margin-right: auto; }
.chat-msg .meta { display: block; font-size: 0.7rem; opacity: 0.7; margin-top: 0.15rem; }
.chat-form { display: flex; gap: 0.5rem; padding: 0.6rem; border-top: 1px solid var(--pico-muted-border-color, #ccc); align-items: flex-end; overflow: hidden; }
/* Textarea is user-resizable in both directions; capped so it can't push the
   Send button off-screen. The button flexes to fill whatever space is left, so
   narrowing the textarea widens the button (and vice versa). */
.chat-form textarea { flex: 0 0 auto; width: 70%; max-width: calc(100% - 5rem); min-width: 3rem; margin: 0; box-sizing: border-box; resize: both; min-height: 2.6rem; max-height: 16rem; }
.chat-form button { flex: 1 1 auto; min-width: 4rem; margin: 0; white-space: nowrap; }