/* HIVESPLACE theme overrides and design tokens */

:root {
  /* Brand colors */
  --hp-yellow: #FCC419;
  --hp-yellow-dark: #F59F00;
  --hp-amber: #FF922B;
  --hp-brown: #5C3A21;
  --hp-cream: #FFF8E6;
  --hp-brown-light: #8D6E63;

  /* Functional colors */
  --hp-red: #E03131;
  --hp-blue: #339AF0;
  --hp-green: #40C057;
  --hp-orange: #F76707;
  --hp-gray: #868E96;
  --hp-dark: #212529;
  --hp-white: #FFFFFF;

  /* Bootstrap overrides */
  --bs-primary: var(--hp-red);
  --bs-secondary: var(--hp-yellow);
  --bs-success: var(--hp-green);
  --bs-info: var(--hp-blue);
  --bs-warning: var(--hp-orange);
  --bs-danger: var(--hp-red);
  --bs-light: var(--hp-cream);
  --bs-dark: var(--hp-brown);

  --bs-body-font-family: "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--hp-dark);
  --bs-body-bg: var(--hp-white);

  --bs-border-radius: 0.75rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1rem;

  --bs-link-color: var(--hp-blue);
  --bs-link-hover-color: #1c7ed6;
}

/* Bootstrap component color mappings */
.btn-primary {
  --bs-btn-bg: var(--hp-red);
  --bs-btn-border-color: var(--hp-red);
  --bs-btn-hover-bg: #c92a2a;
  --bs-btn-hover-border-color: #c92a2a;
  --bs-btn-active-bg: #c92a2a;
  --bs-btn-active-border-color: #c92a2a;
  --bs-btn-focus-shadow-rgb: 224, 49, 49;
  color: var(--hp-white);
}

.btn-secondary {
  --bs-btn-bg: var(--hp-yellow);
  --bs-btn-border-color: var(--hp-yellow);
  --bs-btn-hover-bg: var(--hp-yellow-dark);
  --bs-btn-hover-border-color: var(--hp-yellow-dark);
  --bs-btn-active-bg: var(--hp-yellow-dark);
  --bs-btn-active-border-color: var(--hp-yellow-dark);
  --bs-btn-focus-shadow-rgb: 252, 196, 25;
  color: var(--hp-brown);
}

.btn-outline-primary {
  --bs-btn-color: var(--hp-red);
  --bs-btn-border-color: var(--hp-red);
  --bs-btn-hover-bg: var(--hp-red);
  --bs-btn-hover-border-color: var(--hp-red);
  --bs-btn-active-bg: var(--hp-red);
  --bs-btn-active-border-color: var(--hp-red);
}

.btn-outline-secondary {
  --bs-btn-color: var(--hp-brown);
  --bs-btn-border-color: var(--hp-yellow);
  --bs-btn-hover-bg: var(--hp-yellow);
  --bs-btn-hover-border-color: var(--hp-yellow);
}

.btn-link {
  --bs-btn-color: var(--hp-blue);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--hp-yellow-dark);
  box-shadow: 0 0 0 0.25rem rgba(245, 159, 0, 0.25);
}

/* Utilities */
.hp-bg-cream {
  background-color: var(--hp-cream);
}

.hp-bg-gradient {
  background: linear-gradient(135deg, var(--hp-cream) 0%, rgba(252, 196, 25, 0.35) 100%);
}

.hp-text-brown {
  color: var(--hp-brown);
}

.hp-text-brown-light {
  color: var(--hp-brown-light);
}

.hp-shadow-sm {
  box-shadow: 0 2px 8px rgba(92, 58, 33, 0.08);
}

.hp-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.hp-hover-lift {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.hp-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.hp-rounded {
  border-radius: var(--bs-border-radius);
}

/* Honeycomb watermark background */
.hp-honeycomb-bg {
  position: relative;
}

.hp-honeycomb-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0L56 16.5v33L28 66 0 49.5v-33L28 0z' fill='%23fcc419' fill-opacity='0.08'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

.hp-honeycomb-bg > * {
  position: relative;
  z-index: 1;
}

/* Status badges */
.badge-online {
  background-color: var(--hp-green);
}

.badge-pending {
  background-color: var(--hp-orange);
}

.badge-draft,
.badge-offline {
  background-color: var(--hp-gray);
}

.badge-rejected {
  background-color: var(--hp-red);
}

/* Listing card image aspect ratio */
.hp-card-img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}

/* Hero */
.hp-hero-logo-lg {
  max-height: 160px;
}

.hp-hero-logo-sm {
  max-height: 120px;
}

.hp-hero-sub {
  max-width: 640px;
}

.hp-search-card {
  max-width: 800px;
}

.hp-step-icon {
  width: 64px;
  height: 64px;
  background-color: var(--hp-cream);
}

.hp-login-mascot {
  height: 80px;
}

.hp-tracking-wide {
  letter-spacing: 0.25em;
}

/* Section vertical rhythm */
.hp-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .hp-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* Footer */
.hp-footer {
  background-color: var(--hp-cream);
  color: var(--hp-brown);
}

/* Console sidebar */
.hp-sidebar {
  width: 240px;
  min-height: calc(100vh - 72px);
  background-color: var(--hp-white);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.hp-sidebar .nav-link {
  color: var(--hp-brown);
  border-radius: var(--bs-border-radius-sm);
}

.hp-sidebar .nav-link:hover,
.hp-sidebar .nav-link.active {
  background-color: var(--hp-cream);
  color: var(--hp-brown);
  font-weight: 600;
}

/* Focus rings for accessibility */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(245, 159, 0, 0.4);
}

/* AI property suggestion list */
#postListingSuggestionsList {
  max-height: 320px;
  overflow-y: auto;
}

#postListingSuggestionsList .list-group-item {
  background-color: var(--hp-cream);
  border-color: rgba(252, 196, 25, 0.5);
}

#postListingSuggestionsList .list-group-item:hover {
  background-color: #FFF3CD;
  border-color: var(--hp-yellow-dark);
}

#postListingSuggestionsList .list-group-item.active {
  background-color: var(--hp-yellow);
  border-color: var(--hp-yellow-dark);
}

#postListingSuggestionsList .list-group-item.active .hp-text-brown,
#postListingSuggestionsList .list-group-item.active .hp-text-brown-light {
  color: var(--hp-brown);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hp-hover-lift,
  .hp-hover-lift:hover {
    transition: none;
    transform: none;
  }
}