/* BauLoop – Custom Styles */

:root {
    /* Legacy Bootstrap-mapped greens (keep for backward compat) */
    --bauloop-green: #198754;
    --bauloop-green-light: #d1e7dd;

    /* Design tokens – canonical bl-* names (Sprint 3.4) */
    --bl-primary:       #2C6E49;
    --bl-primary-dark:  #1B4D34;
    --bl-accent:        #F4A124;
    --bl-bg:            #F9F7F4;
    --bl-surface:       #FFFFFF;
    --bl-text:          #1A1A1A;
    --bl-text-soft:     #6B7280;
    --bl-border:        #E5E7EB;
    --bl-danger:        #DC2626;
    --bl-success:       #16A34A;
    --bl-radius-sm:     4px;
    --bl-radius-md:     8px;
    --bl-radius-lg:     12px;
    --bl-radius-full:   9999px;
    --bl-shadow-card:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --bl-shadow-hover:  0 4px 12px rgba(0,0,0,.12);

    /* Aliases so existing chat styles keep working */
    --color-primary:      var(--bl-primary);
    --color-primary-dark: var(--bl-primary-dark);
    --color-accent:       var(--bl-accent);
    --color-bg:           var(--bl-bg);
    --color-surface:      var(--bl-surface);
    --color-text-main:    var(--bl-text);
    --color-text-soft:    var(--bl-text-soft);
    --color-border:       var(--bl-border);
    --color-danger:       var(--bl-danger);
    --color-success:      var(--bl-success);

    /* Spacing grid (8 px base) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;

    /* Border-radius aliases */
    --radius-sm: var(--bl-radius-sm);
    --radius-md: var(--bl-radius-md);
    --radius-lg: var(--bl-radius-lg);
}

body {
    background-color: var(--bl-bg);
    color: var(--bl-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
    background-color: var(--bl-surface) !important;
    border-bottom: 1px solid var(--bl-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.navbar-brand {
    color: var(--bl-primary) !important;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

/* ============================================================
   Bootstrap primary colour override
   ============================================================ */
.btn-primary {
    background-color: var(--bl-primary);
    border-color: var(--bl-primary);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bl-primary-dark);
    border-color: var(--bl-primary-dark);
}

/* ============================================================
   Accent CTA button
   ============================================================ */
.btn-accent {
    background-color: var(--bl-accent);
    border-color: var(--bl-accent);
    color: var(--bl-text);
    font-weight: 600;
}
.btn-accent:hover {
    background-color: #e09020;
    border-color: #e09020;
    color: var(--bl-text);
}

/* ============================================================
   Cards – generic Bootstrap cards
   ============================================================ */
.card {
    transition: box-shadow 0.15s ease-in-out;
}
.card:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.12) !important;
}

/* ============================================================
   Listing cards
   ============================================================ */
.listing-card {
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius-lg);
    box-shadow: var(--bl-shadow-card);
    transition: box-shadow .15s ease, transform .15s ease;
    overflow: hidden;
}
.listing-card:hover {
    box-shadow: var(--bl-shadow-hover);
    transform: translateY(-2px);
}
.listing-card .card-img-top {
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* ============================================================
   Status badges
   ============================================================ */
.badge-active {
    background: #D1FAE5;
    color: #065F46;
    border-radius: var(--bl-radius-full);
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 600;
}
.badge-draft {
    background: #F3F4F6;
    color: #374151;
    border-radius: var(--bl-radius-full);
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 600;
}
.badge-expired {
    background: #FEE2E2;
    color: #991B1B;
    border-radius: var(--bl-radius-full);
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 600;
}
.badge-pending {
    background: #FEF3C7;
    color: #92400E;
    border-radius: var(--bl-radius-full);
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 600;
}
.badge-completed {
    background: #DBEAFE;
    color: #1E40AF;
    border-radius: var(--bl-radius-full);
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 600;
}

/* ============================================================
   Badges – legacy Bootstrap subtle
   ============================================================ */
.bg-success-subtle {
    background-color: var(--bauloop-green-light);
}

/* ============================================================
   Phone code input
   ============================================================ */
.letter-spacing {
    letter-spacing: .5rem;
    font-family: 'Courier New', monospace;
}

/* ============================================================
   Hero section
   ============================================================ */
section.bg-success {
    background: linear-gradient(135deg, #198754 0%, #0d6e43 100%) !important;
}

/* ============================================================
   Form controls
   ============================================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--bl-primary);
    box-shadow: 0 0 0 2px rgba(44,110,73,.2);
}

/* ============================================================
   Buttons – legacy success override
   ============================================================ */
.btn-success {
    background-color: var(--bauloop-green);
    border-color: var(--bauloop-green);
}

/* ============================================================
   Footer
   ============================================================ */
footer {
    background-color: var(--bl-surface);
    border-top: 1px solid var(--bl-border);
    color: var(--bl-text-soft);
    font-size: .875rem;
}

footer a:hover {
    color: var(--bl-primary) !important;
}

/* ============================================================
   Listing image carousel
   ============================================================ */
.carousel-item img {
    object-fit: cover;
}

/* Listing image carousel */
.carousel-item img {
    object-fit: cover;
}

/* ============================================================
   Chat module (Sprint 3.1)
   ============================================================ */

/* Thread container */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}

/* Row wrappers align the bubble left or right */
.chat-row-buyer {
    display: flex;
    justify-content: flex-end;
}

.chat-row-seller {
    display: flex;
    justify-content: flex-start;
}

/* Shared bubble base */
.chat-bubble-buyer,
.chat-bubble-seller {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    word-break: break-word;
    line-height: 1.5;
}

/* Buyer bubble – primary green, white text */
.chat-bubble-buyer {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Seller bubble – light gray, dark text */
.chat-bubble-seller {
    background-color: #F3F4F6;
    color: var(--color-text-main);
}

/* System / automated messages */
.chat-bubble-system {
    text-align: center;
    font-style: italic;
    color: var(--color-text-soft);
    font-size: .875rem;
    width: 100%;
}

/* Timestamp below each bubble */
.chat-bubble-buyer .chat-ts,
.chat-bubble-seller .chat-ts {
    display: block;
    font-size: .75rem;
    margin-top: 4px;
    opacity: .75;
}

.chat-bubble-buyer .chat-ts {
    text-align: right;
}

/* Conversation list cards — clickable tap target ≥ 44 px.
   position: relative is required for Bootstrap stretched-link overlay. */
.chat-conv-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    transition: box-shadow 0.15s ease-in-out;
    min-height: 44px; /* touch target floor */
    overflow: hidden; /* contain the stretched-link ::after pseudo-element */
}

.chat-conv-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    color: inherit;
    text-decoration: none;
}

/* Status badges for chat */
.badge-chat-open {
    background-color: #dcfce7;
    color: var(--color-success);
    border-radius: 99px;
    padding: 3px 10px;
    font-size: .75rem;
    font-weight: 500;
}

.badge-chat-confirmed {
    background-color: #dbeafe;
    color: #1d4ed8;
    border-radius: 99px;
    padding: 3px 10px;
    font-size: .75rem;
    font-weight: 500;
}

.badge-chat-closed {
    background-color: #f3f4f6;
    color: var(--color-text-soft);
    border-radius: 99px;
    padding: 3px 10px;
    font-size: .75rem;
    font-weight: 500;
}

/* Detail header bar */
.chat-header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-1) var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

/* Closed-conversation banner */
.chat-closed-banner {
    background-color: #f9fafb;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    color: var(--color-text-soft);
    font-size: .9rem;
    text-align: center;
}

/* Reply form submit button */
.btn-chat-send {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    min-height: 44px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    font-weight: 500;
}

.btn-chat-send:hover,
.btn-chat-send:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #ffffff;
}

/* Empty-state block */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px var(--space-2);
    color: var(--color-text-soft);
    gap: var(--space-1);
    text-align: center;
}

.chat-empty-state .chat-empty-icon {
    font-size: 3rem;
    color: var(--color-border);
}

/* Scrollable thread area on detail page */
.chat-thread-scroll {
    max-height: 60vh;
    overflow-y: auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

@media (max-width: 575.98px) {
    .chat-bubble-buyer,
    .chat-bubble-seller {
        max-width: 90%;
    }

    .chat-thread-scroll {
        max-height: 55vh;
    }
}

/* ============================================================
   Mobile bottom navigation (PWA – Sprint 3.5)
   ============================================================ */
@media (max-width: 768px) {
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: #fff;
        border-top: 1px solid var(--bl-border);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 1030;
        box-shadow: 0 -2px 8px rgba(0,0,0,.06);
    }
    .bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        color: var(--bl-text-soft);
        text-decoration: none;
        font-size: .65rem;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
    .bottom-nav a.active,
    .bottom-nav a:hover {
        color: var(--bl-primary);
    }
    .bottom-nav i {
        font-size: 1.3rem;
    }
    body {
        padding-bottom: 70px; /* prevent content from hiding behind bottom nav */
    }
    /* Top navbar stays visible on mobile in a slim form so logged-out
       visitors can find Anmelden / Registrieren. Bootstrap's
       navbar-expand-lg collapses the inner ul into a hamburger menu. */
    .navbar {
        padding-top: .25rem;
        padding-bottom: .25rem;
    }
    .navbar .navbar-brand {
        font-size: 1rem;
    }
}

/* ============================================================
   Chat – contact-info moderation warning (Sprint 4.4)
   ============================================================ */
.chat-contact-warning {
  font-size: .75rem;
  color: #92400e;
  background: #fef3c7;
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}