/* =========================================
   DESIGN SYSTEM - OCEANO AZUL
   ========================================= */


  :root {
  --navbar-offset: 64px; /* fallback */
}

/* 🔒 TRAVA O BODY (obrigatório no iOS) */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* só trava lateral */
}

body.modal-open .app-content {
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
}

/* ✅ Navbar fixa */
.navbar.fixed-top {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
}

/* ✅ Wrapper principal */
.app-wrapper {
  height: 100%;
  display: flex;
}

/* ✅ CONTEÚDO COM SCROLL (não o body) */
.app-content {
  flex: 1;
  margin-top: calc(
    var(--navbar-offset) + env(safe-area-inset-top, 0px)
  );

  height: calc(
    100dvh - var(--navbar-offset) - env(safe-area-inset-top, 0px)
  );

  -webkit-overflow-scrolling: touch;

  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ❌ NUNCA use vh/svh aqui */
.app-content > .container-fluid {
  min-height: unset !important;
}

 
/* -----------------------------------------
   DARK COOKIE (Prioridade Máxima)
   ----------------------------------------- */
html.dark-mode {
  --color-bg-body: #101927;
  --color-bg-surface: #162235;
  --color-text-main: #e2e8f0;
  --color-text-muted: #a0aec0;
}

/* -----------------------------------------
   1) VARIÁVEIS GLOBAIS
   ----------------------------------------- */
:root {

  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  /* Cores Principais */
  --color-primary-dark: #1a4a7c;
  --color-primary: #2c5282;
  --color-accent: #00a3c4;
  --color-accent-hover: #008ba3;

  /* Superfícies e Texto */
  --color-bg-body: #f4f7f9;
  --color-bg-white: #ffffff;
  --color-bg-surface: #ffffff;
  --color-text-main: #2d3748;
  --color-text-muted: #718096;
  --color-text-notificação: #abe7fa9a;
  --color-filter: #424649;

  /* Cores Semânticas */
  --color-success: #2f855a;
  --color-success-hover: #276749;
  --color-warning: #f3e526;
  --color-danger: #e53e3e;
  --color-recomended: #F7630C;
  --color-completed: #9B30FF;

  /* Sombras */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Bordas */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 50rem;

  /* Layout */
  --navbar-height: 90px;
  --sidebar-width: 230px;
  --sidebar-width-collapsed: 80px;

  /* Utilitários */
  --transition-base: 0.3s ease;
  --color-accent-soft: rgba(0, 163, 196, 0.12);
  --color-accent-soft-hover: rgba(0, 163, 196, 0.18);
}

/* -----------------------------------------
   1.1) AGRO MODE (LIGHT)
   ----------------------------------------- */
body.agro-mode {
  --color-primary-dark: #1f6f3f;
  --color-primary: #2f8f4f;
  --color-accent: #3ab16b;
  --color-accent-hover: #2d9458;
  --color-success: #2c7a4a;
  --color-success-hover: #25623d;
  --color-accent-soft: rgba(58, 177, 107, 0.12);
  --color-accent-soft-hover: rgba(58, 177, 107, 0.2);
  --bs-primary: #2f8f4f;
  --bs-primary-rgb: 47, 143, 79;
  --bs-link-color: #2f8f4f;
  --bs-link-hover-color: #1f6f3f;
}

/* -----------------------------------------
   2) RESET, TIPOGRAFIA E LINKS
   ----------------------------------------- */
body {
   padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  margin: 0;
  background: var(--color-bg-body);
  font-family: "Poppins", sans-serif;
  color: var(--color-text-main);
  line-height: 1.6;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary-dark);
  font-weight: 700;
  letter-spacing: -0.5px;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-accent);
}

.bi {
  color: var(--color-accent);
  transition: color 0.2s;
}

.rotulo-customizado {
  font-family: Georgia, serif;
}

.fs-4 {
  font-family: "Poppins", sans-serif;
  font-size: 1.25rem;
}

.transition-all {
  transition: all 0.25s ease;
}

/* -----------------------------------------
   3) NAVBAR
   ----------------------------------------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  background-color: rgba(255, 255, 255, 0.98);
  transition: all 0.3s ease;
  padding: 0.5rem 0;
  border-bottom: 1px solid transparent;
  min-height: var(--navbar-height);
}

.navbar.fixed-top {
  padding-top: calc(0.75rem + var(--safe-top));
}

.navbar-shell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding-left: clamp(1.1rem, 2vw, 2.25rem);
  padding-right: clamp(1.1rem, 2vw, 2.25rem);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 0 !important;
  flex-shrink: 0;
  transition: all 0.3s;
}

.navbar-brand img {
  max-height: 55px;
  width: auto;
  transition: max-height 0.3s;
  backface-visibility: hidden;
}

.navbar-user-menu {
  margin-left: auto !important;
  flex-shrink: 0;
}

.navbar-account-dropdown {
  min-width: 272px !important;
}

.navbar-brand span {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  transition: font-size 0.3s;
}

.navbar-mode-pill {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(47, 143, 79, 0.35);
  background: rgba(47, 143, 79, 0.1);
  color: #1f6f3f;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
}

body.agro-mode .navbar-mode-pill {
  display: inline-flex;
}

body.agro-mode .navbar-logo {
  filter: hue-rotate(-95deg) saturate(1.35) contrast(1.03);
}

.admin-context-switch {
  --admin-context-thumb-left: 4px;
  --admin-context-thumb-width: calc(50% - 4px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(30, 45, 70, 0.12);
  border-radius: 999px;
  padding: 2px;
  box-shadow: 0 2px 8px rgba(10, 24, 44, 0.07);
  backdrop-filter: blur(6px);
  width: fit-content;
  isolation: isolate;
}

.admin-context-switch-dropdown {
  width: 100%;
}

.admin-context-switch-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: var(--admin-context-thumb-left);
  width: var(--admin-context-thumb-width);
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
  transition: left 0.28s ease, width 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0)),
    linear-gradient(130deg, #3a739f, #1687af 70%, #15769b);
  box-shadow: 0 4px 12px rgba(16, 34, 58, 0.18);
}

.admin-context-switch.is-agro .admin-context-switch-thumb {
  background:
    linear-gradient(140deg, rgba(255,255,255,0.14), rgba(255,255,255,0)),
    linear-gradient(135deg, #2a8650, #37a362 68%, #2d9056);
  box-shadow: 0 4px 12px rgba(20, 66, 37, 0.18);
}

.admin-context-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  min-width: 116px;
  padding: 4px 9px;
  border: none;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #49627d;
  background: transparent;
  transition: color 0.22s ease, opacity 0.22s ease, background-color 0.22s ease;
  border: 1px solid transparent;
  z-index: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.admin-context-switch-dropdown .admin-context-btn {
  flex: 1 1 0;
  min-width: 0;
}

.admin-context-btn[data-admin-context="agro"] {
  color: #2a7c49;
}

.admin-context-btn-icon {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 86, 122, 0.1);
  font-size: 0.54rem;
  line-height: 1;
  color: currentColor;
  transition: background-color 0.22s ease, color 0.22s ease;
}

.admin-context-btn[data-admin-context="agro"] .admin-context-btn-icon {
  background: rgba(33, 111, 61, 0.1);
}

.admin-context-btn-icon .bi {
  color: currentColor;
}

.admin-context-btn:not(.is-active) {
  opacity: 0.92;
}

.admin-context-btn:not(.is-active):hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.admin-context-btn.is-active {
  opacity: 1;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}

.admin-context-btn.is-active .admin-context-btn-icon {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

body.dark-mode .admin-context-switch {
  background: rgba(18, 34, 52, 0.74);
  border-color: rgba(90, 123, 156, 0.22);
}

body.dark-mode.agro-mode .admin-context-switch {
  background: rgba(15, 36, 27, 0.78);
  border-color: rgba(80, 131, 103, 0.22);
}

body.dark-mode .admin-context-btn {
  color: #b7dcff;
}

body.dark-mode .admin-context-btn[data-admin-context="agro"] {
  color: #c4f0d7;
}

body.dark-mode .admin-context-btn-icon {
  background: rgba(76, 163, 255, 0.14);
}

body.dark-mode .admin-context-btn[data-admin-context="agro"] .admin-context-btn-icon {
  background: rgba(87, 199, 139, 0.14);
}

body.dark-mode .admin-context-btn:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.06);
}

.admin-context-badge {
  margin-left: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  border-radius: 999px;
  background: #e8f5fb;
  color: #0e7aa6;
  border: 1px solid rgba(14, 122, 166, 0.25);
  font-weight: 700;
}

body.agro-mode .admin-context-badge {
  background: rgba(47, 143, 79, 0.12);
  color: #1f6f3f;
  border-color: rgba(47, 143, 79, 0.32);
}

body.dark-mode .admin-context-badge {
  background: rgba(76, 163, 255, 0.14);
  color: #a8d8ff;
  border-color: rgba(76, 163, 255, 0.28);
}

body.dark-mode.agro-mode .admin-context-badge {
  background: rgba(87, 199, 139, 0.15);
  color: #baf0d2;
  border-color: rgba(87, 199, 139, 0.35);
}

.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  min-height: 70px;
}

.navbar-scrolled .navbar-brand img {
  max-height: 40px;
}

.navbar-scrolled .navbar-brand span {
  font-size: 1.2rem;
}

.navbar-nav .nav-link {
  color: var(--color-text-muted);
  font-weight: 500;
  transition: color 0.2s;
}

.navbar-nav .nav-link:hover {
  color: var(--color-accent);
}

.navbar .btn-outline-light {
  color: var(--color-primary);
  border-color: var(--color-primary);
  padding: 0.375rem 0.75rem;
  transition: all 0.3s;
}

.navbar-scrolled .btn-outline-light {
  font-size: 0.85rem;
}

/* -----------------------------------------
   4) SIDEBAR & LAYOUT
   ----------------------------------------- */
.app-sidebar {
  width: var(--sidebar-width);
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  height: calc(100vh - var(--navbar-height));
  background: var(--color-bg-white);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  overflow-y: auto;
  padding: 1.2rem;
  z-index: 1020;
  transition: all 0.3s ease;
}

.app-content {
  margin-left: var(--sidebar-width);
  padding: 1.5rem;
  margin-top: var(--navbar-height);
  transition: margin-left 0.3s ease;
}

.app-sidebar .nav-link {
  color: var(--color-text-main);
  padding: 0.65rem 1rem;
  border-radius: 0.45rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
}

.app-sidebar .nav-link:hover {
  background: rgba(0, 163, 196, 0.1);
  color: var(--color-accent);
}

.app-sidebar .nav-link.active {
  background: rgba(0, 163, 196, 0.15);
  color: var(--color-accent);
  border-left: 4px solid var(--color-accent);
}

.app-sidebar .nav-link-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  justify-content: space-between;
}

.app-sidebar .nav-link-toggle > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.app-sidebar .nav-link-toggle .chevron {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.app-sidebar .nav-link-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.app-sidebar .sub-nav {
  padding: 0.2rem 0 0.35rem 0.75rem;
  margin: 0.15rem 0 0.25rem;
}

.app-sidebar .sub-link {
  font-size: 0.92rem;
  padding: 0.55rem 0.85rem;
}

.feedback-placeholder-link {
  align-items: flex-start !important;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.15;
  white-space: normal;
}

.feedback-placeholder-main {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.feedback-placeholder-note {
  padding-left: 1.9rem;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

/* --- Sidebar Footer & Collapsed State --- */
body.sidebar-collapsed .sidebar-footer .sidebar-text {
  display: none;
}

body.sidebar-collapsed .sidebar-footer button,
body.sidebar-collapsed .sidebar-footer .nav-link {
  width: 45px !important;
  height: 45px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
}

body.sidebar-collapsed .sidebar-footer i {
  margin: 0 !important;
  font-size: 1.2rem;
}

/* Sidebar Collapsed PC */
body.sidebar-collapsed .app-sidebar {
  width: var(--sidebar-width-collapsed);
  padding: 1.2rem 0.5rem;
  overflow-x: hidden;
}

body.sidebar-collapsed .app-sidebar .nav-link {
  text-align: center;
  padding: 0.65rem 0;
}

body.sidebar-collapsed .app-sidebar .nav-link span {
  display: none;
}

body.sidebar-collapsed .app-sidebar .feedback-placeholder-note {
  display: none;
}

body.sidebar-collapsed .app-sidebar .nav-link .me-2 {
  margin-right: 0;
  font-size: 1.2rem;
}

body.sidebar-collapsed .app-sidebar .sub-nav,
body.sidebar-collapsed .app-sidebar .nav-link-toggle .chevron {
  display: none;
}

body.sidebar-collapsed .app-content {
  margin-left: var(--sidebar-width-collapsed);
}

/* Responsividade Sidebar Mobile ( < 991px ) */
@media (max-width: 991px) {
  body.sidebar-open .sidebar-footer .sidebar-text {
    display: inline-block !important;
  }

  body.sidebar-open .sidebar-footer button {
    width: 100% !important;
    border-radius: 50rem !important;
  }
}

@media (max-width: 992px) {
  .navbar {
    position: relative;
    min-height: auto;
    z-index: auto;
    box-shadow: var(--shadow-sm);
  }

  .app-sidebar {
    display: none;
  }

  .app-content {
    margin-left: 0;
    margin-top: 20px;
  }
}
/* -----------------------------------------
   6) CARDS & STATUS STRIP
   ----------------------------------------- */

@keyframes pulse-blue {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(13, 202, 240, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(13, 202, 240, 0); }
}
.animate-pulse {
  animation: pulse-blue 2s infinite;
  border: 1px solid #0dcaf0;
}

.support-alert-badge {
  min-width: 1.45rem;
  font-size: 0.68rem;
  line-height: 1;
  padding: 0.32rem 0.45rem;
  animation: support-alert-pulse 1.35s infinite ease-in-out;
  box-shadow: 0 0 0 rgba(220, 53, 69, 0.35);
}

@keyframes support-alert-pulse {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 7px rgba(220, 53, 69, 0);
  }
  100% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

  @keyframes pulse-red {
      0% { opacity: 1; }
      50% { opacity: 0.7; }
      100% { opacity: 1; }
  }
  .animate-pulse-red {
      animation: pulse-red 2s infinite ease-in-out;
  }
  /* Estilo para destacar a linha inteira se for área restrita (opcional) */
  .table-danger-light {
      background-color: rgba(220, 53, 69, 0.05) !important;
  }

.card {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card-header {
  background: var(--color-bg-white);
  border-bottom: 1px solid #edf2f7;
  padding: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.card-body {
  padding: 1.5rem;
}

/* Status Strips (Barrinha lateral colorida) */
.card.info {
  position: relative;
  padding-left: 15px;
  overflow: hidden;
  color: var(--color-text-main);
}

.card.info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 5px;
  transition: background-color 0.3s ease;
}

.card.info.status-primary::before { background: var(--color-primary); }
.card.info.status-success::before { background: var(--color-success); }
.card.info.status-danger::before { background: var(--color-danger); }
.card.info.status-warning::before { background: var(--color-warning); }
.card.info.status-info::before { background: var(--color-accent); }
.card.info.status-recomended::before { background: var(--color-recomended); }
.card.info.status-completed::before { background: var(--color-completed); }
.card.info.status-secondary::before { background: var(--color-text-muted); }
.card.info.status-cancelled::before { background: #343a40; }

/* Helpers de Texto */
.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-accent) !important; }
.text-recomended { color: var(--color-recomended) !important; }
.text-completed { color: var(--color-completed) !important; }
.text-cancelled { color: #343a40 !important; }

.text-dark { color: var(--color-primary-dark) !important; }
.text-muted { color: var(--color-text-muted) !important; }

/* -----------------------------------------
   9) BADGES, ALERTS & UTILITIES
   ----------------------------------------- */
.badge {
  padding: 0.5em 0.9em;
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.bg-secondary { background: var(--color-text-muted) !important; }
.bg-success { background: var(--color-success) !important; }
.bg-warning { background: #d69e2e !important; color: #fff !important; }
.bg-recomended { background: var(--color-recomended) !important; color: #fff !important; }
.bg-danger { background: var(--color-danger); color: #fff !important; }
.bg-light { background: var(--color-bg-white) !important; color: var(--color-text-main) !important; }
.bg-filter-custom { background: var(--color-accent) !important; color: #fff !important; }
.bg-completed { background: var(--color-completed); color: #fff !important; }

.alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

.small {
  font-size: 0.875rem;
}

/* -----------------------------------------
   10) DARK MODE
   ----------------------------------------- */
body.dark-mode {
  --color-bg-body: #101927;
  --color-bg-white: #1b273b;
  --color-text-main: #e0e7ff;
  --color-text-muted: #94a3b8;
  --color-primary-dark: #60afff;
  --color-primary: #4ca3ff;
  --color-accent: #00e0ff;
  --color-accent-hover: #00b4cc;
  --color-success: #2e8559;
  --color-success-hover: #29ab5b;
  --color-warning: #eac808;
  --color-danger: #e53e3e;
  --color-recomended: #e66f00;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 10px 18px -3px rgba(0, 0, 0, 0.75);
}

body.dark-mode.agro-mode {
  --color-primary-dark: #7fd8a7;
  --color-primary: #57c78b;
  --color-accent: #34d17d;
  --color-accent-hover: #27b56a;
  --color-success: #2ba363;
  --color-success-hover: #228450;
  --bs-primary: #57c78b;
  --bs-primary-rgb: 87, 199, 139;
  --bs-link-color: #57c78b;
  --bs-link-hover-color: #7fd8a7;
}

/* Navbar & Sidebar Dark */
body.dark-mode .navbar { background: #152233; border-bottom: 1px solid #233549; backdrop-filter: blur(8px); }
body.dark-mode .app-sidebar { background: #152233; border-right: 1px solid #233549; }
body.dark-mode .app-sidebar .nav-link { color: var(--color-text-main); }
body.dark-mode .app-sidebar .nav-link:hover { background: rgba(18, 227, 255, 0.13); color: var(--color-accent); }
body.dark-mode .app-sidebar .nav-link.active { background: rgba(18, 227, 255, 0.15); color: var(--color-accent); border-left: 4px solid var(--color-accent); }

body.dark-mode.agro-mode .navbar {
  background: #0f2318;
  border-bottom: 1px solid #214634;
}
body.dark-mode.agro-mode .app-sidebar {
  background: #0f2318;
  border-right: 1px solid #214634;
}
body.dark-mode.agro-mode .app-sidebar .nav-link:hover {
  background: rgba(52, 209, 125, 0.14);
  color: var(--color-accent);
}
body.dark-mode.agro-mode .app-sidebar .nav-link.active {
  background: rgba(52, 209, 125, 0.18);
  color: var(--color-accent);
  border-left: 4px solid var(--color-accent);
}
body.dark-mode.agro-mode .navbar-mode-pill {
  border-color: rgba(127, 216, 167, 0.38);
  background: rgba(127, 216, 167, 0.16);
  color: #baf0d2;
}

@media (max-width: 991.98px) {
  .admin-context-switch {
    margin-right: auto;
    margin-left: 0;
  }
}

@media (max-width: 576px) {
  .navbar-shell {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .navbar-account-dropdown {
    min-width: 250px !important;
  }

  .admin-context-switch {
    gap: 3px;
    padding: 2px;
  }

  .admin-context-switch-thumb {
    top: 2px;
    bottom: 2px;
  }

  .admin-context-btn {
    min-width: 0;
    min-height: 28px;
    padding: 4px 7px;
    font-size: 0.62rem;
    gap: 4px;
  }

  .admin-context-btn-icon {
    width: 14px;
    height: 14px;
    font-size: 0.5rem;
  }

  .navbar-mode-pill {
    display: none !important;
  }
}

/* Cards Dark */
body.dark-mode .card { background: #152233; color: var(--color-text-main); box-shadow: var(--shadow-md); }
body.dark-mode .card-header { background: #1f2a3e; color: var(--color-text-muted); border-bottom: 1px solid #233549; }

/* Status Strip Text Overrides Dark */
body.dark-mode .card.info .text-dark,
body.dark-mode .card.info h4 { color: var(--color-text-main) !important; }
body.dark-mode .card.info .text-primary { color: var(--color-primary) !important; }
body.dark-mode .card.info .text-success { color: var(--color-success) !important; }
body.dark-mode .card.info .text-danger { color: var(--color-danger) !important; }
body.dark-mode .card.info .text-warning { color: var(--color-warning) !important; }
body.dark-mode .card.info .text-recomended { color: var(--color-recomended) !important; }

/* Buttons Dark */
body.dark-mode .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
body.dark-mode .btn-outline-secondary { color: var(--color-text-muted); border-color: var(--color-text-muted); }
body.dark-mode .btn-outline-secondary:hover { background: var(--color-text-muted); color: var(--color-bg-body); }
body.dark-mode .btn-outline-light:hover { background: var(--color-primary); color: #fff; }
body.dark-mode .btn-dark { background: var(--color-text-muted); color: var(--color-bg-body); }

/* Utilities Dark */
body.dark-mode .bg-secondary { background: var(--color-text-muted) !important; }
body.dark-mode .bg-success { background: var(--color-success) !important; }
body.dark-mode .bg-warning { background: var(--color-warning) !important; color: #101927 !important; }
body.dark-mode .bg-danger { background: var(--color-danger) !important; }
body.dark-mode .bg-light { background: var(--color-text-muted) !important; color: var(--color-text-main) !important; }
body.dark-mode .alert { background: #1f2a3e; color: var(--color-text-main); border: 1px solid #233549; }
body.dark-mode .bg-filter-custom { background: var(--color-accent-hover) !important; color: #fff !important; }
body.dark-mode .bg-recomended { background: var(--color-recomended) !important; color: #fff !important; }
body.dark-mode .card.bg-white,
body.dark-mode .card-footer.bg-white,
body.dark-mode .badge.bg-white,
body.dark-mode code.bg-white,
body.dark-mode .form-control.bg-white,
body.dark-mode .form-select.bg-white {
  background: var(--color-bg-white) !important;
  color: var(--color-text-main) !important;
  border-color: #233549 !important;
}


/* Typography Dark */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h6 { color: var(--color-primary-dark) !important; }
body.dark-mode h5 { color: #fff !important; }
body.dark-mode .small { color: var(--color-text-main) !important; }
body.dark-mode .text-muted { color: var(--color-text-muted) !important; }
body.dark-mode .rua { color: var(--color-accent); }

/* Modal Dark Mode */
body.dark-mode .modal-content { background: var(--color-bg-white); color: var(--color-text-main); border: 1px solid #233549; box-shadow: var(--shadow-lg); }
body.dark-mode .modal-header, body.dark-mode .modal-footer { background: #152233; border-color: #233549; }
body.dark-mode .modal-title { color: #ffffff; }
body.dark-mode .btn-close { filter: invert(1); }
body.dark-mode .modal .bg-light { background: #1c2b3f !important; color: var(--color-text-main); border: 1px solid #233549; }
body.dark-mode .modal .bg-secondary { background: #233549 !important; color: var(--color-text-main); }
body.dark-mode .modal em { color: var(--color-text-muted); }

/* -----------------------------------------
   11) SWEETALERT2 & LOGOS (DARK MODE INTEGRADO)
   ----------------------------------------- */

/* Estilo Base para o Modal do Alerta */
.swal2-dark-mode {
  background-color: #152233 !important;
  color: var(--color-text-main) !important;
  border: 1px solid #233549 !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: "Poppins", sans-serif !important;
}

.swal2-dark-mode .swal2-title,
.swal2-dark-mode .swal2-html-container {
  color: #ffffff !important;
}

/* Estilo para TOAST (Alerta pequeno no canto) */
body.dark-mode .swal2-popup.swal2-toast {
  background-color: #152233 !important;
  color: var(--color-text-main) !important;
  border: 1px solid #233549 !important;
}

/* ========================================================
   CORREÇÃO ULTRA-ESPECÍFICA PARA O FUNDO BRANCO DOS ÍCONES
   ======================================================== */

/* 1. Reset de fundo para TODOS os componentes do ícone */
.swal2-dark-mode .swal2-icon,
.swal2-dark-mode .swal2-icon *,
.swal2-dark-mode .swal2-icon *::before,
.swal2-dark-mode .swal2-icon *::after {
  background-color: transparent !important;
}

/* 2. Remove as máscaras de animação (vilãs do fundo branco) */
.swal2-dark-mode .swal2-success-circular-line-left,
.swal2-dark-mode .swal2-success-circular-line-right,
.swal2-dark-mode .swal2-success-fix,
.swal2-dark-mode .swal2-success-circular-line-left::before,
.swal2-dark-mode .swal2-success-circular-line-left::after,
.swal2-dark-mode .swal2-success-circular-line-right::before,
.swal2-dark-mode .swal2-success-circular-line-right::after {
  background-color: transparent !important;
  background: transparent !important;
}

/* 3. Força as linhas do check e do erro a serem visíveis */
.swal2-dark-mode .swal2-success-line-tip,
.swal2-dark-mode .swal2-success-line-long,
.swal2-dark-mode .swal2-x-mark-line-left,
.swal2-dark-mode .swal2-x-mark-line-right {
  background-color: currentColor !important;
  display: block !important;
}

/* 4. Ajuste do anel do ícone */
.swal2-dark-mode .swal2-success-ring {
  border: .25em solid rgba(56, 161, 105, 0.3) !important;
}

/* Progress Bar & Buttons */
.swal2-dark-mode .swal2-timer-progress-bar {
  background: var(--color-accent) !important;
}

.swal2-dark-mode .swal2-confirm {
  background-color: var(--color-danger) !important;
}

/* Cores dos ícones */
.swal2-dark-mode .swal2-icon.swal2-success { border-color: var(--color-success) !important; color: var(--color-success) !important; }
.swal2-dark-mode .swal2-icon.swal2-error { border-color: var(--color-danger) !important; color: var(--color-danger) !important; }
.swal2-dark-mode .swal2-icon.swal2-warning { border-color: var(--color-warning) !important; color: var(--color-warning) !important; }

/* Correção específica para Toasts no Dark Mode */
body.dark-mode .swal2-popup.swal2-toast .swal2-icon {
  background-color: transparent !important;
}

body.dark-mode .swal2-popup.swal2-toast .swal2-success-ring {
  border-color: rgba(56, 161, 105, 0.2) !important;
}

body.dark-mode .swal2-popup.swal2-toast [class^='swal2-success-circular-line'],
body.dark-mode .swal2-popup.swal2-toast .swal2-success-fix {
  background-color: transparent !important;
}

/* Logos Toggle */
.logo-dark { display: none; }
.logo-light { display: block; }
body.dark-mode .logo-light { display: none; }
body.dark-mode .logo-dark { display: block; }

/* -----------------------------------------
   12) LOADING & NOTIFICAÇÕES
   ----------------------------------------- */
.loading-spinner {
  background: white url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%230d6efd%22%20d%3D%22M12%204V2A10%2010%200%200%201%2022%2012h-2a8%208%200%200%200-8-8z%22%2F%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2012%2012%22%20to%3D%22360%2012%2012%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fsvg%3E") no-repeat right 10px center;
  background-size: 16px;
  padding-right: 35px !important;
  cursor: wait;
}

.dark-mode .loading-spinner {
  background-color: #495057 !important;
  filter: invert(1);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23f8f9fa%22%20d%3D%22M12%204V2A10%2010%200%200%201%2022%2012h-2a8%208%200%200%200-8-8z%22%2F%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2012%2012%22%20to%3D%22360%2012%2012%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fsvg%3E");
}

/* List Groups Dark */
body.dark-mode .list-group-item { background-color: var(--color-bg-white) !important; color: var(--color-text-main) !important; border-color: #233549 !important; }
body.dark-mode .list-group-item-action:hover { background-color: #1f2a3e !important; }
body.dark-mode .list-group-item .text-muted { color: var(--color-text-muted) !important; }
body.dark-mode .list-group-item .text-dark { color: var(--color-text-main) !important; }
.list-group-item-light-custom { background-color: var(--color-text-notificação) !important; }
body.dark-mode .list-group-item-light-custom { background-color: #3f98b3a1 !important; }

/* -----------------------------------------
   13) PAGINAÇÃO
   ----------------------------------------- */
.pagination {
  gap: 5px;
}

.page-item .page-link {
  border-radius: var(--radius-sm) !important;
  padding: 0.6rem 1rem;
  color: var(--color-primary);
  background-color: var(--color-bg-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 600;
  transition: all 0.2s ease;
}

.page-item .page-link:hover {
  background-color: rgba(0, 163, 196, 0.1);
  color: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.page-item.active .page-link {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-md);
}

.page-item.disabled .page-link {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: rgba(0, 0, 0, 0.05);
  opacity: 0.6;
}

/* Paginação Dark */
body.dark-mode .page-item .page-link {
  background-color: #1c2b3f;
  color: var(--color-text-main);
  border-color: #233549;
}

body.dark-mode .page-item .page-link:hover {
  background-color: rgba(0, 224, 255, 0.15);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

body.dark-mode .page-item.active .page-link {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #101927 !important;
}

body.dark-mode .page-item.disabled .page-link {
  background-color: transparent;
  border-color: #233549;
}

#install-container {
  display: none;
}

/* =========================================
   14) RESPONSIVIDADE & LAYOUT DINÂMICO
   ========================================= */

/* Ajustes Gerais para Telas Menores (< 992px) */
@media (max-width: 991.98px) {
  
  /* --- 1. NAVBAR & SIDEBAR MOBILE --- */
  .navbar {
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 15px !important;
  }

  .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    transform: translateX(-100%);
    z-index: 2050 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: block !important;
    box-shadow: 10px 0 25px rgba(0, 0, 0, 0.3);
    padding-top: 20px !important;
  }

  .app-content {
    margin-left: 0 !important;
    margin-top: 80px !important;
    padding: 15px !important;
    width: 100% !important;
  }

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

  body.sidebar-open {
    overflow: hidden;
  }

  .sidebar-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2040;
    display: none;
    backdrop-filter: blur(2px);
  }

  body.sidebar-open .sidebar-overlay {
    display: block;
  }

  /* --- 2. CARDS DASHBOARD (LEGADO) --- */
  .table-mobile-cards thead { 
      display: none !important; 
  }

  .table-mobile-cards, 
  .table-mobile-cards tbody, 
  .table-mobile-cards tr, 
  .table-mobile-cards td { 
      display: block !important; 
      width: 100% !important; 
      box-sizing: border-box;
  }

  .table-mobile-cards tr {
      background: #ffffff;
      margin-bottom: 20px;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      border: 1px solid rgba(0,0,0,0.05);
      position: relative;
      overflow: hidden; 
  }

  .table-mobile-cards td {
      padding: 15px;
      border: none;
      border-bottom: 1px solid #f5f5f5;
      text-align: left;
  }

  .table-mobile-cards td:last-child { 
      border-bottom: none; 
  }

  .status-badge-mobile {
      position: absolute;
      top: 15px; 
      right: 15px; 
      z-index: 10;
  }
  
  .table-mobile-cards .btn { 
      width: 100%; 
      margin-bottom: 5px; 
  }
  
  /* Dark Mode Legacy Cards */
  body.dark-mode .table-mobile-cards tr {
      background: var(--color-bg-surface);
      border-color: #233549;
  }

  body.dark-mode .table-mobile-cards td {
      border-bottom-color: #233549;
  }

  /* --- 3. TABELA SANFONA (ACCORDION) MOBILE --- */

  /* Esconde o cabeçalho original da tabela no mobile */
  .d-md-table-header-group {
      display: none !important;
  }

  /* CARD FECHADO — vira bloco independente */
  .table-accordion tr.main-row {
      display: block;
      background: #ffffff;
      margin: 14px 0 !important; 
      width: 100% !important;       
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      border-left: 5px solid var(--color-primary);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      overflow: hidden;
  }

  /* Feedback visual ao toque */
  .table-accordion tr.main-row:active {
      transform: scale(0.98);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  /* Remove aparência de linha de tabela */
  .table-accordion tr.main-row td {
      display: block;
      border: none !important;
      padding: 12px 16px;
      transition: background-color 0.2s ease;
  }

  /* Espaçamento interno organizado */
  .table-accordion tr.main-row td + td {
      padding-top: 4px;
  }

  /* Animação da setinha */
  .table-accordion .bi-chevron-down {
      transition: transform 0.3s ease;
  }

  .table-accordion tr[aria-expanded="true"] .bi-chevron-down {
      transform: rotate(180deg);
      color: var(--color-primary);
  }

  /* Área Expandida (Detalhes) */
  .table-accordion .collapse.show {
      background-color: #f8f9fa;
      border-top: 1px solid #dee2e6;
      box-shadow: inset 0 3px 6px rgba(0,0,0,0.03);
      border-radius: 0 0 16px 16px;
  }

  /* Dark Mode Accordion Mobile */
  body.dark-mode .table-accordion tr.main-row {
      background: var(--color-bg-surface);
      box-shadow: 0 6px 16px rgba(0,0,0,0.4);
      border-left-color: var(--color-accent);
  }

  body.dark-mode .table-accordion .collapse.show {
      background-color: #1a2636;
      border-color: #2d3748;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  }

  /* Container do anexo */
  .anexo-container,
  .file-upload-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
  }

}

/* =========================================
   PROTEÇÃO PARA O DESKTOP (PC > 769px)
   ========================================= */
@media (min-width: 769px) {

    .table-accordion tr.main-row {
        cursor: default !important;
    }
    
    .table-accordion .bi-chevron-down {
        display: none !important;
    }
    
    .app-content {
      margin-left: var(--sidebar-width);
      padding: 1.5rem;
      margin-top: var(--navbar-height);
      transition: margin-left 0.3s ease, width 0.3s ease;
      width: calc(100% - var(--sidebar-width));
    }

    body.sidebar-collapsed .app-content {
      margin-left: var(--sidebar-width-collapsed);
      width: calc(100% - var(--sidebar-width-collapsed));
    }
}

/* Ajustes Mobile Pequeno (< 576px) */
@media (max-width: 576px) {
  
  /* --- Navbar (Mantido) --- */
  .navbar .dropdown-menu { right: 0; left: auto; }
  .navbar .dropdown button { padding: 0.4rem 0.8rem; display: flex; align-items: center; gap: 8px; }
  .navbar .dropdown button span { display: none; }

  /* --- CORREÇÃO BLINDADA DO ANEXO --- */

  /* 1. Container: Garante que nunca passe da largura da tela */
  .anexo-actions,
  .anexo-actions-inline,
  .anexo-group { /* Adicionei .anexo-group por garantia */
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;          /* Gap reduzido para economizar espaço */
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;   /* Trava a largura máxima */
    box-sizing: border-box !important;
  }

  /* 2. Botão "Anexar" (O que deve encolher) */
  .anexo-actions .btn-anexo,
  .anexo-actions-inline .btn-anexo,
  .anexo-actions-inline label.btn,
  .anexo-group .btn-anexo-main {
    /* O SEGREDO: flex-basis 0 força o botão a caber no espaço que sobra */
    flex: 1 1 0px !important;     
    width: 0 !important;          /* Hack para forçar o encolhimento em alguns browsers */
    min-width: 0 !important;      
    
    height: 40px !important;      /* Altura compacta (40px) */
    margin: 0 !important;
    padding: 0 8px !important;    /* Padding lateral menor */

    /* Layout Interno */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
    /* Visual */
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .2px;
    box-shadow: 0 2px 5px rgba(16, 24, 40, .05);
    background: rgba(13,110,253,.06);
    border: 1px solid rgba(13,110,253,.25) !important;
    overflow: hidden !important; /* Garante que nada vaze */
  }

  /* Texto dentro do botão */
  .btn-anexo > span,
  .btn-anexo-main > span {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.85rem !important; /* Fonte levemente menor */
    line-height: 40px !important;  /* Centraliza na nova altura */
    text-align: left !important;
    margin: 0 !important;
  }

  /* Ícone do clipe */
  .btn-anexo i,
  .btn-anexo-main i {
    flex: 0 0 auto;
    font-size: 1rem;
    margin-right: 6px;
    opacity: .9;
  }

  /* 3. Botões de Ícone (Olho / Lixeira) - Tamanho Fixo */
  .anexo-actions .btn-icon,
  .anexo-actions-inline a.btn,
  .anexo-actions-inline button.btn,
  .anexo-group .btn-anexo-icon {
    /* Trava o tamanho em 40x40px */
    flex: 0 0 40px !important;    
    width: 40px !important;
    height: 40px !important;
    
    margin: 0 !important;
    padding: 0 !important;

    /* Centralização */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Visual */
    border-radius: 10px !important;
    box-shadow: 0 2px 5px rgba(16, 24, 40, .05);
  }

  /* Ajuste dos ícones internos */
  .anexo-actions-inline a.btn i,
  .anexo-actions-inline button.btn i,
  .anexo-group .btn-anexo-icon i {
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }
}
/* =========================================
   CORREÇÃO BOTÃO DE ANEXO – MOBILE
   ========================================= */
@media (max-width: 991.98px) {

  /* Container do anexo */
  .anexo-container,
  .file-upload-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
  }

  /* Botão de upload */
  .anexo-container .btn,
  .file-upload-wrapper .btn {
      width: auto !important;          /* <<< evita botão gigante */
      max-width: 100%;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  /* Texto do nome do arquivo */
  .anexo-container .file-name,
  .file-upload-wrapper .file-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
      display: block;
  }

  /* Botão remover anexo */
  .anexo-container .btn-remove,
  .file-upload-wrapper .btn-remove {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
  }
}

/* ✅ Navbar collapse bem escopado */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .navbar .navbar-collapse {
    display: flex !important;
  }
}
/* =========================================
   DASHBOARD DESKTOP – AJUSTE DE COLUNAS
   ========================================= */
@media (min-width: 992px) {

  /* Força layout fixo da tabela */
  .table-accordion {
    table-layout: fixed;
  }

  /* Coluna 1 – Identificação */
  .table-accordion td:nth-child(1),
  .table-accordion th:nth-child(1) {
    width: 33%;
  }

  /* Coluna 2 – Dados da operação */
  .table-accordion td:nth-child(2),
  .table-accordion th:nth-child(2) {
    width: 33%;
  }

  /* Coluna 3 – Decisão / Formulário */
  .table-accordion td:nth-child(3),
  .table-accordion th:nth-child(3) {
    width: 34%;
  }

  /* Impede inputs de estourarem a coluna */
  .table-accordion td {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Formulário mais compacto visualmente */
  .table-accordion td form {
    max-width: 100%;
  }

  /* Inputs e selects não forçam expansão */
  .table-accordion input,
  .table-accordion select,
  .table-accordion textarea {
    max-width: 100%;
  }

  /* Cartão interno mais elegante */
  .table-accordion td .border.rounded {
    background-color: #f9fafb;
  }

  body.dark-mode .table-accordion td .border.rounded {
    background-color: #1f2937;
  }
}

/* Container Unificado do Arquivo */
.file-upload-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

/* O "Botão" principal que vira a barra de fundo */
.file-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 45px; /* Altura confortável para o dedo */
    background-color: #f8f9fa; /* Cinza bem claro */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0 5px 0 12px; /* Espaço interno */
    transition: all 0.2s ease;
}

/* Quando tem arquivo (Estado Ativo) */
.file-card.has-file {
    background-color: #e3f2fd; /* Azulzinho bem claro */
    border-color: #90caf9;
    color: #0d47a1;
}

/* Área do Texto (Esquerda) */
.file-info {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Ocupa todo espaço disponível */
    min-width: 0; /* Permite cortar o texto */
    cursor: pointer;
}

.file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: 8px;
}

/* Área das Ações (Direita) */
.file-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0; /* Não deixa esmagar */
}

/* Botões de Ação (Ícones) */
.btn-action-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #6c757d;
    transition: background 0.2s;
}

.btn-action-icon:hover, .btn-action-icon:active {
    background-color: rgba(0,0,0,0.05);
    color: #333;
}

.btn-action-icon.danger { color: #dc3545; }
.btn-action-icon.danger:hover { background-color: #f8d7da; }

/* =========================================================
   FORM CONTROLS – PADRÃO VISUAL DO SISTEMA
   ========================================================= */

/* Labels */
label,
.form-label {
  font-weight: 500;
  border-radius: 10px;
}

/* Inputs, selects e textareas */
.form-control,
.form-select {
  border-radius: 12px;
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem;

  border: 1px solid #dee2e6;
  box-shadow: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Versão small */
.form-control-sm,
.form-select-sm {
  border-radius: 10px;
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
}

/* Focus (padrão elegante, sem exagero) */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

/* Placeholder */
.form-control::placeholder {
  color: #adb5bd;
  font-size: 0.8rem;
}

/* Remove aparência quadrada em browsers estranhos */
input,
select,
textarea {
  border-radius: inherit;
}

@media screen and (max-device-width: 390px) and (max-device-height: 740px) and (-webkit-min-device-pixel-ratio: 4) {

    .navbar {
    height: 70px !important;
    padding: 0 10px !important; /* Reduzido para ganhar espaço lateral */
    display: flex !important;
    flex-direction: row !important; /* Força ficar na mesma linha sempre */
    flex-wrap: nowrap !important;   /* Impede que os itens pulem para baixo */
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* =========================================
          EXTRAS & FIXES GERAIS
   ========================================= */

/* Estilização da Legenda Flutuante */
#map-legend {
    position: absolute;
    bottom: 30px;
    left: 20px;
    z-index: 5;
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
}
.gradient-bar {
    height: 10px;
    width: 100%;
    background: linear-gradient(to right, rgba(0, 255, 0, 1), rgba(255, 255, 0, 1), rgba(255, 0, 0, 1));
    border-radius: 5px;
    margin: 8px 0;
}