/* ============================================================
   tema.css — reskin do Oceano (design tokens + overrides)
   Carregado por ULTIMO no index.php; sobrescreve estilo/menu/bootstrap.
   Login (body.body-login) mantem o gradiente proprio.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#eef2f6; --surface:#fff; --border:#e4e9f0;
  --text:#1f2a37; --muted:#64748b;
  --primary:#0b6aa8; --primary-d:#08567f; --navy:#0d2f45;
  --danger:#d6453d;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.04),0 2px 6px rgba(16,24,40,.06);
}

/* ---------- Base (logado; login fica com seu gradiente) ---------- */
body{
  background:var(--bg) !important;
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ---------- Topo (barra navy + marca) ---------- */
.top-bar{
  background:linear-gradient(90deg,var(--navy),#11405c) !important;
  color:#fff !important;
  display:flex; align-items:center; justify-content:space-between;
  height:52px; padding:0 22px !important;
  font-size:13px !important; font-weight:500 !important;
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}
.top-bar::before{ content:"\2693\00a0\00a0Oceano"; font-weight:700; font-size:16px; color:#fff; letter-spacing:.3px; }
.top-bar span{ color:#cfe0ec; }

/* ---------- Menu (nav branca com tabs limpas) ---------- */
.menu-container{
  background:var(--surface) !important;
  margin-top:0 !important; padding:0 12px !important;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 2px rgba(16,24,40,.05) !important;
  flex-wrap:wrap;
}
.menu{ gap:2px !important; }
.menu-item a{
  flex-direction:row !important; gap:8px;
  border:0 !important; border-radius:0 !important;
  border-bottom:2px solid transparent !important;
  background:transparent !important;
  color:var(--muted) !important; font-size:14px !important; font-weight:500 !important;
  padding:14px 14px !important; transition:color .15s,border-color .15s;
}
.menu-item a i, .menu-item a span.icon{
  font-size:14px !important; color:var(--muted) !important; margin-bottom:0 !important;
}
.menu-item a:hover{ background:transparent !important; color:var(--text) !important; }
.menu-item a:hover i{ color:var(--text) !important; }
.menu-item.active a{
  background:transparent !important; color:var(--primary) !important;
  border-bottom-color:var(--primary) !important; box-shadow:none !important;
}
.menu-item.active a i{ color:var(--primary) !important; }
.menu-item.active::after{ display:none !important; }
.menu-item.logout a:hover{ background:var(--danger) !important; color:#fff !important; border-radius:8px !important; }
.menu-item.logout a:hover i{ color:#fff !important; }

/* ---------- Bottom-nav mobile ---------- */
.mobile-bottom-nav{ background:var(--surface) !important; border-top:1px solid var(--border); box-shadow:0 -1px 8px rgba(16,24,40,.08) !important; }
.mobile-bottom-nav a{ color:var(--muted) !important; }
.mobile-bottom-nav a.active{ background:transparent !important; color:var(--primary) !important; border-top:2px solid var(--primary) !important; }

/* ---------- Hamburguer mobile do admin (botao injetado por tema.js) ----------
   Admin nao tem bottom-nav e o .menu-container some no mobile (menu.css), entao
   ficava sem navegacao no celular. O burger abre o menu em coluna. So apresentacao. */
.tema-burger{ display:none; margin-left:auto; background:transparent; border:0; color:#fff;
  font-size:22px; line-height:1; cursor:pointer; padding:4px 6px; }
@media (max-width:768px){
  .tema-burger{ display:inline-flex; align-items:center; }
  .top-bar span{ display:none; }
  .menu-container.tema-open{ display:block !important; padding:4px 0 !important; }
  .menu-container.tema-open .menu{ flex-direction:column; align-items:stretch; gap:0 !important; }
  .menu-container.tema-open .menu-item a{ padding:13px 18px !important; }
  .menu-container.tema-open .menu-item.active a{ border-bottom:0 !important;
    border-left:3px solid var(--primary) !important; background:#f4f8fb !important; }
}

/* ---------- Superficies (mata card-duplo: wrapper externo transparente) ---------- */
.container{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:18px !important; }
.container.mt-5,.card{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; padding:22px !important;
}

/* ---------- Tabelas ---------- */
.table{ margin-bottom:0; }
.table th,.table td{ border-color:var(--border) !important; vertical-align:middle !important; padding:12px 14px !important; }
.thead-blue th,.table thead th{
  background:#f7f9fb !important; color:var(--muted) !important;
  text-transform:uppercase; font-size:12px; letter-spacing:.4px; font-weight:600 !important;
  border-top:0 !important; border-bottom:1px solid var(--border) !important;
}
.table tbody tr:hover{ background:#f9fbfd !important; }
/* Acento de fim de semana: Dom/Sab tem style="color:red" inline no calendario;
   o override de thead apaga isso, entao devolvemos o destaque com o vermelho do tema */
.table thead th[style*="red"]{ color:var(--danger) !important; background:#fcf2f1 !important; }

/* ---------- Botoes de acao ---------- */
.btn-info{ background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; }
.btn-info:hover{ background:var(--primary-d) !important; border-color:var(--primary-d) !important; }
.btn-danger{ background:var(--danger) !important; border-color:var(--danger) !important; }
.btn-success{ background:#1f9d6b !important; border-color:#1f9d6b !important; }
.btn-warning{ background:#e0a13b !important; border-color:#e0a13b !important; color:#fff !important; }
.btn-secondary{ background:#64748b !important; border-color:#64748b !important; }

/* ---------- Botoes de acao dentro da tabela: estilo ghost ---------- */
.table tbody .btn{ background:#fff !important; border:1px solid var(--border) !important; color:var(--muted) !important; box-shadow:none !important; }
.table tbody .btn:hover{ border-color:#cdd9e6 !important; }
.table tbody .btn-info,.table tbody .btn-primary{ color:var(--primary) !important; }
.table tbody .btn-info:hover,.table tbody .btn-primary:hover{ background:#eef5fb !important; color:var(--primary) !important; }
.table tbody .btn-danger{ color:var(--danger) !important; }
.table tbody .btn-danger:hover{ background:#fdecea !important; color:var(--danger) !important; }
.table tbody .btn-warning{ color:#c77f1a !important; }
.table tbody .btn-warning:hover{ background:#fbf2e3 !important; }
.table tbody .btn-success{ color:#1f9d6b !important; }
.table tbody .btn-success:hover{ background:#e7f6ef !important; }

/* ---------- Titulos de secao ---------- */
h5.text-center{ font-weight:700 !important; color:var(--text); font-size:18px; }

/* ---------- Login: UM card coeso (logo dentro, sem titulo redundante) ----------
   Fundo gradiente nautico; card unico centralizado vertical em desktop e mobile.
   A logo (fundo branco) funde no card branco — sem quadrinho "solto". Mesma regra
   nos dois breakpoints (sem media query) p/ ficar consistente. */
body.body-login{
  background:linear-gradient(160deg, var(--navy) 0%, #0b5680 52%, var(--primary) 100%) !important;
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px;
}
#login-logo-container, .login-mobile-logo{ display:none !important; }   /* logo agora vai DENTRO do card */
body.body-login .container{ background:transparent !important; box-shadow:none !important; border:0 !important;
  width:100%; max-width:400px; padding:0 !important; margin:0; }
body.body-login .col-md-6{ flex:0 0 100%; max-width:100%; padding:0; }

.login-card-mobile{ border:none !important; border-radius:18px !important;
  box-shadow:0 24px 60px rgba(8,20,33,.32) !important; }
.login-card-mobile .card-body{ padding:34px 30px 26px !important; }

.login-brand{ text-align:center; margin-bottom:24px; }
.login-brand img{ max-height:52px; width:auto; max-width:78%; }

.login-card-mobile label{ font-size:11px !important; font-weight:700 !important; text-transform:uppercase;
  letter-spacing:.7px; color:var(--muted) !important; margin-bottom:6px; }
.login-card-mobile .form-group{ margin-bottom:16px; }
.login-card-mobile .form-control{ height:48px !important; border-radius:11px !important; font-size:15px !important;
  border:1.5px solid #e8ecf0 !important; background:#f7f9fc !important; padding:0 15px !important; color:var(--text) !important; }
.login-card-mobile .form-control:focus{ border-color:var(--primary) !important; background:#fff !important;
  box-shadow:0 0 0 3px rgba(11,106,168,.14) !important; }
.login-card-mobile .btn-primary{ height:48px !important; width:100%; border-radius:11px !important; font-size:15px !important;
  font-weight:700 !important; letter-spacing:.3px; margin-top:6px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%) !important; border:0 !important;
  box-shadow:0 6px 18px rgba(11,106,168,.38) !important; }
.login-card-mobile .btn-primary:disabled{ opacity:.5; box-shadow:none !important; }
.login-card-mobile .card-body > a{ display:block; text-align:center; margin-top:16px; font-size:13.5px;
  color:var(--primary) !important; text-decoration:none; font-weight:500; }
body.body-login .text-center[style]{ color:rgba(255,255,255,.6) !important; }

/* ---------- Paginacao client-side (tema.js) ---------- */
.tema-pag{ display:flex; align-items:center; gap:8px; padding:14px 4px 2px; font-size:13px; color:var(--muted); }
.tema-pag-info{ margin-right:auto; }
.tema-pag-btn{ border:1px solid var(--border); background:#fff; border-radius:8px; width:32px; height:32px; cursor:pointer; color:var(--text); font-size:15px; line-height:1; }
.tema-pag-btn:disabled{ opacity:.4; cursor:default; }
.tema-pag-btn:hover:not(:disabled){ border-color:var(--primary); color:var(--primary); }
.tema-pag-cur{ font-weight:600; color:var(--text); }

/* ---------- Barra de lista (busca + filtro de status + acao) ---------- */
.lista-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.lista-head h5{ margin:0; }
.lista-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tema-busca{ position:relative; display:inline-flex; align-items:center; }
.tema-busca i{ position:absolute; left:12px; color:var(--muted); font-size:13px; pointer-events:none; }
.tema-busca input{ padding:9px 12px 9px 32px; border:1px solid var(--border); border-radius:9px;
  min-width:240px; font-size:14px; color:var(--text); background:var(--surface); font-family:inherit; }
.tema-busca input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(11,106,168,.15); }
.tema-segm{ display:inline-flex; background:#e9eef3; border:1px solid var(--border); border-radius:9px; padding:3px; }
.tema-segm a{ padding:6px 14px; border-radius:7px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; transition:color .15s; }
.tema-segm a:hover{ color:var(--text); }
.tema-segm a.active{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow); }
@media (max-width:768px){
  .lista-toolbar{ width:100%; }
  .tema-busca, .tema-busca input{ flex:1; min-width:0; }
}

/* ---------- Seletor de embarcacao compacto (admin): mais discreto e fluido ----------
   Override do menuBarcos.css: tira a borda-esquerda grossa, a caixa do icone e a
   sombra fixa; ativo vira um chip sutil (tinta + borda primaria) em vez do gradiente. */
.barcos-lista-compacta{ gap:10px !important; padding:6px 0 14px !important; }
.barcos-lista-compacta .barco-card{
  width:104px !important; padding:12px 10px !important; gap:7px !important;
  background:var(--surface) !important;
  border:1px solid var(--border) !important; border-left:1px solid var(--border) !important;
  border-radius:var(--radius) !important; box-shadow:none !important;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.barcos-lista-compacta .barco-card:hover{
  border-color:#cdd9e6 !important; box-shadow:var(--shadow) !important; transform:translateY(-2px);
}
.barcos-lista-compacta .barco-card.active{
  background:#eef5fb !important; border-color:var(--primary) !important;
  border-left-color:var(--primary) !important; box-shadow:none !important; color:var(--primary) !important;
}
.barcos-lista-compacta .barco-card-icon{
  width:36px !important; height:36px !important; border-radius:10px !important; background:transparent !important;
}
.barcos-lista-compacta .barco-card-img-icon{ font-size:24px !important; color:var(--muted) !important; }
.barcos-lista-compacta .barco-card.active .barco-card-icon{ background:transparent !important; }
.barcos-lista-compacta .barco-card.active .barco-card-img-icon{ color:var(--primary) !important; }
.barcos-lista-compacta .barco-card-nome{ font-size:13px !important; font-weight:600 !important; color:var(--text) !important; }
.barcos-lista-compacta .barco-card.active .barco-card-nome{ color:var(--primary) !important; }
.barcos-lista-compacta .barco-card-tipo{ color:var(--muted) !important; letter-spacing:.5px !important; }
.barcos-lista-compacta .barco-card.active .barco-card-tipo{ color:var(--primary) !important; opacity:.65; }

/* ---------- Cards de embarcacao do cliente (.barcos-lista grande): mais elegante ----------
   Mesmo tratamento do seletor admin (borda fina, sem caixa pesada, sem sombra fixa, ativo
   = chip sutil), mas preserva stats (Semana/FDS) e pilula de proxima data. So o card grande. */
.barcos-lista:not(.barcos-lista-compacta) .barco-card{
  border:1px solid var(--border) !important; border-left:1px solid var(--border) !important;
  border-radius:var(--radius) !important; box-shadow:none !important;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.barcos-lista:not(.barcos-lista-compacta) .barco-card:hover{
  border-color:#cdd9e6 !important; box-shadow:var(--shadow) !important; transform:translateY(-2px);
}
.barcos-lista:not(.barcos-lista-compacta) .barco-card.active{
  background:#eef5fb !important; border-color:var(--primary) !important; border-left-color:var(--primary) !important;
  box-shadow:none !important; color:var(--text) !important;
}
.barcos-lista:not(.barcos-lista-compacta) .barco-card-icon{
  width:54px !important; height:54px !important; border-radius:12px !important; background:#f1f6fb !important;
}
.barcos-lista:not(.barcos-lista-compacta) .barco-card.active .barco-card-icon{ background:#fff !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card-img{ width:36px !important; height:36px !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card-img-icon{ font-size:30px !important; color:var(--primary) !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card.active .barco-card-img-icon{ color:var(--primary) !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card-nome{ font-size:16px !important; color:var(--text) !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card.active .barco-card-nome{ color:var(--primary) !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card-tipo{ color:var(--muted) !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card.active .barco-card-tipo{ color:var(--primary) !important; opacity:.7; }
.barcos-lista:not(.barcos-lista-compacta) .barco-stat{ color:var(--muted) !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card.active .barco-stat{ color:var(--muted) !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card-proxima{ background:#eaf3fb !important; color:var(--primary) !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card.active .barco-card-proxima{ background:#dbeafe !important; color:var(--primary) !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card-arrow{ color:#c0d0dd !important; }
.barcos-lista:not(.barcos-lista-compacta) .barco-card.active .barco-card-arrow{ color:var(--primary) !important; opacity:.5; }

/* ---------- Modal de confirmacao (tema.js: substitui o confirm() nativo) ---------- */
.tema-modal-overlay{ position:fixed; inset:0; z-index:1080; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(13,47,69,.45); opacity:0; transition:opacity .15s ease; }
.tema-modal-overlay.open{ opacity:1; }
.tema-modal{ background:var(--surface); border-radius:14px; width:100%; max-width:380px;
  padding:26px 24px 20px; text-align:center; box-shadow:0 20px 50px rgba(16,24,40,.25);
  transform:translateY(8px) scale(.98); transition:transform .15s ease; }
.tema-modal-overlay.open .tema-modal{ transform:none; }
.tema-modal-icon{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:22px; background:#eef5fb; color:var(--primary); }
.tema-modal.is-danger .tema-modal-icon{ background:#fdecea; color:var(--danger); }
.tema-modal-msg{ font-size:15px; line-height:1.5; color:var(--text); margin-bottom:22px; }
.tema-modal-actions{ display:flex; gap:10px; justify-content:center; }
.tema-modal-actions .btn{ min-width:108px; }
.tema-modal-cancel{ background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--text) !important; box-shadow:none !important; }
.tema-modal-cancel:hover{ background:#f4f7fa !important; }
.tema-modal-ok{ background:var(--primary) !important; border:1px solid var(--primary) !important; color:#fff !important; }
.tema-modal.is-danger .tema-modal-ok{ background:var(--danger) !important; border-color:var(--danger) !important; }

/* ---------- Formularios ---------- */
label{ color:var(--text) !important; font-weight:500; font-size:13px; }
.form-control,.form-select{ border:1px solid var(--border) !important; border-radius:9px !important; }
.form-control:focus,.form-select:focus{ border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(11,106,168,.15) !important; }

/* ---------- Botoes ---------- */
.btn{ border-radius:9px !important; font-weight:600; }
.btn-primary{ background:var(--primary) !important; border-color:var(--primary) !important; }
.btn-primary:hover,.btn-primary:focus{ background:var(--primary-d) !important; border-color:var(--primary-d) !important; }