/* BioBridge custom styles on top of Bootstrap 5.3 */

/* Brand colors */
:root,
[data-bs-theme="light"] {
  --bb-primary: #0d6efd;
  --bb-primary-subtle: #e7f1ff;
  --bb-accent: #198754;
  --bb-water: #0dcaf0;
}

[data-bs-theme="dark"] {
  --bb-primary-subtle: #1a2d4d;
}

/* Typography tweaks */
body {
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

/* Navbar */
.navbar-brand {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Cards */
.card {
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: box-shadow 0.15s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* Dashboard category cards */
.category-card {
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

.category-card .card-body {
  text-align: center;
  padding: 1.25rem 0.75rem;
}

.category-card .bi {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* Water tracker */
.water-count {
  font-size: 3rem;
  font-weight: 700;
  color: var(--bb-water);
  line-height: 1;
}

/* Urine color swatches */
.color-swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.color-swatch:hover {
  transform: scale(1.1);
}

.color-swatch-1 { background: #fcf8e3; }
.color-swatch-2 { background: #f5e6a3; }
.color-swatch-3 { background: #e8c840; }
.color-swatch-4 { background: #d4a017; }
.color-swatch-5 { background: #b8860b; }
.color-swatch-6 { background: #8b6914; }
.color-swatch-7 { background: #654321; }

.btn-check:checked + .color-swatch {
  border-color: var(--bs-primary);
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* Bristol scale */
.bristol-option .btn-check:checked + .btn {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white;
}

/* Sleep quality stars — reverse-order trick so CSS ~ selects lower stars */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
}

.star-rating input[type="radio"] {
  display: none;
}

.star-rating label {
  font-size: 2rem;
  color: #dee2e6;
  cursor: pointer;
  transition: color 0.1s ease;
  line-height: 1;
}

/* Checked star and all stars after it in DOM (= visually to its left) */
.star-rating input:checked ~ label {
  color: #ffc107;
}

/* Hover: highlight hovered star and all after it in DOM */
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #ffc107;
}

/* Flag chips */
.flag-chip .btn-check:checked + .btn {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: var(--bs-dark);
}

/* Stool color swatches */
.stool-color {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  display: inline-block;
}

.stool-color-brown   { background: #8B4513; }
.stool-color-green   { background: #228B22; }
.stool-color-yellow  { background: #DAA520; }
.stool-color-black   { background: #2c2c2c; }
.stool-color-red     { background: #B22222; }
.stool-color-pale    { background: #F5DEB3; }
.stool-color-orange  { background: #D2691E; }

.btn-check:checked + .stool-color {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* Recent entries */
.entry-item {
  transition: background-color 0.1s ease;
}

.entry-item:hover {
  background-color: var(--bs-tertiary-bg);
}

/* Admin tables */
.table th {
  font-weight: 600;
  white-space: nowrap;
}

/* Responsive helpers */
@media (max-width: 576px) {
  .category-card .bi {
    font-size: 1.5rem;
  }

  .color-swatch {
    width: 36px;
    height: 36px;
  }
}