/* ===================================================
   ULTRADATA – Sistema de Gestão de Tilápias
   Estilos Globais
   =================================================== */

:root {
  --primary: #0d6efd;
  --primary-dark: #0a58ca;
  --primary-light: #e8f0fe;
  --secondary: #198754;
  --secondary-light: #d1e7dd;
  --accent: #0dcaf0;
  --warning: #fd7e14;
  --danger: #dc3545;
  --danger-light: #f8d7da;
  --success: #198754;
  --success-light: #d1e7dd;
  --info: #0dcaf0;
  --info-light: #cff4fc;
  --purple: #6f42c1;
  --teal: #20c997;
  --teal-light: #d2f4ea;

  --bg: #f0f4f8;
  --bg-card: #ffffff;
  --sidebar-bg: #0d1b2a;
  --sidebar-text: #b8c5d6;
  --sidebar-active: #0d6efd;
  --sidebar-hover: rgba(13,110,253,0.15);
  --text-main: #1a2332;
  --text-muted: #6b7a8d;
  --border: #e0e7ef;
  --shadow: 0 2px 12px rgba(13,30,60,0.08);
  --shadow-md: 0 4px 24px rgba(13,30,60,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --transition: all 0.2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

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

/* ===================================================
   LOGIN
   =================================================== */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d1b2a 0%, #1a3a5c 40%, #0d6efd 100%);
  position: relative;
  overflow: hidden;
}

/* Tela em branco (mesmo fundo do app) enquanto tentarRetomarSessao() decide
   entre login e app — ver comentário em index.html. */
.boot-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 1.6rem;
}

.login-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.login-bg-overlay {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,110,253,0.3) 0%, transparent 70%);
  top: -200px; right: -100px;
  pointer-events: none;
}

.login-card {
  background: white;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo-img {
  width: 210px;
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 1.1rem;
}

.login-logo h1 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #0d1b2a;
  letter-spacing: 0.5px;
}

.login-logo p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.login-form .form-group {
  margin-bottom: 1.2rem;
}

.login-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-form input,
.login-form select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-main);
  transition: var(--transition);
  font-family: inherit;
  background: white;
}

.login-form input:focus,
.login-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}

.input-pass-wrap {
  position: relative;
}

.input-pass-wrap input { padding-right: 2.5rem; }

.toggle-pass {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-login {
  width: 100%;
  padding: 0.8rem;
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: var(--transition);
  font-family: inherit;
  letter-spacing: 0.5px;
}

.btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,110,253,0.4);
}

.login-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* ===================================================
   APP LAYOUT
   =================================================== */
.app {
  display: flex;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ===================================================
   SIDEBAR
   =================================================== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  transition: var(--transition);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-header {
  padding: 1rem 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.sidebar-header-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-img {
  height: 52px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.sidebar-header-row2 {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.brand-name {
  font-size: 1rem;
  font-weight: 800;
  color: white;
  letter-spacing: 0.5px;
}

.brand-slogan {
  font-size: 0.68rem;
  color: var(--sidebar-text);
  line-height: 1.35;
}

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--sidebar-text);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.3rem;
}

.sidebar-nav {
  flex: 1;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(184,197,214,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.6rem 0.75rem 0.3rem;
  margin-top: 0.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 0.88rem;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
}

.nav-item i {
  width: 18px;
  text-align: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: white;
}

.nav-item.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 12px rgba(13,110,253,0.4);
}

.badge-nav {
  background: var(--danger);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  margin-left: auto;
}

.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.app-footer {
  padding: 0.6rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(0,0,0,0.06);
}

.btn-logout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: rgba(220,53,69,0.15);
  color: #f87171;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  transition: var(--transition);
  font-family: inherit;
}

.btn-logout:hover {
  background: rgba(220,53,69,0.3);
  color: #fca5a5;
}

/* ===================================================
   MAIN CONTENT
   =================================================== */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

/* ===================================================
   TOPBAR
   =================================================== */
.topbar {
  height: var(--topbar-h);
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-muted);
  cursor: pointer;
}

.breadcrumb {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.topbar-btn {
  position: relative;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 50%;
  transition: var(--transition);
}

.topbar-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.notif-dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid white;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

.topbar-user i { font-size: 1.4rem; color: var(--primary); }
.topbar-user i.user-menu-caret { font-size: 0.7rem; color: var(--text-muted); margin-left: 0.1rem; }

/* ===================================================
   USER MENU (dropdown da topbar)
   =================================================== */
.user-menu-wrap { position: relative; }

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 240px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  padding: 0.5rem;
  z-index: 60;
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.4rem;
}

.user-menu-header i { font-size: 2rem; color: var(--primary); }

.user-menu-nome {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

.user-menu-perfil {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0.4rem 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-main);
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.user-menu-item i { width: 16px; color: var(--text-muted); }

.user-menu-item:hover { background: var(--bg); }

.user-menu-item.user-menu-danger { color: var(--danger); }
.user-menu-item.user-menu-danger i { color: var(--danger); }

.user-menu-versao {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 0.3rem 0.5rem 0.1rem;
  line-height: 1.5;
}

/* ===================================================
   CONTENT AREA & SECTIONS
   =================================================== */
.content-area {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.section { display: none; }
.section.active { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.section-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-header h2 i { color: var(--primary); }

.last-update {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ===================================================
   BUTTONS
   =================================================== */
.btn-primary {
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition);
  font-family: inherit;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(13,110,253,0.35);
}

.btn-outline {
  background: white;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition);
  font-family: inherit;
}

.btn-outline:hover {
  background: var(--primary-light);
}

.btn-sm {
  padding: 0.3rem 0.65rem !important;
  font-size: 0.78rem !important;
}

.btn-danger {
  background: var(--danger);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}

.btn-danger:hover { background: #b02a37; }

/* ===================================================
   KPI CARDS
   =================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.25rem;
}

.kpi-card {
  background: white;
  border-radius: var(--radius);
  padding: 0.75rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  box-shadow: var(--shadow);
  border-left: 4px solid transparent;
  transition: var(--transition);
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kpi-blue  { border-left-color: var(--primary); }
.kpi-green { border-left-color: var(--success); }
.kpi-orange{ border-left-color: var(--warning); }
.kpi-red   { border-left-color: var(--danger); }
.kpi-teal  { border-left-color: var(--teal); }
.kpi-purple{ border-left-color: var(--purple); }

.kpi-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.kpi-blue  .kpi-icon { background: var(--primary-light); color: var(--primary); }
.kpi-green .kpi-icon { background: var(--secondary-light); color: var(--secondary); }
.kpi-orange .kpi-icon { background: #ffe5d0; color: var(--warning); }
.kpi-red   .kpi-icon { background: var(--danger-light); color: var(--danger); }
.kpi-teal  .kpi-icon { background: var(--teal-light); color: var(--teal); }
.kpi-purple .kpi-icon { background: #ede9f6; color: var(--purple); }

.kpi-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.1;
}

.kpi-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.15rem;
}

/* Card "Qualidade da Água" do Dashboard — 3 contadores (Boa/Alerta/Crítica)
   por nº de tanques do escopo do usuário, em vez de 1 status só (que
   escondia a situação de propriedades além da última lançada). */
.kpi-qa-contadores {
  display: flex;
  gap: 0.6rem;
}

.qa-contador {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
}

.qa-contador i { font-size: 0.78rem; }

.qa-boa    { color: var(--success); }
.qa-alerta { color: var(--warning); }
.qa-critica{ color: var(--danger); }

/* ===================================================
   CHARTS
   =================================================== */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.chart-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow);
}

.chart-wide {
  grid-column: span 2;
}

.chart-header {
  margin-bottom: 0.75rem;
}

.chart-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chart-header h3 i { color: var(--primary); }

/* ===================================================
   BOTTOM GRID (DASHBOARD)
   =================================================== */
.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ===================================================
   DASHBOARD — COLABORADOR
   Tela mínima e orientada a tarefa (não vê o dashboard de gestão — os 3
   blocos dele linkavam pra Alertas/Lotes/Propriedades, telas fora do menu
   allow-list desse perfil). Só 2 atalhos + 1 resumo do dia.
   =================================================== */
.colab-welcome { margin-bottom: 1.5rem; }
.colab-welcome h3 { font-size: 1.15rem; color: var(--text-main); margin-bottom: 0.3rem; }
.colab-welcome p { color: var(--text-muted); font-size: 0.9rem; }

.colab-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.colab-action-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  cursor: pointer;
  transition: var(--transition);
}

.colab-action-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.colab-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(13,110,253,0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.colab-action-title { font-weight: 700; font-size: 1rem; color: var(--text-main); margin-bottom: 0.3rem; }
.colab-action-desc  { font-size: 0.85rem; color: var(--text-muted); }

.colab-stat-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-main);
}

.colab-stat-card i { color: var(--success); font-size: 1.3rem; }
.colab-stat-card i.fa-circle-info { color: var(--info); }

/* ===================================================
   TABLE CARDS
   =================================================== */
.table-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow);
}

.table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.table-card-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.table-card-header h3 i { color: var(--primary); }

.link-ver-todos {
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 500;
}

/* ===================================================
   ALERT ITEMS
   =================================================== */
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.alert-item:last-child { border-bottom: none; }

.alert-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.alert-dot.critical { background: var(--danger); }
.alert-dot.warning  { background: var(--warning); }
.alert-dot.info     { background: var(--primary); }

.alert-msg {
  font-size: 0.83rem;
  color: var(--text-main);
  font-weight: 500;
  line-height: 1.4;
}

.alert-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* ===================================================
   SEARCH BAR
   =================================================== */
.search-bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-input-wrap i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.search-input-wrap input {
  width: 100%;
  padding: 0.6rem 0.75rem 0.6rem 2.2rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text-main);
  background: white;
  transition: var(--transition);
}

.search-input-wrap input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13,110,253,0.1);
}

.filter-select {
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text-main);
  background: white;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* ===================================================
   TOOLBAR (barra de filtros em destaque, ex.: Extrato)
   =================================================== */
.toolbar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.toolbar-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.toolbar-filters .form-group,
.toolbar-card > .view-toggle { margin: 0; }

.toolbar-filters select {
  min-width: 180px;
}

.date-range-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.date-range-group input[type="date"] {
  min-width: 0;
}

.date-range-sep {
  color: var(--text-muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .toolbar-card { align-items: stretch; }
  .toolbar-filters { flex-direction: column; align-items: stretch; }
  .date-range-group { flex-wrap: wrap; }
}

/* ===================================================
   TABLE
   =================================================== */
.table-responsive {
  overflow-x: auto;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead tr {
  background: var(--bg);
}

th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:hover { background: rgba(13,110,253,0.03); }

/* Linha mais baixa que o padrão (0.75rem) — telas com muitos registros por
   página (ex.: Logs de Acesso), onde a informação por linha é curta e vale
   mais mostrar mais linhas de uma vez do que respiro extra. */
.table-compact th, .table-compact td { padding: 0.4rem 1rem; }
tbody tr:last-child td { border-bottom: none; }

/* Colunas numéricas (quantidades, pesos, %, valores) alinhadas à direita
   nas tabelas de relatório — facilita comparar magnitude/casas decimais. */
th.col-num, td.col-num {
  text-align: right;
}

/* Dentro de .users-table, ".users-table th { text-align:left }" (mais
   abaixo neste arquivo) tem a MESMA especificidade que "th.col-num" acima
   — empate resolvido por ordem de declaração, então o cabeçalho das
   colunas numéricas ficava à esquerda mesmo com a classe col-num (as
   células de dado não tinham esse problema, só o <th>). Regra abaixo,
   mais específica, força o alinhamento certo independente da ordem. */
.users-table th.col-num, .users-table td.col-num {
  text-align: right;
}

/* ===================================================
   LOTES/TANQUES — ROW CARDS (sem rolagem horizontal)
   16 campos por lote não cabem numa <table> normal sem rolagem lateral.
   Cada lote vira um cartão de 2 linhas: identificação (propriedade/tanque/
   produtor/status) + métricas em chips que quebram com flex-wrap conforme
   a largura da tela, em vez de forçar overflow-x.
   =================================================== */
.lote-row-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lote-row {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.6rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.lote-row.user-inactive { opacity: 0.65; }

.lote-row-main { flex: 1; min-width: 0; }

.lote-row-line1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.lote-row-codigo { font-size: 0.92rem; color: var(--text-main); }

.lote-row-line1 span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.lote-row-line1 i { color: var(--primary); width: 12px; }

.lote-row-line2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
}

.lote-chip {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.lote-chip strong { color: var(--text-main); font-weight: 600; }

.lote-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Documentos da Propriedade — mesmo padrão de row-card do .lote-row, pra
   evitar rolagem horizontal na tabela de muitas colunas dentro do modal. */
.doc-row-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.doc-row {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.doc-row-main { flex: 1; min-width: 0; }

.doc-row-line1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.doc-row-tipo { font-weight: 600; color: var(--text-main); }

.doc-row-line1 span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.doc-row-line1 i { color: var(--primary); width: 12px; }

.doc-row-line2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}

.doc-chip {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.doc-chip strong { color: var(--text-main); font-weight: 600; }

.doc-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* ===================================================
   STATUS BADGES
   =================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-ativo       { background: var(--success-light); color: var(--success); }
.badge-engorda     { background: #fff3cd; color: #856404; }
.badge-colheita    { background: var(--info-light); color: #0a8f9d; }
.badge-colhido     { background: #e9ecef; color: #495057; }
.badge-critico     { background: var(--danger-light); color: var(--danger); }
.badge-alerta      { background: #ffe5d0; color: var(--warning); }
.badge-normal      { background: var(--success-light); color: var(--success); }
.badge-admin       { background: var(--primary-light); color: var(--primary); }
.badge-technician  { background: #ede9f6; color: var(--purple); }
.badge-farmer      { background: var(--teal-light); color: var(--teal); }
.badge-manager     { background: #fff1e6; color: var(--warning); }
.badge-collaborator { background: #e7f5ec; color: #2f9e58; }
.badge-supervisor  { background: #fce4f1; color: #d63384; }
.badge-secondary   { background: #e9ecef; color: #495057; }
.badge-danger      { background: var(--danger-light); color: var(--danger); }

/* Status de vencimento de Documentos da Propriedade (Licenciamento
   Ambiental / Outorga de Água) — escala de 4 cores, > 12 meses / 12 / 8 / 4
   meses restantes. --warning já é usado como "laranja" (8 meses) em outros
   badges do sistema; amarelo (12 meses) é uma cor nova, só desta feature. */
.badge-documento {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-documento-verde    { background: var(--success-light); color: var(--success); }
.badge-documento-amarelo  { background: #fff3cd; color: #997404; }
.badge-documento-laranja  { background: #ffe5d0; color: var(--warning); }
.badge-documento-vermelho { background: var(--danger-light); color: var(--danger); }

/* ===================================================
   PROPERTY CARDS
   =================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.property-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1.5px solid transparent;
}

.property-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.property-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.prop-card-actions {
  display: flex;
  gap: 0.4rem;
}

.property-card.inactive {
  opacity: 0.65;
}

.property-icon {
  width: 44px; height: 44px;
  background: var(--primary-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.2rem;
}

.property-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0.5rem 0 0.25rem;
}

.property-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.property-meta span {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.property-meta i { color: var(--primary); width: 14px; }

.property-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}

.prop-stat {
  text-align: center;
}

.prop-stat-val {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.prop-stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ===================================================
   WATER PARAMS GRID
   =================================================== */
/* Legenda acima dos cards — diz de qual tanque/data é a leitura pontual
   exibida (só aparecem com filtro ativo). No Consolidado, um 2º grid usa
   a mesma classe pros cards de média do período filtrado. */
.water-params-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.water-params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Consolidado tem 2 grupos de cards (leitura pontual + média do período) —
   cada grupo fica num box lado a lado, na mesma linha, em vez de empilhados. */
.water-params-boxes-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.water-params-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
}

.water-params-box .water-params-caption,
.water-params-box .water-params-grid {
  margin-bottom: 0;
}

.water-param-card {
  background: white;
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.water-param-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}

.param-ok::before   { background: var(--success); }
.param-warn::before { background: var(--warning); }
.param-crit::before { background: var(--danger); }

.param-icon {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.param-ok   .param-icon { color: var(--success); }
.param-warn .param-icon { color: var(--warning); }
.param-crit .param-icon { color: var(--danger); }

.param-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  display: block;
}

.param-name {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.2rem;
}

.param-status {
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 0.3rem;
}

.param-ok   .param-status { color: var(--success); }
.param-warn .param-status { color: var(--warning); }
.param-crit .param-status { color: var(--danger); }

/* ===================================================
   QUALIDADE DA ÁGUA — DASHBOARD
   Componentes novos (gauge, barra de pH); grids reaproveitam .chart-card
   e a paleta de status (--success/--warning/--danger) já usada no resto do
   sistema — sem cor nova, sem "amarelo" (o motor de alertas só tem 3
   estados: ok/aviso/crítico).
   =================================================== */
/* Cabeçalho mesclado: abas (Dashboard/Manual/Sensores/Consolidado) +
   filtros de Propriedade/Tanque (só relevantes na aba Dashboard) numa
   linha só, em vez de duas — ver #qa-dash-header-filtros abaixo, que
   setQualidadeAguaTab() (app.js) esconde fora da aba Dashboard. */
.qa-header-mesclado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.qa-header-filtros {
  display: flex;
  gap: 0.6rem;
}
.qa-header-filtros .filter-select {
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
}
/* "Qualidade da Água" duplicado (breadcrumb do topbar + título da seção)
   — o título da seção some, o ícone é preservado no breadcrumb
   (navigateTo(), app.js) — libera espaço pro cabeçalho mesclado acima. */
#section-qualidade-agua > .section-header h2 {
  display: none;
}
#section-qualidade-agua > .section-header {
  margin-bottom: 0.5rem;
  min-height: 0;
}

/* Caber sem rolagem vertical em desktop (>1024px — revertido no breakpoint
   de 1024px, onde as linhas empilham em 1 coluna e forçar caber ficaria
   ilegível). Primeira vez que o projeto trava altura em relação ao
   viewport fora da .sidebar — por isso escopado só a #qa-tab-dashboard,
   não em .content-area (que serve todas as outras telas, não desenhadas
   pra caber numa tela só). 190px = topbar (64) + padding-top do
   .content-area (24) + .section-header reduzido (~24) + cabeçalho
   mesclado (~44) + padding-bottom do .content-area (~24) + margem de
   segurança — estimado a partir do CSS, não medido num navegador; ajuste
   fino esperado no servidor de dev (é só mudar esse número).
   Overflow-y:auto em #qa-dash-conteudo e min-height nos cards da linha de
   gráficos são rede de segurança (viram scroll interno em vez de
   conteúdo sumindo se a janela for baixa demais), não o mecanismo
   principal — esse é a divisão de "só 1 linha flexível" abaixo. */
#qa-tab-dashboard {
  height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
}
#qa-tab-dashboard > #qa-dash-empty-wrap {
  flex: 0 0 auto;
}
#qa-dash-conteudo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

/* Linha A — os 4 velocímetros juntos (Amônia, Nitrito, OD, pH), sem
   rolagem horizontal (subiu pra 1ª linha, logo abaixo do semáforo de
   status dos sensores, a pedido do usuário em 02/08/2026 — antes era a
   linha B). Tamanho natural: o SVG do gauge tem altura derivada da
   LARGURA (viewBox fixo, ver .qa-gauge-svg) — dar mais altura de card não
   deixa o gauge maior, só cria espaço vazio. Por isso esta linha não é
   flexível (flex:0 0 auto). */
.qa-dash-row-gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  flex: 0 0 auto;
}

/* Linha B — Temperatura + OD 24h (desceu pra 2ª linha, abaixo dos
   velocímetros, a pedido do usuário em 02/08/2026). Altura explícita
   (120px, mesma referência de "menor tamanho ainda legível" já usada na
   linha C — ver min-height abaixo) em vez de tamanho natural: sem isso,
   com a linha de gauges ocupando a 1ª posição, a soma das 3 linhas
   ultrapassava a altura disponível e forçava rolagem em #qa-dash-conteudo. */
.qa-dash-row-topo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  flex: 0 0 auto;
}
.qa-dash-row-topo #qa-dash-od-canvas-wrap,
.qa-dash-row-topo .qa-kpi-spark > div {
  height: 120px;
}

/* Linha C — Dureza, Distribuição de pH, Histórico de pH.
   ÚNICA linha flexível do dashboard — absorve todo o espaço vertical que
   sobrar depois das linhas A e B (que têm tamanho fixo/natural, nunca
   somem). 3 colunas iguais — 33%/33%/33%. */
.qa-dash-row-graficos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  flex: 1 1 auto;
  min-height: 0;
}

/* Cada .chart-card dessas 3 linhas vira coluna flex: header e legenda
   ficam no tamanho natural, o conteúdo principal (gauge/canvas/card de
   dureza/kpi+sparkline) ocupa o espaço restante — seletor "tudo que não é
   header nem legenda" em vez de listar cada classe de widget, pra não
   ficar frágil se um widget novo for adicionado depois. min-height evita
   os gráficos da linha C ficarem menores que um tamanho ainda legível
   (some pro scroll de segurança de #qa-dash-conteudo antes disso). */
.qa-dash-row-topo .chart-card,
.qa-dash-row-gauges .chart-card,
.qa-dash-row-graficos .chart-card {
  display: flex;
  flex-direction: column;
}
.qa-dash-row-graficos .chart-card {
  min-height: 130px;
}
.qa-dash-row-topo .chart-card > .chart-header,
.qa-dash-row-gauges .chart-card > .chart-header,
.qa-dash-row-graficos .chart-card > .chart-header,
.qa-dash-row-topo .chart-card > .qa-dash-caption,
.qa-dash-row-gauges .chart-card > .qa-dash-caption,
.qa-dash-row-graficos .chart-card > .qa-dash-caption {
  flex: 0 0 auto;
}
.qa-dash-row-topo .chart-card > *:not(.chart-header):not(.qa-dash-caption),
.qa-dash-row-gauges .chart-card > *:not(.chart-header):not(.qa-dash-caption),
.qa-dash-row-graficos .chart-card > *:not(.chart-header):not(.qa-dash-caption) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Sparkline de Temperatura tem uma estrutura própria (valor/status em
   <span> + um <div> com o canvas) — o <div> (wrapper do canvas) é quem
   precisa flexionar; os <span> de texto ficam no tamanho natural. */
.qa-kpi-spark {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.qa-kpi-spark > div {
  flex: 1 1 auto;
  min-height: 0;
}

.qa-dash-caption {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
  text-align: center;
}

/* -- Card KPI + sparkline (Temperatura) -- */
.qa-kpi-spark { text-align: center; }
.qa-kpi-value { font-size: 2rem; font-weight: 800; display: block; }
.qa-kpi-status { font-size: 0.78rem; font-weight: 600; }

/* -- Gauge de meio-círculo (Amônia/Nitrito) -- */
.qa-gauge { text-align: center; }
.qa-gauge-svg { width: 100%; max-width: 220px; height: auto; }
.qa-gauge-value { font-size: 1.4rem; font-weight: 800; display: block; margin-top: -0.6rem; }
.qa-gauge-status { font-size: 0.78rem; font-weight: 600; }
.qa-gauge-vazio {
  text-align: center;
  padding: 1.8rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* -- Card simples (Dureza) -- */
.qa-dureza-card { text-align: center; }
.qa-dureza-valor { font-size: 1.8rem; font-weight: 800; color: var(--text-main); display: block; }
.qa-dureza-trend { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }

/* ===================================================
   ALERTAS PAGE
   =================================================== */
.alertas-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.alerta-card {
  background: white;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-left: 4px solid;
  transition: var(--transition);
}

.alerta-card.critical { border-left-color: var(--danger); }
.alerta-card.warning  { border-left-color: var(--warning); }
.alerta-card.info     { border-left-color: var(--primary); }
.alerta-card.lido     { opacity: 0.55; }

.alerta-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.alerta-card.critical .alerta-icon { background: var(--danger-light); color: var(--danger); }
.alerta-card.warning  .alerta-icon { background: #ffe5d0; color: var(--warning); }
.alerta-card.info     .alerta-icon { background: var(--primary-light); color: var(--primary); }

.alerta-body { flex: 1; }

.alerta-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}

.alerta-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.alerta-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.3rem;
}

.alerta-time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.btn-marcar-lido {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--primary);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}

/* ===================================================
   USERS GRID
   =================================================== */
.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.users-grid.list-view {
  display: block;
}

.users-grid.list-view .users-table-wrap {
  width: 100%;
}

.users-grid.list-view .users-table {
  width: 100%;
  min-width: 820px;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.view-toggle,
.scope-toggle {
  display: flex;
  gap: 0.5rem;
}

.view-toggle .view-switch.active,
.scope-toggle .view-switch.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.users-table-wrap {
  overflow-x: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  table-layout: fixed;
  min-width: 820px;
}

.users-table th:nth-child(1), .users-table td:nth-child(1) { width: 20%; } /* Nome */
.users-table th:nth-child(2), .users-table td:nth-child(2) { width: 10%; } /* Matrícula */
.users-table th:nth-child(3), .users-table td:nth-child(3) { width: 15%; } /* Perfil */
.users-table th:nth-child(4), .users-table td:nth-child(4) { width: 20%; } /* E-mail */
.users-table th:nth-child(5), .users-table td:nth-child(5) { width: 12%; } /* Telefone */
.users-table th:nth-child(6), .users-table td:nth-child(6) { width: 10%; } /* Status */
.users-table th:nth-child(7), .users-table td:nth-child(7) { width: 13%; } /* Ações */

.users-table th,
.users-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.users-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}

.users-table td:last-child,
.users-table th:last-child {
  text-align: right;
}

/* ===================================================
   CONFIGURAÇÕES — GRADE DE PERMISSÕES
   1 coluna larga de texto (Permissão) + N colunas estreitas de checkbox
   (1 por perfil, hoje 6) — classe própria em vez de reaproveitar
   .users-table, cujas larguras em % são fixas pras 7 colunas bem
   diferentes da tela de Usuários (truncava o texto da permissão com
   "..."). table-layout:fixed + só as colunas de perfil com largura fixa
   em px faz a 1ª coluna ocupar sozinha o espaço restante, sem herdar
   min-width nenhum — cabe na tela sem rolagem horizontal.
   =================================================== */
.permissoes-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  table-layout: fixed;
}

.permissoes-table th,
.permissoes-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}

.permissoes-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: left;
}

.permissoes-table td:first-child {
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
}

/* 120px cabe o maior rótulo de perfil ("Colaborador", 11 letras maiúsculas
   em negrito — herda font-weight:700 da regra global "th") numa linha só,
   sem precisar quebrar. white-space:nowrap volta a valer (visual mais
   limpo, sem quebra no meio da palavra); overflow-wrap/word-break ficam só
   como rede de segurança pra um rótulo mais longo no futuro não voltar a
   estourar a tabela — nowrap tem prioridade enquanto couber. */
.permissoes-table th:not(:first-child),
.permissoes-table td:not(:first-child) {
  width: 120px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Smartphone: 6 colunas de 120px (720px) nunca cabem numa tela de ~340-400px
   úteis, e o fallback padrão (.table-responsive com rolagem lateral) tem um
   problema de usabilidade próprio aqui — a coluna Permissão rola junto,
   então o usuário perde de vista qual permissão está marcando ao alcançar
   as últimas colunas (Cooperado/Colaborador). Solução: abaixo de 640px a
   tabela vira lista empilhada (técnica CSS padrão — thead some, cada tr
   vira um "cartão" de bloco, cada td vira uma linha com o rótulo do perfil
   injetado via content:attr(data-label), já que o cabeçalho de coluna que
   normalmente daria esse rótulo não existe mais). Mesmo espírito de "sem
   rolagem horizontal" já usado em Lotes/Documentos, adaptado pra uma grade
   (matriz permissão×perfil) em vez de uma lista de itens. */
@media (max-width: 640px) {
  .permissoes-table,
  .permissoes-table thead,
  .permissoes-table tbody,
  .permissoes-table tr,
  .permissoes-table th,
  .permissoes-table td {
    display: block;
    width: auto;
  }

  .permissoes-table thead { display: none; }

  .permissoes-table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .permissoes-table td:first-child {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    white-space: normal;
  }

  .permissoes-table td:not(:first-child) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #eef1f4;
    text-align: left;
  }

  .permissoes-table td:not(:first-child)::before {
    content: attr(data-label);
    font-size: 0.85rem;
    color: var(--text-main);
  }

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

  /* Checkbox nativo (~16px) fica pequeno demais pra tocar com o dedo —
     aumentado pra um alvo de toque mais realista sem ficar desproporcional. */
  .permissoes-table input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
  }
}

/* ===================================================
   AGENDA E VISITA TÉCNICA (migration 037)
   =================================================== */

/* Lista de visitas — mesma técnica de card-collapse abaixo de 640px já
   usada em .permissoes-table (thead some, cada tr vira cartão, rótulo de
   coluna injetado via content:attr(data-label)), seletor próprio porque as
   colunas/larguras são diferentes (não é uma matriz permissão×perfil). */
.visitas-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.visitas-table th, .visitas-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
  text-align: left;
}
.visitas-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .visitas-table, .visitas-table thead, .visitas-table tbody,
  .visitas-table tr, .visitas-table th, .visitas-table td {
    display: block; width: auto;
  }
  .visitas-table thead { display: none; }
  .visitas-table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .visitas-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #eef1f4;
  }
  .visitas-table td::before {
    content: attr(data-label);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
  }
  .visitas-table td:last-child { border-bottom: none; }
}

/* Checklist de Conformidade — lista vertical (não tabela larga), pensada
   pro técnico preencher em campo no celular: 1 critério por vez, 3 alvos
   de toque grandes (Conforme/Não Conforme/N.A.) em vez de uma grade. */
.checklist-item-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.2rem;
  margin-bottom: 0.8rem;
}
.checklist-item-titulo { font-weight: 600; margin-bottom: 0.6rem; }
.checklist-status-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.checklist-status-btn {
  flex: 1 1 120px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition);
}
.checklist-status-btn:hover { border-color: var(--primary); }
.checklist-status-btn.conforme.active       { background: var(--success-light); color: var(--success); border-color: var(--success); }
.checklist-status-btn.nao-conforme.active   { background: var(--danger-light);  color: var(--danger);  border-color: var(--danger); }
.checklist-status-btn.nao-aplicavel.active  { background: #e9ecef; color: #495057; border-color: #adb5bd; }
.checklist-status-btn:disabled { cursor: default; opacity: 0.8; }

.checklist-item-obs-toggle {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.5rem 0 0;
}
.checklist-item-obs {
  width: 100%;
  margin-top: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  font-size: 0.85rem;
  font-family: inherit;
}
.checklist-item-obs-texto {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Assinatura de Calendário — link readonly + botão copiar */
.agenda-token-box { display: flex; gap: 0.5rem; }
.agenda-token-box input {
  flex: 1;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.78rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

/* ===================================================
   BIOMETRIA — TABELA DE CRESCIMENTO
   Colunas mais estreitas (table-layout: fixed + larguras em %) pra caber
   os ícones da coluna Ações na mesma linha, sem quebrar — mesmo padrão de
   .users-table acima. Rolagem horizontal (.table-responsive) só entra em
   telas bem estreitas.
   =================================================== */
/* Usadas em vários pontos (Ganho de Peso/C.A./GPD da Biometria, resumo de
   economia de ração) — nunca tinham sido definidas no CSS, então essas
   classes nunca pintaram nada até agora (achado de 27/07/2026). */
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warn    { color: var(--warning); }

.biometria-table {
  table-layout: fixed;
  min-width: 780px;
}

.biometria-table th:nth-child(1),  .biometria-table td:nth-child(1)  { width: 5%; }  /* # */
.biometria-table th:nth-child(2),  .biometria-table td:nth-child(2)  { width: 7%; }  /* Data */
.biometria-table th:nth-child(3),  .biometria-table td:nth-child(3)  { width: 8%; }  /* Volume de Peixes */
.biometria-table th:nth-child(4),  .biometria-table td:nth-child(4)  { width: 8%; }  /* Nº Peixes Amostra */
.biometria-table th:nth-child(5),  .biometria-table td:nth-child(5)  { width: 9%; }  /* Peso Médio Corrigido (g) */
.biometria-table th:nth-child(6),  .biometria-table td:nth-child(6)  { width: 9%; }  /* Biomassa Corrigida (kg) */
.biometria-table th:nth-child(7),  .biometria-table td:nth-child(7)  { width: 9%; }  /* Ganho de Peso Corrigido (kg) */
.biometria-table th:nth-child(8),  .biometria-table td:nth-child(8)  { width: 8%; }  /* Ração (kg) */
.biometria-table th:nth-child(9),  .biometria-table td:nth-child(9)  { width: 7%; }  /* C.A. Corrigido */
.biometria-table th:nth-child(10), .biometria-table td:nth-child(10) { width: 8%; }  /* GPD Corrigido */
.biometria-table th:nth-child(11), .biometria-table td:nth-child(11) { width: 13%; } /* Obs */
.biometria-table th:nth-child(12), .biometria-table td:nth-child(12) { width: 9%; }  /* Ações */

.biometria-table th:nth-child(n+3):nth-child(-n+10),
.biometria-table td:nth-child(n+3):nth-child(-n+10) {
  text-align: right;
}

.biometria-table th,
.biometria-table td {
  padding: 0.5rem 0.5rem;
}

/* Cabeçalho quebra em até 2 linhas em vez de truncar com "..." — nome da
   coluna inteiro continua legível mesmo com a coluna estreita. */
.biometria-table th {
  white-space: normal;
  font-size: 0.68rem;
  line-height: 1.15;
  vertical-align: bottom;
}

/* Células de dado continuam em 1 linha só, com reticências se necessário
   (valores são curtos — só Obs se beneficia da elipse de verdade). */
.biometria-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.biometria-table td:last-child {
  overflow: visible;
  text-overflow: clip;
}

.biometria-acoes {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.users-table tr:hover {
  background: #f8fbff;
}

.user-list-name {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.user-list-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.user-inactive td {
  opacity: 0.75;
}

.user-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition);
  border: 1.5px solid transparent;
}

.user-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.user-card-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}

.avatar-admin      { background: linear-gradient(135deg, #0d6efd, #0a58ca); }
.avatar-technician { background: linear-gradient(135deg, #6f42c1, #5a32a3); }
.avatar-farmer     { background: linear-gradient(135deg, #20c997, #17a589); }
.avatar-manager    { background: linear-gradient(135deg, #fd7e14, #d9660a); }
.avatar-collaborator { background: linear-gradient(135deg, #2f9e58, #237a43); }
.avatar-supervisor { background: linear-gradient(135deg, #d63384, #b02a6f); }

.user-card-info { flex: 1; min-width: 0; }

.user-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card-email {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================================================
   RELATÓRIOS
   =================================================== */
.relatorio-filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  background: white;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.form-group-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-group-inline label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===================================================
   MODALS
   =================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,27,42,0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

.modal {
  background: white;
  border-radius: var(--radius);
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  animation: modalIn 0.25s ease;
}

@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Modal mais largo — usado no preview de documentos (PDF/imagem precisa de mais espaço que um formulário) */
.modal-wide { max-width: 900px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-header h3 i { color: var(--primary); }

.modal-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 50%;
  transition: var(--transition);
}

.modal-close:hover { background: var(--danger-light); color: var(--danger); }

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}

/* ===================================================
   FORM GRID (MODAL)
   =================================================== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-full { grid-column: span 2; }

/* min-width:0 anula o min-width:auto padrão de item de grid — sem isso, um
   filho com largura intrínseca grande (ex.: input[type=file], que o
   navegador não deixa encolher abaixo do botão "Escolher arquivo") estoura
   a coluna e força rolagem horizontal no modal inteiro. */
.form-group { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-main);
  background: white;
  transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13,110,253,0.1);
}

.form-group textarea { resize: vertical; }

/* ===================================================
   TOAST
   =================================================== */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-sm);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: var(--shadow-md);
  animation: slideUp 0.3s ease;
  max-width: 320px;
}

.toast-success { background: var(--success); }
.toast-error   { background: var(--danger); }
.toast-warning { background: var(--warning); }
.toast-info    { background: var(--primary); }

@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ===================================================
   BATCH ITEMS (DASHBOARD)
   =================================================== */
.batch-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.batch-item:last-child { border-bottom: none; }

.batch-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  background: var(--primary-light);
  color: var(--primary);
}

.batch-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.batch-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ===================================================
   SIDEBAR COLLAPSED
   =================================================== */
.sidebar.collapsed {
  width: 64px;
}

.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .badge-nav,
.sidebar.collapsed .btn-logout span {
  display: none;
}

.sidebar.collapsed + .main-content {
  margin-left: 64px;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 0.65rem;
}

.sidebar.collapsed .sidebar-header {
  padding: 1rem 0;
}

.sidebar.collapsed .sidebar-header-row1 {
  justify-content: center;
}

.sidebar.collapsed .logo-img,
.sidebar.collapsed .sidebar-header-row2 {
  display: none;
}

.sidebar.collapsed .sidebar-toggle {
  font-size: 1.1rem;
  padding: 0.4rem 0.6rem;
}

/* Tooltip do menu colapsado — posicionado via JS (position:fixed), porque
   a .sidebar tem overflow-y:auto e isso faz o navegador tratar overflow-x
   como 'auto' também (regra do CSS: um eixo 'visible' + outro não-visible
   vira 'auto'), cortando qualquer ::after que tentasse escapar pela direita. */
.nav-tooltip {
  position: fixed;
  background: var(--sidebar-bg);
  color: #fff;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.nav-tooltip.visible {
  opacity: 1;
}

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 1024px) {
  .charts-grid { grid-template-columns: 1fr 1fr; }
  .chart-wide  { grid-column: span 2; }
  .bottom-grid { grid-template-columns: 1fr; }
  .qa-dash-row-topo   { grid-template-columns: 1fr 1fr; }
  .qa-dash-row-gauges { grid-template-columns: 1fr 1fr; }
  .qa-dash-row-graficos { grid-template-columns: 1fr; }

  /* Abaixo de 1024px as linhas empilham em 1 coluna — caber numa janela só
     ficaria ilegível. Reverte o fit-to-viewport pro scroll de página
     normal (mesmo comportamento de antes desta feature), e o cabeçalho
     mesclado volta a empilhar (abas numa linha, filtros embaixo). */
  #qa-tab-dashboard { height: auto; display: block; }
  #qa-dash-conteudo { flex: none; display: block; overflow-y: visible; }
  .qa-dash-row-topo,
  .qa-dash-row-gauges,
  .qa-dash-row-graficos {
    flex: none;
    margin-bottom: 1rem;
  }
  .qa-dash-row-topo .chart-card,
  .qa-dash-row-gauges .chart-card,
  .qa-dash-row-graficos .chart-card {
    display: block;
    min-height: 0;
  }
  .qa-kpi-spark { height: auto; }
  .qa-header-mesclado { flex-direction: column; align-items: stretch; }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

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

  .main-content {
    margin-left: 0 !important;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .charts-grid {
    grid-template-columns: 1fr;
  }

  .chart-wide { grid-column: span 1; }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-full { grid-column: span 1; }

  .bottom-grid { grid-template-columns: 1fr; }

  .qa-dash-row-topo   { grid-template-columns: 1fr; }
  .qa-dash-row-gauges { grid-template-columns: 1fr; }

  .topbar-user span { display: none; }

  .section-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .content-area { padding: 1rem; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .modal { max-height: 95vh; }
}

/* ===================================================
   SCROLLBAR
   =================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c0cdd8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #a0adb8; }