/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    /* Brand colors — overridable per-estate via an inline <style> block
       emitted by layouts/public.blade.php (see app/Models/Estate.php). */
    --bs-primary: #1c5d3b;
    --bs-primary-rgb: 28, 93, 59;
    --bs-secondary: #b08d57;
    --bs-secondary-rgb: 176, 141, 87;
    --bs-link-color: #1c5d3b;
    --bs-link-color-rgb: 28, 93, 59;
    --bs-link-hover-color: #164a2f;
    --bs-link-hover-color-rgb: 22, 74, 47;

    /* Typography */
    --bs-font-sans-serif: 'Figtree', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --re-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Warm neutral surface palette */
    --re-ink: #211f1a;
    --re-ink-soft: #5c584e;
    --re-surface: #faf8f3;
    --re-surface-raised: #ffffff;
    --re-border: #e6e1d6;

    /* Shape + elevation scale */
    --re-radius-sm: .5rem;
    --re-radius: .875rem;
    --re-radius-lg: 1.5rem;
    --re-shadow-sm: 0 1px 2px rgba(33, 31, 26, .06), 0 1px 1px rgba(33, 31, 26, .04);
    --re-shadow: 0 12px 28px -10px rgba(33, 31, 26, .18);
    --re-shadow-lg: 0 28px 56px -18px rgba(33, 31, 26, .28);

    --bs-body-bg: var(--re-surface);
    --bs-body-color: var(--re-ink);
    --bs-secondary-color: var(--re-ink-soft);
    --bs-border-color: var(--re-border);
    --bs-border-radius-sm: var(--re-radius-sm);
    --bs-border-radius: var(--re-radius-sm);
    --bs-border-radius-lg: var(--re-radius);
    --bs-border-radius-xl: var(--re-radius-lg);

    /* Property status colors — intentionally independent of the brand
       palette so "sold" always reads the same regardless of a per-estate
       theme. Shared by status badges, layout-plan pins, the map legend,
       and Leaflet markers. */
    --re-status-available: #198754;
    --re-status-reserved: #ffc107;
    --re-status-sold: #8a6d3b;
    --re-status-unavailable: #dc3545;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
    font-family: var(--bs-font-sans-serif);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

/* Direct child only: the public layout's <main> sits right under <body>
   for the sticky-footer flex pattern. The portal layout's <main> is nested
   inside a sidebar flex row instead and must stay free to shrink there
   (see .portal-sidebar below) — a bare `main` selector here would force
   flex-shrink:0 on that one too and blow out the sidebar layout. */
body > main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: var(--re-font-display);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--re-ink);
}

.text-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.hero .text-eyebrow {
    color: rgba(255, 255, 255, .85);
}

@media (min-width: 768px) {
    .py-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
}

@media (max-width: 767.98px) {
    .py-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

hr {
    opacity: .12;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    font-weight: 600;
    letter-spacing: .01em;
    padding: .55rem 1.25rem;
    border-radius: var(--re-radius-sm);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.btn-lg {
    padding: .85rem 1.75rem;
    font-size: 1rem;
}

.btn-sm {
    padding: .35rem .85rem;
}

.btn-primary,
.btn-outline-primary:hover {
    box-shadow: var(--re-shadow-sm);
}

.btn-primary:hover,
.btn-outline-primary:hover,
.btn-outline-light:hover {
    transform: translateY(-1px);
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   Cards, forms, misc surfaces
   ========================================================================== */
.card {
    border: 1px solid var(--re-border);
    border-radius: var(--re-radius);
    box-shadow: var(--re-shadow-sm);
}

.card-header {
    background-color: rgba(var(--bs-primary-rgb), .04);
    border-bottom: 1px solid var(--re-border);
    font-weight: 600;
}

.form-control,
.form-select {
    border-color: var(--re-border);
    border-radius: var(--re-radius-sm);
    padding: .55rem .85rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .14);
}

.form-control-color {
    width: 3.5rem;
    padding: .25rem;
}

.badge {
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: .4em .8em;
}

.breadcrumb {
    font-size: .85rem;
}

.nav-pills .nav-link {
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    color: var(--re-ink-soft);
    padding: .5rem 1.1rem;
}

.nav-pills .nav-link.active {
    background-color: var(--bs-primary);
}

/* ==========================================================================
   Public site navbar + footer
   ========================================================================== */
.site-navbar {
    background-color: var(--re-ink);
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.site-navbar .navbar-brand {
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 0;
}

.site-navbar .nav-link {
    color: rgba(255, 255, 255, .72);
    text-transform: uppercase;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .07em;
    padding: .55rem .9rem !important;
    transition: color .15s ease;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
    color: #fff;
}

.site-footer {
    background-color: var(--re-ink);
}

/* ==========================================================================
   Hero (home page)
   ========================================================================== */
.hero {
    position: relative;
    color: #fff;
    background: linear-gradient(160deg, var(--re-ink) 0%, #34302a 100%);
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 90% at 85% 20%, rgba(var(--bs-primary-rgb), .35), transparent 70%);
    pointer-events: none;
}

.hero > .container {
    position: relative;
}

.hero h1 {
    color: #fff;
}

/* ==========================================================================
   Property / estate cards
   ========================================================================== */
.property-card,
.estate-card {
    transition: box-shadow .2s ease, transform .2s ease;
    overflow: hidden;
}

.property-card:hover,
.estate-card:hover {
    box-shadow: var(--re-shadow);
    transform: translateY(-3px);
}

.property-card .property-card__img,
.estate-card .property-card__img {
    height: 210px;
    object-fit: cover;
}

.card-img-overlay-badges {
    position: absolute;
    top: .75rem;
    left: .75rem;
    right: .75rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}

.card-img-overlay-badges .badge {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* ==========================================================================
   Portal chrome (sidebar/topbar) — kept dense; tables/forms untouched
   ========================================================================== */
.portal-sidebar {
    min-height: calc(100vh - 56px);
    flex-shrink: 0;
}

.portal-sidebar .list-group-item {
    font-weight: 500;
    color: var(--re-ink-soft);
}

.portal-sidebar .list-group-item.active {
    background-color: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
    border-color: transparent;
    font-weight: 600;
}

/* ==========================================================================
   Status colors — intentionally independent of the brand palette so
   "sold" always reads the same regardless of a per-estate theme.
   ========================================================================== */
.status-badge-available { background-color: var(--re-status-available); }
.status-badge-reserved { background-color: var(--re-status-reserved); }
.status-badge-sold,
.status-badge-rented { background-color: var(--re-status-sold); }
.status-badge-unavailable { background-color: var(--re-status-unavailable); }

/* ==========================================================================
   Site-plan layout image + pins
   ========================================================================== */
.layout-image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: crosshair;
    user-select: none;
}

.layout-image {
    display: block;
    max-width: 100%;
    border-radius: var(--re-radius-sm);
    border: 1px solid var(--re-border);
}

/* A map-pin glyph (Bootstrap Icons' geo-alt-fill) anchored by its tip:
   left/top place the tip at the stored (x%, y%), then the transform
   shifts the icon up-and-over so the point — not the icon's center —
   lands exactly on that coordinate. */
.layout-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    font-size: 1.85rem;
    line-height: 1;
    cursor: pointer;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
    transition: transform .15s ease, filter .15s ease;
}

.layout-pin:hover {
    transform: translate(-50%, -100%) scale(1.15);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4));
}

.layout-pin--available { color: var(--re-status-available); }
.layout-pin--reserved { color: var(--re-status-reserved); }
.layout-pin--sold,
.layout-pin--rented { color: var(--re-status-sold); }
.layout-pin--unavailable { color: var(--re-status-unavailable); }

.layout-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: .25rem;
    vertical-align: middle;
}

.layout-legend-dot--available { background-color: var(--re-status-available); }
.layout-legend-dot--reserved { background-color: var(--re-status-reserved); }
.layout-legend-dot--sold,
.layout-legend-dot--rented { background-color: var(--re-status-sold); }
.layout-legend-dot--unavailable { background-color: var(--re-status-unavailable); }

/* Leaflet divIcon markers — same geo-alt-fill glyph, colored inline per
   status by public/js/public.js since Leaflet icons render outside any
   class scope we control from here. */
.leaflet-status-marker i {
    font-size: 1.75rem;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}

.chat-message {
    max-width: 75%;
    padding: .5rem .85rem;
    border-radius: .75rem;
    background-color: var(--bs-tertiary-bg, #f1f1f1);
}

.chat-message-mine {
    margin-left: auto;
    background-color: rgba(var(--bs-primary-rgb), .12);
}

.chat-message-body {
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1040;
}

.chat-bubble-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.chat-bubble-toggle:hover {
    filter: brightness(1.08);
}

.chat-bubble-panel {
    width: 320px;
    max-width: calc(100vw - 2rem);
    background-color: var(--bs-body-bg, #fff);
    border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .3);
    overflow: hidden;
    margin-bottom: .75rem;
}

.chat-bubble-header {
    background-color: var(--bs-primary);
    color: #fff;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: .95rem;
}

.chat-bubble-messages {
    max-height: 320px;
    min-height: 160px;
    overflow-y: auto;
    padding: .75rem;
}

.chat-bubble-messages .chat-message {
    max-width: 90%;
}

.chat-bubble-footer {
    border-top: 1px solid var(--bs-border-color, #e5e5e5);
    padding: .6rem;
}

/* CRM pipeline board — bounded so it reads as one distinct widget (clear
   edges, own scrollbar) instead of cards bleeding past the viewport with no
   indication there's more to scroll to. Each column also scrolls internally
   so one busy stage can't stretch the whole page to several screens tall. */
.pipeline-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.pipeline-column {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pipeline-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.pipeline-column-body {
    max-height: calc(100vh - 340px);
    min-height: 100px;
    overflow-y: auto;
    padding-right: .25rem;
}

.pipeline-board::-webkit-scrollbar,
.pipeline-column-body::-webkit-scrollbar {
    height: 10px;
    width: 8px;
}

.pipeline-board::-webkit-scrollbar-thumb,
.pipeline-column-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .25);
    border-radius: 999px;
}

.pipeline-board::-webkit-scrollbar-track,
.pipeline-column-body::-webkit-scrollbar-track {
    background: transparent;
}
