/* =============================================================
   basic.css — Padrão visual Teksea
   Incluir em todas as páginas:
   <link rel="stylesheet" href="/style/basic.css">
   ============================================================= */

/* ── Fontes Trade Gothic LT Std ─────────────────────────────── */
@font-face {
  font-family: 'TradeGothic';
  src: url('/style/fonts/TradeGothicLTStd.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'TradeGothic';
  src: url('/style/fonts/TradeGothicLTStd-Obl.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'TradeGothic';
  src: url('/style/fonts/TradeGothicLTStd-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'TradeGothic';
  src: url('/style/fonts/TradeGothicLTStd-LightObl.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'TradeGothic';
  src: url('/style/fonts/TradeGothicLTStd-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'TradeGothic';
  src: url('/style/fonts/TradeGothicLTStd-BoldObl.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'TradeGothic';
  src: url('/style/fonts/TradeGothicLTStd-Bd2.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

/* ── Variáveis de cor ───────────────────────────────────────── */
:root {
  --cor-primaria:       #006161;
  --cor-primaria-dark:  #004747;
  --cor-primaria-light: #e0f0f0;
  --cor-primaria-muted: #339999;

  --cor-secundaria:     #231f20;   /* preto da marca */
  --cor-branco:         #ffffff;

  --cor-sucesso:        #2ecc71;
  --cor-alerta:         #f39c12;
  --cor-perigo:         #e74c3c;
  --cor-info:           #3498db;

  --bg-pagina:          #f6f7fb;
  --bg-card:            #ffffff;

  --sombra-card:        0 4px 12px rgba(0, 97, 97, 0.10);
  --sombra-hover:       0 8px 20px rgba(0, 97, 97, 0.18);

  --borda-radius:       10px;
  --borda-radius-lg:    14px;

  --fonte-base:         'TradeGothic', 'Segoe UI', Arial, sans-serif;
}

/* ── Reset / Base ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: var(--bg-pagina);
  font-family: var(--fonte-base);
  font-weight: 400;
  color: var(--cor-secundaria);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-base);
  font-weight: 700;
  color: var(--cor-primaria);
  margin-top: 0;
}

a {
  color: var(--cor-primaria);
  text-decoration: none;
}
a:hover {
  color: var(--cor-primaria-dark);
  text-decoration: underline;
}

/* ── Navbar / Topbar ────────────────────────────────────────── */
.navbar,
.topbar {
  background-color: var(--cor-primaria) !important;
  border-bottom: 3px solid var(--cor-primaria-dark);
}

.navbar .navbar-brand,
.navbar .nav-link,
.topbar .nav-link {
  color: var(--cor-branco) !important;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.navbar .nav-link:hover,
.topbar .nav-link:hover {
  color: var(--cor-primaria-light) !important;
}

/* Logo no nav */
.navbar-brand img,
.topbar-logo img {
  height: 36px;
  width: auto;
}

/* ── Botões — sobrescreve Bootstrap primary ──────────────────── */
.btn-primary {
  background-color: var(--cor-primaria) !important;
  border-color:     var(--cor-primaria) !important;
  color:            var(--cor-branco) !important;
  font-family:      var(--fonte-base);
  font-weight:      700;
  border-radius:    var(--borda-radius);
  transition:       background 0.2s, border 0.2s, box-shadow 0.2s;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cor-primaria-dark) !important;
  border-color:     var(--cor-primaria-dark) !important;
  box-shadow:       0 0 0 0.2rem rgba(0,97,97,0.35) !important;
}

.btn-outline-primary {
  color:        var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
  font-family:  var(--fonte-base);
  font-weight:  700;
  border-radius: var(--borda-radius);
}
.btn-outline-primary:hover {
  background-color: var(--cor-primaria) !important;
  color:            var(--cor-branco) !important;
}

/* ── Cards Kanban ───────────────────────────────────────────── */
.card-kanban {
  background:    var(--bg-card);
  border-radius: var(--borda-radius);
  box-shadow:    var(--sombra-card);
  border-left:   5px solid var(--cor-primaria);
  padding:       12px;
  margin-bottom: 12px;
  cursor:        grab;
  transition:    transform 0.2s ease, box-shadow 0.2s ease;
}
.card-kanban:hover {
  transform:  translateY(-3px);
  box-shadow: var(--sombra-hover);
}
.card-kanban .card-title {
  font-size:   14px;
  font-weight: 700;
  color:       var(--cor-secundaria);
  margin-bottom: 6px;
}

/* ── Colunas Kanban ─────────────────────────────────────────── */
.coluna {
  min-width:        320px;
  background:       var(--bg-card);
  border-radius:    var(--borda-radius-lg);
  box-shadow:       0 6px 18px rgba(0,97,97,0.08);
  display:          flex;
  flex-direction:   column;
  max-height:       80vh;
  padding:          10px;
}

.coluna-header {
  padding:       14px 18px;
  font-weight:   700;
  font-size:     15px;
  border-bottom: 2px solid var(--cor-primaria-light);
  color:         var(--cor-primaria);
  letter-spacing: 0.02em;
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge.bg-primary {
  background-color: var(--cor-primaria) !important;
  font-family:      var(--fonte-base);
}

/* ── Indicadores de tempo ───────────────────────────────────── */
.tempo-ok    { color: var(--cor-sucesso); font-weight: 700; }
.tempo-alerta{ color: var(--cor-alerta);  font-weight: 700; }
.tempo-atraso{ color: var(--cor-perigo);  font-weight: 700; }

/* ── Formulários ────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--cor-primaria) !important;
  box-shadow:   0 0 0 0.2rem rgba(0,97,97,0.25) !important;
}

label {
  font-weight: 600;
  font-size:   13px;
  color:       var(--cor-secundaria);
}

/* ── Tabelas ────────────────────────────────────────────────── */
.table thead th {
  background-color: var(--cor-primaria);
  color:            var(--cor-branco);
  font-family:      var(--fonte-base);
  font-weight:      700;
  border-color:     var(--cor-primaria-dark);
}
.table tbody tr:hover {
  background-color: var(--cor-primaria-light);
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-header {
  background-color: var(--cor-primaria);
  color:            var(--cor-branco);
  border-bottom:    none;
}
.modal-header .modal-title,
.modal-header h5 {
  color:       var(--cor-branco);
  font-weight: 700;
}
.modal-header .btn-close {
  filter: invert(1);
}

/* ── Alertas / Toasts ───────────────────────────────────────── */
.alert-success {
  background-color: var(--cor-primaria-light);
  border-color:     var(--cor-primaria);
  color:            var(--cor-primaria-dark);
}

/* ── Scrollbar (Webkit) ─────────────────────────────────────── */
::-webkit-scrollbar {
  width:  8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-pagina);
}
::-webkit-scrollbar-thumb {
  background:    var(--cor-primaria-muted);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cor-primaria);
}

/* ── Utilitários ────────────────────────────────────────────── */
.text-brand  { color: var(--cor-primaria) !important; }
.bg-brand    { background-color: var(--cor-primaria) !important; color: var(--cor-branco) !important; }
.border-brand{ border-color: var(--cor-primaria) !important; }