/* =========================================================
   Baldwin Tires Wholesale — Theme stylesheet
   Cargar DESPUÉS de bootstrap.min.css en _Layout.cshtml
   ========================================================= */

:root {
  /* Marca */
  --brand-dark: #111827;      /* header, textos fuertes */
  --brand-primary: #1A56DB;   /* azul — links, texto interactivo, iconos de acción */
  --brand-primary-hover: #1543AD;
  --brand-accent: #1FA463;    /* verde — botón de acción principal, estados positivos */
  --brand-accent-hover: #17864F;

  /* Neutros */
  --surface: #FFFFFF;
  --surface-muted: #F9FAFB;
  --border: #D1D5DB;
  --border-light: #E5E7EB;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;

  /* Semánticos (no tocar — ya usados en Balance, alertas, etc.) */
  --danger: #A32D2D;
  --danger-bg: #FCEBEB;
  --success: #157A48;
  --success-bg: #EAF7EF;

  /* Overrides de variables de Bootstrap 5 */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 26, 86, 219;
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border);
}

body {
  color: var(--text-primary);
}

/* ---------- Header / navbar oscuro ---------- */
.navbar-brand-dark {
  background: var(--brand-dark);
  color: #FFFFFF;
}
.navbar-brand-dark .navbar-brand,
.navbar-brand-dark .nav-link,
.navbar-brand-dark .dropdown-toggle {
  color: #FFFFFF !important;
}

/* ---------- Sidebar / menú lateral ---------- */
.sidebar-nav .nav-link {
  color: #374151;
  border-radius: 6px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.sidebar-nav .nav-link i {
  color: var(--text-muted);
  font-size: 14px;
}
.sidebar-nav .nav-link.active {
  background: var(--surface-muted);
  color: var(--text-primary);
  font-weight: 500;
}
.sidebar-nav .nav-link.active i {
  color: var(--text-primary);
}
.sidebar-nav hr {
  margin: 8px 12px;
  border-color: var(--border-light);
}

/* ---------- Botones ---------- */
/* Acción principal de cada pantalla (Sign in, Save, New customer): verde, tipo píldora */
.btn-brand-primary {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #FFFFFF;
  border-radius: 999px;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
}
.btn-brand-primary:hover,
.btn-brand-primary:focus {
  background: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
  color: #FFFFFF;
}

/* Acción secundaria (Cancel, Close): outline neutro, misma forma de píldora */
.btn-brand-secondary {
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
}
.btn-brand-secondary:hover {
  background: var(--surface-muted);
}

/* Links y acciones de ícono (editar, ver, email): azul de marca */
.link-brand,
.icon-action {
  color: var(--brand-primary);
}
.link-brand:hover,
.icon-action:hover {
  color: var(--brand-primary-hover);
}

/* ---------- Tarjetas de resumen (stat cards) ---------- */
.stat-card {
  background: var(--surface-muted);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}
.stat-card .stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.stat-card .stat-value {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
}
.stat-card .stat-value.stat-danger {
  color: var(--danger);
}

/* ---------- Indicador de estatus (conexión, confirmaciones) ---------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
}
.status-pill.status-ok {
  background: var(--success-bg);
  color: var(--success);
}
.status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
  display: inline-block;
}

/* ---------- Badge de saldo (Balance) ---------- */
.badge-balance {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
}
.badge-balance.has-balance {
  background: var(--danger-bg);
  color: var(--danger);
}
.badge-balance.no-balance {
  color: var(--text-muted);
  background: transparent;
}

/* ---------- Tablas de listado ---------- */
.table-list thead th {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
}
.table-list tbody td {
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.table-list tbody tr:last-child td {
  border-bottom: none;
}
.avatar-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #E6F1FB;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
}

/* ---------- Modal ---------- */
.modal-brand .modal-header {
  border-bottom: 1px solid var(--border-light);
}
.modal-brand .modal-footer {
  border-top: 1px solid var(--border-light);
}
.modal-brand .modal-title small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- Login ---------- */
.login-card {
  max-width: 360px;
  margin: 3rem auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.login-card .login-header {
  background: var(--brand-dark);
  color: #FFFFFF;
  text-align: center;
  padding: 1.6rem 1.5rem 1.2rem;
}
.login-card .login-body {
  padding: 1.4rem 1.5rem;
}