:root {
  --emc-forest: #0f3d2e;
  --emc-leaf: #1f7a4d;
  --emc-leaf-soft: #e7f4ec;
  --emc-mint: #d8f2df;
  --emc-coffee: #5a3522;
  --emc-amber: #c9822b;
  --emc-soil: #7a5133;
  --emc-cream: #f7f5ef;
  --emc-paper: #fffdf8;
  --emc-ink: #20322b;
  --emc-muted: #6f7f77;
  --emc-line: #dfe8e1;
  --emc-shadow: 0 18px 50px rgba(25, 58, 43, 0.12);
}

html,
body {
  background: var(--emc-cream);
  color: var(--emc-ink);
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

body::before {
  background:
    radial-gradient(circle at 18% 8%, rgba(31, 122, 77, 0.10), transparent 28rem),
    linear-gradient(135deg, rgba(247, 245, 239, 0.96), rgba(232, 244, 235, 0.78));
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

.wrapper,
.content-wrapper {
  background: transparent;
}

.content-wrapper {
  padding: 1rem 1.1rem 2rem;
}

.main-header.navbar {
  /* Header branco no tema claro; escurece no tema escuro (override abaixo). */
  background: #ffffff !important;
  border-bottom: 1px solid var(--emc-line);
  border-left: 1px solid var(--emc-line);
  box-shadow: 0 6px 24px rgba(25, 58, 43, 0.06);
  margin-left: 0 !important;
  min-height: 4rem;
  left: 250px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1038;
}

.emc-main-header {
  backdrop-filter: blur(14px);
  gap: .5rem;
}

.emc-main-header .navbar-text {
  line-height: 1.2;
  max-width: calc(100vw - 520px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-sidebar {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  position: fixed !important;
  top: 0;
  transition: transform .22s ease, margin-left .22s ease;
  z-index: 1040;
}

body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer {
  margin-left: 250px;
}

.content-wrapper {
  margin-top: 4rem;
}

.emc-header-alert {
  margin-left: 250px;
  position: relative;
  z-index: 1039;
}

.main-header.navbar + .emc-header-alert {
  margin-top: 4rem;
}

.emc-support-active-alert {
  margin-top: 4rem !important;
  pointer-events: auto;
}

.main-header.navbar + .emc-support-active-alert {
  margin-top: 4rem !important;
}

.emc-header-alert ~ .content-wrapper {
  margin-top: 0;
}

body.sidebar-collapse .main-header.navbar {
  left: 4.6rem;
}

body.sidebar-collapse .content-wrapper,
body.sidebar-collapse .main-footer {
  margin-left: 4.6rem;
}

body.sidebar-collapse .emc-header-alert {
  margin-left: 4.6rem;
}

.main-header .nav-link,
.main-header .navbar-text,
.main-header .text-dark,
.main-header .navbar-text strong {
  color: var(--emc-ink) !important;
}

.main-header .text-muted {
  color: var(--emc-muted) !important;
}

.main-header .text-success {
  color: var(--emc-leaf) !important;
}

.emc-support-active-nav {
  max-width: min(34rem, 42vw);
}

.emc-support-active-nav .badge {
  display: inline-block;
  line-height: 1.35;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.main-header .nav-link {
  border-radius: 8px;
  height: 2.65rem;
  margin: 0.25rem 0.15rem;
}

.main-header .nav-link:hover,
.main-header .nav-link:focus {
  background: var(--emc-leaf-soft);
  color: var(--emc-forest) !important;
}

/* SIDEBAR — clara no tema claro; escura no tema escuro. Usa variaveis do
   tema, que ja invertem entre claro/escuro, entao a sidebar acompanha. */
.main-sidebar {
  background: var(--emc-paper) !important;
  border-right: 1px solid var(--emc-line);
  box-shadow: 8px 0 30px rgba(25, 58, 43, 0.08);
}

.brand-link {
  align-items: center;
  background: var(--emc-leaf-soft);
  border-bottom: 1px solid var(--emc-line) !important;
  color: var(--emc-forest) !important;
  display: flex;
  gap: 0.65rem;
  min-height: 4rem;
  padding: 0.85rem 1rem;
}

.brand-image {
  background: transparent;
  border: 0;
  box-shadow: none;
  float: none;
  margin: 0;
  max-height: 2.4rem;
}

.brand-image.emc-brand-logo {
  border-radius: 8px;
  height: 2.55rem;
  max-height: 2.55rem;
  object-fit: contain;
  padding: 0;
  width: 2.55rem;
}

.brand-text {
  color: var(--emc-forest);
  font-size: 1.05rem;
  font-weight: 800 !important;
  letter-spacing: 0;
}

.sidebar {
  padding: 0.75rem;
}

.user-panel {
  background: var(--emc-leaf-soft);
  border: 1px solid var(--emc-line) !important;
  border-radius: 8px;
  margin: 0.4rem 0 1rem !important;
  padding: 0.75rem !important;
}

.user-panel .info a {
  color: var(--emc-ink) !important;
  font-weight: 700;
}

.nav-sidebar .nav-item {
  margin-bottom: 0.2rem;
}

.nav-sidebar .nav-link {
  border-radius: 8px;
  color: var(--emc-ink) !important;
  min-height: 2.55rem;
}

.nav-sidebar .nav-link p {
  font-size: 0.94rem;
  letter-spacing: 0;
}

.nav-sidebar .nav-icon {
  color: var(--emc-leaf) !important;
}

.nav-sidebar .nav-link:hover,
.nav-sidebar .nav-link:focus,
.nav-sidebar .menu-open > .nav-link {
  background: var(--emc-leaf-soft) !important;
  color: var(--emc-forest) !important;
}

.nav-sidebar .nav-link.active {
  background: linear-gradient(135deg, var(--emc-leaf), #46a36d) !important;
  box-shadow: 0 10px 24px rgba(31, 122, 77, 0.28);
  color: #ffffff !important;
}

.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-link.active p {
  color: #ffffff !important;
}

.nav-treeview {
  margin: 0.15rem 0 0.55rem;
  padding-left: 0.35rem !important;
}

.nav-treeview .nav-link {
  background: var(--emc-leaf-soft);
  min-height: 2.25rem;
}

/* No tema escuro a sidebar mantem o gradiente verde da marca. */
html.emc-dark .main-sidebar {
  background: linear-gradient(180deg, #0b3025 0%, #123d2e 48%, #21351f 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 16px 0 45px rgba(0, 0, 0, 0.4);
}

html.emc-dark .brand-link,
html.emc-dark .user-panel {
  background: rgba(255, 255, 255, 0.06);
}

html.emc-dark .nav-treeview .nav-link {
  background: rgba(255, 255, 255, 0.05);
}

/* No tema escuro a logo (colorida/escura) ganha um leve fundo claro para
   nao "sumir" sobre a sidebar escura. */
html.emc-dark .brand-image.emc-brand-logo {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.85);
  padding: 3px;
}

.content-header {
  padding: 1.2rem 0.25rem 0.9rem;
}

.content-header h1 {
  color: var(--emc-forest);
  font-size: 1.45rem;
  font-weight: 800;
}

.card,
.info-box,
.small-box,
.modal-content,
.callout {
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid rgba(15, 61, 46, 0.10);
  border-radius: 8px;
  box-shadow: var(--emc-shadow);
}

.card {
  overflow: hidden;
}

.card-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 245, 239, 0.72));
  border-bottom: 1px solid var(--emc-line);
  min-height: 3.25rem;
}

.card-title,
.card-header h3,
.card-header h5 {
  color: var(--emc-forest);
  font-weight: 800;
}

.card-success.card-outline,
.card-primary.card-outline,
.card-info.card-outline,
.card-warning.card-outline,
.card-danger.card-outline {
  border-top: 4px solid var(--emc-leaf);
}

.card-primary.card-outline {
  border-top-color: #2f6f9f;
}

.card-info.card-outline {
  border-top-color: #338f8b;
}

.card-warning.card-outline {
  border-top-color: var(--emc-amber);
}

.card-danger.card-outline {
  border-top-color: #b84a3a;
}

.btn {
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0;
}

.btn-success,
.btn-primary,
.btn-info {
  background: var(--emc-leaf) !important;
  border-color: var(--emc-leaf) !important;
  color: #ffffff !important;
}

.btn-success:hover,
.btn-primary:hover,
.btn-info:hover {
  background: var(--emc-forest) !important;
  border-color: var(--emc-forest) !important;
}

.btn-outline-success,
.btn-outline-primary,
.btn-outline-info {
  border-color: var(--emc-leaf) !important;
  color: var(--emc-leaf) !important;
}

.btn-outline-success:hover,
.btn-outline-primary:hover,
.btn-outline-info:hover {
  background: var(--emc-leaf) !important;
  color: #ffffff !important;
}

.table {
  color: var(--emc-ink);
}

.table thead th {
  background: var(--emc-leaf-soft);
  border-bottom: 1px solid var(--emc-line);
  color: var(--emc-forest);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
  border-color: var(--emc-line) !important;
}

.form-control,
.custom-select,
select.form-control {
  background: #fffef9;
  border-color: #cfddd4;
  border-radius: 8px;
  color: var(--emc-ink);
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--emc-leaf);
  box-shadow: 0 0 0 0.2rem rgba(31, 122, 77, 0.15);
}

.badge-success,
.bg-success,
.alert-success {
  background-color: var(--emc-leaf) !important;
  border-color: var(--emc-leaf) !important;
  color: #ffffff !important;
}

.badge-warning,
.bg-warning,
.alert-warning {
  background-color: #f7e5c7 !important;
  border-color: #efd3a5 !important;
  color: #593818 !important;
}

.alert-info,
.bg-info {
  background-color: #e2f3f2 !important;
  border-color: #c4e5e2 !important;
  color: #174c49 !important;
}

.info-box-icon {
  border-radius: 8px;
}

.main-footer {
  background: rgba(255, 253, 248, 0.92);
  border-top: 1px solid var(--emc-line);
  color: var(--emc-muted);
}

a {
  color: var(--emc-leaf);
}

a:hover {
  color: var(--emc-forest);
}

.text-success {
  color: var(--emc-leaf) !important;
}

.text-warning {
  color: var(--emc-amber) !important;
}

@media (max-width: 767.98px) {
  .content-wrapper {
    padding: 0.75rem 0.6rem 1.5rem;
  }

  .main-header .navbar-text {
    display: none !important;
  }

  .card-body {
    padding: 1rem;
  }
}

.login-page,
.register-page {
  background:
    linear-gradient(135deg, rgba(15, 61, 46, 0.92), rgba(31, 122, 77, 0.78)),
    url("../img/favicon.png") center 12% / 8rem no-repeat,
    var(--emc-forest);
  min-height: 100vh;
}

.login-box,
.register-box {
  max-width: 430px;
  width: min(430px, calc(100vw - 1.5rem));
}

.login-box .card,
.register-box .card,
.login-card-body,
.register-card-body {
  background: rgba(255, 253, 248, 0.98);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.login-logo a,
.register-logo a,
.card-header .h1,
.card-header a.h1 {
  color: var(--emc-forest) !important;
  font-weight: 800;
  letter-spacing: 0;
}

.login-box-msg,
.register-box-msg {
  color: var(--emc-muted);
  font-weight: 600;
}

.input-group-text {
  background: var(--emc-leaf-soft);
  border-color: #cfddd4;
  color: var(--emc-forest);
}

.emc-shell-note {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  margin-top: 1rem;
  text-align: center;
}

/* Seletor de idioma segue o header: texto legivel no claro e no escuro. */
.emc-language-switcher .emc-locale-select,
.emc-language-switcher .emc-locale-icon {
  background: transparent !important;
  color: var(--emc-ink) !important;
}

.emc-language-switcher .emc-locale-select option {
  background: var(--emc-paper);
  color: var(--emc-ink);
}

.emc-language-switcher .dropdown-menu {
  border: 1px solid var(--emc-line);
  border-radius: 8px;
  box-shadow: var(--emc-shadow);
  min-width: 12rem;
}

.emc-language-switcher .dropdown-item {
  color: var(--emc-ink);
  font-weight: 600;
}

.emc-language-switcher .dropdown-item.active,
.emc-language-switcher .dropdown-item:active {
  background: var(--emc-leaf);
  color: #ffffff;
}

.emc-page-title {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.emc-page-title h1 {
  color: var(--emc-forest);
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: .2rem;
}

.emc-page-title h1 i {
  color: var(--emc-leaf);
  margin-right: .4rem;
}

.emc-page-title p {
  color: var(--emc-muted);
  font-weight: 600;
  margin-bottom: 0;
}

.support-ticket-card {
  border-left: 4px solid var(--emc-leaf);
  min-height: 100%;
}

.support-ticket-card .card-title {
  font-size: 1rem;
  max-width: 72%;
}

.emc-excellence-center .emc-pillar-card {
  border-left: 4px solid var(--emc-leaf);
}

.emc-excellence-center .emc-pillar-card .card-body {
  min-height: 150px;
}

.emc-idea-row {
  border-bottom: 1px solid var(--emc-line);
  padding: .65rem 0;
}

.emc-idea-row:first-child {
  padding-top: 0;
}

.emc-idea-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.emc-idea-row p {
  color: var(--emc-muted);
  font-size: .88rem;
  font-weight: 600;
  margin: .2rem 0 0;
}

.emc-quality-chip {
  align-items: center;
  background: var(--emc-leaf-soft);
  border: 1px solid var(--emc-line);
  border-radius: 8px;
  color: var(--emc-forest);
  display: inline-flex;
  font-weight: 800;
  gap: .35rem;
  padding: .35rem .55rem;
}

.crop-season-ledger .table td,
.crop-season-ledger .table th {
  vertical-align: middle;
}

.crop-season-ledger .small-box h3 {
  font-size: 1.35rem;
}

.specialist-network-card {
  border-left: 4px solid var(--emc-leaf);
}
/* Responsive usability refinements */
.content-wrapper .container-fluid {
  max-width: 1680px;
}

.card,
.small-box,
.modal-content {
  border-radius: 8px;
}

.field-visit-card {
  border-left: 4px solid #18864b;
}

.field-checklist-grid {
  display: grid;
  gap: .45rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.field-photo-grid {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.field-photo-tile {
  border: 1px solid var(--emc-line);
  border-radius: 8px;
  color: var(--emc-ink);
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.field-photo-tile img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  width: 100%;
}

.field-photo-tile span {
  background: #ffffff;
  display: block;
  font-size: .78rem;
  font-weight: 700;
  padding: .35rem .45rem;
}

.visit-schedule-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: flex-end;
}

.visit-schedule-card {
  border-left: 4px solid var(--emc-leaf);
  min-height: 100%;
}

.visit-schedule-card.is-overdue {
  border-left-color: #c2410c;
}

.offline-visit-card {
  border-left: 4px solid var(--emc-leaf);
  min-height: 100%;
}

.emc-action-alert {
  border-radius: 8px;
  box-shadow: var(--emc-shadow);
  font-weight: 700;
}

.visit-calendar-grid {
  display: grid;
  gap: .45rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.visit-calendar-head {
  color: var(--emc-forest);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.visit-calendar-day {
  background: #fffef9;
  border: 1px solid var(--emc-line);
  border-radius: 8px;
  color: var(--emc-ink);
  cursor: pointer;
  display: block;
  min-height: 112px;
  padding: .55rem;
  text-align: left;
  width: 100%;
}

.visit-calendar-day.is-empty {
  background: rgba(255, 255, 255, .35);
  border-style: dashed;
}

.visit-calendar-day.is-today {
  border-color: var(--emc-leaf);
  box-shadow: 0 0 0 2px rgba(31, 122, 77, .12);
}

.visit-calendar-day.is-selected {
  background: #ffffff;
  border-color: var(--emc-forest);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, .16);
}

.visit-calendar-day.has-visits {
  background: var(--emc-leaf-soft);
}

.visit-calendar-number {
  color: var(--emc-forest);
  font-weight: 800;
  margin-bottom: .35rem;
}

.visit-calendar-item {
  background: rgba(255, 255, 255, .82);
  border-radius: 6px;
  color: var(--emc-ink);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem;
  overflow: hidden;
  padding: .25rem .35rem;
  text-overflow: ellipsis;
}

.visit-calendar-actions {
  display: flex;
  gap: .2rem;
  margin-top: .25rem;
}

.visit-calendar-actions .btn-xs {
  border-radius: 6px;
  font-size: .68rem;
  line-height: 1;
  min-height: 24px;
  padding: .2rem .35rem;
}

.visit-day-panel {
  background: rgba(255, 253, 248, .96);
  border: 1px solid var(--emc-line);
  border-radius: 8px;
  padding: 1rem;
}

.visit-day-detail {
  display: none;
}

.visit-day-detail.is-active {
  display: block;
}

.visit-day-card {
  background: #ffffff;
  border: 1px solid var(--emc-line);
  border-left: 4px solid var(--emc-leaf);
  border-radius: 8px;
  margin-bottom: .85rem;
  padding: .85rem;
}

.visit-day-card.is-overdue {
  border-left-color: #c2410c;
}

.offline-report-form {
  background: rgba(247, 245, 239, .72);
  border: 1px solid var(--emc-line);
  border-radius: 8px;
  padding: .75rem;
}

.offline-checklist {
  display: grid;
  gap: .35rem;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.offline-check {
  background: #ffffff;
  border: 1px solid var(--emc-line);
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 700;
  margin: 0;
  padding: .35rem .45rem;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

.form-control,
.custom-select,
.btn {
  min-height: 38px;
}

@media (max-width: 991.98px) {
  .main-header.navbar {
    left: 0;
    width: 100%;
  }

  body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
  body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer,
  body.sidebar-collapse .content-wrapper,
  body.sidebar-collapse .main-footer,
  body.sidebar-open .content-wrapper,
  body.sidebar-open .main-footer {
    margin-left: 0;
  }

  body.sidebar-collapse .main-header.navbar,
  body.sidebar-open .main-header.navbar {
    left: 0;
  }

  .emc-header-alert,
  body.sidebar-collapse .emc-header-alert,
  body.sidebar-open .emc-header-alert {
    margin-left: 0;
  }

  .main-sidebar {
    margin-left: 0 !important;
    transform: translateX(-100%);
    width: 250px;
  }

  /* Sidebar acima do header e da area escura quando aberta no mobile: assim
     todos os itens (topo, busca, grupos) ficam visiveis e clicaveis. */
  body.sidebar-open .main-sidebar {
    transform: translateX(0);
    z-index: 1060;
  }

  body.sidebar-open::after {
    background: rgba(5, 22, 16, .5);
    content: "";
    cursor: pointer;
    inset: 0;
    position: fixed;
    z-index: 1039;
  }

  body.sidebar-open .main-header.navbar {
    z-index: 1055;
  }
}

@media (max-width: 767.98px) {
  .main-header.navbar {
    left: 0;
    width: 100%;
  }

  body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
  body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer {
    margin-left: 0;
  }

  body.sidebar-collapse .main-header.navbar,
  body.sidebar-open .main-header.navbar {
    left: 0;
  }

  body.sidebar-collapse .content-wrapper,
  body.sidebar-collapse .main-footer,
  body.sidebar-open .content-wrapper,
  body.sidebar-open .main-footer {
    margin-left: 0;
  }

  .emc-header-alert,
  body.sidebar-collapse .emc-header-alert,
  body.sidebar-open .emc-header-alert {
    margin-left: 0;
  }

  .main-sidebar {
    margin-left: 0 !important;
    transform: translateX(-100%);
    width: 250px;
  }

  body.sidebar-open .main-sidebar {
    transform: translateX(0);
  }

  body.sidebar-open::after {
    background: rgba(5, 22, 16, .46);
    content: "";
    inset: 0;
    position: fixed;
    z-index: 1039;
  }

  body.sidebar-open .main-header.navbar {
    z-index: 1055;
  }

  .content-header,
  .content {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .card-body,
  .card-header,
  .card-footer {
    padding: .85rem;
  }

  .btn {
    width: 100%;
    margin-bottom: .35rem;
  }

  .d-flex.justify-content-between,
  .d-flex.flex-wrap.justify-content-between {
    gap: .5rem;
  }

  .table th,
  .table td {
    white-space: nowrap;
  }

  .modal-dialog {
    margin: .5rem;
  }

  .visit-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visit-calendar-head {
    display: none;
  }

  .visit-calendar-day.is-empty {
    display: none;
  }
}

@media (min-width: 1400px) {
  .content-wrapper .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .card-body {
    padding: 1.35rem;
  }
}

.emc-page-kicker {
  color: var(--emc-leaf);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.emc-panel-title {
  color: var(--emc-forest);
  font-weight: 800;
  letter-spacing: 0;
}

.emc-trust-strip {
  align-items: center;
  background: linear-gradient(135deg, rgba(231, 244, 236, .92), rgba(255, 253, 248, .96));
  border: 1px solid var(--emc-line);
  border-left: 4px solid var(--emc-leaf);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-between;
  padding: .85rem 1rem;
}

.emc-soft-badge {
  background: var(--emc-leaf-soft);
  border: 1px solid rgba(31, 122, 77, .18);
  border-radius: 999px;
  color: var(--emc-forest);
  display: inline-flex;
  font-size: .78rem;
  font-weight: 800;
  gap: .35rem;
  padding: .32rem .65rem;
}

.emc-table-tools {
  align-items: center;
  background: #fff;
  border: 1px solid var(--emc-line);
  border-radius: 8px;
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  margin: 0 0 .85rem;
  padding: .75rem;
}

.emc-table-search {
  max-width: 360px;
}

.emc-table-pager {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
  body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer {
    margin-left: 0;
  }

  .main-header.navbar {
    left: 0;
    min-height: 3.65rem;
  }

  .content-wrapper {
    margin-top: 3.65rem;
    padding: .7rem .55rem 1.5rem;
  }

  .emc-main-header .navbar-text {
    display: none !important;
  }

  .main-sidebar {
    bottom: 0;
    left: 0;
    position: fixed !important;
    top: 0;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 1045;
  }

  body.sidebar-open .main-sidebar {
    transform: translateX(0);
  }

  body.sidebar-open::before {
    background: rgba(9, 36, 24, .48);
    bottom: 0;
    content: "";
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1040;
  }

  body.sidebar-open .main-header {
    z-index: 1055;
  }

  .emc-table-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .emc-table-search,
  .emc-table-pager,
  .emc-table-pager .btn {
    max-width: none;
    width: 100%;
  }

  .emc-table-pager .emc-table-page {
    display: block;
    text-align: center;
    width: 100%;
  }

  body.sidebar-collapse .main-header.navbar,
  body.sidebar-collapse .content-wrapper,
  body.sidebar-collapse .main-footer,
  body.sidebar-collapse .emc-header-alert {
    left: 0;
    margin-left: 0;
  }

  .emc-whatsapp-titlebar {
    align-items: stretch !important;
    gap: .75rem;
  }

  .emc-whatsapp-heading,
  .emc-whatsapp-actions,
  .emc-whatsapp-actions form,
  .emc-whatsapp-actions .btn {
    width: 100%;
  }

  .emc-whatsapp-actions {
    display: grid;
    gap: .5rem;
  }

  .emc-whatsapp-admin .card-body.d-flex {
    align-items: stretch !important;
    gap: .75rem;
  }

  .emc-whatsapp-admin .card-body.d-flex > div,
  .emc-whatsapp-admin .card-body.d-flex > form,
  .emc-whatsapp-admin .card-body.d-flex .btn {
    width: 100%;
  }

  .emc-wpp-table,
  .emc-wpp-table thead,
  .emc-wpp-table tbody,
  .emc-wpp-table tr,
  .emc-wpp-table td {
    display: block;
    width: 100%;
  }

  .emc-wpp-table thead {
    display: none;
  }

  .emc-wpp-table tr {
    background: #fff;
    border: 1px solid var(--emc-line);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(25, 58, 43, .06);
    margin: .7rem;
    padding: .7rem;
  }

  .emc-wpp-table td {
    border: 0 !important;
    padding: .38rem .15rem !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word;
  }

  .emc-wpp-table td::before {
    color: var(--emc-muted);
    content: attr(data-label);
    display: block;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: .1rem;
    text-transform: uppercase;
  }

  .emc-wpp-table .btn,
  .emc-wpp-table form {
    width: 100%;
  }
}

/* ============================================================
   USABILIDADE — transicoes, foco acessivel, botoes de tema
   ============================================================ */

html,
body,
.main-header.navbar,
.main-sidebar,
.content-wrapper,
.main-footer,
.card,
.info-box,
.small-box,
.modal-content,
.callout,
.form-control,
.custom-select,
.table,
.dropdown-menu {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* Foco visivel para navegacao por teclado */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(31, 122, 77, .55);
  outline-offset: 2px;
}

/* Botao de alternar tema (navbar) */
.emc-theme-toggle {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  height: 2.65rem;
  justify-content: center;
  margin: 0.25rem 0.15rem;
  width: 2.65rem;
}

.emc-theme-toggle i {
  font-size: 1.05rem;
}

/* Botao voltar ao topo */
.emc-scroll-top {
  align-items: center;
  background: var(--emc-leaf);
  border: 0;
  border-radius: 50%;
  bottom: 1.1rem;
  box-shadow: 0 10px 26px rgba(15, 61, 46, .32);
  color: #fff;
  cursor: pointer;
  display: none;
  height: 3rem;
  justify-content: center;
  opacity: 0;
  position: fixed;
  right: 1.1rem;
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
  width: 3rem;
  z-index: 1050;
}

.emc-scroll-top.is-visible {
  display: inline-flex;
  opacity: 1;
}

.emc-scroll-top:hover {
  background: var(--emc-forest);
  transform: translateY(-2px);
}

.emc-scroll-top i {
  font-size: 1.2rem;
}

/* ============================================================
   MOBILE / TELAS PEQUENAS — polimento de usabilidade
   ============================================================ */
@media (max-width: 767.98px) {
  /* Sidebar sempre acima da overlay escura (evita "toco no item e fecha"). */
  .main-sidebar { z-index: 1045 !important; }
  body.sidebar-open::after { z-index: 1040; }
  body.sidebar-open .main-header.navbar { z-index: 1055; }

  /* Tabelas roláveis e compactas. */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .content-wrapper .table td,
  .content-wrapper .table th {
    font-size: .82rem;
    padding: .4rem .5rem;
    white-space: nowrap;
  }

  /* Modais aproveitam a tela toda com respiro. */
  .modal-xl, .modal-lg { margin: .4rem; max-width: calc(100% - .8rem); }
  .modal-body { padding: .85rem; }

  /* Cabecalhos e caixas menores, sem quebrar. */
  .content-header h1, .content-header .h1 { font-size: 1.25rem; }
  .small-box .inner h3 { font-size: 1.5rem; }
  .info-box .info-box-number { font-size: 1rem; }

  /* Alvos de toque maiores e acoes principais em largura total. */
  .btn { min-height: 2.5rem; }
  .card-body form .btn-block,
  .content .btn-lg { width: 100%; }

  /* Botoes agrupados quebram linha em vez de estourar. */
  .btn-group, .btn-toolbar { flex-wrap: wrap; gap: .25rem; }

  /* Colunas de formulario empilham com respiro. */
  .form-row > [class*="col-"] { margin-bottom: .5rem; }
}

/* Nunca deixar a pagina rolar horizontalmente no corpo. */
html, body { max-width: 100%; overflow-x: hidden; }

@media print {
  .emc-scroll-top,
  .emc-theme-toggle {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   TEMA ESCURO (dia/noite)
   ============================================================ */

html.emc-dark {
  --emc-forest: #6fe0a3;
  --emc-leaf: #35b06e;
  --emc-leaf-soft: #16241d;
  --emc-mint: #8ff0b8;
  --emc-amber: #e6b45a;
  --emc-cream: #0e1512;
  --emc-paper: #16201b;
  --emc-ink: #e6efe9;
  --emc-muted: #9db0a7;
  --emc-line: #2a3830;
  --emc-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

html.emc-dark,
html.emc-dark body {
  background: var(--emc-cream);
  color: var(--emc-ink);
}

/* Cobre os containers de layout do AdminLTE (fundo claro por padrao) e faz
   a barra de rolagem/campos nativos seguirem o escuro (fim dos "gaps brancos"). */
html.emc-dark {
  color-scheme: dark;
}

html.emc-dark .wrapper,
html.emc-dark .content-wrapper,
html.emc-dark .content,
html.emc-dark .main-footer,
html.emc-dark .control-sidebar,
html.emc-dark .content-header {
  background-color: var(--emc-cream) !important;
  color: var(--emc-ink);
}

html.emc-dark ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html.emc-dark ::-webkit-scrollbar-track {
  background: #0e1512;
}

html.emc-dark ::-webkit-scrollbar-thumb {
  background: #2a3830;
  border-radius: 6px;
}

:root {
  color-scheme: light;
}

html.emc-dark body::before {
  background:
    radial-gradient(circle at 18% 8%, rgba(53, 176, 110, 0.10), transparent 28rem),
    linear-gradient(135deg, rgba(14, 21, 18, 0.96), rgba(18, 28, 23, 0.9));
}

html.emc-dark .main-header.navbar {
  background: rgba(20, 30, 25, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

html.emc-dark .main-header .nav-link,
html.emc-dark .main-header .navbar-text,
html.emc-dark .main-header .text-dark {
  color: var(--emc-ink) !important;
}

html.emc-dark .main-header .nav-link:hover,
html.emc-dark .main-header .nav-link:focus {
  background: rgba(53, 176, 110, 0.16);
  color: #eafff2 !important;
}

html.emc-dark .content-header h1,
html.emc-dark .content-header .h1 {
  color: var(--emc-mint);
}

html.emc-dark .card,
html.emc-dark .info-box,
html.emc-dark .small-box,
html.emc-dark .modal-content,
html.emc-dark .callout {
  background: var(--emc-paper);
  border: 1px solid var(--emc-line);
  box-shadow: var(--emc-shadow);
  color: var(--emc-ink);
}

html.emc-dark .card-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border-bottom: 1px solid var(--emc-line);
}

html.emc-dark .card-title,
html.emc-dark .card-header h3,
html.emc-dark .card-header h5 {
  color: var(--emc-mint);
}

html.emc-dark .table {
  color: var(--emc-ink);
}

html.emc-dark .table thead th {
  background: var(--emc-leaf-soft);
  border-bottom: 1px solid var(--emc-line);
  color: var(--emc-mint);
}

html.emc-dark .table td,
html.emc-dark .table th {
  border-color: var(--emc-line) !important;
}

html.emc-dark .table-bordered,
html.emc-dark .table-bordered td,
html.emc-dark .table-bordered th {
  border-color: var(--emc-line) !important;
}

html.emc-dark .table-hover tbody tr:hover {
  background-color: rgba(53, 176, 110, 0.08);
  color: var(--emc-ink);
}

html.emc-dark .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

html.emc-dark .form-control,
html.emc-dark .custom-select,
html.emc-dark select.form-control,
html.emc-dark textarea.form-control {
  background: #10201a;
  border-color: var(--emc-line);
  color: var(--emc-ink);
}

html.emc-dark .form-control::placeholder {
  color: #7d8f86;
}

html.emc-dark .form-control:focus,
html.emc-dark .custom-select:focus {
  border-color: var(--emc-leaf);
  box-shadow: 0 0 0 0.2rem rgba(53, 176, 110, 0.2);
}

html.emc-dark .input-group-text {
  background: var(--emc-leaf-soft);
  border-color: var(--emc-line);
  color: var(--emc-mint);
}

html.emc-dark .dropdown-menu {
  background: var(--emc-paper);
  border: 1px solid var(--emc-line);
  box-shadow: var(--emc-shadow);
}

html.emc-dark .dropdown-item {
  color: var(--emc-ink);
}

html.emc-dark .dropdown-item:hover,
html.emc-dark .dropdown-item:focus {
  background: rgba(53, 176, 110, 0.14);
  color: #eafff2;
}

html.emc-dark .emc-language-switcher .input-group-text,
html.emc-dark .emc-language-switcher .custom-select {
  background: transparent !important;
  color: var(--emc-ink) !important;
}

html.emc-dark .emc-language-switcher .emc-locale-select option {
  background: #16201b;
  color: var(--emc-ink);
}

html.emc-dark .main-footer {
  background: rgba(20, 30, 25, 0.92);
  border-top: 1px solid var(--emc-line);
  color: var(--emc-muted);
}

html.emc-dark .text-muted {
  color: #94a69d !important;
}

html.emc-dark .text-dark {
  color: var(--emc-ink) !important;
}

html.emc-dark .close {
  color: var(--emc-ink);
  text-shadow: none;
}

html.emc-dark .btn-outline-dark {
  border-color: var(--emc-line);
  color: var(--emc-ink);
}

html.emc-dark .btn-outline-dark:hover {
  background: var(--emc-line);
  color: #fff;
}

html.emc-dark .badge-warning,
html.emc-dark .bg-warning,
html.emc-dark .alert-warning {
  background-color: #3a2f16 !important;
  border-color: #574523 !important;
  color: #f0d59a !important;
}

html.emc-dark .alert-info,
html.emc-dark .bg-info {
  background-color: #12292c !important;
  border-color: #23474b !important;
  color: #a9e2e0 !important;
}

html.emc-dark .alert-danger {
  background-color: #331a17 !important;
  border-color: #5a2a24 !important;
  color: #f0b3aa !important;
}

html.emc-dark .border,
html.emc-dark .border-top,
html.emc-dark .border-bottom,
html.emc-dark .border-left,
html.emc-dark .border-right {
  border-color: var(--emc-line) !important;
}

html.emc-dark .bg-white,
html.emc-dark .bg-light {
  background-color: var(--emc-paper) !important;
  color: var(--emc-ink);
}

html.emc-dark .emc-table-tools,
html.emc-dark .visit-day-panel,
html.emc-dark .offline-report-form,
html.emc-dark .visit-calendar-day,
html.emc-dark .visit-day-card,
html.emc-dark .offline-check,
html.emc-dark .field-photo-tile span {
  background: var(--emc-paper);
  border-color: var(--emc-line);
  color: var(--emc-ink);
}

html.emc-dark .emc-trust-strip {
  background: linear-gradient(135deg, rgba(22, 36, 29, .92), rgba(18, 28, 23, .96));
  border-color: var(--emc-line);
}

html.emc-dark .emc-soft-badge,
html.emc-dark .emc-quality-chip {
  background: var(--emc-leaf-soft);
  border-color: rgba(53, 122, 87, .3);
  color: var(--emc-mint);
}

/* Barra de progresso de navegacao (feedback ao trocar de pagina) */
.emc-nav-progress {
  background: linear-gradient(90deg, var(--emc-leaf), var(--emc-mint));
  height: 3px;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease, opacity .3s ease;
  width: 100%;
  z-index: 2000;
}

.emc-nav-progress.is-loading {
  animation: emc-nav-progress-grow 8s cubic-bezier(0.1, 0.6, 0.2, 1) forwards;
  opacity: 1;
}

.emc-nav-progress.is-done {
  opacity: 0;
  transform: scaleX(1);
}

@keyframes emc-nav-progress-grow {
  0% { transform: scaleX(0); }
  20% { transform: scaleX(0.55); }
  60% { transform: scaleX(0.82); }
  100% { transform: scaleX(0.95); }
}

/* Icone do botao de tema conforme o modo ativo */
.emc-theme-toggle .emc-icon-moon {
  display: inline-block;
}

.emc-theme-toggle .emc-icon-sun {
  display: none;
}

html.emc-dark .emc-theme-toggle .emc-icon-moon {
  display: none;
}

html.emc-dark .emc-theme-toggle .emc-icon-sun {
  display: inline-block;
}

/* =========================================================================
   RESPONSIVIDADE GLOBAL PARA TELAS PEQUENAS
   Aplica a TODOS os paineis/paginas de uma vez. Objetivos:
   - A pagina nunca rola na horizontal por conteudo largo (tabelas, toolbars).
   - Tabelas e conteudo largo rolam DENTRO do proprio card, sem quebrar o
     alinhamento interno da tabela (por isso rolamos o container, nao a table).
   - Cabecalhos, toolbars e grupos de botoes empilham; alvos de toque maiores.
   - Midias nunca estouram a largura.
   Nao depende de alterar cada pagina: e uma base segura para as telas antigas.
   ========================================================================= */

/* Universal e seguro: midia nunca ultrapassa a largura util. */
img,
svg,
video,
canvas,
iframe,
embed {
  max-width: 100%;
  height: auto;
}
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  /* A pagina em si nunca rola na horizontal; o conteudo largo rola no card. */
  .content-wrapper,
  .content,
  .container-fluid {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Qualquer conteudo largo (inclusive tabelas) rola dentro do card, sem
     mexer no display da <table> (o que quebraria o alinhamento das colunas). */
  .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cabecalhos de card, toolbars e grupos de acao empilham em vez de estourar. */
  .card-header,
  .card-tools,
  .btn-toolbar,
  .content-header .row,
  .emc-page-actions,
  .emc-soil-actions {
    flex-wrap: wrap;
    row-gap: .4rem;
  }
  .card-header > .card-tools {
    position: static;
    margin-left: 0;
  }

  /* Botoes ficam mais faceis de tocar; grupos verticais/blocos ocupam a largura. */
  .btn {
    min-height: 2.4rem;
  }
  .btn-block,
  .btn-group-vertical {
    width: 100%;
  }

  /* Modais grandes usam quase toda a largura e rolam conteudo largo. */
  .modal-lg,
  .modal-xl {
    max-width: 100%;
  }
  .modal-body {
    overflow-x: auto;
  }

  /* Formularios em linha passam a empilhar (nao ficam apertados). */
  .form-inline .form-group,
  .form-inline .form-control,
  .form-inline .custom-select,
  .form-inline .btn {
    width: 100%;
  }
  .form-inline .form-group {
    margin-bottom: .5rem;
  }

  /* Densidade um pouco menor para caber melhor em telas estreitas. */
  .table td,
  .table th {
    padding: .5rem;
    font-size: .85rem;
  }
  .content-header h1 {
    font-size: 1.3rem;
  }
  .info-box,
  .small-box {
    margin-bottom: .75rem;
  }
}

/* =========================================================================
   Refinamentos globais para telas pequenas
   ========================================================================= */

@media (max-width: 767.98px) {
  /* Botoes de acao inline (dentro de tabelas, modais, grupos e dropdowns)
     NAO devem virar largura total: mantem o layout compacto de acoes. */
  td .btn,
  .table .btn,
  .btn-group .btn,
  .input-group .btn,
  .input-group-append .btn,
  .input-group-prepend .btn,
  .card-tools .btn,
  .pagination .btn,
  .dropdown-menu .btn,
  .modal-footer .btn,
  [class*="emc-actions"] .btn,
  .emc-rural-actions .btn {
    margin-bottom: 0;
    width: auto;
  }
  .modal-footer .btn {
    flex: 1 1 auto;
  }

  /* iOS: inputs com fonte >= 16px evitam o zoom automatico ao focar. */
  .form-control,
  .custom-select,
  select.form-control,
  textarea.form-control {
    font-size: 16px;
  }

  /* Modais grandes ocupam quase toda a tela e o corpo rola sozinho,
     evitando que formularios longos (analise de solo) fiquem cortados. */
  .modal-dialog.modal-xl,
  .modal-dialog.modal-lg {
    margin: .5rem auto;
    max-width: calc(100vw - 1rem);
  }
  .modal-dialog.modal-xl .modal-body,
  .modal-dialog.modal-lg .modal-body {
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Abas horizontais rolam em vez de quebrar em varias linhas. */
  .nav-tabs,
  .nav-pills:not(.nav-sidebar):not(.flex-column) {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs .nav-link,
  .nav-pills:not(.nav-sidebar) .nav-link {
    white-space: nowrap;
  }

  /* Badges longos (versoes de regra, status) quebram linha nos cards. */
  .card .badge,
  .alert .badge {
    white-space: normal;
    text-align: left;
  }

  /* Numeros grandes dos cards de resumo nao estouram a caixa. */
  .small-box .inner h3 {
    font-size: clamp(1.15rem, 6vw, 1.9rem);
    word-break: break-word;
  }
  .small-box .inner p {
    font-size: .85rem;
  }

  /* Graficos e imagens nunca estouram a largura da tela. */
  .card-body canvas,
  .card-body img,
  .card-body svg {
    height: auto !important;
    max-width: 100%;
  }

  /* PWA instalado: respeita as areas seguras (notch/barra inferior). */
  .content-wrapper {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .main-footer {
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Toque (dedo): alvos maiores em qualquer largura de tela. */
@media (pointer: coarse) {
  td .btn-sm,
  td .btn-xs,
  .table .btn-sm,
  .table .btn-xs {
    min-height: 2.35rem;
    min-width: 2.6rem;
    padding: .4rem .6rem;
  }
  .custom-control-label::before,
  .custom-control-label::after {
    height: 1.15rem;
    width: 1.15rem;
  }
  .custom-control {
    min-height: 1.6rem;
    padding-left: 1.85rem;
  }
  .custom-control-label {
    padding-top: .1rem;
  }
}

/* Tabelas simples podem virar cards no mobile: basta adicionar a classe
   emc-cards-sm na tabela. O ux_enhancements preenche os data-label a partir
   do cabecalho automaticamente. */
@media (max-width: 767.98px) {
  .emc-cards-sm thead {
    display: none;
  }
  .emc-cards-sm,
  .emc-cards-sm tbody,
  .emc-cards-sm tr,
  .emc-cards-sm td {
    display: block;
    width: 100%;
  }
  .emc-cards-sm tr {
    background: #fff;
    border: 1px solid var(--emc-line);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 81, 50, .06);
    margin-bottom: .65rem;
    overflow: hidden;
  }
  .emc-cards-sm td {
    border: 0 !important;
    border-bottom: 1px solid #eef3ef !important;
    padding: .6rem .75rem !important;
    white-space: normal !important;
  }
  .emc-cards-sm td:last-child {
    border-bottom: 0 !important;
  }
  .emc-cards-sm td::before {
    color: var(--emc-muted);
    content: attr(data-label);
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: .15rem;
    text-transform: uppercase;
  }
  .emc-cards-sm td:not([data-label])::before,
  .emc-cards-sm td[data-label=""]::before {
    content: none;
  }
}

/* ===== Ajustes finos adicionais para telas pequenas (revisao mobile) ===== */
@media (max-width: 767.98px) {
  /* Dropdowns do header (sininho de pendencias, notificacoes) nunca
     estouram a largura da tela e rolam quando ha muitos itens. */
  .navbar .dropdown-menu,
  .navbar .dropdown-menu-lg {
    max-width: calc(100vw - 1rem) !important;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Graficos (canvas) e imagens nunca estouram o card. */
  .card-body canvas,
  .card-body img {
    max-width: 100% !important;
    height: auto;
  }

  /* Texto longo (URLs, hashes de PDF, e-mails) quebra em vez de estourar. */
  .card-body,
  .modal-body,
  .alert {
    overflow-wrap: break-word;
  }

  /* Paginacao enrola em varias linhas em vez de estourar. */
  .pagination {
    flex-wrap: wrap;
    row-gap: .25rem;
  }

  /* Rodape de modal: botoes dividem a largura e enrolam se precisar. */
  .modal-footer {
    flex-wrap: wrap;
    row-gap: .4rem;
  }
  .modal-footer .btn {
    flex: 1 1 auto;
  }

  /* Inputs dentro de tabelas mantem largura util minima ao rolar. */
  .table .form-control,
  .table .custom-select {
    min-width: 7rem;
  }

  /* Toolbars com muitos filtros empilham com respiro. */
  .emc-page-title,
  .d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    row-gap: .5rem;
  }
}

/* Etiqueta com o nome do talhao, sempre visivel sobre o mapa de satelite.
   Usada pelos mapas de sitio e de detalhe do talhao (Leaflet tooltip permanente). */
.leaflet-tooltip.emc-plot-label {
  background: rgba(255, 193, 7, .95);
  border: 1px solid rgba(15, 61, 46, .55);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  color: #143629;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  white-space: nowrap;
}
.leaflet-tooltip.emc-plot-label::before {
  display: none; /* remove a setinha do balao */
}
@media (max-width: 767.98px) {
  .leaflet-tooltip.emc-plot-label {
    font-size: 10px;
    padding: 1px 5px;
  }
}

/* ===== Controles do Leaflet x modais =====
   Os creditos das imagens (Esri/Maxar/OSM) sao exigencia de licenca e ficam
   visiveis nos mapas grandes. Porem NUNCA devem capturar toque: no celular a
   barra de atribuicao ficava por cima e travava a navegacao entre modais. */
.leaflet-control-attribution {
  pointer-events: none;
  font-size: 9px;
  opacity: .75;
}
/* O link de credito continua clicavel no desktop, sem bloquear o resto. */
.leaflet-control-attribution a {
  pointer-events: auto;
}

/* Trava de seguranca: controles do mapa nunca acima do modal do Bootstrap
   (1050+). Sem isso eles "escapam" do mapa e flutuam sobre a tela toda. */
.leaflet-top,
.leaflet-bottom {
  z-index: 1000;
}

@media (max-width: 767.98px) {
  /* No celular a atribuicao fica menor e totalmente inerte ao toque. */
  .leaflet-control-attribution,
  .leaflet-control-attribution a {
    pointer-events: none;
    font-size: 8px;
  }
}