/* design tokens */
:root {
    /* brand */
    --brand-green:       #5CB030;
    --brand-green-dark:  #4A9526;
    --brand-green-light: #6ec93e;
    --brand-green-ring:  rgba(92, 176, 48, 0.3);
    --brand-blue:        #1a5a7e;

    /* grass scale */
    --grass-50:  #f0fdf4;
    --grass-100: #dcfce7;
    --grass-400: #4ade80;
    --grass-500: #22c55e;
    --grass-600: #16a34a;
    --grass-700: #15803d;

    /* neutrals */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* status */
    --red-50:    #fef2f2;
    --red-500:   #ef4444;
    --red-600:   #dc2626;
    --blue-50:   #eff6ff;
    --blue-500:  #3b82f6;
    --blue-600:  #2563eb;
    --amber-500: #f59e0b;
    --amber-600: #d97706;

    /* geometry */
    --radius-sm: 0.375rem;
    --radius:    0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --nav-height: 4rem;

    /* elevation */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow:    0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);

    /* z-index layers */
    --z-nav:     1000;
    --z-overlay: 1000;
    --z-drawer:  1050;
    --z-modal:   1100;
    --z-toast:   1200;

    --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* reset & base */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-800);
    background: var(--gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.leaflet-container { font-family: var(--font-sans); }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; color: var(--gray-900); line-height: 1.25; }
p { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; }

.container {
    width: 100%;
    max-width: 80rem;       
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.main { padding-top: var(--nav-height); }

/* full-viewport app shell (project view): lock the page so a stray
   tap on map controls can't scroll the body under the fixed navbar */
.body--app-shell {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    overscroll-behavior: none;
    position: fixed;
    width: 100%;
}

/* navbar */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    z-index: var(--z-nav);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--gray-100);
    box-shadow: var(--shadow-sm);
}
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
/* full-bleed variant used on the map page (no centered max-width) */
.navbar__inner--wide { padding: 0 1rem; }
@media (min-width: 640px) { .navbar__inner--wide { padding: 0 1.5rem; } }

.navbar__logo { display: inline-flex; align-items: center; gap: .5rem; }
.navbar__logo img { height: 2.25rem; }

.navbar__links { display: flex; align-items: center; gap: 1.5rem; }

.nav-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--gray-600);
    transition: color .2s;
}
.nav-link:hover { color: var(--brand-green); }

.navbar__user {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--gray-200);
}
.navbar__user-name { font-size: .875rem; color: var(--gray-500); }
@media (max-width: 480px) { .navbar__user-name { display: none; } }

.logout-btn {
    font-size: .875rem;
    font-weight: 500;
    color: var(--red-500);
    transition: color .2s;
}
.logout-btn:hover { color: var(--red-600); }

/* toast messages */
.messages {
    position: fixed;
    top: calc(var(--nav-height) + 1rem);
    right: 1rem;
    left: 1rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: opacity .3s ease;
}
@media (min-width: 640px) { .messages { left: auto; max-width: 24rem; } }

.message {
    padding: .75rem 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: .875rem;
    font-weight: 500;
    color: #fff;
}
.message--success { background: var(--brand-green); }
.message--error   { background: var(--red-500); }
.message--warning { background: var(--amber-500); }
.message--info    { background: var(--gray-700); }

/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
    min-height: 40px;
}
.btn--primary {
    background: var(--brand-green);
    color: #fff;
    border-color: var(--brand-green);
}
.btn--primary:hover { background: var(--brand-green-dark); border-color: var(--brand-green-dark); }

.btn--ghost {
    background: var(--gray-50);
    color: var(--gray-600);
    border-color: var(--gray-200);
}
.btn--ghost:hover { background: var(--gray-100); color: var(--gray-800); }

.btn--block { width: 100%; }
.btn__icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* forms (auth inputs reused across pages) */
.auth-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-300);
    color: var(--gray-800);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-input::placeholder { color: var(--gray-400); }
.auth-input:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px var(--brand-green-ring);
}

/* auth pages */
.auth-wrapper {
    min-height: 100vh;
    padding: 5.5rem 1rem 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 2rem;
    border-radius: 0.5rem;
    border: 2px solid var(--brand-green);
    color: var(--brand-green);
    font-weight: 600;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.auth-btn:hover {
    background-color: var(--brand-green);
    color: #fff;
    box-shadow: 0 4px 12px rgba(92, 176, 48, 0.25);
}
.auth-btn:active {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

.auth-link {
    color: var(--gray-800);
    font-weight: 600;
    font-size: 0.875rem;
    transition: color 0.2s;
}
.auth-link:hover { color: var(--brand-green); }

.auth-card {
    position: relative;
    z-index: 10;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 32rem;
    padding: 2.5rem 3rem;
    margin-top: auto;
    margin-bottom: auto;
}
@media (max-width: 480px) {
    .auth-card { padding: 2rem 1.5rem; margin-left: 0.5rem; margin-right: 0.5rem; }
}

.auth-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.auth-bg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 0;
}

/* auth navbar (simpler than the app navbar: logo + single Contact link) */
.auth-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid var(--gray-100);
    box-shadow: var(--shadow-sm);
}
.auth-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.auth-nav__logo img { height: 2.25rem; }

/* logo centered above the card */
.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.auth-logo img { height: 4rem; }
.auth-logo--lg { margin-bottom: 2rem; }

.auth-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    text-align: center;
    margin-bottom: 1.5rem;
}
.auth-subtext {
    font-size: .875rem;
    color: var(--gray-500);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* form layout */
.field { margin-bottom: 1.25rem; }
.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.field-grid .field { margin-bottom: 0; }
@media (max-width: 480px) {
    .field-grid { grid-template-columns: 1fr; gap: 0; }
    .field-grid .field { margin-bottom: 1.25rem; }
}

.field-label {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: .375rem;
}
.field-label .req { color: var(--red-500); }
.field-hint {
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--gray-400);
}

/* footer row: submit button on the left, links on the right */
.auth-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .5rem;
}
.auth-actions__links {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* buttons that should fill width and center (used on status pages) */
.auth-btn--block {
    display: flex;
    width: 100%;
    text-align: center;
}

/* Error / alert boxes inside the auth card */
.auth-alert {
    margin-bottom: 1.25rem;
    padding: .75rem;
    border-radius: var(--radius);
    font-size: .875rem;
    border: 1px solid transparent;
}
.auth-alert--error   { background: var(--red-50);  border-color: #fecaca; color: var(--red-600); }
.auth-alert--success { background: #f0fdf4;        border-color: #bbf7d0; color: #15803d; }
.auth-alert--warning { background: #fffbeb;        border-color: #fde68a; color: #b45309; }
.auth-alert--info    { background: var(--blue-50); border-color: #bfdbfe; color: #1d4ed8; }
.auth-alert p { margin: 0; }
.auth-alert--center { text-align: center; }

/* info box with a heading and bullet list (verification_sent) */
.auth-infobox {
    border-radius: var(--radius);
    background: var(--blue-50);
    border: 1px solid #bfdbfe;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: .875rem;
    color: #1d4ed8;
}
.auth-infobox__title { font-weight: 600; margin-bottom: .25rem; }
.auth-infobox ul { margin: 0; padding-left: 1.25rem; color: var(--blue-600); }
.auth-infobox li { margin-bottom: .25rem; }

/* circular status icon above a heading (success / error / info) */
.status-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    border: 1px solid transparent;
}
.status-icon svg { width: 2rem; height: 2rem; }
.status-icon--success { background: #f0fdf4;        border-color: #bbf7d0; color: var(--grass-500); }
.status-icon--error   { background: var(--red-50);  border-color: #fecaca; color: #f87171; }
.status-icon--info    { background: var(--blue-50); border-color: #bfdbfe; color: var(--blue-500); }

/* small helpers used on the auth pages */
.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }

/* contact page */
.page-narrow {
    max-width: 42rem;
    margin: 0 auto;
    padding: 4rem 1rem;
}
@media (min-width: 640px) { .page-narrow { padding: 4rem 1.5rem; } }

.page-header { text-align: center; margin-bottom: 2.5rem; }
.page-header h1 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: .5rem;
}
.page-header p { color: var(--gray-500); }

.card {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.form-block { margin-bottom: 1.25rem; }

.form-label-sm {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-bottom: .375rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* form control rendered by Django widgets on the contact form */
.form-control {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    color: var(--gray-800);
    font: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--brand-green);
    background: #fff;
}
textarea.form-control { resize: vertical; min-height: 7rem; }

.form-error { color: var(--red-500); font-size: .875rem; margin-top: .25rem; }

/* parcels dashboard (card grid) */
.page-wide {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}
@media (min-width: 640px) { .page-wide { padding: 2rem 1.5rem; } }
@media (min-width: 1024px) { .page-wide { padding: 2rem 2rem; } }

.page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.page-title-row h1 { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); }
.page-title-row .subtitle { font-size: .875rem; color: var(--gray-500); margin-top: .25rem; }

.parcel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px)  { .parcel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .parcel-grid { grid-template-columns: repeat(3, 1fr); } }

.parcel-card {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s;
}
.parcel-card:hover { box-shadow: var(--shadow-md); }

.parcel-card__preview {
    height: 12rem;
    background: var(--gray-100);
    position: relative;
    overflow: hidden;
}
.parcel-card__preview-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
}
.parcel-card__preview-placeholder svg { width: 3rem; height: 3rem; }

.parcel-card__body { padding: 1.25rem; }
.parcel-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.parcel-card__name { font-size: 1.125rem; font-weight: 600; color: var(--gray-900); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
}
.badge--shared { background: var(--blue-50); color: var(--blue-600); }

.parcel-card__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-50);
}

/* primary "View" button fills remaining width in the card footer */
.btn--view {
    flex: 1;
    background: var(--brand-green);
    color: #fff;
    border-color: var(--brand-green);
}
.btn--view:hover { background: var(--brand-green-dark); border-color: var(--brand-green-dark); }

/* square icon buttons (share / trash) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    border-radius: var(--radius);
    background: var(--gray-50);
    color: var(--gray-500);
    transition: background-color .2s, color .2s;
}
.icon-btn svg { width: 1rem; height: 1rem; }
.icon-btn--share:hover { background: var(--blue-50); color: var(--blue-600); }
.icon-btn--trash:hover { background: var(--red-50); color: var(--red-500); }

/* empty state */
.empty-state { text-align: center; padding: 5rem 0; }
.empty-state__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--grass-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.empty-state__icon svg { width: 2.5rem; height: 2.5rem; color: var(--grass-400); }
.empty-state h2 { font-size: 1.25rem; font-weight: 600; color: var(--gray-700); margin-bottom: .5rem; }
.empty-state p { color: var(--gray-400); max-width: 28rem; margin: 0 auto; }

/* modal (share dialog) */
.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: 1rem;
}
.modal.is-open { display: flex; }
.modal__panel {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 28rem;
    padding: 1.5rem;
}
.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.modal__title { font-size: 1.125rem; font-weight: 600; color: var(--gray-900); }
.modal__close { color: var(--gray-400); transition: color .2s; }
.modal__close:hover { color: var(--gray-600); }
.modal__close svg { width: 1.25rem; height: 1.25rem; }
.modal__text { font-size: .875rem; color: var(--gray-500); margin-bottom: 1rem; }
.modal__actions { display: flex; gap: .75rem; }
.modal__actions .btn { flex: 1; }

.result-msg { font-size: .875rem; margin-bottom: 1rem; }
.result-msg--ok  { color: var(--brand-green); }
.result-msg--err { color: var(--red-500); }
.is-hidden { display: none; }

/* project view (sidebar + map)  - desktop: docked sidebar.
   mobile: sidebar becomes an off-canvas drawer with hamburger */
.project-shell {
    position: relative;
    display: flex;
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    overflow: hidden;
}

/* sidebar */
.pv-sidebar {
    width: 20rem;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--gray-100);
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    z-index: var(--z-drawer);
    transition: transform .25s ease;
}

.pv-sidebar__header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--gray-100);
    background: rgba(249, 250, 251, .5);
}
.pv-back {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    color: var(--gray-400);
    margin-bottom: .75rem;
    transition: color .2s;
}
.pv-back:hover { color: var(--brand-green); }
.pv-back svg { width: .875rem; height: .875rem; }
.pv-sidebar__title { font-size: 1.125rem; font-weight: 700; color: var(--gray-900); }
.pv-sidebar__sub { font-size: .75rem; color: var(--gray-400); margin-top: .125rem; }

/* close button shown only inside the drawer on mobile */
.pv-sidebar__close {
    display: none;
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    border-radius: var(--radius);
}
.pv-sidebar__close:hover { background: var(--gray-100); color: var(--gray-700); }
.pv-sidebar__close svg { width: 1.25rem; height: 1.25rem; }

.pv-projectlist { padding: .25rem 0; }

.project-item {
    display: flex;
    align-items: center;
    padding: .625rem .75rem;
    margin: .125rem .5rem;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--gray-700);
    transition: background-color .15s, box-shadow .15s;
}
.project-item:hover { background: var(--gray-50); }
.project-item--active {
    background: var(--gray-100);
    box-shadow: var(--shadow-md);
    color: var(--gray-800);
}
.project-item__icon { flex-shrink: 0; margin-right: .75rem; }
.project-item__icon svg { width: 1.25rem; height: 1.25rem; color: var(--gray-400); }
.project-item--active .project-item__icon svg { color: var(--gray-600); }
.project-item__body { flex: 1; min-width: 0; margin-right: .5rem; }
.project-item__name {
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.project-item__status { font-size: .75rem; margin-top: .125rem; color: var(--gray-400); }
.project-item__status--processing { color: var(--amber-600); }
.project-item__status--failed { color: var(--red-500); }

.project-item__actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}
.pv-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .375rem;
    border-radius: var(--radius-sm);
    color: var(--gray-500);
    transition: background-color .2s, color .2s;
}
.pv-action svg { width: 1rem; height: 1rem; }
.pv-action:hover { background: var(--gray-200); }
.pv-action--report:hover { color: var(--brand-green); }
.pv-action--download:hover { color: var(--blue-600); }
.pv-action--delete:hover { background: var(--red-50); color: var(--red-500); }

.pv-empty { padding: 2rem 1.25rem; text-align: center; }
.pv-empty p { font-size: .875rem; color: var(--gray-400); }

/* map area */
.pv-map {
    flex: 1;
    position: relative;
    min-width: 0;
}
#project-map { width: 100%; height: 100%; }

/* legend overlay */
.pv-legend {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1000;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .75rem 1rem;
}
.pv-legend__row { display: flex; align-items: center; gap: 1rem; font-size: .75rem; }
.pv-legend__item { display: flex; align-items: center; gap: .375rem; color: var(--gray-500); }
.pv-legend__swatch { width: 1rem; height: .25rem; border-radius: 2px; background: var(--blue-500); display: inline-block; }
.pv-legend__icon { width: 1rem; height: 1rem; }

/* hamburger button (mobile only) */
.pv-menu-btn {
    display: none;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.pv-menu-btn svg { width: 1.375rem; height: 1.375rem; }

/* scrim behind the drawer (mobile only) */
.pv-scrim {
    position: absolute;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.pv-scrim.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 768px) {
    .pv-menu-btn { display: flex; }
    .pv-sidebar__close { display: flex; }
    .pv-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 20rem);
        box-shadow: var(--shadow-xl);
        transform: translateX(-100%);
    }
    .pv-sidebar.is-open { transform: translateX(0); }
}

.pv-spin { animation: pv-spin 0.8s linear infinite; }
@keyframes pv-spin { to { transform: rotate(360deg); } }

/* map + popups (project view) */
#project-map { height: calc(100vh - var(--nav-height)); }

.sidebar-scroll {
    height: calc(100vh - var(--nav-height));
    overflow-y: auto;
}

.divgrass-popup .leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 0;
}
.divgrass-popup .leaflet-popup-content {
    margin: 10px 12px;
    line-height: 1.4;
    font-family: var(--font-sans);
}
.divgrass-popup .leaflet-popup-tip {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}