/* ==========================================================================
   DiveCohorts — theme layer on top of Bootstrap 5.
   Palette: deep teal + signal-buoy coral, cool sea-foam neutrals.
   Avoids the generic Bootstrap blue/purple defaults on purpose.
   ========================================================================== */

:root {
  --dc-teal-900: #0e2a32;
  --dc-teal-700: #0b6e7f;
  --dc-teal-500: #14879a;
  --dc-teal-100: #e3f0f1;
  --dc-coral: #ff6f59;
  --dc-coral-600: #e5573f;
  --dc-slate: #5c7079;
  --dc-mist: #f2f6f6;
  --dc-border: #dce6e6;
  --dc-success: #2e9e6d;

  --bs-primary: var(--dc-teal-700);
  --bs-primary-rgb: 11, 110, 127;
  --bs-body-bg: var(--dc-mist);
  --bs-body-color: var(--dc-teal-900);
  --bs-border-color: var(--dc-border);
  --bs-link-color: var(--dc-teal-700);
  --bs-link-hover-color: var(--dc-teal-900);

  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background-color: var(--dc-mist);
}

h1, h2, .display-heading {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--dc-teal-900);
}

/* ---- Signature element: a thin "depth gauge" tick rule under the navbar,
   the one deliberately decorative touch on an otherwise plain-UI app. ---- */
.depth-rule {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--dc-teal-700) 0px,
    var(--dc-teal-700) 2px,
    transparent 2px,
    transparent 10px
  );
  opacity: 0.35;
}

/* ---- Navbar ---- */
.navbar-dc {
  background-color: var(--dc-teal-900);
}
.navbar-dc .navbar-brand {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff !important;
}
.navbar-dc .nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 500;
}
.navbar-dc .nav-link.active {
  color: #fff !important;
  position: relative;
}
.navbar-dc .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: -2px;
  height: 2px;
  background: var(--dc-coral);
  border-radius: 2px;
}

/* ---- Mobile nav: the collapsed menu becomes a dropdown-style panel
   (shadow, rounded corners, its own surface) instead of plain stacked
   links blending into the navbar. Only below the lg breakpoint, where
   Bootstrap's navbar-collapse is JS-controlled rather than always-visible
   flex. ---- */
@media (max-width: 991.98px) {
  .navbar-dc .navbar-collapse {
    background-color: var(--dc-teal-900);
    margin-top: 0.5rem;
    padding: 0.5rem 0.25rem 0.75rem;
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 12px 24px rgba(14, 42, 50, 0.35);
  }
  .navbar-dc .nav-link {
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
  }
  .navbar-dc .nav-link:active,
  .navbar-dc .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
  /* The underline active-indicator reads well on a horizontal desktop
     bar but is easy to miss in a stacked list — use a filled pill
     instead, like a typical dropdown-menu active item. */
  .navbar-dc .nav-link.active {
    background-color: rgba(255, 255, 255, 0.12);
  }
  .navbar-dc .nav-link.active::after {
    display: none;
  }
}

/* ---- Buttons ---- */
.btn-primary {
  background-color: var(--dc-teal-700);
  border-color: var(--dc-teal-700);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--dc-teal-900);
  border-color: var(--dc-teal-900);
}
.btn-accent {
  background-color: var(--dc-coral);
  border-color: var(--dc-coral);
  color: #fff;
}
.btn-accent:hover {
  background-color: var(--dc-coral-600);
  border-color: var(--dc-coral-600);
  color: #fff;
}
.btn-outline-primary {
  color: var(--dc-teal-700);
  border-color: var(--dc-teal-700);
}
.btn-outline-primary:hover {
  background-color: var(--dc-teal-700);
  border-color: var(--dc-teal-700);
}

/* ---- Cards ---- */
.card {
  border: 1px solid var(--dc-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(14, 42, 50, 0.04);
}
.card-dc-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card-dc-clickable:hover {
  box-shadow: 0 6px 16px rgba(14, 42, 50, 0.1);
  transform: translateY(-1px);
}

/* ---- Avatars ---- */
.dc-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--dc-teal-100);
  color: var(--dc-teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.dc-avatar-lg {
  width: 88px;
  height: 88px;
  font-size: 2rem;
}

/* ---- Badges / difficulty pills ---- */
.badge-difficulty-beginner { background-color: #2e9e6d; }
.badge-difficulty-intermediate { background-color: #d99a2b; }
.badge-difficulty-advanced { background-color: #e5573f; }
.badge-difficulty-tech { background-color: #7a5cd9; }

/* ---- Empty states ---- */
.dc-empty {
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--dc-slate);
}
.dc-empty i {
  font-size: 2.75rem;
  opacity: 0.35;
  display: block;
  margin-bottom: 0.75rem;
}

/* ---- Auth screens ---- */
.auth-shell {
  min-height: calc(100vh - 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  max-width: 420px;
  width: 100%;
}

/* ---- Utility ---- */
.text-slate { color: var(--dc-slate) !important; }
.cursor-pointer { cursor: pointer; }
.dc-tab-bar .nav-link { color: var(--dc-slate); }
.dc-tab-bar .nav-link.active {
  color: var(--dc-teal-700);
  font-weight: 600;
  border-bottom: 2px solid var(--dc-teal-700);
}

/* A comment arrived at from the moderation queue (#/post/<id>?comment=<id>).
   Stays marked rather than fading out: a moderator may take a moment to
   read the thread before acting, and a highlight that vanishes leaves them
   looking for the comment again. */
.dc-flagged {
  background: rgba(255, 193, 7, 0.18);
  outline: 2px solid rgba(255, 193, 7, 0.55);
  outline-offset: -2px;
}

/* Text an author typed: posts and comments.

   Posts are stored verbatim — the API only trims the ends — but HTML
   collapses runs of whitespace, so paragraph breaks arrived as a single
   run-on line. pre-wrap keeps newlines and indentation while still
   wrapping normally, and overflow-wrap stops an unbroken string (a long
   URL, say) from pushing the card wider than the screen.

   Deliberately not `pre`: that would refuse to wrap at all. */
.dc-user-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Bootstrap compiles nav-pills' active background from its own $primary
   at build time, so it ignores the --bs-primary override in :root and
   comes out the default blue. Set it explicitly. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--dc-teal-700);
}
.nav-pills .nav-link {
  color: var(--dc-teal-700);
}

/* Same build-time-blue problem as nav-pills above, for the keyboard
   highlight in a search picker's result list. Scoped to [data-picker] so
   it does not restyle every list-group in the app. */
[data-picker] .list-group-item.active {
  background-color: var(--dc-teal-700);
  border-color: var(--dc-teal-700);
}
[data-picker] .list-group-item-action:hover {
  background-color: var(--dc-teal-100);
}

/* An unread notification. A tinted row rather than a dot: the whole line
   is the target, so the whole line should read as "not yet seen". */
.dc-unread {
  background-color: var(--dc-teal-100);
}
.dc-unread:hover {
  background-color: var(--dc-teal-100);
}

/* The dive site map. A height is mandatory: Leaflet measures its
   container, and a container with no height measures zero and draws
   nothing at all. Viewport-relative so it fills a phone screen without
   swallowing a desktop one, with a floor for short windows. */
.dc-map {
  height: min(70vh, 620px);
  min-height: 320px;
  border-radius: 0.75rem;
  border: 1px solid var(--dc-border);
}

/* Leaflet's tooltip carries the library's own type; this puts the site
   name back on the app's. */
.dc-map-tip {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* A pin is a link to a page, so it should say so on the way past. */
.leaflet-marker-icon {
  cursor: pointer;
}

/* The line above the dive site map that says why it looks empty, or that
   there are more sites than are being shown.
   
   Its height is reserved whether or not it has anything to say. The text
   comes and goes while the reader is typing in the search box, and a map
   that jumps down and back up on alternate keystrokes is worse than a
   line of blank space. One line is enough at the widths where the
   message fits on one; below that it wraps and the map does move, which
   is the lesser problem. */
.dc-map-notice {
  min-height: 1.5rem;
}

/* A row that opens something — a cohort member, say. Styled as a list
   row rather than a card: a tint on hover, no lift, because it sits in a
   dense stack where a shadow on every row would be noise. */
.dc-row-clickable {
  cursor: pointer;
}
.dc-row-clickable:hover {
  background-color: var(--dc-teal-100);
}