/*
 * Naabrent component layer (design-system.md).
 * Small, hand-written CSS for the bespoke components a classless Pico
 * baseline does not provide: top bar, nav, listing cards, badges/pills,
 * verification badge, notification bell, chat, availability states.
 * ADR-0004: no build step, plain CSS + custom properties only.
 */

/* Respect reduced-motion preferences everywhere (accessibility.md). */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--surface-page);
}

/* Skip link (accessibility.md) -------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-primary);
  color: var(--text-on-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-control) 0;
}

.skip-link:focus {
  left: 0;
}

/* Focus ring everywhere, never removed without replacement ---------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Top navigation ------------------------------------------------------------ */
/* Branded deep-green band so the app has presence at the top (visual-refresh §5). */
.site-header {
  background: var(--color-primary-strong);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}

.nav-bar__brand {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: #fff;
  text-decoration: none;
  margin-right: var(--space-2);
}

.nav-bar__links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.nav-bar__links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 500;
}

.nav-bar__links a:hover,
.nav-bar__links a[aria-current="page"] {
  color: #fff;
  text-decoration: underline;
}

.nav-bar__spacer {
  flex: 1 1 auto;
}

.nav-bar__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.neighbourhood-switcher select {
  margin: 0;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-primary);
  border: 1px solid transparent;
}

/* Single-neighbourhood label (no switcher needed) on the green band. */
.neighbourhood-current {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 500;
}

/* Chrome sitting on the deep-green band: keep controls light & legible. */
.site-header .nav-toggle,
.site-header .dropdown > summary[role="button"] {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.site-header .nav-toggle:hover,
.site-header .dropdown > summary[role="button"]:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: #fff;
}

.nav-bar__end > a:not([role="button"]) {   /* "Log in" text link */
  color: #fff;
}

.nav-bar__end > a[role="button"] {          /* "Sign up" — inverted CTA on the band */
  background: #fff;
  color: var(--color-primary-strong);
  border-color: #fff;
}

/* Mobile nav toggle --------------------------------------------------------- */
.nav-toggle {
  display: none;
}

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .nav-bar__links,
  .nav-bar__end {
    flex-basis: 100%;
  }

  .nav-bar__links {
    display: none;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
  }

  .nav-bar__end {
    display: none;
    justify-content: space-between;
    padding-top: var(--space-2);
  }

  .site-header.is-open .nav-bar__links,
  .site-header.is-open .nav-bar__end {
    display: flex;
  }
}

/* Language switcher (EN | Eesti) --------------------------------------------- */
.language-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  margin-left: auto;
  order: 1;
}

@media (min-width: 721px) {
  .language-switcher {
    /* Sits at the end of the bar, after the collapsible nav sections. */
    order: 2;
    margin-left: 0;
  }
}

.language-switcher__option {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.language-switcher__option:hover:not(:disabled) {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.language-switcher__option.is-active {
  background: var(--color-primary-50);
  border-color: var(--color-primary);
  color: var(--color-primary-active);
  cursor: default;
}

/* Inverted for the deep-green header band. */
.site-header .language-switcher__option {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
}

.site-header .language-switcher__option:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.site-header .language-switcher__option.is-active {
  background: rgba(255, 255, 255, 0.18);
  border-color: transparent;
  color: #fff;
}

/* Notification bell ---------------------------------------------------------- */
.notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: #fff;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
}

.notification-bell:hover {
  background: rgba(255, 255, 255, 0.12);
}

.notification-bell__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}

.notification-panel {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  max-width: 360px;
}

.notification-panel li {
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) 0;
}

.notification-panel li:last-child {
  border-bottom: none;
}

.notification-panel a {
  text-decoration: none;
  color: var(--text-primary);
}

.notification-panel .is-unread {
  font-weight: 600;
}

/* Icon sprite --------------------------------------------------------------- */
.icon {
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  fill: none;
  vertical-align: -0.15em;
}

/* Cards ----------------------------------------------------------------------*/
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  padding: 0;
  margin: var(--space-4) 0;
  list-style: none;
}

.listing-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.listing-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.listing-card__link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.listing-card__photo {
  aspect-ratio: 16 / 10;
  background: var(--color-primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-ink);
  object-fit: cover;
  width: 100%;
}

/* Photo-less cards read as an intentional, colourful category mosaic rather
   than a wall of broken-image icons (visual-refresh §5). */
.listing-card__photo--empty {
  flex-direction: column;
  gap: var(--space-1);
  background: var(--cat-bg, var(--color-primary-50));
  color: var(--cat-ink, var(--color-primary-ink));
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--space-3);
  text-align: center;
}

.listing-card__photo--empty .icon {
  width: 1.8em;
  height: 1.8em;
}

/* Listing detail photo gallery: a simple stacked set of full-width images
   (ADR-0008). Kept intentionally simple — no carousel JS. */
.listing-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.listing-gallery__image {
  /* Show the whole image on the detail page — no fixed ratio, no crop.
     Capped so a tall image doesn't dominate; letterboxed on the muted panel. */
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  background: var(--surface-muted);
  border-radius: var(--radius-card);
}

/* Thumbnails with a Remove control on the listing-edit page (ADR-0008). */
.photo-manager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.photo-manager__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 120px;
}

.photo-manager__image {
  width: 120px;
  height: 80px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md, 6px);
}

.listing-card__body {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.listing-card__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.listing-card__meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.listing-card__provider {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* Pills & badges -------------------------------------------------------------*/
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  line-height: 1.4;
  white-space: nowrap;
}

.pill--free {
  background: var(--color-primary-50);
  color: var(--color-primary-active);
  font-weight: 500;
}

.pill--price {
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-weight: 500;
}

.pill--distance {
  color: var(--text-muted);
}

/* Category colour map, shared by the chip and the photo placeholder. Each
   category sets a tint (--cat-bg) + AA-safe ink (--cat-ink); components read
   them so the mapping lives in one place (visual-refresh §2.8). */
[data-category="power-tools"],
[data-category="hand-tools"],
[data-category="building-renovation"] {
  --cat-bg: var(--color-primary-50);
  --cat-ink: var(--color-primary-ink);
}
[data-category="garden-outdoor"] { --cat-bg: #eaf3e0; --cat-ink: #3a5a17; }
[data-category="household"],
[data-category="cleaning"] {
  --cat-bg: var(--color-secondary-50);
  --cat-ink: var(--color-secondary-ink);
}
[data-category="vehicles-transport"] { --cat-bg: #eceaf4; --cat-ink: #3e357a; }
[data-category="services"] {
  --cat-bg: var(--color-amber-50);
  --cat-ink: var(--color-amber-ink);
}
[data-category="other"] {
  --cat-bg: var(--surface-sunken);
  --cat-ink: var(--text-secondary);
}

.pill--category {
  background: var(--cat-bg, var(--surface-sunken));
  color: var(--cat-ink, var(--text-secondary));
  border: 1px solid transparent;
  font-weight: 500;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-amber-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-amber-ink);   /* AA for the small numeric rating */
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.rating .icon {
  color: var(--color-amber);       /* star glyph: 3:1 is fine for an icon */
}

.rating__stars {
  letter-spacing: 1px;
}

.rating__value {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Status pills (booking / membership states) --------------------------------*/
.status-pill {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid transparent;
}

/* Five distinct treatments across the lifecycle; the visible text label is the
   non-colour cue (visual-refresh §2.9). */
.status-pill--requested,
.status-pill--pending {
  background: var(--warning-50);
  color: var(--warning-ink);
}

.status-pill--approved,
.status-pill--active {
  background: var(--success-50);
  color: var(--success-ink);
}

.status-pill--denied,
.status-pill--cancelled,
.status-pill--declined {
  background: var(--danger-50);
  color: var(--danger-ink);
}

.status-pill--awaiting_confirmation {
  background: var(--info-50);
  color: var(--info-ink);
}

.status-pill--completed {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

/* Empty states ---------------------------------------------------------------*/
.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

/* Inline messages / toasts ---------------------------------------------------*/
.message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
}

.message--success {
  background: var(--success-50);
  color: var(--success-ink);
  border-color: var(--color-primary-100);
}

.message--error,
.message--danger {
  background: var(--danger-50);
  color: var(--danger-ink);
  border-color: var(--danger);
}

.message--warning {
  background: var(--warning-50);
  color: var(--warning-ink);
}

.message--info {
  background: var(--info-50);
  color: var(--info-ink);
}

/* Field errors ---------------------------------------------------------------*/
.field-error {
  color: var(--danger);
  font-size: var(--fs-sm);
  margin-top: -8px;
  margin-bottom: var(--space-2);
}

.field-hint {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* Availability calendar / blocks ---------------------------------------------*/
.availability-list {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.availability-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-control);
  align-items: center;
  flex-wrap: wrap;
}

/* Chat -------------------------------------------------------------------- */
.chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 120px;
  max-height: 420px;
  overflow-y: auto;
  padding: var(--space-3);
  /* Muted panel, not white — so the conversation log doesn't read as an input. */
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-3);
}

/* Centre the "no messages yet" placeholder in the empty panel. */
.chat > p {
  margin: auto;
  text-align: center;
}

.chat-message {
  max-width: 80%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  border-bottom-left-radius: var(--space-1);
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* My messages: solid brand fill so the two sides read at a glance
   (colour + alignment, two cues). */
.chat-message--mine {
  align-self: flex-end;
  background: var(--color-primary);
  border-color: transparent;
  color: var(--text-on-primary);
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--space-1);
}

.chat-message--mine .chat-message__meta {
  color: rgba(255, 255, 255, 0.8);
}

.chat-message__meta {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
}

.chat-form {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.chat-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  min-height: 48px;
  resize: vertical;
}

/* Pico makes <button> width:100% by default, which in this flex row collapsed
   the textarea to nothing. Keep the Send button to its own width. */
.chat-form button {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  align-self: stretch;
}

/* Tabs ---------------------------------------------------------------------*/
.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.tabs a {
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  font-weight: 500;
}

.tabs a[aria-current="page"] {
  color: var(--color-primary-active);
  border-bottom-color: var(--color-primary);
}

/* Utility --------------------------------------------------------------------*/
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cluster {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.text-muted {
  color: var(--text-muted);
}

.text-secondary {
  color: var(--text-secondary);
}

.mt-0 {
  margin-top: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sticky-action {
  position: sticky;
  bottom: 0;
  background: var(--surface-page);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

/* Floating chat popup (bottom-right, all pages) ----------------------------- */
.chat-fab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 900;
}

.chat-fab__btn {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chat-fab__btn .icon {
  width: 1.6em;
  height: 1.6em;
}

.chat-fab__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  font-weight: 600;
}

.chat-fab__badge.is-hidden {
  display: none;
}

.chat-pop {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + 68px);
  width: min(360px, calc(100vw - 2 * var(--space-4)));
  min-height: 180px;
  max-height: min(70vh, 540px);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 900;
}

.chat-pop[hidden] {
  display: none;
}

#chat-pop-body {
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 540px);
  min-height: 0;
}

.chat-pop__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.chat-pop__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pop__close,
.chat-pop__back {
  width: auto;
  margin: 0;
  padding: 0 var(--space-2);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.chat-pop__empty {
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.chat-convos {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.chat-convo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}

.chat-convo:hover {
  background: var(--surface-muted);
}

.chat-convo__sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.chat-convo__unread {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  font-weight: 600;
}

/* Reuse the .chat log styling, but fill the popup (no outer border/margin). */
.chat--pop {
  flex: 1;
  min-height: 140px;
  border: none;
  border-radius: 0;
  margin: 0;
}

.chat-form--pop {
  padding: var(--space-2);
  border-top: 1px solid var(--border);
}

/* Date + 24h time-slot picker (booking form): date grows, time select sits beside it. */
.datetime-field {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.datetime-field input[type="date"] {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.datetime-field select {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

/* Account pages (allauth) — centred card on the branded chrome --------------- */
.auth-page main#main-content {
  max-width: 26rem;
  margin: var(--space-7) auto;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

.auth-page main#main-content h1 {
  margin-top: 0;
}

.auth-page form {
  margin: 0;
}

.auth-page form button[type="submit"] {
  width: 100%;
}

/* Address autocomplete (ADR-0009 addendum: In-AKS replaces the map-pin) ------*/
.address-search {
  margin-bottom: var(--space-4);
}

.address-search__combobox {
  position: relative;
}

.address-search__listbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
  max-height: 16rem;
  overflow-y: auto;
}

.address-search__option {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.address-search__option:hover,
.address-search__option.is-active {
  background: var(--surface-muted);
}

.address-search__status {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
}