/* ─── MAPIN Design System ────────────────────────────────────────────────────
   Green and white: the palette is the one visible difference from AXIMap's navy,
   so every surface colour is derived from --green rather than being sprinkled
   around the stylesheets. The old --navy/--navy2 names are kept as aliases so
   inherited markup keeps working while it is migrated. */
:root {
  --green:   #1E7A46;   /* primary — headers, buttons, active states */
  --green2:  #176037;
  --lt-grn:  #7FC49B;   /* accents, progress, highlights */
  --pale-grn:#E8F4ED;   /* tinted backgrounds */
  --navy:    #1E7A46;   /* alias: inherited rules still reference --navy */
  --navy2:   #176037;
  --olive:   #2E9C5A;
  --dark:    #111111;
  --grey:    #444444;
  --lgrey:   #888888;
  --bg:      #FFFFFF;
  --white:   #FFFFFF;
  --danger:  #DC3545;
  --success: #1E7A46;
  --warn:    #FFC107;
  --sidebar-w: 380px;
  --ls-w:    200px;
}

/* RTL support */
[dir="rtl"] { font-family: 'Tahoma', 'Arial', sans-serif; }
[dir="rtl"] .left-sidebar { left: auto; right: 0; }
[dir="rtl"] #main-content { margin-left: 0; margin-right: var(--ls-w); }
[dir="rtl"] .sidebar { right: auto; left: 0; transition: left .25s ease; }
[dir="rtl"] .sidebar.hidden { right: auto; left: calc(-1 * (var(--sidebar-w) + 12px)); }
[dir="rtl"] .fab { left: 1.5rem; right: auto; }
[dir="rtl"] .layer-switcher { left: 10px; right: auto; top: 90px; }
[dir="rtl"] .ls-item { border-left: none; border-right: 3px solid transparent; }
[dir="rtl"] .ls-item.active { border-right-color: var(--lt-grn); }

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--dark); }

/* ── App shell ── */
.app-shell { display: flex; min-height: 100vh; }

/* ── Left Sidebar ── */
.left-sidebar {
  width: var(--ls-w);
  flex-shrink: 0;
  background: var(--navy);
  height: 100vh;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  flex-direction: column;
  z-index: 1000;
  box-shadow: 3px 0 20px rgba(0,0,0,.28);
  overflow: hidden;
}

.ls-brand {
  padding: 1.4rem 1rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}

.ls-logo-img {
  width: 90%;
  max-height: 56px;
  object-fit: contain;
}

.ls-nav {
  flex: 1;
  padding: .6rem 0;
  overflow-y: auto;
}

.ls-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .78rem 1.2rem;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: all .15s;
  border-left: 3px solid transparent;
}

.ls-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.ls-item.active {
  background: rgba(255,255,255,.13);
  color: #fff;
  border-left-color: var(--lt-grn);
}

.ls-icon { font-size: 1.1rem; }
.ls-text { font-size: .875rem; }

.ls-footer {
  padding: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex-shrink: 0;
}

.ls-user-info {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.ls-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--lt-grn);
  color: var(--navy);
  font-size: .85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ls-user-text { overflow: hidden; }
.ls-username {
  color: #fff;
  font-size: .82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ls-logout-btn {
  width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.75);
  padding: .42rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .8rem;
  font-family: inherit;
  transition: all .15s;
}
.ls-logout-btn:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ── Main content ── */
#main-content {
  margin-left: var(--ls-w);
  flex: 1;
  min-height: 100vh;
  min-width: 0;          /* wide tables scroll inside their card, not the page */
}

/* ── Role badges (used in sidebar) ── */
.nav-role {
  font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .4px; display: inline-block;
}
.role-admin  { background: var(--danger);  color: #fff; }
.role-editor { background: var(--olive);   color: #fff; }
.role-viewer { background: var(--lgrey);   color: #fff; }

/* ── Buttons ── */
.btn {
  padding: .45rem 1rem; border-radius: 5px; font-size: .875rem;
  font-weight: 600; cursor: pointer; border: 2px solid transparent;
  transition: background .15s, color .15s; white-space: nowrap;
}
.btn-primary  { background: var(--olive); color: #fff; border-color: var(--olive); }
.btn-primary:hover { background: #5a7a1c; }
.btn-outline  { background: transparent; color: var(--grey); border-color: #ccc; }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-danger   { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-full     { width: 100%; }
.btn-icon     { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--grey); }
.btn-sm       { padding: .25rem .65rem; font-size: .8rem; }

/* ── Backup / restore buttons ── */
/* Backup / restore: two big, icon-only buttons side by side. */
.ls-backup { display: flex; flex-direction: row; gap: .6rem; }
.ls-backup-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s, background .15s, box-shadow .15s, border-color .15s;
}
.ls-backup-btn:hover {
  background: rgba(181,216,110,.22);
  border-color: var(--lt-grn, #7FC49B);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(0,0,0,.28);
}
.ls-backup-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.ls-backup-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.ls-backup-ic { font-size: 1.7rem; line-height: 1; }

/* ── Lang switcher ── */
.lang-switcher { display: flex; gap: 2px; justify-content: center; }
.lang-btn {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.2);
  padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: .78rem;
  transition: all .15s;
}
.lang-btn.active { background: var(--lt-grn); color: var(--dark); border-color: var(--lt-grn); }

/* ── Sidebar (parcel form panel) ── */
.sidebar {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--sidebar-w); background: var(--white);
  box-shadow: -2px 0 40px rgba(0,0,0,.18);
  display: flex; flex-direction: column; z-index: 900;
  transition: right .25s ease;
  overflow-y: auto;
}
/* Physical right-offset hide — RTL-safe (translateX is logical in RTL) */
.sidebar.hidden { right: calc(-1 * (var(--sidebar-w) + 12px)); }
.sidebar-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; background: var(--navy); color: #fff;
  border-bottom: 3px solid var(--lt-grn);
}
.sidebar-header h3 { font-size: 1rem; font-weight: 700; }
.sidebar-body { padding: 1.25rem; flex: 1; overflow-y: auto; }
.sidebar-section-title {
  font-weight: 700; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--lgrey); margin: 1rem 0 .5rem;
  border-bottom: 1px solid #eee; padding-bottom: .25rem;
}

/* ── Per-parcel access: checkbox list of individual users ── */
.acl-userlist {
  max-height: 140px; overflow-y: auto;
  border: 1.5px solid #ddd; border-radius: 6px; padding: 3px; background: #fff;
}
.acl-user {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .55rem; border-radius: 5px; cursor: pointer;
  font-size: .86rem; font-weight: 500; color: var(--dark, #1a2340);
}
.acl-user:hover { background: #eef1f8; }
.acl-user input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; flex-shrink: 0; }
.acl-sub { color: var(--lgrey, #8a93a6); font-size: .76rem; font-weight: 400; }
.acl-empty { color: var(--lgrey, #8a93a6); font-size: .82rem; padding: .6rem; text-align: center; }
[dir="rtl"] .acl-user { flex-direction: row-reverse; }

/* ── Forms ── */
.form-group { margin-bottom: .9rem; }
.form-group label { display: block; font-size: .8rem; font-weight: 600; color: var(--grey); margin-bottom: .3rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: .45rem .65rem; border: 1.5px solid #ddd;
  border-radius: 5px; font-size: .9rem; transition: border-color .15s;
  background: #fafafa;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--olive); background: #fff;
}
.form-row { display: flex; gap: .75rem; }
.form-row .half { flex: 1; }
.form-actions { display: flex; gap: .75rem; margin-top: 1rem; }

/* ── FAB ── */
.fab {
  position: fixed; right: calc(var(--sidebar-w) + 1.5rem); bottom: 2rem;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--olive); color: #fff; font-size: 1.6rem; font-weight: 300;
  border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s; z-index: 800;
}
.fab:hover { background: #5a7a1c; transform: scale(1.1); }

/* ── Layer switcher ── */
.layer-switcher {
  position: absolute; top: 1rem; right: 1rem;
  z-index: 800; display: flex; flex-direction: column; gap: .4rem;
}
.layer-btn {
  background: var(--white); border: 1.5px solid #ddd; border-radius: 20px;
  padding: .4rem 1rem; font-size: .8rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: all .15s; white-space: nowrap;
}
.layer-btn:hover { border-color: var(--navy); }
.layer-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 3px 10px rgba(27,58,107,.35); }

/* ── Alerts ── */
.alert { padding: .65rem .9rem; border-radius: 5px; font-size: .875rem; margin: .5rem 0; }
.alert-error   { background: #fde8e8; color: #9b1c1c; border: 1px solid #f8b4b4; }
.alert-success { background: #def7ec; color: #03543f; border: 1px solid #84e1bc; }

/* ── Parcel Popup ── */
.parcel-popup { min-width: 240px; max-width: 300px; font-size: .85rem; }
.parcel-popup h4 { color: var(--navy); font-size: .95rem; margin-bottom: .4rem; border-bottom: 2px solid var(--lt-grn); padding-bottom: .2rem; word-break: break-word; }
.parcel-popup .pp-row { display: flex; justify-content: space-between; gap: 10px; margin: .2rem 0; }
.parcel-popup .pp-label { color: var(--lgrey); font-size: .78rem; flex-shrink: 0; }
/* Long values clip to one line (ellipsis) and expand on click — no overlay. */
.parcel-popup .pp-val {
  font-weight: 600; min-width: 0; flex: 1; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.parcel-popup .pp-val.open { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.parcel-popup .pp-actions { margin-top: .7rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.parcel-popup .pp-actions button { padding: .3rem .65rem; font-size: .78rem; }

/* ── Admin ── */
.admin-container { max-width: 1000px; margin: 2rem auto; padding: 0 1.5rem; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.admin-header h2 { font-size: 1.4rem; color: var(--navy); }
.card { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: var(--navy); color: #fff; padding: .65rem 1rem; text-align: left; font-size: .85rem; }
.data-table td { padding: .6rem 1rem; border-bottom: 1px solid #f0f0f0; font-size: .875rem; }
.data-table tr:hover td { background: #f8f9ff; }
.badge { padding: 3px 10px; border-radius: 12px; font-size: .75rem; font-weight: 700; }
.badge-success { background: #def7ec; color: #03543f; }
.badge-danger  { background: #fde8e8; color: #9b1c1c; }

/* ── Login ── */
.login-body { background: linear-gradient(135deg, var(--navy) 0%, #0f2347 60%, #1a3a1a 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-overlay { width: 100%; max-width: 500px; padding: 1rem; }
.login-card { background: #fff; border-radius: 14px; padding: 2.5rem; box-shadow: 0 24px 64px rgba(0,0,0,.38); border: 1px solid rgba(0,0,0,.08); }
.login-logo { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.login-logo-img { height: 52px; object-fit: contain; }
.login-brand-name { font-size: 1.3rem; font-weight: 700; color: var(--navy); display: block; }
.login-brand-sub { font-size: .75rem; color: var(--lgrey); display: block; }
.login-footer { margin-top: 1.5rem; text-align: center; color: var(--lgrey); font-size: .8rem; border-top: 1px solid #eee; padding-top: 1rem; }

/* ─── MAPIN popup additions ─────────────────────────────────────────────────
   The regime badge, the operator's own fields and the measured distances. */
.pp-kind { display:inline-block; background:var(--pale-grn); color:var(--green);
  border-radius:12px; padding:2px 10px; font-size:.74rem; font-weight:700; margin-bottom:6px; }
.pp-section { margin:10px 0 4px; font-size:.72rem; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--green); border-top:1px solid var(--pale-grn); padding-top:8px; }
.pp-sub { color:var(--lgrey); font-weight:400; }


/* ── Study buttons in the parcel popup ──────────────────────────────────────
   One per uploaded study, captioned with the exact name its uploader typed —
   never the internal slot name. */
.pp-studies { margin-top: 6px; }
.pp-study-btn {
  display: block; margin: 4px 0; padding: 6px 10px;
  background: var(--pale-grn); color: #14532d; border: 1px solid var(--lt-grn);
  border-radius: 8px; font-size: .78rem; font-weight: 600;
  text-decoration: none; line-height: 1.3;
}
.pp-study-btn:hover { background: var(--lt-grn); color: #0d3b21; }
.dash-action.study { border-color: var(--lt-grn); color: #14532d; }

/* A distance row keeps its value on the right no matter how long the nearest
   feature's name is. */
.pp-row.pp-dist { align-items: flex-start; }
.pp-row.pp-dist .pp-label { flex: 1; min-width: 0; }
.pp-row.pp-dist .pp-val { white-space: nowrap; flex-shrink: 0; }
.pp-dist-name { color: #888; font-size: .72rem; font-weight: 400; line-height: 1.25; }

/* ── Approval state in the parcel popup ─────────────────────────────────────
   A pending parcel must look different at a glance from an approved one — the
   whole point of the step is that someone can see it has not happened yet. */
.pp-status {
  display: inline-block; margin: 4px 0 6px; padding: 2px 10px;
  border-radius: 10px; font-size: .74rem; font-weight: 700;
}
.pp-approved { background: var(--pale-grn); color: #14532d; }
.pp-pending  { background: #fff7ed; color: #9a3412; }

/* Same two states in the dashboard list. */
.dash-status { border-radius: 10px; padding: 1px 9px; font-size: .72rem; font-weight: 600;
               white-space: nowrap; }
.dash-approved { background: var(--pale-grn); color: #14532d; }
.dash-pending  { background: #fff7ed; color: #9a3412; }
.dash-owner { color: #555; font-size: .78rem; white-space: nowrap; }

/* ── Side lengths shown while hovering a parcel ─────────────────────────────
   Positioned at each edge midpoint; pointer-events are off on the whole pane so
   the labels never steal the hover that produced them. */
.edge-len {
  background: rgba(255,255,255,.94); color: #14532d; border: 1px solid var(--lt-grn);
  border-radius: 8px; padding: 1px 6px; font-size: .72rem; font-weight: 700;
  white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transform: translate(-50%, -50%); width: max-content;
}
.edge-total {
  background: var(--green); color: #fff; border-radius: 10px; padding: 2px 10px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  transform: translate(-50%, -50%); width: max-content;
}

/* ── Infrastructure filter (administrators) ─────────────────────────────────
   Sits under the Satellite / Hors-ligne buttons in the same column. Collapsed by
   default so it never covers the map until it is wanted. */
.infra-filter {
  background: #fff; border: 1.5px solid #ddd; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.14); overflow: hidden; min-width: 210px;
}
.infra-filter-head {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  background: #fff; border: 0; padding: .45rem .8rem; cursor: pointer;
  font-size: .8rem; font-weight: 700; color: var(--green); text-align: left;
}
.infra-filter-count {
  background: var(--green); color: #fff; border-radius: 9px;
  padding: 0 7px; font-size: .68rem; min-width: 18px; text-align: center;
}
.infra-filter-count:empty { display: none; }
.infra-filter-caret { margin-left: auto; color: #888; }
.infra-filter-body { border-top: 1px solid #eef3f0; padding: .35rem .55rem .55rem; }
.infra-filter-list { max-height: 340px; overflow-y: auto; }
.infra-row {
  display: flex; align-items: center; gap: .5rem; padding: .32rem .25rem;
  border-radius: 8px; cursor: pointer; font-size: .78rem; user-select: none;
}
.infra-row:hover { background: #f4faf6; }
.infra-row input { accent-color: var(--green); width: 15px; height: 15px; cursor: pointer; }
.infra-swatch { width: 18px; height: 0; flex-shrink: 0; border-top-width: 3px; border-top-style: solid; }
.infra-swatch.dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff;
                    box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.infra-row-label { flex: 1; color: #222; }
.infra-row-n { color: #999; font-size: .7rem; }
.infra-row.loading .infra-row-n::after { content: ' …'; }
.infra-filter-actions { display: flex; gap: .35rem; margin-top: .4rem; }
.infra-filter-actions button {
  flex: 1; border: 1px solid #d6e6dc; background: #f7fbf9; color: #14532d;
  border-radius: 8px; font-size: .7rem; padding: .25rem; cursor: pointer;
}
.infra-filter-actions button:hover { background: var(--pale-grn); }
.infra-filter-src { margin-top: .35rem; font-size: .62rem; color: #aaa; text-align: right; }
.infra-filter-empty { color: #999; font-size: .75rem; padding: .3rem; }
[dir="rtl"] .infra-filter-head, [dir="rtl"] .infra-row { text-align: right; }
[dir="rtl"] .infra-filter-caret { margin-left: 0; margin-right: auto; }
.pp-dist-how { color: #6b7a90; font-size: .68rem; font-weight: 400; line-height: 1.25; }
.pp-dist-gear { background: none; border: none; cursor: pointer; font-size: .8rem; color: #6b7a90; padding: 0 4px; }
.pp-dist-gear:hover { color: #1E7A46; }
.dc-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f0f2f5; flex-wrap: wrap; }
.dc-hide { font-size: .72rem; color: #6b7a90; display: flex; align-items: center; gap: 3px; min-width: 70px; }
.dc-kind { flex: 1; font-size: .82rem; min-width: 120px; }
.dc-in { font-size: .78rem; padding: 3px 6px; border: 1px solid #d0d7e3; border-radius: 6px; max-width: 100%; }
.dc-place .dc-in:first-child { flex: 1; min-width: 110px; }
.dc-num { width: 80px; }
.dc-del { background: none; border: none; color: #dc3545; cursor: pointer; }

/* ── Soil & crops (per-parcel analysis layers) ─────────────────────────────── */
.pp-agro:empty { display: none; }
.pp-agro-row { display: flex; gap: 6px; align-items: center; margin: 5px 0; flex-wrap: wrap; }
.pp-agro-btn { border: 1.5px solid #1E7A46; background: #fff; color: #1E7A46; border-radius: 16px;
  padding: 4px 11px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.pp-agro-btn.on { background: #1E7A46; color: #fff; }
.pp-agro-sel { font-size: .78rem; padding: 4px 6px; border: 1px solid #cfd8d3; border-radius: 8px; max-width: 100%; flex: 1; min-width: 0; }
.pp-agro-sel.wide { width: 100%; }
.pp-agro-card { background: #f3f8f5; border-radius: 8px; padding: 6px 8px; margin: 4px 0; }
.pp-agro-card .pp-row { margin: 2px 0; }
.pp-agro-chip { display: inline-block; border-radius: 8px; padding: 0 6px; font-size: .7rem; color: #fff; font-weight: 700; }
.pp-agro-chip.r-very_suitable { background: #1E7A46; } .pp-agro-chip.r-suitable { background: #4caf50; }
.pp-agro-chip.r-possible { background: #d49a1f; } .pp-agro-chip.r-poorly_suitable { background: #c0392b; }
.pp-agro-zones { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.pp-agro-zone { font-size: .68rem; border-radius: 8px; padding: 1px 6px; background: #fff; border: 1px solid #dfe7e2; }
.pp-agro-zone.z-high { border-color: #1E7A46; } .pp-agro-zone.z-medium { border-color: #e8b53c; } .pp-agro-zone.z-low { border-color: #c0392b; }
.pp-agro-ref { font-size: .68rem; color: #6b7a90; margin-top: 4px; }
.pp-agro-note { font-size: .68rem; color: #8a6d1f; margin-top: 3px; }
.agro-legend { background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: 0 2px 10px rgba(0,0,0,.2);
  min-width: 190px; max-width: 260px; font-size: .75rem; }
.agro-leg-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; color: #1E7A46; }
.agro-leg-head button { border: none; background: none; cursor: pointer; color: #888; font-size: .9rem; line-height: 1; }
.agro-leg-unit { color: #888; font-size: .68rem; margin: 1px 0 4px; }
.agro-leg-bar { height: 10px; border-radius: 3px; }
.agro-leg-ticks { display: flex; justify-content: space-between; color: #555; font-size: .66rem; margin-top: 2px; }
.agro-leg-cat { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.agro-leg-cat i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.agro-leg-hover { margin-top: 6px; padding-top: 5px; border-top: 1px solid #eee; color: #333; }

/* Custom fields: label may wrap, value is one line until opened with ▾. */
.parcel-popup .pp-cf { align-items: flex-start; flex-wrap: wrap; column-gap: 6px; }
.parcel-popup .pp-cf .pp-label { flex: 0 1 42%; white-space: normal; overflow-wrap: anywhere; }
.parcel-popup .pp-cf .pp-val { flex: 1 1 0; cursor: default; }
.parcel-popup .pp-cf .pp-more { flex: 0 0 auto; border: 1px solid #cfe3d7; background: #f3f8f5; color: #1E7A46;
  border-radius: 6px; font-size: .7rem; line-height: 1; padding: 2px 5px; cursor: pointer; }
.parcel-popup .pp-cf.open .pp-val { flex-basis: 100%; order: 3; white-space: normal; text-align: left;
  overflow-wrap: anywhere; background: #f6f9f7; border-radius: 6px; padding: 4px 6px; margin-top: 2px; font-weight: 500; }

/* Per-study access, inside the parcel's access modal */
.acl-study { border: 1px solid #e3ebe6; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; background: #fbfdfc; }
.acl-study > summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: #1E7A46; }
.acl-study .acl-study-vis { margin: 6px 0; font-size: .78rem; padding: 3px 6px; border: 1px solid #cfd8d3; border-radius: 6px; width: 100%; }
.acl-study .acl-userlist { max-height: 120px; overflow-y: auto; }

/* Sidebar notification counter */
.ls-item { position: relative; }
.ls-badge { position: absolute; top: 50%; transform: translateY(-50%); right: 12px;
  background: #e5484d; color: #fff; border-radius: 10px; min-width: 20px; height: 20px;
  padding: 0 6px; font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center; }
[dir="rtl"] .ls-badge { right: auto; left: 12px; }

/* A company's answer on a parcel */
.pp-interest:empty { display: none; }
.pp-interest-chip { display: inline-block; border-radius: 10px; padding: 2px 8px; font-size: .74rem; font-weight: 700; margin-top: 4px; }
.pp-interest-chip.interested { background: #e8f4ed; color: #1E7A46; }
.pp-interest-chip.not_interested { background: #fdecea; color: #c0392b; }
.int-lbl { display: block; font-size: .78rem; color: #555; font-weight: 600; margin-bottom: 3px; }
.int-in { font-size: .85rem; padding: 6px 8px; border: 1px solid #d0d7e3; border-radius: 8px; font-family: inherit; }

/* Asking price (admin sets it, sociétés read it) */
.parcel-popup .pp-row.pp-price .pp-val { color: #1E7A46; font-weight: 700; }
.int-hint { font-size: .72rem; color: #8a93a6; margin-top: 5px; }
.int-cur { font-weight: 700; color: #1E7A46; font-size: .85rem; }

/* Admin: "who sees which infrastructure", in the map's Networks panel */
.infra-grants-btn { display: block; width: 100%; margin-top: 8px; padding: 7px 8px; border: none; border-radius: 8px;
  background: #1a2340; color: #fff; font-size: .78rem; font-weight: 600; cursor: pointer; }
.infra-grants-btn:hover { background: #26325a; }

/* ── Phones and small tablets ───────────────────────────────────────────────────
   Below 820px the sidebar leaves the layout: it slides in over the page from the
   ☰ button, and every page gets the full width. --ls-w drops to 0 so the rules
   that offset things by the sidebar width (map search, toasts…) follow. */
.ls-burger, .ls-backdrop { display: none; }
@media (max-width: 820px) {
  :root { --ls-w: 0px; --sidebar-w: 100vw; }
  html, body { overflow-x: hidden; }
  .left-sidebar { width: min(78vw, 280px); transform: translateX(-105%);
                  transition: transform .22s ease; z-index: 3000; }
  [dir="rtl"] .left-sidebar { transform: translateX(105%); }
  .left-sidebar.open, [dir="rtl"] .left-sidebar.open { transform: none; }
  .ls-burger:not([hidden]) { display: flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; left: 10px; z-index: 2500; width: 42px; height: 42px;
    border-radius: 10px; border: none; background: var(--green); color: #fff;
    font-size: 1.35rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.28); }
  [dir="rtl"] .ls-burger { left: auto; right: 10px; }
  body.nav-open .ls-backdrop { display: block; position: fixed; inset: 0; z-index: 2900;
    background: rgba(0,0,0,.45); }
  body.nav-open { overflow: hidden; }
  /* Room for the ☰ button above every page but the map, which floats it. */
  body:not(.page-map) #main-content { padding-top: 58px; }
  #main-content, [dir="rtl"] #main-content { margin: 0; min-width: 0; width: 100%; }

  .fab, [dir="rtl"] .fab { right: 16px; left: auto; }
  [dir="rtl"] .fab { right: auto; left: 16px; }

  .admin-container { margin: .8rem auto; padding: 0 .75rem; }
  .admin-header { flex-wrap: wrap; gap: .6rem; }
  .admin-header h2 { font-size: 1.15rem; }
  .card { padding: .9rem; }
  /* Wide tables scroll inside their card instead of widening the page. */
  .table-scroll, .card:has(> .data-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table th, .data-table td { padding: .5rem .6rem; white-space: nowrap; }
  .form-row { flex-direction: column; gap: 0; }
  .login-card { padding: 1.6rem 1.2rem; }
  .parcel-popup { min-width: 0; max-width: calc(100vw - 70px); }
}