/* Bootstrap's default muted-text gray is too light for comfortable reading,
   especially combined with .small. Override with higher-contrast values
   (still visually "secondary", but AA-compliant) for each theme. */
:root {
  --bs-secondary-color: #495057;
}
[data-bs-theme="dark"] {
  --bs-secondary-color: #ced4da;
}

.btn {
  min-height: 44px;
}

/* Applied by base.html's loading-indicator script on click/submit. Not a real
   `disabled` attribute (that can drop a submit button's own name/value from
   the submitted form data) -- pointer-events blocks a second click, opacity
   gives the same "can't use this right now" look. */
.btn-loading {
  pointer-events: none;
  opacity: 0.75;
}
.btn-loading .spinner-border {
  vertical-align: -0.125em;
}

/* Bootstrap's default outline-button colors sit right at ~4.5:1 contrast
   against a white background (borderline, reads as washed-out) and drop to
   ~3.5:1 against the dark theme's background (fails WCAG AA for normal
   text) since the same brand colors are reused unchanged either way. Swap
   in noticeably deeper/lighter theme-appropriate colors (each >= 8:1
   contrast -- a first pass at ~6:1 used colors close enough to Bootstrap's
   defaults that the fix was barely perceptible at a glance) plus a bolder
   border and font-weight, so the difference is unmistakable rather than
   just technically passing a contrast checker. Also flip the hover/active
   fill's text color to dark in dark mode: filling the button with a
   *light* color on hover needs dark text, not Bootstrap's default white. */
:root {
  --btn-primary: #084298;
  --btn-success: #0f5132;
  --btn-secondary: #343a40;
  --btn-danger: #842029;
}
[data-bs-theme="dark"] {
  --btn-primary: #9ec5fe;
  --btn-success: #a3cfbb;
  --btn-secondary: #e9ecef;
  --btn-danger: #f1aeb5;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary,
.btn-outline-danger {
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  border-width: 2px;
  font-weight: 600;
}
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-success,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-hover-color: #000;
  --bs-btn-active-color: #000;
}

.btn-outline-primary {
  --bs-btn-color: var(--btn-primary);
  --bs-btn-border-color: var(--btn-primary);
  --bs-btn-hover-bg: var(--btn-primary);
  --bs-btn-hover-border-color: var(--btn-primary);
  --bs-btn-active-bg: var(--btn-primary);
  --bs-btn-active-border-color: var(--btn-primary);
  --bs-btn-disabled-color: var(--btn-primary);
  --bs-btn-disabled-border-color: var(--btn-primary);
}
.btn-outline-success {
  --bs-btn-color: var(--btn-success);
  --bs-btn-border-color: var(--btn-success);
  --bs-btn-hover-bg: var(--btn-success);
  --bs-btn-hover-border-color: var(--btn-success);
  --bs-btn-active-bg: var(--btn-success);
  --bs-btn-active-border-color: var(--btn-success);
  --bs-btn-disabled-color: var(--btn-success);
  --bs-btn-disabled-border-color: var(--btn-success);
}
.btn-outline-secondary {
  --bs-btn-color: var(--btn-secondary);
  --bs-btn-border-color: var(--btn-secondary);
  --bs-btn-hover-bg: var(--btn-secondary);
  --bs-btn-hover-border-color: var(--btn-secondary);
  --bs-btn-active-bg: var(--btn-secondary);
  --bs-btn-active-border-color: var(--btn-secondary);
  --bs-btn-disabled-color: var(--btn-secondary);
  --bs-btn-disabled-border-color: var(--btn-secondary);
}
.btn-outline-danger {
  --bs-btn-color: var(--btn-danger);
  --bs-btn-border-color: var(--btn-danger);
  --bs-btn-hover-bg: var(--btn-danger);
  --bs-btn-hover-border-color: var(--btn-danger);
  --bs-btn-active-bg: var(--btn-danger);
  --bs-btn-active-border-color: var(--btn-danger);
  --bs-btn-disabled-color: var(--btn-danger);
  --bs-btn-disabled-border-color: var(--btn-danger);
}

.status-badge {
  font-size: 0.9rem;
}

/* Text colors below are chosen per-background for real contrast, not just
   convention (white text fails contrast checks on the lighter backgrounds). */
.status-unknown { background-color: #90a4ae; color: #111; }
.status-healthy { background-color: #4caf50; color: #111; }
.status-needs_attention { background-color: #ff9800; color: #111; }
.status-diseased { background-color: #e53935; color: #111; }
.status-critical { background-color: #6a1b9a; color: #fff; }

.plant-card {
  cursor: pointer;
}

.dashboard-tile {
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.dashboard-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.cover-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background-color: #e9ecef;
}

.cover-thumb-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  flex-shrink: 0;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.cover-photo-large {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  border-radius: 8px;
  background-color: #e9ecef;
}

.home-banner {
  width: 100%;
  max-height: 40vh;
  object-fit: cover;
  border-radius: 8px;
  background-color: #e9ecef;
}

.avatar-thumb {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #e9ecef;
  vertical-align: middle;
}

.avatar-placeholder {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #e9ecef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  vertical-align: middle;
  line-height: 1;
}

.avatar-thumb-large {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #e9ecef;
}

.avatar-placeholder-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

[data-bs-theme="dark"] .cover-thumb,
[data-bs-theme="dark"] .cover-thumb-placeholder,
[data-bs-theme="dark"] .cover-photo-large,
[data-bs-theme="dark"] .home-banner,
[data-bs-theme="dark"] .avatar-thumb,
[data-bs-theme="dark"] .avatar-placeholder,
[data-bs-theme="dark"] .avatar-thumb-large,
[data-bs-theme="dark"] .avatar-placeholder-large {
  background-color: #343a40;
}

.map-container {
  /* Needs a *definite* width (not `display: inline-block` + `max-width`,
     the original approach) -- inline-block with no explicit width shrinks
     to fit its content, but its content (.map-floorplan) is set to `width:
     100%` of *this* container, which is circular: the browser can't size
     a percentage-width child against a parent whose own size depends on
     that same child. The practical effect was a small ~300x150 fallback
     box (or 0x0 before .map-floorplan had `width` at all) instead of
     actually filling the page. A real block element with `width: 100%`
     takes its size from *its own* parent (the page's Bootstrap
     .container, which has a real width), breaking the cycle. */
  position: relative;
  width: 100%;
  line-height: 0;
}

.map-floorplan {
  /* `width` (not `max-width`) is required here, not just a style choice --
     an SVG with a viewBox but no explicit width/height on its root element
     (common for a scalable floor plan) has no intrinsic size at all, so
     `max-width: 100%` alone collapses it to a 0x0 box. Raster images never
     hit this since they always carry pixel dimensions internally. */
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.map-pin-highlight {
  font-size: 2.5rem;
  animation: map-pin-bounce 1s ease-in-out infinite;
}

@keyframes map-pin-bounce {
  0%, 100% { transform: translate(-50%, -100%); }
  50% { transform: translate(-50%, -115%); }
}

.map-pin-label {
  position: absolute;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-size: 0.7rem;
  background-color: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  pointer-events: none;
}

.theme-toggle-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1050;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ai-generated-badge {
  font-size: 0.75rem;
}

/* Printable QR labels -- sized for a 3.5in x 0.5in plant tag/marker strip.
   No room for location or institution name at this size (0.5in tall
   total), but a small square photo thumbnail fits fine alongside the QR
   code -- both sized to the same ~0.4in square, well within the 3.5in
   width budget even with Plant ID + name text still to fit next to them.
   The QR is sized right at the edge of reliably scannable for a label
   this small; if it doesn't scan reliably in practice, the fix is a
   shorter encoded URL (see PUBLIC_BASE_URL) or accepting a lower
   error-correction level, not a bigger box -- there isn't room for one. */
.label-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5in, 1fr));
  gap: 0.1in;
}

.label-card {
  display: flex;
  align-items: center;
  gap: 0.06in;
  width: 3.5in;
  height: 0.5in;
  padding: 0.03in 0.05in;
  border: 1px dashed #999;
  border-radius: 2px;
  page-break-inside: avoid;
  break-inside: avoid;
  background: #fff;
  color: #111;
  overflow: hidden;
}

.label-photo {
  width: 0.4in;
  height: 0.4in;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 2px;
  background-color: #e9ecef;
}

.label-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9pt;
}

.label-qr {
  width: 0.4in;
  height: 0.4in;
  flex-shrink: 0;
}

.label-text {
  min-width: 0;
  line-height: 1.15;
}

.label-code {
  font-weight: 700;
  font-size: 8pt;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 6.5pt;
  color: #333;
}

@media print {
  .no-print,
  nav,
  .theme-toggle-btn {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #111 !important;
  }

  .label-sheet {
    gap: 0.1in;
  }
}

@page {
  margin: 0.4in;
}