:root {
  --green-dark: #1a5c2a;
  --green: #2d7a3a;
  --green-bg: #f0f5f0;
  --red: #c62828;
  --red-bg: #ffebee;
  --ok-bg: #e8f5e9;
  --ok: #2e7d32;
  --amber: #e65100;
  --amber-bg: #fff3e0;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--green-bg);
  font-family: 'Sora', system-ui, sans-serif;
  color: #222;
}

.container {
  max-width: none;
  margin: 0;
  padding: 1.2rem 2rem 3rem;
}

.app-header {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  color: #fff;
  padding: 1.4rem 2rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}
.app-header h1 { margin: 0; font-size: 1.8rem; }
.app-header p { margin: .3rem 0 0; opacity: .85; font-size: .88rem; }

.app-footer {
  margin-top: 2.5rem;
  text-align: center;
  font-size: .78rem;
  color: #9aa;
}

/* ---- Cards / sections ---- */
.card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  margin-bottom: 1.2rem;
}
.section-title { font-size: 1.05rem; font-weight: 700; color: var(--green-dark); margin: 0 0 1rem; }

/* ---- Forms ---- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .35rem; color: #444; }
.field .helptext { font-size: .75rem; color: #999; margin-top: .25rem; }
.field input[type="text"],
.field input[type="password"],
.field input[type="file"] {
  width: 100%;
  padding: .6rem .75rem;
  border: 1.5px solid #cfe3cf;
  border-radius: 8px;
  font-family: inherit;
  font-size: .9rem;
  background: #f9fdf9;
}
.field input[type="file"] {
  border: 2px dashed #a5d6a7;
  padding: 1rem;
  cursor: pointer;
}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 760px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-family: inherit;
  font-size: .9rem;
  padding: .7rem 1.2rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-primary:disabled { background: #b6cdb6; cursor: not-allowed; }
.btn-secondary { background: #eef3ee; color: var(--green-dark); border: 1.5px solid #cfe3cf; }
.btn-secondary:hover { background: #e3ece3; }
.btn-block { display: block; width: 100%; }

/* ---- Alerts / banners ---- */
.banner { padding: 1rem 1.5rem; border-radius: 10px; margin-bottom: 1rem; }
.banner-risk { background: var(--red-bg); border: 2px solid var(--red); }
.banner-ok { background: var(--ok-bg); border: 2px solid var(--ok); }
.banner .title { font-size: 1.3rem; font-weight: 800; }
.banner-risk .title { color: var(--red); }
.banner-ok .title { color: var(--ok); }
.banner .sub { color: #555; font-size: .88rem; margin-top: .3rem; }

.msg-error { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .85rem; }
.msg-info { background: #e3f2fd; color: #1565c0; padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .85rem; }
.msg-warn { background: var(--amber-bg); color: var(--amber); padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .85rem; }

/* ---- Plot cards ---- */
.plot { background: #fff; border-radius: 10px; padding: 1rem 1.2rem; box-shadow: var(--card-shadow); margin-bottom: .8rem; }
.plot-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.plot-name { font-size: .98rem; font-weight: 700; color: var(--green-dark); }
.badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge { padding: .2rem .7rem; border-radius: 99px; font-weight: 700; font-size: .75rem; border: 1.5px solid; }
.badge-risk { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.badge-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.badge-amber { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.badge-na { background: #f5f5f5; color: #888; border-color: #bbb; }
.plot-meta { font-size: .82rem; color: #555; line-height: 1.9; }
.plot-note { font-size: .74rem; color: #aaa; margin-top: .3rem; font-style: italic; }

/* ---- Per-system grid ---- */
details.breakdown { margin-top: .6rem; }
details.breakdown summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--green-dark); }
.sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .7rem 0; }
.sys { border-radius: 8px; padding: .8rem; text-align: center; }
.sys-ok { background: var(--ok-bg); }
.sys-risk { background: var(--red-bg); }
.sys-na { background: #f5f5f5; }
.sys .lbl { font-weight: 700; font-size: .82rem; }
.sys .big { font-size: 1.5rem; font-weight: 800; }
.sys .sm { font-size: .72rem; color: #555; }

/* ---- Static plot map ---- */
.plot-map { margin-top: .7rem; }
.plot-map img { width: 100%; border-radius: 8px; display: block; }
.map-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.map-actions .btn { flex: 1; }

/* ---- Interactive Leaflet map ---- */
#all-map { width: 85%; margin: 0 auto; aspect-ratio: 16 / 9; height: auto; border-radius: 12px; overflow: hidden; min-height: 300px; }
#edit-map { height: 70vh; min-height: 460px; width: 100%; border-radius: 12px; resize: vertical; overflow: hidden; }
.edit-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
@media (max-width: 760px) { .edit-actions .btn { flex: 1 1 100%; } }

/* List search box (companies / profiles / fields) */
.list-search-wrap { margin: 0 0 .7rem; }
.list-search { width: 100%; max-width: 420px; padding: .5rem .7rem; font-family: inherit;
  font-size: .9rem; border: 1.5px solid #cfe3cf; border-radius: 4px; background: #fff; }
.list-search:focus { outline: none; border-color: #28b428; }

/* Click-to-sort headers (tables + field list) */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort::after { content: " \2195"; opacity: .3; font-size: .8em; }       /* ↕ idle */
.th-sort[aria-sort="ascending"]::after { content: " \25B2"; opacity: .85; }  /* ▲ */
.th-sort[aria-sort="descending"]::after { content: " \25BC"; opacity: .85; } /* ▼ */
.field-row-head .th-sort:hover, .data-table th.th-sort:hover { color: #1e7a1e; }

/* GFW integrated-alerts comparison controls */
.gfw-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  margin: 0 0 .7rem; padding: .6rem .8rem; border: 1.5px solid #e3d2dd;
  background: #fbf5f8; border-radius: 4px; font-size: .82rem; }
.gfw-controls-title { font-weight: 700; color: #b03a72; }
.gfw-controls label { display: inline-flex; align-items: center; gap: .35rem; }
.gfw-controls input[type="date"] { padding: .25rem .4rem; border: 1.5px solid #d8c2cf;
  border-radius: 4px; font-family: inherit; font-size: .8rem; }
.gfw-controls-note { flex: 1 1 100%; margin: 0; color: #7a6470; }

/* ---- Simplify panel ---- */
.simplify-panel {
  margin-top: .9rem;
  padding: .8rem 1rem;
  background: #f9fdf9;
  border: 1px solid #dce8dc;
  border-radius: 10px;
}
.simplify-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.simplify-row:last-child { margin-bottom: 0; }
.simplify-label { font-size: .82rem; font-weight: 600; color: #555; }
.simplify-check { font-size: .82rem; color: #555; display: flex; align-items: center; gap: .35rem; margin-right: auto; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
#sel-status { margin: 0; }
.alerts-input { padding: .35rem .55rem; border: 1.5px solid #cfe3cf; border-radius: 7px;
  font-family: inherit; font-size: .8rem; background: #fff; }
#alerts-msg { margin-top: .2rem; }
.map-legend {
  background: rgba(255, 255, 255, .92);
  padding: .55rem .7rem;
  border-radius: 8px;
  font-size: .76rem;
  line-height: 1.7;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.map-legend .row { display: flex; align-items: center; gap: .4rem; }
.map-legend .swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.2); }
.map-legend .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid #fff; }
/* "Legend" collapse pill — mobile only; desktop keeps the always-open legend. */
.map-legend .legend-toggle { display: none; }

@media (max-width: 760px) {
  /* Legend collapses behind a pill; expanded state stays compact. */
  .map-legend { font-size: .68rem; padding: .4rem .55rem; max-width: 74vw; }
  .map-legend .legend-toggle { display: inline-block; padding: .55rem .9rem; min-height: 40px;
    border: 1px solid #b8ccb8; border-radius: 999px !important; background: #fff;
    font: inherit; font-size: .72rem; font-weight: 700; color: var(--green-dark); cursor: pointer; }
  .map-legend:not(.open) { background: transparent; box-shadow: none; padding: 0; border: 0; }
  .map-legend:not(.open) .legend-rows { display: none; }
  .map-legend.open .legend-toggle { margin-bottom: .35rem; }
  .map-legend .row { gap: .3rem; line-height: 1.35; }
  .map-legend .swatch { width: 11px; height: 11px; }
  .map-legend .dot { width: 9px; height: 9px; }

  /* GFW comparison panel: stack vertically so it doesn't tower over the map. */
  .gfw-controls { flex-direction: column; align-items: stretch; gap: .35rem; }

  /* 40px+ touch targets: zoom +/- and the collapsed layers icon. */
  .leaflet-control-zoom a { width: 40px !important; height: 40px !important;
    line-height: 40px !important; font-size: 20px; }
  .leaflet-control-layers-toggle { width: 40px !important; height: 40px !important;
    background-size: 24px 24px; }
}

/* ---- DDS table ---- */
.dds-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.dds-table td { padding: .45rem 1rem; border-bottom: 1px solid #f0f0f0; }
.dds-table td.k { background: #f9fdf9; font-weight: 600; color: #555; border-right: 1px solid #f0f0f0; width: 44%; }
.dds-verdict { padding: .75rem 1rem; border-radius: 7px; font-weight: 700; font-size: .88rem; margin-bottom: 1rem; }
.dds-sign { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.dds-sign div { border-top: 1px solid #bbb; padding-top: .5rem; font-size: .78rem; color: #999; }

.divider { border: none; border-top: 1px solid #dde7dd; margin: 1.6rem 0; }

/* ---- Progress bar ---- */
.progress-wrap { margin: .2rem 0; }
.prog-status { margin: 0 0 .5rem; }
.progress {
  width: 100%;
  height: 14px;
  background: #e3ece3;
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--green-dark));
  border-radius: 99px;
  transition: width .4s ease;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: #667;
  margin-top: .4rem;
}
.progress-meta .prog-pct { font-weight: 700; color: var(--green-dark); }

/* ============ Traceability UI ============ */
.app-nav { margin-top:.8rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.app-nav a { color:#fff; text-decoration:none; font-size:.82rem; font-weight:700;
  padding:.45rem 1rem; border:2px solid rgba(255,255,255,.75); background:rgba(255,255,255,.08); }
.app-nav a:hover { background:#fff; color:var(--green-dark); }
.nav-logout { color:#fff; font-family:inherit; font-size:.82rem; font-weight:700; cursor:pointer;
  padding:.45rem 1rem; border:2px solid rgba(255,255,255,.75); background:rgba(255,255,255,.08); }
.nav-logout:hover { background:#fff; color:var(--green-dark); }

.toolbar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.toolbar .company-name { margin-right:auto; font-weight:800; color:var(--green-dark); }
.crumbs { font-size:.82rem; color:#789; margin-bottom:.8rem; }
.crumbs a { color:var(--green); text-decoration:none; }

.company-card { display:block; background:#fff; border-radius:10px; padding:.9rem 1.1rem;
  box-shadow:var(--card-shadow); margin-bottom:.6rem; text-decoration:none; color:inherit; }
.company-card:hover { box-shadow:0 3px 12px rgba(0,0,0,.12); }
.company-card-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.company-name { font-weight:700; color:var(--green-dark); font-size:1rem; }
.company-stats { font-size:.8rem; color:#667; margin-top:.25rem; }
.company-notes { font-size:.8rem; color:#99a; margin-top:.3rem; font-style:italic; }

/* profile head */
.profile-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pf-name-input { flex:1 1 240px; font-size:1.1rem; font-weight:700; color:var(--green-dark);
  border:1px solid #cfe3cf; border-radius:8px; padding:.45rem .6rem; font-family:inherit; }
.pf-notes-input { width:100%; margin-top:.5rem; border:1px solid #cfe3cf; border-radius:8px;
  padding:.45rem .6rem; font-family:inherit; font-size:.85rem; resize:vertical; }

/* gmail-style field list */
.field-list { background:#fff; border-radius:10px; box-shadow:var(--card-shadow); overflow:hidden; }
.field-row { display:grid; grid-template-columns: 2.4fr 1fr 1.4fr 2fr 1fr 1fr; align-items:center;
  gap:.5rem; padding:.55rem .9rem; border-bottom:1px solid #eef3ee; cursor:pointer; font-size:.85rem; }
.field-row:hover { background:#f6faf6; }
.field-row-head { background:#f0f5f0; font-weight:700; color:#557; cursor:default; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.02em; }
.field-item.open > .field-row { background:#eef6ee; }
.fc-name { font-weight:600; color:var(--green-dark); }
.fc-tot { text-align:right; font-weight:600; }
.ta-r { text-align:right; }
.muted { color:#aab; }
.chip { display:inline-block; background:#eef3ee; color:#467; border-radius:99px; padding:.05rem .5rem;
  font-size:.72rem; margin-right:.25rem; }

/* Field-detail alert cards: count · ha · % per alert type. The card(s) that
   determine the current status get a thick border in the status colour; the
   rest render muted. */
.fd-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(215px, 1fr));
  gap:.6rem; margin:.6rem 0 .8rem; }
.alert-card { border:1.5px solid #dfeadf; border-radius:6px; padding:.55rem .7rem .5rem;
  background:#fff; position:relative; }
.alert-card.ac-muted { opacity:.78; }
.alert-card.ac-causal { border-width:2.5px; padding-top:.65rem; }
.alert-card.ac-causal.ac-red { border-color:var(--red); }
.alert-card.ac-causal.ac-yellow { border-color:#e6a700; }
.ac-tag { position:absolute; top:-.6rem; right:.5rem; font-size:10px; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase; background:var(--red); color:#fff;
  border-radius:3px; padding:.12rem .4rem; }
.ac-tag.tag-yellow { background:#e6a700; }
.ac-label { font-size:13px; color:#567; font-weight:700; }
.ac-values { display:flex; gap:.9rem; align-items:baseline; margin:.3rem 0 .25rem;
  flex-wrap:wrap; }
.ac-val { white-space:nowrap; }
.ac-num { font-size:17px; font-weight:800; color:var(--green-dark); }
.ac-unit { font-size:12px; color:#789; margin-left:.18rem; }
.ac-explain { font-size:12px; color:#678; line-height:1.35; }

/* Tainted-silo marker: red corner badge until the silo is fully emptied. */
.silo-card { position:relative; }
.taint-badge { position:absolute; top:-.5rem; right:-.5rem; background:var(--red); color:#fff;
  border-radius:99px; width:1.5rem; height:1.5rem; display:flex; align-items:center;
  justify-content:center; font-size:.85rem; font-weight:800; box-shadow:0 1px 4px rgba(0,0,0,.25);
  cursor:help; }
.unload-form { border-top:1px solid #eef3ee; margin-top:.6rem; padding-top:.6rem; }

/* Header language switcher (posts to Django's set_language). */
.lang-switch { display:inline-flex; align-items:center; margin-left:.4rem; }
.lang-switch select { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.45);
  border-radius:8px; padding:.25rem .5rem; font-family:inherit; font-size:.8rem; cursor:pointer; }
.lang-switch select option { color:#222; }

/* Management-category chip (TRACT-style second tier next to the EUDR badge).
   Tooltip (title attr) carries the trigger, e.g. "0.4 ha loss (under 0.5 ha)". */
.mgmt-chip { display:inline-block; border-radius:99px; padding:.12rem .55rem; font-size:.68rem;
  font-weight:600; border:1px solid; white-space:nowrap; cursor:help; vertical-align:middle; }
.mgmt-green { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.mgmt-yellow { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.mgmt-red { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.tph-input { width:5.5rem; padding:.25rem .4rem; border:1px solid #cfe3cf; border-radius:6px; font-family:inherit; }

.field-detail { padding:.8rem 1rem 1.1rem; background:#fbfdfb; border-bottom:1px solid #eef3ee; }
.field-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:760px){ .field-detail-grid { grid-template-columns:1fr; } .field-row { grid-template-columns:2fr 1fr 1.3fr; } .fc-sys,.fc-tph,.fc-tot{ display:none; }
  /* single-column: the grid no longer stretches the map, so give it an explicit
     height (height:auto would collapse to 0). #all-map goes full-width, still 4:3. */
  .fd-map { height:300px; } #all-map { width:100%; } }
.fd-stats div { font-size:.82rem; line-height:1.7; }
/* height:auto lets the grid's align-items:stretch size the map to the full row
   height (the left .fd-stats column, ending at the Edit/Delete buttons, is the
   taller one). min-height is a floor so Leaflet always inits with real height. */
.fd-map { height:auto; min-height:300px; border-radius:8px; resize:vertical; overflow:hidden; }

/* silos */
.silo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.silo-card { margin-bottom:0; }
.silo-head { display:flex; justify-content:space-between; align-items:baseline; }
.silo-name { font-weight:800; color:var(--green-dark); }
.silo-balance { font-weight:800; font-size:1.1rem; color:var(--green); }
.silo-table { width:100%; font-size:.8rem; border-collapse:collapse; margin:.5rem 0 .8rem; }
.silo-table td { padding:.2rem .1rem; border-bottom:1px solid #f0f4f0; }

/* modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center;
  justify-content:center; z-index:1000; }
.modal:not([hidden]) { display:flex; }
.modal-box { background:#fff; border-radius:12px; padding:1.4rem; width:min(440px,92vw);
  box-shadow:0 8px 30px rgba(0,0,0,.3); }
.silo-check { display:block; font-size:.85rem; margin:.25rem 0; }

/* ============ Rectangular UI (less round) ============ */
.card, .btn, .btn-sm, .badge, .banner, .msg-error, .msg-info, .msg-warn,
.company-card, .field-list, .modal-box, .chip, .simplify-panel, .map-legend,
.field input, .field select, .field textarea, .alerts-input, .tph-input,
.pf-name-input, .pf-notes-input, .silo-card,
#all-map, #edit-map, .fd-map, .plot, .plot-map img {
  border-radius: 2px !important;
}
.app-header { border-radius: 0 !important; }

/* ============ Data tables (companies / profiles) — styled like the Fields list ============ */
.data-table { width:100%; border-collapse:collapse; background:#fff; box-shadow:var(--card-shadow); }
.data-table thead th { background:#f0f5f0; color:#557; text-align:left; font-weight:700;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.02em; padding:.6rem .9rem;
  border-bottom:1px solid #e3ece3; }
.data-table tbody td { padding:.6rem .9rem; border-bottom:1px solid #eef3ee; vertical-align:middle;
  font-size:.85rem; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:#f6faf6; }
.data-table .ta-r { text-align:right; }
.row-link { color:var(--green-dark); font-weight:700; text-decoration:none; }
.row-link:hover { text-decoration:underline; }
.data-table form { margin:0; display:inline; }

.btn-danger { background:#fff; color:var(--red); border:1.5px solid var(--red); }
.btn-danger:hover { background:var(--red); color:#fff; }

/* ============ Staging — per-row indeterminate progress ============ */
.indet { position:relative; display:inline-block; vertical-align:middle; width:120px; height:8px;
  background:#e3ece3; overflow:hidden; border-radius:2px; }
.indet > div { position:absolute; height:100%; width:40%; background:var(--green);
  animation:indet 1.1s infinite linear; }
@keyframes indet { 0% { left:-40%; } 100% { left:100%; } }
.prog-label { margin-left:.5rem; font-size:.78rem; }
.st-status { white-space:nowrap; }
.st-check { text-align:center; }

/* ---- Header user menu (Gmail-style account chip) ---- */
.user-menu { position: relative; display: inline-block; }
.user-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255, 255, 255, 0.15); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  padding: .25rem .8rem .25rem .3rem; cursor: pointer;
  font-family: inherit; font-size: .85rem;
}
.user-chip:hover { background: rgba(255, 255, 255, 0.25); }
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: #fff; color: var(--green-dark);
  font-weight: 700; font-size: .85rem;
}
.user-avatar-lg { width: 2.4rem; height: 2.4rem; font-size: 1.15rem; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  min-width: 270px; background: #fff; color: #222;
  border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: .9rem; text-align: left;
}
.user-dd-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.user-dd-head .user-avatar { background: var(--green-dark); color: #fff; }
.user-dd-name { font-weight: 700; font-size: .95rem; }
.user-dd-email { font-size: .78rem; color: #888; }
.user-dd-org {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--green-bg); border-radius: 8px; padding: .5rem .6rem;
  margin-bottom: .4rem;
}
.user-dd-orgname { font-weight: 600; font-size: .85rem; }
.user-dd-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  background: var(--green-dark); color: #fff;
  border-radius: 999px; padding: .1rem .55rem; text-transform: uppercase;
}
.user-dd-role { font-size: .78rem; color: #666; margin-left: auto; }
.user-dd-divider { border-top: 1px solid #e4ede4; margin: .7rem 0; }
.user-dd-signout {
  width: 100%; padding: .5rem; border: 1.5px solid #cfe3cf; border-radius: 8px;
  background: #f9fdf9; color: var(--red); font-family: inherit;
  font-weight: 600; font-size: .85rem; cursor: pointer;
}
.user-dd-signout:hover { background: var(--red-bg); }
@media (max-width: 760px) {
  .user-chip { padding: .15rem; }
  .user-chip-name { display: none; }
}

/* ---- Header notification bell ---- */
.notif-menu { position: relative; display: inline-block; }
.notif-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35); cursor: pointer;
}
.notif-bell:hover { background: rgba(255, 255, 255, 0.25); }
.notif-badge {
  position: absolute; top: -.3rem; right: -.3rem;
  min-width: 1.1rem; height: 1.1rem; border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 1.1rem;
  padding: 0 .25rem; text-align: center;
}
.notif-dropdown {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  width: 320px; max-width: 90vw; background: #fff; color: #222;
  border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  text-align: left; overflow: hidden;
}
.notif-dd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; border-bottom: 1px solid #e4ede4;
  font-weight: 700; font-size: .9rem;
}
.notif-mark-all {
  background: none; border: none; color: var(--green-dark); cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 600;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { max-height: 340px; overflow-y: auto; }
.notif-item {
  display: block; padding: .6rem .9rem; border-bottom: 1px solid #f0f5f0;
  color: #222; text-decoration: none;
}
/* The dropdown sits inside `.app-nav`, whose `a { color:#fff }` would make the
   link items white-on-white — visible only once `.app-nav a:hover` kicked in.
   Pin a dark colour (and the hover/focus highlight) with enough specificity to
   beat the nav rules, so titles read in BOTH read and unread states. */
.notif-dropdown a.notif-item { color: #222; }
.notif-dropdown a.notif-item:hover,
.notif-dropdown a.notif-item:focus-visible {
  background: var(--green-bg); color: #222;
}
.notif-unread { background: #eef7ee; }
.notif-unread .notif-title { font-weight: 700; }
.notif-title { font-size: .84rem; color: #222; }
.notif-when { font-size: .72rem; color: #888; margin-top: .15rem; }
.notif-empty { padding: 1rem .9rem; font-size: .84rem; color: #888; }

/* ---- Partners page ---- */
.partners-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 760px) { .partners-grid { grid-template-columns: 1fr; } }
.share-code {
  font-family: "Consolas", "Menlo", monospace; font-size: 1.7rem;
  font-weight: 700; letter-spacing: .08em; color: var(--green-dark);
  background: var(--green-bg); border: 1.5px dashed var(--green-dark);
  border-radius: 10px; padding: .7rem 1rem; text-align: center;
  cursor: pointer; user-select: all;
}
.share-code:hover { background: #e3ece3; }
.partner-lookup-row { display: flex; gap: .5rem; }
.partner-lookup-row input {
  flex: 1; min-width: 0; font-family: "Consolas", "Menlo", monospace;
  letter-spacing: .05em; text-transform: uppercase;
}
.partner-lookup-org {
  display: flex; align-items: center; gap: .6rem;
  margin: .8rem 0 .6rem; font-weight: 700;
}

/* ---- Cadastre sampling and manual land-right review ---- */
.cad-toolbar { align-items: flex-start; }
.cad-toolbar .helptext { margin-top: .25rem; }
.cad-offline-note { border-left: 4px solid #1565c0; }
.cad-section-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
}
.cad-section-head .section-title { margin-bottom: .35rem; }
.cad-honest-status { margin: .2rem 0; font-size: .95rem; font-weight: 600; color: #344; }
.cad-status-disclaimer { margin: .35rem 0 0; max-width: 850px; }
.cad-status-badges { justify-content: flex-end; }
.cad-blockers {
  margin: .9rem 0; padding: .75rem 1rem; background: var(--red-bg);
  color: var(--red); border-left: 4px solid var(--red); font-size: .85rem;
}
.cad-blockers ul, .cad-compact-list { margin: .4rem 0 0; padding-left: 1.25rem; }
.cad-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.cad-actions form { margin: 0; }
.cad-actions .btn:disabled { opacity: .58; cursor: not-allowed; }
.cad-actions .cad-approval-form { flex: 1 1 100%; display: grid; gap: .7rem; }
.cad-approval-evidence {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem;
  padding: .9rem; border: 1px solid #dce8dc; background: #fbfdfb;
}
.cad-approval-evidence .field { margin: 0; }
.cad-approval-evidence .helptext { grid-column: 1 / -1; margin: 0; }
.cad-cache-card { border-left: 4px solid #1565c0; }
.cad-cache-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: .65rem; margin: .8rem 0;
}
.cad-cache-metrics > div {
  padding: .65rem .75rem; background: #f4f8fb; border-bottom: 3px solid #90a4ae;
}
.cad-cache-metrics span {
  display: block; color: #667; font-size: .7rem; font-weight: 700; text-transform: uppercase;
}
.cad-cache-metrics strong { display: block; margin-top: .15rem; color: #344; font-size: 1.1rem; }
.cad-cache-metrics .cad-cache-warn { background: var(--amber-bg); border-bottom-color: var(--amber); }
.cad-cache-metrics .cad-cache-error { background: var(--red-bg); border-bottom-color: var(--red); }
.cad-cache-progress { width: 100%; height: 12px; accent-color: var(--green); }
.cad-two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; }
.cad-context-form .field { margin-bottom: .8rem; }
.cad-context-form input[type="text"],
.cad-context-form input[type="date"],
.cad-review-form input[type="text"],
.cad-review-form select,
.cad-review-form textarea,
.cad-table-controls input[type="search"] {
  width: 100%; padding: .55rem .65rem; border: 1.5px solid #cfe3cf;
  border-radius: 2px; background: #fff; color: #222; font: inherit; font-size: .84rem;
}
.cad-context-form input[readonly] { background: #f3f6f3; color: #667; }
.cad-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.cad-form-note { display: inline-block; margin: 0 0 0 .5rem; vertical-align: middle; }
.cad-definition-list { margin: 0; }
.cad-definition-list > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem;
  padding: .4rem 0; border-bottom: 1px solid #eef3ee; font-size: .84rem;
}
.cad-definition-list dt { color: #667; font-weight: 600; }
.cad-definition-list dd { margin: 0; overflow-wrap: anywhere; }
.cad-metrics {
  display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: .75rem; margin-bottom: 1.2rem;
}
.cad-metric {
  background: #fff; border-left: 4px solid var(--green); padding: .8rem 1rem;
  box-shadow: var(--card-shadow);
}
.cad-metric span {
  display: block; color: #667; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}
.cad-metric strong { display: block; margin-top: .22rem; color: var(--green-dark); font-size: 1.1rem; }
.cad-metric-warn { border-left-color: var(--amber); }
.cad-metric-warn strong { color: var(--amber); }
#cadastre-map {
  width: 100%; height: 520px; min-height: 320px; resize: vertical; overflow: hidden;
  border: 1px solid #d7e2d7; border-radius: 2px; background: #eef3ee;
}
.cad-map-loading, .cad-map-message { margin: 1rem; }
.cad-map-popup { min-width: 170px; font-size: .8rem; line-height: 1.55; }
.cad-map-popup code { display: block; margin-bottom: .35rem; font-size: .82rem; font-weight: 700; }
.cad-review-list { display: grid; gap: .8rem; }
.cad-review-item {
  border: 1px solid #dce8dc; border-left: 4px solid var(--amber);
  padding: 1rem; background: #fbfdfb;
}
.cad-review-heading {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .75rem; flex-wrap: wrap;
}
.cad-number { color: var(--green-dark); font-size: .95rem; font-weight: 700; }
.cad-tag-row { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; margin: .6rem 0; }
.cad-risk-chip { background: var(--amber-bg); color: var(--amber); }
.cad-review-form {
  display: grid; grid-template-columns: 1.1fr 1fr 1.5fr 1fr;
  gap: .65rem .8rem; padding-top: .8rem; border-top: 1px solid #e4ece4;
}
.cad-review-form .field { margin: 0; }
.cad-review-form .field label { font-size: .75rem; }
.cad-review-note { grid-column: 1 / -2; }
.cad-review-note textarea { resize: vertical; }
.cad-review-submit { display: flex; align-items: flex-end; justify-content: flex-end; }
.cad-table-controls { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem; }
.cad-table-controls input[type="search"] { max-width: 420px; }
.cad-sample-filter { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: #556; }
.cad-table-wrap { width: 100%; overflow-x: auto; }
.cad-intersections-table { min-width: 1180px; box-shadow: none; }
.cad-intersections-table tbody tr.cad-row-selected { background: #fffaf2; }
.cad-intersections-table tbody tr.cad-row-selected:hover { background: #fff4df; }
.cad-intersections-table code { white-space: nowrap; }
.cad-intersections-table .btn { white-space: nowrap; margin: .1rem; }
.cad-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 1000px) {
  .cad-metrics { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .cad-review-form { grid-template-columns: 1fr 1fr; }
  .cad-review-note { grid-column: 1 / -1; }
  .cad-review-submit { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .cad-two-column { grid-template-columns: 1fr; }
  .cad-metrics { grid-template-columns: 1fr 1fr; }
  .cad-date-grid, .cad-review-form { grid-template-columns: 1fr; }
  .cad-approval-evidence { grid-template-columns: 1fr; }
  .cad-approval-evidence .helptext { grid-column: 1; }
  .cad-review-note, .cad-review-submit { grid-column: 1; }
  .cad-actions { align-items: stretch; }
  .cad-actions form, .cad-actions .btn { width: 100%; }
  .cad-form-note { display: block; margin: .55rem 0 0; }
  #cadastre-map { height: 420px; }
  .cad-cache-metrics { grid-template-columns: 1fr 1fr; }
}