/* ============================================================
   RC Camarão — Tema Claro (rc-theme.css)
   Carregar DEPOIS do bootstrap.min.css no base.html
   Paleta: água clara + verde-petróleo + coral-camarão
   ============================================================ */

:root {
  --rc-bg:           #F3F7F9;
  --rc-surface:      #FFFFFF;
  --rc-surface2:     #F8FBFC;
  --rc-ink:          #0F2E36;
  --rc-ink2:         #58737E;
  --rc-ink3:         #97ACB4;
  --rc-petrol:       #0E8D9E;
  --rc-petrol-dark:  #0A6E7C;
  --rc-petrol-soft:  #E2F3F5;
  --rc-coral:        #F0664A;
  --rc-coral-dark:   #D9553B;
  --rc-coral-soft:   #FDEDE8;
  --rc-green:        #1FA65A;
  --rc-green-soft:   #E6F6EC;
  --rc-amber:        #DF8E0A;
  --rc-amber-soft:   #FCF3E0;
  --rc-red:          #DE4B3F;
  --rc-red-soft:     #FCE9E7;
  --rc-border:       #E3EDF0;
  --rc-radius:       14px;
  --rc-radius-sm:    10px;
  --rc-shadow:       0 1px 3px rgba(15,46,54,.05), 0 8px 24px rgba(15,46,54,.06);
  --rc-shadow-lg:    0 4px 12px rgba(15,46,54,.08), 0 16px 40px rgba(15,46,54,.12);

  /* Repassa a paleta para as variáveis do Bootstrap */
  --bs-primary:      #0E8D9E;
  --bs-primary-rgb:  14, 141, 158;
  --bs-success:      #1FA65A;
  --bs-success-rgb:  31, 166, 90;
  --bs-warning:      #DF8E0A;
  --bs-warning-rgb:  223, 142, 10;
  --bs-danger:       #DE4B3F;
  --bs-danger-rgb:   222, 75, 63;
  --bs-body-bg:      #F3F7F9;
  --bs-body-color:   #0F2E36;
  --bs-border-color: #E3EDF0;
  --bs-link-color:   #0A6E7C;
  --bs-link-hover-color: #0E8D9E;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .925rem;
  background: var(--rc-bg);
  color: var(--rc-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .navbar-brand, .card-header strong, .modal-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  letter-spacing: -.01em;
  font-weight: 700;
}

h2 { font-size: 1.35rem; font-weight: 800; }
h2 .bi { color: var(--rc-petrol); }

/* Números e valores em fonte mono */
.fs-4.fw-bold, .rc-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600 !important;
}

::selection { background: var(--rc-petrol-soft); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-rc {
  background: var(--rc-surface);
  border-bottom: 1px solid var(--rc-border);
  padding-top: .55rem;
  padding-bottom: .55rem;
}

.navbar-rc .navbar-brand {
  color: var(--rc-ink);
  font-weight: 800;
  font-size: 1.05rem;
}
.navbar-rc .navbar-brand img {
  height: 34px !important;
  width: auto;
}
.navbar-rc .navbar-brand .rc-destaque { color: var(--rc-coral); }

.navbar-rc .nav-link {
  color: var(--rc-ink2);
  font-weight: 500;
  font-size: .89rem;
  border-radius: var(--rc-radius-sm);
  padding: .45rem .8rem !important;
  margin-left: .15rem;
  transition: background .15s, color .15s;
}
.navbar-rc .nav-link:hover { background: var(--rc-surface2); color: var(--rc-ink); }
.navbar-rc .nav-link.active {
  background: var(--rc-petrol-soft);
  color: var(--rc-petrol-dark);
  font-weight: 600;
}
.navbar-rc .nav-link .bi { margin-right: .2rem; }
.navbar-rc .nav-link.rc-sair { color: var(--rc-red); }
.navbar-rc .nav-link.rc-sair:hover { background: var(--rc-red-soft); }

.navbar-rc .navbar-toggler {
  border-color: var(--rc-border);
  color: var(--rc-ink2);
}
.navbar-rc .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(14,141,158,.15); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  box-shadow: var(--rc-shadow) !important;
  overflow: hidden;
}

.card-header {
  background: var(--rc-surface);
  border-bottom: 1px solid var(--rc-border);
  padding: .8rem 1.1rem;
}

/* Cabeçalhos que usavam o azul do Bootstrap viram verde-petróleo */
.card-header.bg-primary {
  background: linear-gradient(135deg, var(--rc-petrol), var(--rc-petrol-dark)) !important;
}

.bg-primary { background-color: var(--rc-petrol) !important; }
.text-primary { color: var(--rc-petrol-dark) !important; }
.text-muted { color: var(--rc-ink2) !important; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  font-weight: 600;
  border-radius: var(--rc-radius-sm);
  font-size: .875rem;
}
.btn-sm { border-radius: 8px; font-size: .8rem; }

.btn-primary {
  --bs-btn-bg: var(--rc-coral);
  --bs-btn-border-color: var(--rc-coral);
  --bs-btn-hover-bg: var(--rc-coral-dark);
  --bs-btn-hover-border-color: var(--rc-coral-dark);
  --bs-btn-active-bg: var(--rc-coral-dark);
  --bs-btn-active-border-color: var(--rc-coral-dark);
  --bs-btn-focus-shadow-rgb: 240, 102, 74;
}

.btn-outline-primary {
  --bs-btn-color: var(--rc-petrol-dark);
  --bs-btn-border-color: var(--rc-petrol);
  --bs-btn-hover-bg: var(--rc-petrol);
  --bs-btn-hover-border-color: var(--rc-petrol);
  --bs-btn-active-bg: var(--rc-petrol-dark);
  --bs-btn-active-border-color: var(--rc-petrol-dark);
  --bs-btn-focus-shadow-rgb: 14, 141, 158;
}

.btn-success {
  --bs-btn-bg: var(--rc-green);
  --bs-btn-border-color: var(--rc-green);
  --bs-btn-hover-bg: #188C4B;
  --bs-btn-hover-border-color: #188C4B;
}

.btn-warning {
  --bs-btn-bg: var(--rc-amber);
  --bs-btn-border-color: var(--rc-amber);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #C57D07;
  --bs-btn-hover-border-color: #C57D07;
  --bs-btn-hover-color: #fff;
}

.btn-outline-warning {
  --bs-btn-color: #B97606;
  --bs-btn-border-color: var(--rc-amber);
  --bs-btn-hover-bg: var(--rc-amber);
  --bs-btn-hover-border-color: var(--rc-amber);
  --bs-btn-hover-color: #fff;
}

.btn-danger {
  --bs-btn-bg: var(--rc-red);
  --bs-btn-border-color: var(--rc-red);
  --bs-btn-hover-bg: #C43D32;
  --bs-btn-hover-border-color: #C43D32;
}

/* ============================================================
   TABELAS
   ============================================================ */
.table {
  --bs-table-hover-bg: var(--rc-surface2);
  background: var(--rc-surface);
  border-radius: var(--rc-radius);
  overflow: hidden;
  box-shadow: var(--rc-shadow);
  font-size: .89rem;
}

.table thead th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--rc-ink3);
  background: var(--rc-surface2);
  border-bottom: 1px solid var(--rc-border);
  padding: .7rem .9rem;
  white-space: nowrap;
}

/* thead que usava table-primary (azul) fica suave */
.table-primary,
.table-primary > th,
.table-primary > td {
  --bs-table-bg: var(--rc-petrol-soft);
  --bs-table-color: var(--rc-petrol-dark);
  background-color: var(--rc-petrol-soft) !important;
  color: var(--rc-petrol-dark) !important;
}
.table-primary th {
  color: var(--rc-petrol-dark) !important;
  background: var(--rc-petrol-soft) !important;
}

.table tbody td {
  padding: .7rem .9rem;
  border-color: var(--rc-border);
  vertical-align: middle;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  font-weight: 700;
  font-size: .72rem;
  padding: .38em .75em;
  border-radius: 99px;
  text-transform: capitalize;
}
.badge.bg-primary   { background: var(--rc-petrol-soft) !important; color: var(--rc-petrol-dark) !important; }
.badge.bg-success   { background: var(--rc-green-soft) !important;  color: var(--rc-green) !important; }
.badge.bg-warning   { background: var(--rc-amber-soft) !important;  color: #B97606 !important; }
.badge.bg-danger    { background: var(--rc-red-soft) !important;    color: var(--rc-red) !important; }
.badge.bg-secondary { background: #EDF2F4 !important;               color: var(--rc-ink2) !important; }

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.form-label { font-size: .82rem; font-weight: 600; color: var(--rc-ink2); }

.form-control, .form-select {
  border-color: var(--rc-border);
  border-radius: var(--rc-radius-sm);
  padding: .55rem .8rem;
  font-size: .9rem;
  color: var(--rc-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--rc-petrol);
  box-shadow: 0 0 0 3px rgba(14,141,158,.13);
}

/* ============================================================
   ALERTAS (mensagens flash)
   ============================================================ */
.alert {
  border: none;
  border-radius: var(--rc-radius-sm);
  font-size: .89rem;
  font-weight: 500;
}
.alert-success { background: var(--rc-green-soft); color: #147041; }
.alert-danger  { background: var(--rc-red-soft);   color: #A93228; }
.alert-warning { background: var(--rc-amber-soft); color: #8F5C05; }
.alert-info    { background: var(--rc-petrol-soft); color: var(--rc-petrol-dark); }

/* ============================================================
   MODAIS E DIVERSOS
   ============================================================ */
.modal-content {
  border: none;
  border-radius: var(--rc-radius);
  box-shadow: var(--rc-shadow-lg);
}
.modal-header { border-bottom-color: var(--rc-border); }
.modal-footer { border-top-color: var(--rc-border); background: var(--rc-surface2); }

.list-group-item { border-color: var(--rc-border); }

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* Foco visível para navegação por teclado */
:focus-visible { outline: 2px solid var(--rc-petrol); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==== PÁGINA DE VIVEIROS — cards com foto aérea ==== */
.rc-viv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }
.rc-viv-card { transition: transform .15s, box-shadow .15s; }
.rc-viv-card:hover { transform: translateY(-3px); box-shadow: var(--rc-shadow-lg) !important; }
.rc-viv-foto { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #BFE4E9 0%, #7CC4CE 55%, #4FA8B5 100%); overflow: hidden; }
.rc-viv-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .3s ease; }
.rc-viv-card:hover .rc-viv-foto img { transform: scale(1.04); }
.rc-viv-semfoto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; color: rgba(255,255,255,.85); text-align: center; z-index: 0; }
.rc-viv-semfoto .bi { font-size: 2.2rem; }
.rc-viv-semfoto small { font-size: .66rem; line-height: 1.35; color: rgba(255,255,255,.75); font-family: 'JetBrains Mono', monospace; }
.rc-viv-status { position: absolute; top: .6rem; right: .6rem; z-index: 2; }
.rc-viv-status .badge { box-shadow: 0 2px 8px rgba(15,46,54,.25); }
.rc-viv-status .badge.bg-primary { background: var(--rc-petrol) !important; color: #fff !important; }
.rc-viv-status .badge.bg-success { background: var(--rc-green) !important; color: #fff !important; }
.rc-viv-status .badge.bg-warning { background: var(--rc-amber) !important; color: #fff !important; }
.rc-viv-status .badge.bg-secondary { background: #6C838D !important; color: #fff !important; }
.rc-viv-nome { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: .98rem; color: var(--rc-ink); }
.rc-viv-area { font-size: .78rem; color: var(--rc-ink2); font-family: 'JetBrains Mono', monospace; }
.rc-viv-editar { position: relative; z-index: 3; }
.rc-viv-upload { position: absolute; bottom: .6rem; left: .6rem; z-index: 3; margin: 0; }
.rc-viv-upload .btn { box-shadow: 0 2px 8px rgba(15,46,54,.25); border-radius: 8px; }

/* Divisorias entre os grupos de colunas na tela de ciclos */
.tabela-ciclos thead th:nth-child(2),
.tabela-ciclos thead th:nth-child(5),
.tabela-ciclos thead th:nth-child(8),
.tabela-ciclos thead th:nth-child(12),
.tabela-ciclos tbody td:nth-child(2),
.tabela-ciclos tbody td:nth-child(5),
.tabela-ciclos tbody td:nth-child(8),
.tabela-ciclos tbody td:nth-child(12),
.tabela-ciclos tfoot th:nth-child(2),
.tabela-ciclos tfoot th:nth-child(5),
.tabela-ciclos tfoot th:nth-child(8),
.tabela-ciclos tfoot th:nth-child(12) {
  border-left: 2px solid rgba(11, 11, 11, 0.14);
}

/* O menu de acoes precisa poder sair da tabela; sem isto o
   overflow:hidden de .table (usado pelos cantos arredondados) o recorta. */
.tabela-ciclos {
  overflow: visible;
}

/* Campos de digitacao com borda mais definida */
.form-control,
.form-select {
  border: 1px solid #a8adb5;
}
.form-control:hover,
.form-select:hover {
  border-color: #7c828b;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--rc-petrol);
  box-shadow: 0 0 0 .2rem rgba(13, 110, 133, .15);
}