/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* Premium Palette */
    --primary: #4F46E5;
    /* Indigo-600 */
    --primary-hover: #4338ca;
    --secondary: #EC4899;
    /* Pink-500 */
    --accent: #8B5CF6;
    /* Violet-500 */

    --dark-bg: #F3F4F6;
    /* Cool Grey 100 */
    --panel-bg: rgba(255, 255, 255, 0.95);

    --text-color: #1F2937;
    /* Grey 900 */
    --text-muted: #6B7280;
    /* Grey 500 */

    --border-color: #E5E7EB;
    /* Grey 200 */

    --header-height: 80px;
    /* Taller header for premium feel */
    --footer-height: 50px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] {
    --primary: #6366F1;
    --primary-hover: #4F46E5;
    --dark-bg: #111827;
    --panel-bg: rgba(31, 41, 55, 0.95);
    --text-color: #F9FAFB;
    --text-muted: #9CA3AF;
    --border-color: #374151;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

body,
html {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
    /* Modern Geometric Sans */
    background-color: var(--dark-bg);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* Map page specific overflow lock */
.map-body {
    overflow: hidden;
}

/* Header */
.app-header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Force body scroll for auth pages if content exceeds viewport */
.nature-bg {
    overflow: hidden !important;
    /* Prevent double scrollbars */
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.nature-bg .auth-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 20px;
}

.header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.header-logo {
    font-size: 2.2rem;
    line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    animation: earth-spin 60s linear infinite;
    /* Slower, smoother spin */
}

@keyframes earth-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.brand-title .highlight {
    background: linear-gradient(90deg, #2ecc71, #27ae60, #a8e063, #56ab2f, #2ecc71);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: greenery-shimmer 3s linear infinite;
}

.brand-title::after {
    content: '🌿';
    display: inline-block;
    font-size: 1rem;
    margin-left: 5px;
    animation: sway 3s ease-in-out infinite alternate;
    transform-origin: bottom center;
    vertical-align: middle;
}

@keyframes greenery-shimmer {
    to {
        background-position: 200% center;
    }
}

.brand-slogan {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
    display: block;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.header-center {
    flex: 1;
    max-width: 500px;
    margin: 0 20px;
    position: relative;
}

.search-container {
    width: 100%;
    position: relative;
}

/* Search Bar */
#searchInput {
    width: 100%;
    padding: 12px 20px;
    border-radius: 50px;
    /* Pill shape */
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-color);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    /* Ensure padding doesn't add to width */
}

#searchInput:focus {
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    /* Focus ring */
    border-color: var(--primary);
    background: #fff;
    width: 100%;
    /* Reset to 100% just in case */
    margin: 0;
    /* Remove any negative margins */
}

.search-results {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    margin-top: 8px;
}

.search-result-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.1s;
}

.search-result-item:hover {
    background: #F9FAFB;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item .icon {
    font-size: 1.2rem;
    background: #EEF2FF;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Footer & Header adjustments */
.app-header {
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    /* ... */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.brand-slogan {
    color: #666;
}

.social-btn {
    display: none;
}

/* Auth Pages (Light) */
/* Auth Pages (Premium) */
.auth-container {
    background: radial-gradient(circle at top right, #EEF2FF, #F3F4F6);
    min-height: 100vh;
    padding: 20px;
}

.auth-box {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl);
    padding: 40px;
    transition: transform 0.3s ease;
}

.auth-box:hover {
    transform: translateY(-5px);
}

.form-group label {
    color: #555;
    font-weight: 500;
}

.form-control {
    background: #fff;
    border: 1px solid #ccc;
    color: #333;
    width: 100%;
    padding: 10px 15px;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

.text-muted {
    color: #666;
}

.title {
    color: #333;
}

/* Dashboard / Sidebar */
.sidebar {
    background: #fff;
    border-right: 1px solid var(--border-color);
}

.sidebar-nav a {
    color: #555;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: #f0f0f0;
    color: var(--primary);
}

.main-content {
    background: #f9f9f9;
}

.card {
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.card-header {
    color: #333;
    border-bottom: 1px solid #eee;
}

table {
    color: #333;
}

th,
td {
    border-bottom: 1px solid #eee;
}

/* Modal Content */
.modal-content {
    background: var(--panel-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

/* Map Action Button */
.map-action-btn {
    color: #fff;
    /* Keep text white on colored button */
}

/* Password Toggle */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    padding-right: 40px;
    /* Make space for eye icon */
}

.password-toggle {
    position: absolute;
    right: 10px;
    cursor: pointer;
    color: #777;
    user-select: none;
}

.password-toggle:hover {
    color: #333;
}

#searchInput:focus {
    box-shadow: 0 0 0 2px var(--secondary);
    border-color: var(--secondary);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 5px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 2000;
}

.search-result-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-result-item:hover {
    background: #f9f9f9;
}

.search-result-item .icon {
    font-size: 1.2rem;
}

.search-result-item strong {
    color: #1a73e8;
    /* Google Blue */
    font-weight: 600;
}

.search-result-item small {
    color: #000000;
}

.request-loader {
    padding: 10px;
    text-align: center;
    color: #888;
}

.header-right {
    display: flex;
    gap: 10px;
}

/* Map Container */
#map-container {
    flex-grow: 1;
    /* Takes remaining space */
    position: relative;
    width: 100%;
    height: auto;
    /* Handled by flex */
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Footer */
.app-footer {
    height: auto;
    min-height: var(--footer-height);
    background: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    padding: 5px 30px;
    position: sticky;
    bottom: 0;
    z-index: 1000;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    /* Prevents being squished */
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.footer-links a {
    color: var(--text-color);
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.2s;
}

.footer-links a:visited {
    color: var(--text-color);
}

.footer-links a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.social-btn {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: var(--text-color);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: var(--panel-bg);
    text-decoration: none;
    margin: 0 5px;
    font-size: 0.8rem;
    transition: background 0.3s;
}

.social-btn:hover {
    background: var(--primary);
    color: var(--panel-bg);
}

.footer-copyright {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 5px;
}

/* --- Existing Modal & General Styles --- */

/* Modern Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary), #4338ca);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
    filter: brightness(1.1);
}

.btn:active {
    transform: translateY(0);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

/* Secondary / Outline Buttons (if any) */
.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--primary);
    color: #fff;
}

/* Modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: #1e1e1e;
    padding: 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    border: 1px solid var(--border-color);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-backdrop.active .modal-content {
    transform: scale(1);
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
    margin: 10px 0;
}

/* Leaflet Overrides */
/* Modern Leaflet Controls */
.leaflet-control-zoom,
.leaflet-control-rotate,
.leaflet-bar {
    border: none !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

/* Leaflet Control Overrides */
.leaflet-control-zoom a,
.leaflet-control-rotate a,
.leaflet-bar a {
    background-color: var(--panel-bg) !important;
    /* Use background-color to preserve background-image of Draw plugin */
    color: var(--text-color) !important;
    transition: all 0.2s !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 16px !important;
    /* Ensure text/emoji icons are centered */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Fullscreen Custom Icon */
.leaflet-control-fullscreen a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
}

/* Premium Draw Icons (SVG Replacements for centering) */
.leaflet-draw-draw-polygon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M12 2L2 8l4 14h12l4-14z'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
}

.leaflet-draw-draw-rectangle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
}

.leaflet-draw-edit-edit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
}

/* Active State for Draw Buttons */
.leaflet-draw-toolbar a.leaflet-draw-toolbar-button-enabled {
    background-color: var(--primary) !important;
    /* Invert color logic would be needed for SVG fill, but we can just use a lighter BG or filter */
    filter: brightness(0.9);
}

.leaflet-control-zoom a:hover,
.leaflet-control-rotate a:hover,
.leaflet-bar a:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* For hover on SVG icons, we might want to invert color, but SVGs are static.
   Simple fix: use brightness filter or keep as is. The icon is grey, on primary it might be dark on dark.
   Let's change the SVG color to darker grey or keep it.
   Actually, if I hover, background is primary (Indigo). Grey icon on Indigo is okay-ish.
   For true premium, I'd swap the icon to white on hover.
   But that requires swapping the background image on hover.
   I'll add hover rules for that. */

.leaflet-draw-draw-polygon:hover,
.leaflet-draw-toolbar a.leaflet-draw-toolbar-button-enabled.leaflet-draw-draw-polygon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2L2 8l4 14h12l4-14z'/%3E%3C/svg%3E") !important;
}

.leaflet-draw-draw-rectangle:hover,
.leaflet-draw-toolbar a.leaflet-draw-toolbar-button-enabled.leaflet-draw-draw-rectangle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3C/svg%3E") !important;
}

.leaflet-draw-edit-edit:hover,
.leaflet-draw-toolbar a.leaflet-draw-toolbar-button-enabled.leaflet-draw-edit-edit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") !important;
}

.custom-rotate-btn {
    width: 40px;
    height: 40px;
    background: var(--panel-bg);
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 10px;
}

.custom-rotate-btn:hover {
    transform: rotate(45deg);
    color: var(--primary);
}

.leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #aaa !important;
}

/* Popup Styles */
.leaflet-popup-content-wrapper {
    background: #222;
    color: #fff;
    border-radius: 8px;
}

.leaflet-popup-tip {
    background: #222;
}

.popup-logo {
    display: block;
    margin: 0 auto 10px;
    border-radius: 4px;
}

.popup-btn {
    display: block;
    text-align: center;
    margin-top: 5px;
    color: var(--secondary);
    text-decoration: none;
    font-size: 0.9rem;
}

/* Auth/Dashboard/Table Utils (Keep generic classes) */
/* Auth/Dashboard/Table Utils (Generic classes) */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: transparent;
    /* Background handled by nature-bg on body */
    position: relative;
    z-index: 20;
    overflow-y: auto;
    /* Allow scrolling per container */
}

/* Force body scroll for auth pages if content exceeds viewport */
.nature-bg {
    overflow-y: auto !important;
}

.auth-box {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid #eee;
    margin: auto;
    /* proper centering with flex */
}

@media (max-width: 480px) {
    .auth-box {
        padding: 20px;
        max-width: 100%;
    }

    .title {
        font-size: 1.3rem;
    }
}

/* Form Elements */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 191, 165, 0.1);
    outline: none;
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

/* Messaging System Styles */
.messenger-container {
    display: flex;
    height: calc(100vh - 80px);
    margin-top: 80px;
    background: var(--bg-color);
    overflow: hidden;
}

.messenger-sidebar {
    width: 350px;
    background: var(--panel-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.messenger-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.messenger-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.conversation-list {
    flex: 1;
    overflow-y: auto;
}

.conversation-item {
    display: flex;
    padding: 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.conversation-item:hover, .conversation-item.active {
    background: var(--hover-bg);
}

.conversation-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.conversation-details {
    flex: 1;
    overflow: hidden;
}

.conversation-details h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
    color: var(--text-color);
}

.conversation-details p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messenger-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
}

.chat-header {
    padding: 20px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header-info {
    display: flex;
    align-items: center;
}

.chat-header-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 15px;
}

.chat-header-info h3 {
    margin: 0;
    font-size: 1.2rem;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.message-received {
    align-self: flex-start;
    background: var(--panel-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

.message-sent {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--primary), #4338ca);
    color: white;
    border-bottom-right-radius: 4px;
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 5px;
    text-align: right;
}

.message-sent .message-time {
    color: rgba(255, 255, 255, 0.7);
}

.chat-input-area {
    padding: 20px;
    background: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-input-area input {
    flex: 1;
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    outline: none;
}

.chat-input-area button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.chat-input-area button:hover {
    transform: scale(1.05);
}

.chat-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--text-muted);
}

.chat-placeholder i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.block-notice {
    padding: 15px;
    text-align: center;
    background: #fee2e2;
    color: #ef4444;
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .block-notice {
    background: rgba(239, 68, 68, 0.1);
}

.text-center {
    text-align: center;
}

.mt-3 {
    margin-top: 1rem;
}

.text-muted {
    color: #666;
}

.link {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 500;
}

.link:hover {
    text-decoration: underline;
}

.title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.subtitle {
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
}

/* Restored Dashboard Styles */
/* Restored Dashboard Styles (Light Theme) */
.dashboard-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-columns: 280px 1fr;
    /* Wider sidebar */
    min-height: calc(100vh - var(--header-height));
}

/* Sidebar */
.sidebar {
    background: #fff;
    border-right: 1px solid var(--border-color);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 900;
}

.sidebar h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 16px;
    margin-top: 24px;
    font-weight: 600;
}

.sidebar h3:first-child {
    margin-top: 0;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.95rem;
}

.sidebar-nav a:hover {
    background: #EEF2FF;
    color: var(--primary);
    transform: translateX(4px);
}

.sidebar-nav a.active {
    background: linear-gradient(135deg, var(--primary), #4338ca);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.sidebar-nav a i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

/* Mobile Badge in Sidebar */
.sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* Main Content Area */
.main-content {
    padding: 32px;
    background: var(--dark-bg);
}

.card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

/* Tables */
/* Modern Tables */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
}

table th {
    background: #F9FAFB;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 16px;
    border-bottom: 2px solid var(--border-color);
    text-align: left;
}

table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    vertical-align: middle;
    font-size: 0.95rem;
}

table tr:last-child td {
    border-bottom: none;
}

table tr:hover td {
    background: #F9FAFB;
}

/* Table Responsive Wrapper */
.table-responsive {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

/* Map Action Button (Floating) */
.map-action-btn {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 12px 24px;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: none;
    animation: fadeIn 0.3s ease;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

.map-action-btn:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Nature Animation: Swaying Trees on Login Box */
.login-page,
.login-page .auth-container,
.register-page,
.register-page .auth-container {
    background: #ffffff !important;
}

.nature-scene {
    position: relative;
    height: 80px;
    margin-bottom: 20px;
    border-bottom: 3px solid #e0e0e0;
    overflow: hidden;
    text-align: center;
}

.tree {
    position: absolute;
    bottom: -5px;
    transform-origin: bottom center;
    animation: sway 3s ease-in-out infinite alternate;
    user-select: none;
}

.tree-1 {
    left: 20%;
    font-size: 2.5rem;
    animation-duration: 3.5s;
}

.tree-2 {
    left: 50%;
    font-size: 3.5rem;
    transform: translateX(-50%) rotate(0deg);
    animation-name: sway-center;
    /* Custom for centered element to keep it centered */
    animation-duration: 4s;
}

.tree-3 {
    left: 80%;
    font-size: 2.2rem;
    animation-duration: 3.2s;
    animation-delay: 0.5s;
}

.tree-4 {
    left: 35%;
    font-size: 1.8rem;
    z-index: 2;
    animation-duration: 2.8s;
    animation-delay: 1s;
}

.tree-5 {
    left: 65%;
    font-size: 2.0rem;
    z-index: 2;
    animation-duration: 3.8s;
    animation-delay: 1.5s;
}

.tree-6 {
    left: 5%;
    font-size: 1.6rem;
    animation-duration: 3.0s;
    animation-delay: 0.2s;
}

@keyframes sway {
    0% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(5deg);
    }
}

@keyframes sway-center {
    0% {
        transform: translateX(-50%) rotate(-3deg);
    }

    100% {
        transform: translateX(-50%) rotate(3deg);
    }
}

/* Wind Flow Particles */

/* Bought Property List */
.property-list-container {
    position: absolute;
    top: 325px;
    /* Below header/search and map controls */
    left: 10px;
    width: 260px;
    max-height: calc(100vh - 150px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.property-list-header {
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.property-list-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #333;
    font-weight: 600;
}

.property-list-content {
    overflow-y: auto;
    max-height: 230px;
    /* Approx height for 3 items (74px * 3 + padding) */
    padding: 10px;
}

.property-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.no-properties {
    padding: 20px 10px;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

.property-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

.property-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: #f0f0f0;
}

.property-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 191, 165, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.property-info {
    flex: 1;
    min-width: 0;
}

.property-name {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.property-info small {
    color: #777;
    font-size: 0.75rem;
}

/* Mobile Toggle Button */
.mobile-property-btn {
    display: none;
    /* Hidden on desktop */
    position: absolute;
    top: 520px;
    /* Below location button (approx) */
    left: 0px;
    z-index: 1000;
    padding: 10px 15px;
    background: #fff;
    border: none;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    align-items: center;
    gap: 8px;
}

/* Premium Cards & Trade Grid */
.dashboard-card,
.trade-card {
    background: #fff !important;
    /* Override inline/internal */
    border-radius: var(--radius-xl) !important;
    padding: 24px;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.dashboard-card:hover,
.trade-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-xl) !important;
    border-color: rgba(79, 70, 229, 0.3) !important;
}

.trade-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 24px !important;
}

.trade-card .price-tag {
    background: linear-gradient(135deg, var(--secondary), #be185d) !important;
    color: #fff !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    box-shadow: 0 4px 6px rgba(236, 72, 153, 0.3) !important;
    z-index: 2;
}

.trade-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    padding-right: 60px;
    /* Space for price tag */
}

.trade-card p {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.trade-card .buy-now-btn {
    width: 100% !important;
    background: linear-gradient(135deg, var(--primary), #4338ca) !important;
    color: #fff !important;
    padding: 12px !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin-top: auto !important;
}

.trade-card .buy-now-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4) !important;
}

/* Responsive adjustments */
.mobile-only {
    display: none;
}

/* Property List Container (Desktop & Mobile) */
.property-list-container {
    position: fixed;
    top: 75%;
    left: -280px;
    /* Adjusted to sit slightly more right (24px gap instead of 9px) */
    /* right: 24px; Removed to avoid conflict */
    /* Floating from right edge */
    bottom: 0px;
    width: 270px;
    max-height: calc(100vh - 150px);
    /* Fit between header and footer */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    /* Fully rounded */
    z-index: 1000;
    transform: translate(120%, -50%);
    /* Start off-screen right, centered vertically */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Elastic slide */
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
}

.property-list-container.active {
    transform: translate(0, -50%);
    /* Slide in to position */
}

.property-list-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
}

.property-list-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.property-list-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.property-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.property-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.property-logo {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: block !important;
    /* Force visibility */
}

.property-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EEF2FF;
    border-radius: 50%;
    font-size: 1.2rem;
}

.property-info {
    flex: 1;
    overflow: hidden;
}

.property-name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.property-info small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.close-list-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
}

/* Toggle Btn (Floating) - Now visible on Desktop too */
.mobile-property-btn {
    position: fixed;
    bottom: 100px;
    /* Above footer */
    right: 10px;
    /* Aligned with container */
    left: auto;
    transform: none;
    /* Reset center transform */
    background: linear-gradient(135deg, var(--primary), #4338ca);
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 900;
    display: none;
    /* Hidden on desktop by default */
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-property-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .property-list-container {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        width: 100vw;
        /* Explicitly full width */
        max-height: 60vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        /* Hidden by default */
        margin: 0;
        /* Remove potential margins */
    }

    .property-list-container.active {
        transform: translateY(0);
    }

    .mobile-property-btn {
        display: flex;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 80px; /* Sits just above the footer */
        top: auto;
        right: auto;
        width: calc(100% - 40px);
        max-width: 360px;
        justify-content: center;
        font-size: 1rem;
        padding: 14px 20px;
    }

    .mobile-only {
        display: block;
    }

    .close-list-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        padding: 0 10px;
        color: #666;
    }

    /* Adjust Leaflet controls to not overlap if needed */
    .leaflet-control-container .leaflet-top.leaflet-left {
        top: 60px;
        /* Push down if needed, but header handles it */
    }
}

/* --- Responsive Styles --- */

/* Mobile Navigation */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
    z-index: 1100;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

/* Compass Control */
.leaflet-control-compass {
    margin-top: 10px !important;
    width: auto !important;
    height: auto !important;
}

.leaflet-bar .leaflet-control-compass-btn {
    background-color: #fff;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    padding: 0 !important;
}

.leaflet-bar .leaflet-control-compass-btn:last-child {
    border-bottom: none;
}

.leaflet-bar .leaflet-control-compass-btn:hover {
    background-color: #f4f4f4 !important;
}

.leaflet-bar .compass-icon {
    width: 26px !important;
    height: 26px !important;
    /* SVG with N, E, S, W labels and a needle */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='50' r='48' fill='white' stroke='%23ccc' stroke-width='1' /%3E%3Ctext x='50' y='18' text-anchor='middle' font-size='16' font-weight='bold' fill='%23ff4444' stroke='none'%3EN%3C/text%3E%3Ctext x='85' y='55' text-anchor='middle' font-size='14' font-weight='bold' fill='%23666' stroke='none'%3EE%3C/text%3E%3Ctext x='50' y='90' text-anchor='middle' font-size='14' font-weight='bold' fill='%23666' stroke='none'%3ES%3C/text%3E%3Ctext x='15' y='55' text-anchor='middle' font-size='14' font-weight='bold' fill='%23666' stroke='none'%3EW%3C/text%3E%3Cpolygon points='50,25 60,50 50,45 40,50' fill='%23ff4444' stroke='none'/%3E%3Cpolygon points='50,75 60,50 50,45 40,50' fill='%23ccc' stroke='none'/%3E%3Ccircle cx='50' cy='48' r='2' fill='white' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain !important;
    transition: transform 0.1s linear;
    /* Sync with container or handle independently */
}

/* Mobile Friendly Compass */
@media (max-width: 768px) {
    .leaflet-control-compass-btn {
        width: 24px;
        /* Matches rotation btn */
        height: 24px;
    }

    .compass-icon {
        width: 20px;
        height: 20px;
    }
}


.mobile-menu-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-2xl);
    z-index: 2000;
    padding: 80px 24px 24px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Admin Specific Overrides */
.user-card {
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s !important;
}

.user-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

/* Re-check HTML: <button class="close-mobile-menu" onclick="toggleMobileMenu()">×</button> */

.close-mobile-menu {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-color);
    cursor: pointer;
    line-height: 1;
    z-index: 2001;
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav a {
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-color);
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    font-weight: 500;
    border-bottom: none;
    transition: background 0.2s;
}

.mobile-nav a:hover {
    background: #EEF2FF;
    color: var(--primary);
}

.mobile-nav a:hover {
    background: #f9f9f9;
    color: var(--primary);
}


.close-mobile-menu {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: #000;
    cursor: pointer;
    z-index: 1001;
    line-height: 1;
}

/* Media Queries */
@media (max-width: 768px) {

    /* Header & Nav */
    /* Header & Nav */
    .app-header {
        padding: 5px 10px;
        height: auto;
        min-height: auto;
    }

    .brand-slogan {
        display: block;
        font-size: 0.7rem;
        margin-top: -2px;
        /* Pull it up closer to title */
    }

    .header-logo {
        font-size: 1.5rem;
    }

    .brand-title {
        font-size: 1rem;
    }

    .header-right {
        display: none;
        /* Hide default desktop nav */
    }

    .mobile-menu-btn {
        display: block;
    }

    /* Search Bar Overlay */
    .header-center {
        display: block;
        position: absolute;
        top: 50px;
        /* Below thin header */
        left: 10px;
        right: 10px;
        margin: 0;
        padding: 0;
        background: transparent;
        z-index: 999;
        pointer-events: none;
        /* Let clicks pass through around input */
    }

    .search-container {
        pointer-events: auto;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        background: #fff;
        border-radius: 20px;
    }

    #map-container {
        margin-top: 0;
        /* No gap */
        flex-grow: 1;
        height: auto;
        position: relative;
    }


    /* Map Controls */
    .leaflet-control-container .leaflet-top {
        top: 60px;
        /* Push controls down below search */
    }

    .leaflet-touch .leaflet-control-layers,
    .leaflet-touch .leaflet-bar {
        border: 2px solid rgba(0, 0, 0, 0.2);
    }

    /* Modals */
    .modal-content {
        width: 95%;
        margin: 10px;
        padding: 20px;
    }

    /* Dashboard */
    .dashboard-layout {
        display: block;
        /* Stack column */
        height: auto;
    }

    .main-content {
        padding: 60px 15px 15px 15px;
        /* Top padding for toggle button area */
        height: auto;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        /* Start at 0, move with transform */
        transform: translateX(-100%);
        /* Hide fully */
        width: 250px;
        height: 100%;
        background: #fff;
        z-index: 1050;
        transition: transform 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    /* Dashboard Tables */
    .card {
        overflow-x: auto;
    }

    table {
        min-width: 600px;
        /* Force horizontal scroll */
        display: table;
    }

    thead,
    tbody,
    th,
    td,
    tr {
        display: table-row;
    }

    thead {
        display: table-header-group;
    }

    tbody {
        display: table-row-group;
    }

    th,
    td {
        display: table-cell;
    }
}

/* Nature Animation Adjustments */
.nature-scene {
    height: 60px;
    /* Reduced height */
}

.tree {
    bottom: -2px;
}

/* End of global styles */

@media (max-width: 768px) {

    /* Nature Animation Adjustments for Mobile */
    .nature-scene {
        height: 60px;
    }

    .tree {
        bottom: -2px;
    }

    .tree-1 {
        font-size: 1.8rem;
    }

    .tree-2 {
        font-size: 2.5rem;
    }

    .tree-3 {
        font-size: 1.6rem;
    }

    .tree-4 {
        font-size: 1.2rem;
    }

    .tree-5 {
        font-size: 1.4rem;
    }

    .tree-6 {
        font-size: 1.1rem;
    }

    .app-footer {
        font-size: 0.7rem;
        padding: 5px 10px;
    }
}

.wind-flow {
    position: absolute;
    top: 30%;
    left: -50px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 191, 165, 0.4), transparent);
    animation: flow 5s linear infinite;
}

.wind-flow::after {
    content: '';
    position: absolute;
    top: 15px;
    left: -30px;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 191, 165, 0.3), transparent);
}

@keyframes flow {
    0% {
        left: -100px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

/* Ensure auth box is above animation if needed, but here animation is INSIDE box */
.auth-box {
    position: relative;
    z-index: 10;
}

/* Leaflet Draw Editing Handles */
.leaflet-editing-icon {
    width: 8px !important;
    height: 8px !important;
    margin-left: -4px !important;
    margin-top: -4px !important;
    border-radius: 2px;
    background-color: #fff;
    border: 1px solid #666;
}

/* Premium Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    opacity: 1;
}

.modal-content {
    background: var(--panel-bg);
    padding: 0;
    /* Content padding moved to inner containers */
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-2xl);
    position: relative;
    border: 1px solid var(--border-color);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.modal.show .modal-content {
    transform: scale(1);
}

.close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 24px;
    font-weight: bold;
    color: var(--text-muted);
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

.close:hover {
    color: var(--text-color);
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 20px 24px;
    background: #F9FAFB;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Admin Modal Responsive Styles */
.admin-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.admin-modal-backdrop.active {
    opacity: 1;
}

.admin-modal-content {
    background: white;
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    position: relative;
    z-index: 100000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.admin-modal-backdrop.active .admin-modal-content {
    transform: scale(1);
}

.admin-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 480px) {
    .admin-modal-content {
        padding: 20px;
        width: 95%;
    }

    .admin-modal-footer {
        flex-direction: column-reverse;
        /* Stack buttons, action on top or bottom? Standard is separate */
        flex-direction: row;
        /* Keep row but allowing wrap if needed */
    }

    .admin-modal-footer button {
        flex: 1;
        padding: 12px;
    }
}

/* Rotation Control Styles */
.leaflet-control-rotate-btn {
    background-color: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    color: #333;
    display: block;
    font-size: 18px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}

.leaflet-control-rotate-btn:hover {
    background-color: #f4f4f4;
}

.leaflet-control-rotate-btn:last-child {
    border-bottom: none;
}

.rotate-reset {
    color: blue;
    font-weight: bold;
}

@media (max-width: 768px) {

    .leaflet-control-container .leaflet-bar a.leaflet-control-rotate-btn,
    .leaflet-control-container .leaflet-bar a.leaflet-control-compass-btn {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 16px !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .leaflet-control-container .leaflet-bar .compass-icon {
        width: 26px !important;
        height: 26px !important;
    }

    /* Push controls down on mobile if needed, or specifically the rotation control */
    .leaflet-control-rotate-btn:first-child {
        margin-top: 3px;
    }

    .leaflet-top.leaflet-right {
        top: 0px;
        /* Push all top-right controls down slightly on mobile */
    }

    .leaflet-bar {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    }
}

/* Mobile Search Styles */
.mobile-search-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    margin-right: 15px;
    padding: 5px;
    color: var(--text-color);
}

@media (max-width: 768px) {
    .mobile-search-btn {
        display: block;
    }

    .header-center {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background: #fff;
        padding: 10px 15px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        z-index: 999;
        margin: 0;
        max-width: none;
        box-sizing: border-box;
    }

    .header-center.mobile-active {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Trade Zone specific styles */
.trade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.trade-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.trade-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.8);
}

.price-tag {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
    margin: 10px 0;
}

.owner-info {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 15px;
}

.buy-now-btn {
    background: linear-gradient(45deg, #ff9966, #ff5e62);
    color: white;
    width: 100%;
    border: none;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s;
}

.buy-now-btn:hover {
    opacity: 0.9;
}

.trade-container {
    flex: 1;
    padding-top: 20px;
    background: #f9f9f9;
}

@media (max-width: 768px) {
    .trade-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px 0;
    }

    .trade-card {
        padding: 15px;
    }

    .main-container-div {
        padding: 10px !important;
    }
    
    #map-container {
        margin-top: 0 !important;
    }
}
/* Custom Confirm Modal */
.custom-confirm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: customFadeIn 0.2s ease forwards;
}
.custom-confirm-modal {
    background: var(--panel-bg);
    padding: 25px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    max-width: 400px;
    width: 90%;
    text-align: center;
    color: var(--text-color);
    font-family: "Outfit", sans-serif;
    transform: scale(0.9);
    animation: customPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.custom-confirm-modal p {
    font-size: 1.1rem;
    margin: 0 0 20px 0;
}
.custom-confirm-btns {
    display: flex;
    gap: 15px;
    justify-content: center;
}
.custom-confirm-btns .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    font-family: "Outfit", sans-serif;
}
.custom-confirm-btns .btn-cancel {
    background: #444;
    color: #fff;
}
.custom-confirm-btns .btn-cancel:hover {
    background: #555;
}
.custom-confirm-btns .btn-confirm {
    background: var(--primary);
    color: #fff;
}
.custom-confirm-btns .btn-confirm:hover {
    filter: brightness(1.1);
}
@keyframes customFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Dark Mode Overrides for Auth Pages & Forms */
[data-theme="dark"] .auth-container {
    background: radial-gradient(circle at top right, #1f2937, #111827);
}

[data-theme="dark"] .auth-box {
    background: rgba(31, 41, 55, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .form-control {
    background: var(--dark-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .form-group label {
    color: var(--text-muted);
}

[data-theme="dark"] .title {
    color: var(--text-color);
}

/* Messenger Responsive Styles */
@media (max-width: 768px) {
    .messenger-sidebar {
        width: 100%;
        border-right: none;
    }
    
    .messenger-main {
        display: none;
        width: 100%;
    }
    
    .messenger-container.chat-active .messenger-sidebar {
        display: none;
    }
    
    .messenger-container.chat-active .messenger-main {
        display: flex;
    }
    
    .mobile-back-btn {
        display: block !important;
    }
}

.mobile-back-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    margin-right: 10px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.property-logo-overlay {
    object-fit: contain;
}