/* ============================================
   MATERIAL 3 EXPRESSIVE | Production System
   ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css");

:root {
    /* --- M3 Color Tokens (Teal/Terracotta Theme) --- */
    --md-sys-color-primary: #006a6a;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #6ff7f6;
    --md-sys-color-on-primary-container: #002020;
    
    --md-sys-color-secondary: #4a6363;
    --md-sys-color-secondary-container: #cce8e7;
    
    --md-sys-color-tertiary: #4b607c;
    --md-sys-color-tertiary-container: #d3e4ff;

    --md-sys-color-surface: #f4f7f6;
    --md-sys-color-surface-container: #ffffff;
    --md-sys-color-surface-variant: #dbe4e3;
    --md-sys-color-on-surface: #161d1d;
    --md-sys-color-on-surface-variant: #3f4948;
    
    --md-sys-color-outline: #6f7979;

    /* --- Shape Tokens --- */
    --md-sys-shape-corner-m: 12px;
    --md-sys-shape-corner-l: 16px;
    --md-sys-shape-corner-xl: 28px;
    --md-sys-shape-corner-full: 999px;

    /* --- Elevation --- */
    --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* --- Base Reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    padding-bottom: 80px; /* Space for Bottom Nav */
    overflow-x: hidden;
}

/* Desktop: Sidebar layout / Mobile: Bottom Nav layout */
@media (min-width: 900px) {
    body { padding-bottom: 0; padding-left: 80px; /* Rail Space */ }
}

/* --- Typography (M3 Typescale) --- */
.display-large { font-size: 57px; line-height: 64px; letter-spacing: -0.25px; font-weight: 800; }
.headline-large { font-size: 32px; line-height: 40px; font-weight: 700; }
.headline-medium { font-size: 28px; line-height: 36px; font-weight: 600; }
.title-medium { font-size: 16px; font-weight: 600; letter-spacing: 0.15px; }
.label-large { font-size: 14px; font-weight: 600; letter-spacing: 0.1px; }

/* --- Components --- */

/* 1. Search Bar (M3 Floating Pill) */
.m3-search-bar {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-full);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    box-shadow: var(--md-sys-elevation-3); /* Floating effect */
    transition: all 0.2s cubic-bezier(0.2, 0.0, 0, 1.0);
    margin-bottom: 24px;
    cursor: pointer;
}
.m3-search-bar:active { transform: scale(0.98); box-shadow: var(--md-sys-elevation-1); }
.m3-search-icon { font-size: 24px; color: var(--md-sys-color-on-surface-variant); margin-right: 12px; }
.m3-search-text { flex: 1; color: var(--md-sys-color-on-surface-variant); font-size: 16px; }
.m3-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px;}

/* 2. Filter Chips (Scrollable) */
.chip-group {
    display: flex; gap: 8px; overflow-x: auto; 
    padding: 4px 16px 16px 16px; /* Padding for scroll shadow */
    margin: 0 -16px; /* Bleed to edge */
    scrollbar-width: none;
}
.chip-group::-webkit-scrollbar { display: none; }

.m3-chip {
    height: 32px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 8px;
    padding: 0 16px;
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600;
    white-space: nowrap;
    color: var(--md-sys-color-on-surface-variant);
    background: transparent;
    transition: 0.2s;
}
.m3-chip.active {
    background: var(--md-sys-color-secondary-container);
    border-color: transparent;
    color: var(--md-sys-color-on-surface);
}

/* 3. Cards (M3 Elevated) */
.m3-card {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-xl); /* Big round corners */
    overflow: hidden;
    margin-bottom: 16px;
    transition: 0.3s;
    /* Subtle border in light mode instead of heavy shadow */
    border: 1px solid var(--md-sys-color-surface-variant);
}

.m3-card-image-container {
    position: relative;
    height: 240px;
    margin: 12px 12px 0 12px; /* Inner padding look */
    border-radius: var(--md-sys-shape-corner-l);
    overflow: hidden;
}

.m3-card-img { width: 100%; height: 100%; object-fit: cover; }

.m3-fab-mini {
    position: absolute; top: 12px; right: 12px;
    width: 40px; height: 40px;
    border-radius: 12px; /* Squircle */
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    color: var(--md-sys-color-on-surface);
    font-size: 20px;
}

.m3-card-content { padding: 16px; }

/* 4. Navigation Bar (Mobile Bottom) */
.m3-nav-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 80px;
    background: var(--md-sys-color-surface-container);
    display: flex; justify-content: space-around; align-items: center;
    z-index: 100;
    border-top: 1px solid var(--md-sys-color-surface-variant);
}

.m3-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 64px; cursor: pointer;
}

.m3-nav-icon-container {
    width: 64px; height: 32px;
    border-radius: 16px; /* Pill */
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}

.m3-nav-item.active .m3-nav-icon-container {
    background-color: var(--md-sys-color-secondary-container);
}
.m3-nav-item.active i { color: var(--md-sys-color-on-surface); }
.m3-nav-label { font-size: 12px; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }

/* Desktop Rail (Overrides Bottom Nav) */
@media (min-width: 900px) {
    .m3-nav-bar {
        top: 0; bottom: 0; left: 0; right: auto;
        width: 80px; height: 100vh;
        flex-direction: column;
        justify-content: center;
        border-top: none;
        border-right: 1px solid var(--md-sys-color-surface-variant);
        gap: 24px;
    }
    .container { max-width: 1200px; margin: 0 auto; }
    .grid-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }
}

/* Utilities */
.container { padding: 16px; }
.flex-row { display: flex; align-items: center; gap: 8px; }
.text-primary { color: var(--md-sys-color-primary); }

/* ... [Previous CSS Content] ... */

/* GLOBAL FIX: Remove Underlines */
a { text-decoration: none !important; color: inherit; }

/* 1. Header Actions Area */
.header-actions {
    display: flex; align-items: center; gap: 16px;
}

/* 2. List Your Property Button (M3 Tonal Button) */
.btn-list-property {
    height: 40px; padding: 0 24px;
    border-radius: 20px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-weight: 600; font-size: 14px;
    display: flex; align-items: center; gap: 8px;
    border: none; cursor: pointer;
    transition: 0.2s;
}
.btn-list-property:hover {
    background: var(--md-sys-color-primary-container);
    box-shadow: var(--md-sys-elevation-1);
}

/* 3. Profile Avatar Wrapper */
.profile-wrapper {
    position: relative; cursor: pointer;
}

/* 4. Profile Popup (Top Right) */
.profile-popup {
    position: absolute; top: 50px; right: 0;
    width: 260px;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-l);
    box-shadow: var(--md-sys-elevation-3);
    padding: 8px 0;
    display: none; z-index: 1000;
    flex-direction: column;
    transform-origin: top right;
    animation: scaleIn 0.2s ease;
    border: 1px solid var(--md-sys-color-surface-variant);
}
.profile-popup.show { display: flex; }

.popup-item {
    padding: 12px 24px; font-size: 14px; font-weight: 500;
    color: var(--md-sys-color-on-surface);
    display: flex; align-items: center; gap: 12px;
    transition: 0.2s; cursor: pointer;
}
.popup-item:hover { background: rgba(0,0,0,0.05); }
.popup-divider { height: 1px; background: var(--md-sys-color-outline); opacity: 0.2; margin: 8px 0; }

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* 5. Auth Forms (Login/Register) */
.auth-container {
    max-width: 400px; margin: 40px auto;
    padding: 32px;
    background: var(--md-sys-color-surface-container);
    border-radius: 28px;
    border: 1px solid var(--md-sys-color-surface-variant);
}
.auth-input {
    width: 100%; height: 56px;
    border-radius: 4px 4px 0 0;
    background: var(--md-sys-color-surface-variant);
    border: none; border-bottom: 2px solid var(--md-sys-color-outline);
    padding: 0 16px; font-size: 16px; margin-bottom: 16px;
    color: var(--md-sys-color-on-surface);
}
.auth-input:focus { border-bottom-color: var(--md-sys-color-primary); outline: none; background: rgba(0,0,0,0.08); }
.btn-primary-full {
    width: 100%; height: 48px; border-radius: 24px;
    background: var(--md-sys-color-primary); color: white;
    font-weight: 700; border: none; cursor: pointer;
    font-size: 16px; margin-top: 16px;
}

/* Desktop: Sidebar layout */
/*@media (min-width: 900px) {*/
    /* 1. Body: Create space for the fixed Sidebar (Rail) */
/*    body {*/
/*        padding-bottom: 0;*/
        padding-left: 80px; /* Exact width of the sidebar */
/*    }*/

    /* 2. Navigation Rail: Fixed to the left */
/*    .m3-nav-bar {*/
/*        top: 0; */
/*        bottom: 0; */
/*        left: 0; */
/*        right: auto;*/
        width: 80px; /* Fixed width */
/*        height: 100vh;*/
/*        flex-direction: column;*/
        justify-content: flex-start; /* Align items to top */
        padding-top: 24px; /* Add spacing at top */
/*        border-top: none;*/
/*        border-right: 1px solid var(--md-sys-color-surface-variant);*/
/*        gap: 32px;*/
/*    }*/

    /* 3. Container: Full Width Logic */
/*    .container {*/
        max-width: 100%; /* Allow it to stretch */
/*        width: 100%;*/
        margin: 0; /* Remove auto centering */
        padding: 24px 32px; /* Add breathing room */
/*    }*/

    /* 4. Grid Layout: Responsive Grid for Full Width */
/*    .grid-layout {*/
/*        display: grid;*/
        /* Auto-fill columns based on available width */
/*        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));*/
/*        gap: 24px;*/
/*    }*/
/*}*/