/* ============================================
   SHIAI SISTEM - Design Tokens
   Marca: Plataforma de gestao de competicoes de judo
   Paleta: Azul Judogi + Vermelho Japao + Branco
   Tipografia: Exo 2 (display) + Inter (corpo)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700;900&family=Inter:wght@300;400;500;600&display=swap');

/* --- Cores da marca --- */
:root {
  --shiai-blue:          #1E3A8A;
  --shiai-blue-dark:     #0D1B3D;
  --shiai-red:           #D32F2F;
  --shiai-red-dark:      #B71C1C;
  --shiai-gray:          #E6E8EB;
  --shiai-white:         #FFFFFF;
  --shiai-text:          #0D1B3D;
  --shiai-text-muted:    #4A5568;

  /* --- Sobrescrita de variaveis Bootstrap 5 --- */
  --bs-primary:          #1E3A8A;
  --bs-primary-rgb:      30, 58, 138;
  --bs-danger:           #D32F2F;
  --bs-danger-rgb:       211, 47, 47;
  --bs-body-font-family: 'Inter', sans-serif;
  --bs-body-color:       #0D1B3D;
  --bs-border-radius:    6px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-sm: 4px;

  /* --- Tipografia --- */
  --font-display: 'Exo 2', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* --- Espacamentos --- */
  --shiai-sidebar-width: 240px;
}

/* --- Tipografia global --- */
body {
  font-family: var(--font-body);
  color: var(--shiai-text);
  background-color: #f8f9fa;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.shiai-display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--shiai-blue-dark);
}

/* --- Botao primario --- */
.btn-primary {
  background-color: var(--shiai-blue);
  border-color: var(--shiai-blue);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--shiai-blue-dark);
  border-color: var(--shiai-blue-dark);
}

/* --- Botao de acao/destaque (vermelho) --- */
.btn-danger,
.btn-shiai-action {
  background-color: var(--shiai-red);
  border-color: var(--shiai-red);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #fff;
}
.btn-danger:hover,
.btn-shiai-action:hover {
  background-color: var(--shiai-red-dark);
  border-color: var(--shiai-red-dark);
}

/* --- Navbar --- */
.navbar {
  background-color: var(--shiai-blue-dark) !important;
  font-family: var(--font-display);
}
.navbar-brand {
  color: var(--shiai-white) !important;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.nav-link {
  color: rgba(255,255,255,0.75) !important;
  font-weight: 500;
}
.nav-link:hover,
.nav-link.active {
  color: var(--shiai-white) !important;
  border-left: 3px solid var(--shiai-red);
}

/* --- Sidebar (se existir) --- */
.shiai-sidebar {
  width: var(--shiai-sidebar-width);
  background-color: var(--shiai-blue-dark);
  min-height: 100vh;
}
.shiai-sidebar .nav-link {
  color: rgba(255,255,255,0.65);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.6rem 1.25rem;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}
.shiai-sidebar .nav-link:hover,
.shiai-sidebar .nav-link.active {
  color: #fff;
  border-left-color: var(--shiai-red);
  background-color: rgba(255,255,255,0.06);
}

/* --- Cards --- */
.card {
  border: 1px solid var(--shiai-gray);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.card-header {
  background-color: var(--shiai-blue);
  color: var(--shiai-white);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* --- Tabelas --- */
.table thead,
.table thead tr,
.table thead th,
.ranking-table thead,
.ranking-table thead tr,
.ranking-table thead th {
  background-color: var(--shiai-blue) !important;
  color: var(--shiai-white) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-color: var(--shiai-blue) !important;
}
.table tbody tr:hover {
  background-color: rgba(30, 58, 138, 0.04);
}

/* --- Badges de status --- */
.badge-ativo {
  background-color: rgba(30, 58, 138, 0.12);
  color: var(--shiai-blue);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
}
.badge-encerrado {
  background-color: var(--shiai-gray);
  color: var(--shiai-text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 4px;
}
.badge-urgente {
  background-color: rgba(211, 47, 47, 0.12);
  color: var(--shiai-red);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 4px;
}

/* --- Formularios --- */
.form-control:focus,
.form-select:focus {
  border-color: var(--shiai-blue);
  box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.2);
}
.form-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--shiai-text);
}

/* --- Acento vermelho decorativo --- */
.shiai-accent-bar {
  display: block;
  width: 32px;
  height: 3px;
  background-color: var(--shiai-red);
  margin: 6px 0 12px 0;
}

/* --- Utilitarios da marca --- */
.text-shiai-blue  { color: var(--shiai-blue) !important; }
.text-shiai-red   { color: var(--shiai-red) !important; }
.bg-shiai-blue    { background-color: var(--shiai-blue) !important; }
.bg-shiai-dark    { background-color: var(--shiai-blue-dark) !important; }